:root {
  --brand: #106E6D;
  --brand-2: #39D2C0;
  --brand-warm: #EE8B60;
  --bg: #06100F;
  --bg-alt: #0A1715;
  --surface: #0D201E;
  --panel-solid: #102725;
  --panel-soft: rgba(16, 39, 37, 0.84);
  --border: rgba(57, 210, 192, 0.14);
  --border-strong: rgba(57, 210, 192, 0.30);
  --text: #EAF3F1;
  --text-dim: #B7CAC7;
  --text-muted: #9EB4B1;
  --danger-soft: rgba(238, 139, 96, 0.11);
  --danger-border: rgba(238, 139, 96, 0.36);
  --accent-glow: rgba(57, 210, 192, 0.24);
  --shadow: 0 24px 80px rgba(0,0,0,.32);
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1220px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: "Satoshi", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(57,210,192,.13), transparent 32rem),
    radial-gradient(circle at 12% 16%, rgba(238,139,96,.07), transparent 26rem),
    var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
::selection { background: rgba(57,210,192,.25); color: #fff; }
.container { width: min(100% - 48px, var(--max)); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 12px; z-index: 999; background: var(--brand-2); color: #04201E; padding: 10px 14px; border-radius: 999px; font-weight: 800; }
.skip-link:focus { left: 16px; }
.site-header { position: sticky; top: 0; z-index: 80; background: #166469; border-bottom: 1px solid rgba(57,210,192,.12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-wrap { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-link { display: inline-flex; align-items: center; gap: 16px; min-width: auto; }
.brand-mark { width: 236px; height: auto; border-radius: 0; box-shadow: none; object-fit: contain; }
.brand-word { display: grid; line-height: 1.05; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: -.035em; color: #F4FFFC; }
.brand-sub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a { color: var(--text-dim); padding: 10px 12px; border-radius: 999px; font-size: 16px; font-weight: 700; transition: color .2s var(--ease), background .2s var(--ease); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--text); background: rgba(57,210,192,.08); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-toggle { display: none; border: 1px solid var(--border-strong); color: var(--text); background: rgba(57,210,192,.06); border-radius: 999px; padding: 10px 14px; cursor: pointer; font-weight: 800; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 19px; border-radius: 999px; border: 1px solid transparent; font-weight: 800; letter-spacing: -.01em; cursor: pointer; transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; }
.btn-primary { background: linear-gradient(180deg, #65E9DC 0%, #39D2C0 45%, #106E6D 100%); color: #031D1C; box-shadow: 0 12px 36px rgba(57,210,192,.22); }
.btn-secondary { background: rgba(57,210,192,.055); color: var(--text); border-color: var(--border-strong); }
.btn-quiet { color: var(--text-dim); border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.025); }
.btn-small { min-height: 44px; padding: 10px 17px; font-size: 16px; }
.arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
main { overflow: hidden; }
.section { padding: 124px 0; position: relative; }
.section.alt { background: linear-gradient(180deg, rgba(10,23,21,.72), rgba(6,16,15,.18)); border-block: 1px solid rgba(57,210,192,.06); }
.section-tight { padding: 88px 0; }
.hero, .page-hero { position: relative; padding: 136px 0 96px; }
.hero::before, .page-hero::before, .glow-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(57,210,192,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(57,210,192,.04) 1px, transparent 1px); background-size: 74px 74px; mask-image: radial-gradient(ellipse at center, black 20%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 76%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 58px; align-items: center; }
.hero-copy { max-width: 760px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(57,210,192,.06); color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand-2); box-shadow: 0 0 16px var(--brand-2); }
h1, h2, h3, h4 { color: #F5FBF9; letter-spacing: -.035em; line-height: 1.06; }
h1 { font-size: clamp(42px, 5.9vw, 66px); max-width: 14.5ch; margin-bottom: 18px; }
.page-hero h1 { max-width: 16ch; }
h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 14px; }
h3 { font-size: 22px; margin-bottom: 9px; }
h4 { font-size: 18px; margin-bottom: 8px; }
.lede { font-size: clamp(19px, 2.2vw, 24px); color: var(--text-dim); line-height: 1.5; max-width: 34.5em; }
.copy-lg { font-size: 18px; color: var(--text-dim); max-width: 62ch; }
.muted { color: var(--text-muted); }
.hero-actions, .section-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.section-actions.center { justify-content: center; }
.engineer-link { color: var(--text-dim); font-weight: 800; padding: 10px 0; border-bottom: 1px solid rgba(57,210,192,.35); }
.engineer-link:hover { color: var(--brand-2); }
.trust-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.trust-chip { border: 1px solid rgba(57,210,192,.18); background: rgba(16,39,37,.54); color: var(--text-dim); padding: 9px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.visual-shell { position: relative; border: 1px solid var(--border); background: rgba(13,32,30,.72); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); overflow: hidden; }
.visual-shell::after { content: none; }
.control-card { position: relative; z-index: 1; border: 1px solid rgba(57,210,192,.16); border-radius: 22px; background: rgba(6,16,15,.42); padding: 20px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.065); }
.status-row:last-child { border-bottom: 0; }
.status-label { color: var(--text-dim); font-weight: 700; }
.status-pass { color: #98FFF2; font-weight: 900; }
.status-block { color: var(--brand-warm); font-weight: 900; }
.mini-metric { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
.mini-metric div { border: 1px solid rgba(57,210,192,.14); background: rgba(57,210,192,.045); border-radius: 14px; padding: 14px; }
.mini-metric strong { display: block; color: var(--brand-2); font-size: 20px; }
.mini-metric span { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.topology { display: grid; gap: 14px; position: relative; z-index: 1; }
.topology-title { color: var(--brand-2); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.visual-shell > .topology-title { display: block; margin-bottom: 18px; }
.topology-node { border: 1px solid rgba(57,210,192,.18); background: rgba(6,16,15,.46); border-radius: 20px; padding: 18px; }
.topology-node strong { display: block; color: var(--text); margin-bottom: 6px; font-size: 17px; }
.topology-node span { display: block; color: var(--text-dim); font-size: 14px; }
.topology-arrow { color: var(--brand-2); text-align: center; font-weight: 900; letter-spacing: .08em; }
.section-head { max-width: 1040px; margin-bottom: 48px; }
.section-head.center .copy-lg {
  margin-left: auto;
  margin-right: auto;
}

.section-head.center h2 {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.section-head.center { text-align: center; margin-inline: auto; }
.eyebrow { color: var(--brand-2); display: block; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.card { border: 1px solid var(--border); background: linear-gradient(180deg, rgba(16,39,37,.88), rgba(13,32,30,.78)); border-radius: var(--radius-lg); padding: 30px; position: relative; overflow: hidden; min-height: 100%; }
.card::before { content: ""; position: absolute; width: 280px; height: 180px; right: -120px; top: -100px; background: radial-gradient(circle, rgba(57,210,192,.13), transparent 66%); pointer-events: none; }
.card h3, .card h4, .card p, .card li, .card .tag, .card .icon { position: relative; }
.card h3, .card h4 { color: var(--text); font-size: 21px; margin-bottom: 10px; letter-spacing: -.02em; }
.card p, .card li { color: var(--text-dim); }
.card ul { display: grid; gap: 10px; }
.card .tag { display: inline-flex; color: var(--brand-2); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.icon { width: 38px; height: 38px; border: 1px solid rgba(57,210,192,.2); background: rgba(57,210,192,.08); border-radius: 13px; display: inline-grid; place-items: center; color: var(--brand-2); font-weight: 900; margin-bottom: 16px; }
.card.warning { border-color: rgba(57,210,192,.18); background: rgba(13,32,30,.76); }
.card.warning::before { content: none; }
.flow { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-top: 30px; }
.flow.deep { grid-template-columns: repeat(4,minmax(0,1fr)); }
.flow-node { border: 1px solid rgba(57,210,192,.18); background: linear-gradient(180deg, rgba(57,210,192,.075), rgba(16,39,37,.52)); border-radius: 18px; padding: 18px 15px; min-height: 142px; position: relative; }
.flow-node::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--brand-2); font-weight: 900; z-index: 2; }
.flow-node:last-child::after, .flow.deep .flow-node:nth-child(4)::after, .flow.deep .flow-node:nth-child(8)::after { display: none; }
.flow-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(57,210,192,.12); color: var(--brand-2); border: 1px solid rgba(57,210,192,.22); font-size: 12px; font-weight: 900; margin-bottom: 12px; }
.flow-node strong { display: block; color: var(--text); font-size: 16px; line-height: 1.2; margin-bottom: 8px; }
.flow-node span { display: block; color: var(--text-muted); font-size: 13px; line-height: 1.42; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(16,39,37,.6); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 18px; border-bottom: 1px solid rgba(57,210,192,.10); vertical-align: top; }
th { color: var(--brand-2); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; background: rgba(57,210,192,.045); }
td { color: var(--text-dim); }
td strong { color: var(--text); }
tr:last-child td { border-bottom: 0; }
.split { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 42px; align-items: start; }
.sticky-note { position: sticky; top: 112px; }
.check-list { display: grid; gap: 8px; margin-top: 12px; }
.check-list li { color: var(--text-dim); padding-left: 28px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand-2); font-weight: 900; }
.reject-list li::before { content: "×"; color: var(--brand-warm); }
.ordered-list { margin: 12px 0 0 1.25rem; color: var(--text-dim); display: grid; gap: 8px; }
.ordered-list li { padding-left: 4px; }
.what-next-block .form-section-header { align-items: flex-start; }
.step-list { display: grid; gap: 16px; }
.step-row { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(16,39,37,.54); }
.step-num { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--brand-2); background: rgba(57,210,192,.08); border: 1px solid rgba(57,210,192,.2); font-weight: 900; }
.step-row h3 { font-size: 20px; }
.step-row p { color: var(--text-dim); margin-bottom: 8px; }
.step-row small { color: var(--text-muted); display: block; }
.sequence { border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(16,39,37,.58); padding: 24px; display: grid; gap: 14px; }
.sequence-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sequence-cell { border: 1px solid rgba(57,210,192,.16); border-radius: 16px; padding: 14px; background: rgba(6,16,15,.42); color: var(--text-dim); }
.sequence-cell strong { color: var(--text); display: block; margin-bottom: 5px; }
.sequence-cell.reject { border-color: var(--danger-border); background: var(--danger-soft); }
.code-card { border: 1px solid rgba(57,210,192,.18); border-radius: var(--radius-lg); overflow: hidden; background: #071513; box-shadow: var(--shadow); }
.code-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 14px 18px; background: rgba(57,210,192,.07); border-bottom: 1px solid rgba(57,210,192,.12); }
.code-head strong { color: var(--text); }
.code-head span { color: var(--text-muted); font-size: 13px; }
pre { margin: 0; padding: 22px; overflow-x: hidden; color: #DDFBF6; font-size: 14px; line-height: 1.58; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.inline-note { border-left: 3px solid var(--brand-2); background: rgba(57,210,192,.055); padding: 16px 18px; border-radius: 0 14px 14px 0; color: var(--text-dim); }
.faq { display: grid; gap: 12px; }

/* FAQ layout */
.faq-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.faq-group {
  border: 1px solid rgba(57, 210, 192, .18);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(12, 39, 37, .72), rgba(6, 16, 15, .68));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  padding: 18px;
}
.faq-group h3 {
  color: var(--text);
  font-size: 1rem;
  margin: 0 0 12px;
}
.faq-group details {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
}
.faq-group summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  padding: 16px 48px 16px 16px;
  position: relative;
}
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-2);
  font-size: 1.25rem;
}
.faq-group details[open] summary::after { content: '–'; }
.faq-group p {
  color: var(--text-dim);
  margin: 0;
  padding: 0 16px 16px;
}
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }

details { border: 1px solid var(--border); background: rgba(16,39,37,.54); border-radius: 16px; padding: 16px 18px; }
summary { cursor: pointer; color: var(--text); font-weight: 850; }
details p { color: var(--text-dim); margin-top: 12px; }
.cta-band { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: radial-gradient(680px 260px at 20% 0%, rgba(57,210,192,.17), transparent 62%), linear-gradient(180deg, rgba(16,39,37,.94), rgba(10,23,21,.94)); padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow); }
.cta-band h2 { font-size: clamp(30px, 3.5vw, 46px); margin-bottom: 10px; }
.cta-band p { color: var(--text-dim); max-width: 62ch; }
.form-shell { max-width: 900px; margin-inline: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(800px 260px at 50% 0%, rgba(57,210,192,.14), transparent 62%), linear-gradient(180deg, rgba(16,39,37,.92), rgba(10,23,21,.92)); padding: 34px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field-helper { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: var(--text-dim); font-weight: 750; }
.checkbox-field input { width: auto; min-height: 0; margin-top: 6px; accent-color: var(--brand-2); }
label { color: var(--text); font-weight: 800; font-size: 14px; }
input, select, textarea { width: 100%; color: var(--text); background: rgba(6,16,15,.62); border: 1px solid rgba(57,210,192,.18); border-radius: 15px; padding: 14px 16px; min-height: 52px; outline: none; }
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(183,202,199,.55); }
.form-note { color: var(--text-muted); font-size: 13px; margin-top: 18px; }
.site-footer { border-top: 1px solid rgba(57,210,192,.10); background: #166469; padding: 76px 0 40px; }

.site-header .brand-link { flex: 0 0 auto; }
.site-header .brand-word, .site-footer .brand-word { display: none; }
.site-header .brand-mark { width: 250px; max-width: min(32vw, 250px); }
.site-footer .brand-mark { width: 290px; max-width: min(100%, 290px); }
.site-footer .brand-link { margin-bottom: 16px; }
.footer-brand p { margin-top: 8px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(4,1fr); gap: 34px; }
.footer-brand p { color: var(--text-muted); max-width: 28ch; margin-top: 14px; }
.footer-col h4 { color: var(--text); font-size: 16px; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 14px; }
.footer-col li { margin: 9px 0; }
.footer-col a { color: var(--text-muted); font-weight: 700; font-size: 16px; }
.footer-col a:hover { color: var(--brand-2); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; margin-top: 28px; border-top: 1px solid rgba(255,255,255,.07); color: var(--text-muted); font-size: 13px; }
.reveal { opacity: 0; --reveal-y: 46px; --reveal-scale: .985; --parallax-y: 0px; transform: translate3d(0, calc(var(--reveal-y) + var(--parallax-y)), 0) scale(var(--reveal-scale)); filter: blur(8px); transition: opacity 1.15s var(--ease), transform 1.15s var(--ease), filter 1.15s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform, filter; }
.reveal.visible { opacity: 1; --reveal-y: 0px; --reveal-scale: 1; filter: blur(0); }
@media (max-width: 1120px) {
  .main-nav { display: none; position: absolute; left: 24px; right: 24px; top: 82px; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: rgba(6,16,15,.96); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 13px 14px; }
  .mobile-toggle { display: inline-flex; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .sticky-note { position: static; }
  .flow { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .flow-node:nth-child(3)::after, .flow-node:nth-child(6)::after { display: none; }
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .container { width: min(100% - 36px, var(--max)); }
  .hero, .page-hero { padding: 86px 0 64px; }
  .section { padding: 86px 0; }
  .grid-2, .grid-3, .grid-4, .flow, .flow.deep, .form-grid, .mini-metric, .sequence-row, .request-architecture-side { grid-template-columns: 1fr; }
  .flow-node::after { display: none; }
  .cta-band { display: block; padding: 30px; }
  .cta-band .section-actions { margin-top: 22px; }
  .brand-word { display: none; }
  .brand-link { min-width: auto; }
  .header-actions .btn { display: inline-flex; min-height: 40px; padding: 9px 12px; font-size: 13px; }
  h1 { font-size: clamp(40px, 12.5vw, 56px); }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .main-nav a { transition: none; }
}


.architecture-figure {
  position: relative;
  border: 1px solid var(--border);
  background: rgba(13,32,30,.62);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.request-architecture {
  display: grid;
  gap: 18px;
}
.request-architecture-main,
.request-architecture-side {
  display: grid;
  gap: 14px;
}
.request-architecture-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.architecture-node {
  border: 1px solid rgba(57,210,192,.18);
  background: rgba(6,16,15,.50);
  border-radius: 20px;
  padding: 18px;
}
.architecture-node strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 8px;
}
.architecture-node span,
.architecture-node li {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}
.architecture-node ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}
.architecture-arrow {
  color: var(--brand-2);
  font-weight: 900;
  text-align: center;
  letter-spacing: .08em;
}
.architecture-node.side-path {
  border-color: rgba(238,139,96,.26);
  background: rgba(238,139,96,.065);
}
.architecture-caption {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 4px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}
.arch-svg { width: 100%; height: auto; min-height: 320px; }
.svg-title { fill: #F5FBF9; font-size: 20px; font-weight: 800; font-family: Satoshi, Inter, sans-serif; }
.svg-copy { fill: #B7CAC7; font-size: 14px; font-weight: 650; font-family: Satoshi, Inter, sans-serif; }
.svg-mini { fill: #EAF3F1; font-size: 14px; font-weight: 800; font-family: Satoshi, Inter, sans-serif; }
.svg-label { fill: #39D2C0; font-size: 11.5px; font-weight: 900; letter-spacing: .035em; font-family: Satoshi, Inter, sans-serif; }
.svg-label.warm { fill: #EE8B60; }
.integration-shapes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.integration-shapes article,
.posture-grid article,
.timeline article {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(16,39,37,.80), rgba(13,32,30,.68));
  border-radius: var(--radius-lg);
  padding: 24px;
}
.integration-shapes h3,
.posture-grid h3,
.timeline h3 { font-size: 20px; margin-bottom: 8px; }
.integration-shapes p,
.posture-grid p,
.timeline p { color: var(--text-dim); }
.shape-status { display: inline-flex; margin-bottom: 14px; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shape-status.supported { color: #031D1C; background: var(--brand-2); }
.shape-status.evaluation { color: var(--text); border: 1px solid var(--border-strong); background: rgba(57,210,192,.06); }
.posture-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.timeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.timeline span { display: inline-flex; width: 38px; height: 38px; border-radius: 14px; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--brand-2); border: 1px solid rgba(57,210,192,.24); background: rgba(57,210,192,.08); font-weight: 900; }
.optional-fields { margin: 22px 0; }
.optional-fields summary { color: var(--brand-2); }
.optional-fields .form-grid { margin-top: 18px; }
.topology-compact .topology-node { padding: 16px; }
.trust-chip[href] { transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.trust-chip[href]:hover { color: var(--text); border-color: var(--border-strong); background: rgba(57,210,192,.09); }
@media (max-width: 1120px) {
  .integration-shapes, .posture-grid, .timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .integration-shapes, .posture-grid, .timeline { grid-template-columns: 1fr; }
  .architecture-figure { padding: 10px; overflow-x: auto; }
  .arch-svg { min-width: 720px; }
  .svg-title { font-size: 18px; }
}
.warning-title { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.warning-title h3 { margin: 0; }
.card.warning .icon { flex: 0 0 auto; width: 48px; height: 48px; font-size: 16px; margin: 0; }
.table-wrap.fit-table {
  overflow-x: auto;
}

.table-wrap.fit-table table {
  width: auto;
  table-layout: auto;
}

.table-wrap.fit-table th,
.table-wrap.fit-table td {
  white-space: normal;
  word-break: break-word;
}

/* Page-scoped table width controls */

body.security-page .table-narrow {
  max-width: 900px;
  margin: 0 auto;
}

body.security-page .table-narrow table {
  width: 100%;
  min-width: 0;
}

body.pricing-page .table-narrow {
  max-width: 900px;
  margin: 0 auto;
}

body.pricing-page .table-narrow table {
  width: 100%;
  min-width: 0;
}

body.use-cases-page .table-medium {
  max-width: 1080px;
  margin: 0 auto;
}

body.use-cases-page .table-medium table {
  width: 100%;
  min-width: 0;
}

body.platform-page .table-medium {
  max-width: 1080px;
  margin: 0 auto;
}

body.platform-page .table-medium table {
  width: 100%;
  min-width: 0;
}


.usecase-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.usecase-tabs button { border: 1px solid var(--border-strong); background: rgba(57,210,192,.055); color: var(--text); padding: 10px 14px; border-radius: 999px; font-weight: 850; font-size: 14px; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.usecase-tabs button:hover, .usecase-tabs button.is-active { color: #031D1C; background: var(--brand-2); border-color: var(--brand-2); }
.usecase-panel { display: none; }
.usecase-panel.is-active { display: block; }
.usecase-panel.is-active .reveal { opacity: 1; transform: none; }
.grid-1 { display: grid; gap: 16px; }
.principles-card { padding: 28px; }
.principles-card .check-list { margin-top: 12px; }
.legal-doc { max-width: 980px; }
.legal-doc h1 { max-width: none; margin-bottom: 10px; font-size: clamp(38px, 5vw, 58px); }
.legal-doc h2 { font-size: clamp(22px, 2.2vw, 30px); margin-top: 36px; margin-bottom: 12px; }
.legal-doc p { color: var(--text-dim); margin: 12px 0; }
.legal-doc .legal-effective { color: var(--brand-2); font-weight: 800; }
@media (max-width: 1120px) { .posture-grid, .timeline, .integration-shapes { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 780px) { .posture-grid, .timeline, .integration-shapes { grid-template-columns: 1fr; } }


.legal-doc {
  max-width: 980px;
  color: var(--text) !important;
  background: linear-gradient(180deg, rgba(13,32,30,.96), rgba(10,23,21,.96)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(28px, 4vw, 52px) !important;
  box-shadow: var(--shadow) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}
.legal-doc, .legal-doc * {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}
.legal-doc h1,
.legal-doc h2,
.legal-doc h3,
.legal-doc h4,
.legal-doc strong,
.legal-doc b {
  color: var(--text) !important;
}
.legal-doc h1 {
  max-width: none !important;
  margin-bottom: 10px !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  line-height: 1.05 !important;
}
.legal-doc h2 {
  font-size: clamp(22px, 2.2vw, 30px) !important;
  margin-top: 38px !important;
  margin-bottom: 12px !important;
  line-height: 1.22 !important;
}
.legal-doc p,
.legal-doc li,
.legal-doc span,
.legal-doc div {
  color: var(--text-dim) !important;
}
.legal-doc p {
  margin: 12px 0 !important;
  line-height: 1.72 !important;
}
.legal-doc .legal-effective {
  color: var(--brand-2) !important;
  font-weight: 850 !important;
}
.legal-doc a {
  color: var(--brand-2) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
@media (max-width: 720px) {
  .legal-doc { padding: 24px 18px !important; }
}

@media (max-width: 1180px) {
  .nav-wrap { min-height: 96px; gap: 16px; }
  .site-header .brand-mark { width: 210px; max-width: 210px; }
  .main-nav a { padding: 10px 8px; font-size: 15px; font-weight: 700; letter-spacing: 0; }
  .btn-small { padding: 10px 13px; font-size: 14px; }
}
@media (max-width: 860px) {
  .nav-wrap { min-height: 88px; }
  .site-header .brand-mark { width: 210px; max-width: 210px; }
  .site-footer .brand-mark { width: 240px; max-width: 240px; }
}
@media (max-width: 640px) {
  .site-header .brand-mark { width: 190px; max-width: 190px; }
  .site-footer { padding: 64px 0 34px; }
  .site-footer .brand-mark { width: 220px; max-width: 220px; }
}


.product-shell { padding: 18px; }
.product-panel { position: relative; z-index: 1; border: 1px solid rgba(57,210,192,.18); border-radius: 24px; background: linear-gradient(180deg, rgba(6,16,15,.70), rgba(13,32,30,.82)); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.product-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(57,210,192,.075); border-bottom: 1px solid rgba(57,210,192,.12); }
.product-toolbar span { color: var(--text-muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.product-toolbar strong { color: #031D1C; background: var(--brand-2); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.product-row, .audit-line { display: flex; justify-content: space-between; gap: 18px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.product-row span, .audit-line span { color: var(--text-muted); font-weight: 750; }
.product-row strong, .audit-line strong { color: var(--text); text-align: right; }
.decision-card { margin: 18px; padding: 16px; border: 1px solid rgba(57,210,192,.16); border-radius: 18px; background: rgba(57,210,192,.045); }
.decision-card span { display: block; color: var(--brand-2); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.decision-card p { color: var(--text-dim); }
.decision-card strong { color: var(--text); }
.evidence-list { display: grid; gap: 10px; padding: 0 18px 18px; }
.evidence-list div { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-weight: 700; }
.status-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-flex; flex: 0 0 auto; }
.status-dot.pass { background: var(--brand-2); box-shadow: 0 0 14px rgba(57,210,192,.7); }
.problem-solution {
  display: grid;
  gap: 28px;
  margin-top: 32px;
}

.ps-row {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 20px;
  align-items: center;
}

.ps-arrow {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  color: var(--brand-2);
}

.card.solution {
  border: 1px solid rgba(57,210,192,.24);
  background: linear-gradient(
    180deg,
    rgba(57,210,192,.08),
    rgba(16,39,37,.75)
  );
}

.card.solution .icon {
  color: var(--brand-2);
  border-color: rgba(57,210,192,.3);
  background: rgba(57,210,192,.12);
}


.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.header-actions .btn,
.hero-actions .btn,
.section-actions .btn,
.cta-band .btn {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active {
  background: linear-gradient(180deg, #65E9DC 0%, #39D2C0 54%, #106E6D 100%) !important;
  color: #031D1C !important;
  box-shadow: 0 12px 36px rgba(57,210,192,.22) !important;
}

.btn-secondary,
.btn-secondary:link,
.btn-secondary:visited,
.btn-secondary:hover,
.btn-secondary:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.btn::before,
.btn::after {
  text-decoration: none !important;
}

.main-nav a {
  white-space: nowrap;
}

.header-actions .btn-primary {
  padding-left: 22px;
  padding-right: 22px;
  min-width: 220px; 
  justify-content: center;
}


.main-nav { display: flex; align-items: center; gap: 8px; }
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-trigger { white-space: nowrap; }
.nav-dropdown { position: absolute; top: calc(100% - 2px); left: 0; min-width: 250px; padding: 16px 12px 12px; border: 1px solid rgba(57,210,192,.24); border-radius: 18px; background: rgba(6,16,15,.96); box-shadow: 0 24px 70px rgba(0,0,0,.45); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s var(--ease); }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dropdown a { display: block; padding: 12px 14px; border-radius: 12px; color: var(--text-dim); font-size: 16px; font-weight: 750; }
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { color: var(--text); background: rgba(57,210,192,.09); }
.header-actions .btn-primary { min-width: 208px; padding-left: 24px; padding-right: 24px; text-decoration: none !important; }
.btn, .btn:hover, .btn:focus, .btn:visited { text-decoration: none !important; }
.founder-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.founder-photo { width: 150px; height: 150px; object-fit: cover; border-radius: 999px; margin: 0 auto 18px; border: 2px solid rgba(57,210,192,.26); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.founder-card .check-list { text-align: left; margin-top: 12px; }
@media (max-width: 1120px) { .main-nav { align-items: stretch; gap: 8px; } .nav-item { display: block; } .nav-trigger { display: block; } .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; margin: 0 0 8px 14px; min-width: 0; background: rgba(57,210,192,.035); border-color: rgba(57,210,192,.12); } .nav-dropdown::before { display: none; } .nav-dropdown a { padding: 10px 12px; font-size: 15px; } .header-actions .btn-primary { min-width: auto; } }
@media (max-width: 780px) {
  .ps-row {
    grid-template-columns: 1fr;
  }

  .ps-arrow {
    transform: rotate(90deg);
  }
}

.home-proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.home-proof-strip article { border: 1px solid rgba(57,210,192,.16); background: rgba(16,39,37,.58); border-radius: 20px; padding: 18px; }
.home-proof-strip strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 6px; }
.home-proof-strip span { display: block; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.schema-note { margin-top: 16px; color: var(--text-muted); font-size: 14px; }
@media (max-width: 780px) { .home-proof-strip { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } }

.section-head.center .usecase-tabs {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}


/* Use-cases workflow tabs: reduce vertical gap before the active example panel. */
.workflow-tabs-section {
  padding-bottom: 48px;
}

.workflow-tabs-section + .usecase-panel {
  padding-top: 64px;
}

@media (max-width: 780px) {
  .workflow-tabs-section {
    padding-bottom: 36px;
  }

  .workflow-tabs-section + .usecase-panel {
    padding-top: 48px;
  }
}

/* Custom form selects: hide native controls and only show the menu when opened. */
.clariva-native-select { display: none !important; }
.clariva-select { position: relative; width: 100%; }
.clariva-select-trigger { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); background: rgba(6,16,15,.92); border: 1px solid rgba(57,210,192,.18); border-radius: 15px; padding: 14px 16px; text-align: left; cursor: pointer; }
.clariva-select-trigger::after { content: "⌄"; flex: 0 0 auto; color: var(--text); font-size: 18px; line-height: 1; }
.clariva-select.open .clariva-select-trigger, .clariva-select-trigger:focus-visible { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(57,210,192,.12); }
.clariva-select-menu { position: absolute; z-index: 100; top: calc(100% + 8px); left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: 8px; list-style: none; color: var(--text); background: #06100F; border: 1px solid rgba(57,210,192,.24); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease); }
.clariva-select.open .clariva-select-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.clariva-select-option { padding: 10px 12px; border-radius: 10px; color: var(--text-dim); cursor: pointer; }
.clariva-select-option:hover, .clariva-select-option.is-active, .clariva-select-option[aria-selected="true"] { color: var(--text); background: rgba(57,210,192,.10); }
.clariva-select.is-invalid .clariva-select-trigger { border-color: var(--brand-warm); }

/* UX refinement pass: hierarchy, rhythm, readability, and conversion flow. */
:root {
  --section-y: clamp(112px, 10vw, 156px);
  --section-y-tight: clamp(84px, 7vw, 112px);
  --readable: 68ch;
}

.section { padding: var(--section-y) 0; }
.section-tight { padding: var(--section-y-tight) 0; }
.hero, .page-hero { padding: clamp(118px, 10vw, 156px) 0 clamp(86px, 8vw, 116px); }

.section-head { max-width: 880px; margin-bottom: clamp(52px, 5vw, 72px); }
.section-head.center { max-width: 960px; }
.section-head .copy-lg, .copy-lg, .lede { max-width: var(--readable); }
.hero-copy .copy-lg { max-width: 60ch; margin-top: 14px; }
.section-head.center .copy-lg { max-width: 68ch; }

h1 { font-size: clamp(46px, 6.2vw, 72px); line-height: 1.02; margin-bottom: 22px; }
h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; margin-bottom: 18px; }
h3 { line-height: 1.16; }
.lede { line-height: 1.48; }
.copy-lg { line-height: 1.68; }

.card { padding: clamp(28px, 3vw, 36px); }
.grid-1, .grid-2, .grid-3, .grid-4, .integration-shapes, .posture-grid, .timeline { gap: clamp(22px, 2.4vw, 34px); }

/* Make the homepage problem/solution section less visually heavy while preserving its structure. */
.problem-solution { gap: 22px; margin-top: 38px; }
.ps-row { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ps-row .card { padding: 24px; }
.ps-row .card p { max-width: 58ch; }
.ps-arrow { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(57,210,192,.18); border-radius: 999px; background: rgba(57,210,192,.055); font-size: 22px; }
.card.warning, .card.solution { box-shadow: none; }
.card.solution::before { opacity: .55; }
.ps-labels { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: 18px; margin-bottom: 14px; color: var(--text-muted); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ps-labels span:first-child { color: var(--brand-warm); }
.ps-labels span:last-child { color: var(--brand-2); }

/* Form hierarchy and progressive disclosure. */
.form-shell { max-width: 980px; padding: clamp(32px, 4vw, 48px); }
.form-section { border: 1px solid rgba(57,210,192,.13); border-radius: 20px; padding: 22px; background: rgba(6,16,15,.24); margin-top: 20px; }
.form-section:first-of-type { margin-top: 26px; }
.form-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.form-section-header h3 { margin: 0; font-size: 20px; }
.form-section-header p { color: var(--text-muted); max-width: 58ch; font-size: 14px; line-height: 1.55; }
.form-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 12px; border: 1px solid rgba(57,210,192,.22); background: rgba(57,210,192,.08); color: var(--brand-2); font-weight: 900; }
.form-section .form-grid { margin-top: 0; }
.form-submit { margin-top: 24px; }
.optional-fields { border-color: rgba(57,210,192,.16); background: rgba(57,210,192,.04); }
.optional-fields summary { font-weight: 900; }

/* Integration grouping by category without adding unsupported logos. */
.integration-group { display: grid; gap: 18px; }
.integration-group-title { color: var(--brand-2); font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; margin-bottom: -2px; }
.integration-shapes.grouped { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.integration-shapes.grouped article { min-height: 100%; }

/* Consistency and subtle interaction feedback. */
.card, .integration-shapes article, .posture-grid article, .timeline article, .flow-node, .step-row, details, .sequence-cell {
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.card:hover, .integration-shapes article:hover, .posture-grid article:hover, .timeline article:hover, .flow-node:hover, .step-row:hover, details:hover, .sequence-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(57,210,192,.28);
}

.cta-band { padding: clamp(42px, 5vw, 58px); }
.cta-band p { max-width: var(--readable); }

@media (max-width: 1120px) {
  .integration-shapes.grouped { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .hero, .page-hero { padding: 92px 0 68px; }
  .section { padding: 92px 0; }
  .section-head { margin-bottom: 38px; }
  .ps-labels { display: none; }
  .ps-row { grid-template-columns: 1fr; gap: 14px; }
  .ps-arrow { margin-inline: auto; transform: rotate(90deg); }
  .form-section { padding: 18px; }
  .form-section-header { display: grid; grid-template-columns: 34px minmax(0,1fr); }
  .form-section-header p { grid-column: 1 / -1; }
}

/* Final UX correction pass requested 2026-04-27. */
/* 1) Keep number/check icons to the left of their card text everywhere. */
.card:has(> .icon) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 8px;
  align-items: start;
}
.card:has(> .icon) > .icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
  margin: 0;
  flex: 0 0 auto;
}
.card:has(> .icon) > h3,
.card:has(> .icon) > h4,
.card:has(> .icon) > p,
.card:has(> .icon) > ul {
  grid-column: 2;
}
.card:has(> .icon) > h3,
.card:has(> .icon) > h4 {
  margin-top: 4px;
}
.warning-title,
.solution-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.warning-title h3,
.solution-title h3 {
  margin: 0;
}
.card.warning .icon,
.card.solution .icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin: 0;
}

/* 2 and 7) Make fit-table charts/tables narrower and centered. Adjust max-width here. */
.table-wrap.fit-table {
  width: min(100%, 1080px);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.table-wrap.fit-table table {
  width: 100%;
}

/* 4) Better automatic line wrapping to avoid one-word orphan lines. */
h1, h2, h3, .lede, .copy-lg, .section-head p, .card p, .topology-node span {
  text-wrap: pretty;
}
.section-head.center h2,
.hero-copy h1,
.page-hero h1,
.card h3,
.step-row h3,
.timeline h3 {
  text-wrap: balance;
}

/* 6) Reduce the gap between the use-case tabs and the active detail panel. */
.workflow-tabs-section {
  padding-bottom: 20px;
}
.workflow-tabs-section + .usecase-panel {
  padding-top: 30px;
}
@media (max-width: 780px) {
  .workflow-tabs-section {
    padding-bottom: 18px;
  }
  .workflow-tabs-section + .usecase-panel {
    padding-top: 28px;
  }
}

/* 8) Transparent custom dropdowns for contact/demo select pickers. */
select {
  background-color: transparent;
}
select option {
  background-color: transparent;
  color: var(--text);
}
.clariva-select-trigger {
  background: transparent;
}
.clariva-select-menu {
  background: rgba(6,16,15,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* 9) Keep demo/contact form section headers left-aligned. */
.form-section-header {
  justify-content: flex-start;
  text-align: left;
}
.form-section-header > div {
  text-align: left;
  margin-right: auto;
}
.form-section-header h3,
.form-section-header p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 780px) {
  .card:has(> .icon) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.compact-control-cards {
  align-items: start;
}

.compact-control-cards > .card {
  min-height: 0;
  padding: 20px 22px;
}

.compact-control-cards > .card:has(> .icon) {
  column-gap: 14px;
  row-gap: 4px;
}

.compact-control-cards > .card:has(> .icon) > .icon {
  width: 40px;
  height: 40px;
}

.compact-control-cards > .card h3 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 1.18;
}

.compact-control-cards > .card p {
  margin: 0;
  line-height: 1.45;
}

/* Keep enhanced native selects valid/submittable while visually replacing them. */
form .clariva-native-select {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* FINAL FIX: Use-cases tab-to-panel spacing across ALL five panels.
   The previous adjacent-sibling selector only affected #support because it is
   the only panel immediately after .workflow-tabs-section. These rules target
   every .usecase-panel that follows the tabs section. */
body.use-cases-page .workflow-tabs-section,
.workflow-tabs-section {
  padding-bottom: 20px !important;
}

body.use-cases-page .workflow-tabs-section ~ .usecase-panel,
.workflow-tabs-section ~ .usecase-panel,
body.use-cases-page .usecase-panel.section,
.usecase-panel.section {
  padding-top: 30px !important;
}

@media (max-width: 780px) {
  body.use-cases-page .workflow-tabs-section,
  .workflow-tabs-section {
    padding-bottom: 18px !important;
  }

  body.use-cases-page .workflow-tabs-section ~ .usecase-panel,
  .workflow-tabs-section ~ .usecase-panel,
  body.use-cases-page .usecase-panel.section,
  .usecase-panel.section {
    padding-top: 28px !important;
  }
}

/* Agent 4 final UI validation: appended after earlier responsive rules so these values define the canonical mobile header behavior. */
@media (max-width: 1120px) {
  .nav-wrap {
    min-height: 64px;
  }

  .site-header .brand-mark {
    width: 180px;
    max-width: 180px;
  }

  .main-nav {
    top: 72px;
  }
}

.header-pricing-link {
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.header-pricing-link:hover {
  color: var(--text);
}

@media (max-width: 640px) {
  .header-pricing-link {
    display: none;
  }
}

.code-panel,
.sample-code-panel {
  max-height: 420px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}

.code-card pre {
  max-height: 420px;
  overflow: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}

.copy-code-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.8);
  color: inherit;
  cursor: pointer;
}

/* Cycle 2 global navigation and responsive table validation. */
.nav-wrap {
  min-height: 82px;
}

.site-header .brand-mark {
  width: 210px;
  max-width: min(28vw, 210px);
}

.table-wrap {
  position: relative;
}

.table-wrap::after {
  content: "Scroll \2192";
  position: sticky;
  right: 12px;
  bottom: 8px;
  display: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.context-link {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  color: var(--brand-2);
  font-weight: 800;
  text-decoration: none;
}

.context-link:hover {
  color: var(--text);
}

@media (max-width: 1120px) {
  .nav-wrap {
    min-height: 64px;
  }

  .site-header .brand-mark {
    width: 180px;
    max-width: 180px;
  }

  .main-nav {
    top: 72px;
  }
}

@media (max-width: 780px) {
  .table-wrap::after {
    display: block;
  }
}

/* Cycle 3 final-pass header cleanup. Earlier header rules remain for page history, but this final block is canonical. */
.nav-wrap {
  min-height: 82px;
  gap: 18px;
}

.site-header .brand-mark {
  width: 210px;
  max-width: min(28vw, 210px);
}

.site-footer .brand-mark {
  width: 260px;
  max-width: min(100%, 260px);
}

.header-actions {
  gap: 12px;
  flex: 0 0 auto;
}

.header-pricing-link,
.header-secondary-link {
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.header-pricing-link:hover,
.header-secondary-link:hover {
  color: var(--text);
}

@media (max-width: 1120px) {
  .nav-wrap {
    min-height: 64px;
  }

  .site-header .brand-mark {
    width: 180px;
    max-width: 180px;
  }

  .main-nav {
    top: 72px;
  }
}

@media (max-width: 860px) {
  .header-pricing-link,
  .header-secondary-link {
    display: none;
  }
}

/* Cycle 9 global layout normalization. This block is the canonical spacing and width layer. */
:root {
  --max: 1080px;
  --layout-primary: 1080px;
  --layout-reading: 900px;
  --layout-card: 900px;
  --layout-dense: 760px;
  --layout-technical: 980px;
  --space-section: clamp(78px, 8vw, 104px);
  --space-section-tight: clamp(58px, 6vw, 78px);
  --space-cluster: clamp(22px, 3vw, 32px);
  --space-card: clamp(22px, 2.4vw, 26px);
  --radius: 14px;
  --radius-lg: 20px;
}

.container {
  width: min(100% - 48px, var(--layout-primary));
  max-width: var(--layout-primary);
}

.section {
  padding-block: var(--space-section);
}

.section-tight {
  padding-block: var(--space-section-tight);
}

.hero,
.page-hero {
  padding-block: clamp(92px, 9vw, 122px) clamp(70px, 7vw, 88px);
}

.section-head {
  max-width: var(--layout-reading);
  margin-bottom: var(--space-cluster);
}

.section-head.center h2 {
  max-width: var(--layout-reading);
}

.copy-lg,
.section-head p,
.lede {
  max-width: 64ch;
}

.grid-2,
.grid-3,
.grid-4,
.integration-shapes,
.integration-shapes.grouped,
.posture-grid,
.timeline,
.flow,
.sequence-row,
.request-architecture-side {
  align-items: stretch;
  gap: var(--space-cluster);
}

.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.integration-shapes > *,
.posture-grid > *,
.timeline > *,
.sequence-row > *,
.request-architecture-side > * {
  width: 100%;
  min-height: 100%;
}

.card,
.integration-shapes article,
.posture-grid article,
.timeline article,
.flow-node,
.step-row,
details,
.sequence-cell {
  border-radius: var(--radius-lg);
  padding: var(--space-card);
}

.card {
  min-height: 100%;
}

.card p + p,
.card ul,
.visual-shell p + p,
.section-head p + p,
.cta-band p + p,
.muted + .muted {
  margin-top: 12px;
}

.cta-band,
.visual-shell,
.architecture-figure,
.code-card,
.table-wrap,
.evidence-pack,
.artifact-card,
.audit-card,
.trust-panel {
  max-width: var(--layout-technical);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-lg);
}

.cta-band {
  padding: clamp(30px, 3.5vw, 40px);
  gap: var(--space-cluster);
}

.visual-shell {
  padding: clamp(20px, 2.4vw, 24px);
}

.code-card,
.table-wrap {
  overflow: auto;
}

.table-wrap.fit-table {
  width: min(100%, var(--layout-technical));
  max-width: var(--layout-technical);
}

.platform-terms-table {
  width: min(100%, 600px);
  max-width: 600px;
}

.platform-terms-table table {
  width: 100%;
  min-width: 0;
}



.code-card pre {
  max-height: 380px;
}

.architecture-figure {
  width: min(100%, var(--layout-technical));
}

.request-architecture {
  gap: var(--space-cluster);
}

.request-architecture-main,
.request-architecture-side,
.topology,
.sequence-cell,
.flow-node,
.step-row {
  min-width: 0;
}
.starter-profile-grid {
  width: min(100%, 1040px);
  height: min(100%, 1px);
  margin-left: auto;
  margin-right: auto;
}


.starter-profile-grid > .card {
  min-height: 220px;
  height: 220px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.architecture-figure .request-architecture-side {
  display: grid;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 32px !important;
}




.architecture-figure .request-architecture-side > .architecture-node.side-path {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: 74px !important;
  min-height: 74px !important;
  padding: 2px 2px !important;
  display: flex;
  align-items: center;
}

.architecture-figure .request-architecture-side > .architecture-node.side-path > strong {
  font-size: 16px;
  line-height: 1.25;
}

.platform-control-grid {
  align-items: stretch;
  max-width: 1880px;
  margin-left: auto;
  margin-right: auto;
}
.platform-control-container {
  max-width: 1880px;
}
.provenance-card {
  padding-right: 56px !important;
}

.provenance-card p {
  overflow-wrap: anywhere;
}


.platform-control-grid .card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 10px;
  row-gap: 16px;
  min-height: 0;
  padding: 16px;
}

.starter-profile-code {
  overflow: hidden !important;
}

.starter-profile-code pre {
  max-height: none !important;
  overflow: visible !important;
}

.platform-control-grid .card .icon {
  grid-row: 1 / 3;
  align-self: start;
  margin: 0;
}

.platform-control-grid .card h3 {
  margin: 0;
  align-self: start;
}

.platform-control-grid .card p {
  grid-column: 2;
  margin: 0;
  align-self: start;
}

@media (max-width: 780px) {
  .platform-control-grid .card {
    grid-template-columns: 100px minmax(0, 1fr);
    padding: 20px;
  }
}


.architecture-figure {
  width: min(100%, 860px) !important;
  max-width: 860px !important;
  padding: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Platform bottom side-path text inset override */
.architecture-figure .request-architecture-side > .architecture-node.side-path {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.architecture-figure .request-architecture-side > .architecture-node.side-path > strong {
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100%;
  box-sizing: border-box;
}

.sequence {
  width: min(100%, 860px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.decision-response-layout {
  display: block !important;
}

.decision-response-layout .section-head {
  margin-left: auto !important;
  margin-right: auto !important;
}

.evidence-pack-card {
  padding-right: 40px !important;
}

.evidence-pack-card code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.security-review-cards {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.security-review-cards > .card {
  width: 100% !important;
  padding: 24px 44px 24px 24px !important;
}

.security-review-cards .evidence-pack-card {
  display: block !important;
  grid-template-columns: none !important;
}

.security-review-cards .evidence-pack-card .check-list {
  margin-top: 14px !important;
}

.security-review-cards > .evidence-pack-card {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.security-review-cards > .evidence-pack-card > h3 {
  margin-bottom: 14px !important;
}

.security-review-cards > .evidence-pack-card > .check-list {
  margin-top: 0 !important;
}

.security-review-cards code {
  overflow-wrap: anywhere;
  word-break: break-word;
}


.decision-response-layout .sequence-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.decision-response-layout .sequence {
  padding: 18px !important;
  gap: 16px !important;
}

.decision-response-layout .sequence-cell {
  min-height: 118px !important;
  padding: 22px 24px !important;
}



.nav-wrap {
  width: min(100% - 40px, 1120px);
  max-width: 1120px;
  gap: 14px;
}

.main-nav {
  gap: 0;
}

.main-nav a {
  padding-inline: 10px;
}

.header-actions {
  gap: 10px;
}

.header-secondary-link,
.header-faq-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 2px;
}

@media (max-width: 1120px) {
  .nav-wrap {
    width: min(100% - 36px, var(--layout-primary));
    max-width: var(--layout-primary);
  }

  .main-nav {
    top: 72px;
  }
}

@media (max-width: 780px) {
  .container,
  .nav-wrap {
    width: min(100% - 32px, var(--layout-primary));
  }

  .section {
    padding-block: clamp(64px, 12vw, 84px);
  }

  .section-tight {
    padding-block: clamp(48px, 10vw, 64px);
  }

  .card,
  .integration-shapes article,
  .posture-grid article,
  .timeline article,
  .flow-node,
  .step-row,
  details,
  .sequence-cell,
  .cta-band,
  .visual-shell {
    padding: 20px;
  }

  .code-card pre {
    max-height: 340px;
  }
}

/* Patch: keep the compact header from mixing desktop actions with the mobile nav panel. */
@media (max-width: 1120px) {
  .site-header {
    overflow: visible;
  }

  .nav-wrap {
    position: relative;
    min-height: 74px;
  }

  .main-nav {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0px);
    z-index: 90;
    max-height: calc(100vh - 92px);
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(6,16,15,.98);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .main-nav.is-open {
    display: flex !important;
  }

  .nav-item {
    display: grid;
    gap: 8px;
  }

  .nav-trigger {
    display: block;
    padding: 8px 0 !important;
    background: transparent !important;
  }

  .nav-dropdown {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
    margin: 0;
    min-width: 0;
    padding: 10px;
    border-radius: 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    background: rgba(57,210,192,.035);
    border-color: rgba(57,210,192,.12);
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-dropdown a {
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 14px;
  }

  .header-secondary-link,
  .header-actions .btn-primary {
    display: none;
  }

  .mobile-toggle {
    display: inline-flex !important;
    min-height: 44px;
    align-items: center;
  }
}

/* Cycle 9 evidence presentation normalization. */
.usecase-evidence-grid {
  align-items: start;
}
.usecase-evidence-grid .evidence-sketch {
  text-align: left;
}

/* Use-case evidence cards: taller row + cleaner internal spacing */
body.use-cases-page .usecase-evidence-grid {
  align-items: stretch;
}

body.use-cases-page .usecase-evidence-grid > .card {
  min-height: 420px;
}

body.use-cases-page .usecase-evidence-grid .evidence-sketch {
  display: flex;
  flex-direction: column;
}

body.use-cases-page .usecase-evidence-grid .evidence-sketch h3:not(:first-of-type) {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(57, 210, 192, 0.14);
}

body.use-cases-page .usecase-evidence-grid .evidence-sketch p {
  line-height: 1.68;
}

@media (max-width: 780px) {
  body.use-cases-page .usecase-evidence-grid > .card {
    min-height: 0;
  }

  body.use-cases-page .usecase-evidence-grid .evidence-sketch h3:not(:first-of-type) {
    margin-top: 22px;
    padding-top: 20px;
  }
}

.review-use-card {
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  padding: 30px 34px !important;
}

.review-use-card .check-list {
  gap: 14px !important;
  margin-top: 18px !important;
}



.pilot-checklist-cards {
  width: min(100%, 360px) !important;
  max-width: 430px !important;
  justify-self: start !important;
  margin-left: 20px !important;
  margin-right: auto !important;
}

.pilot-checklist-cards > .card {
  width: 100% !important;
  display: block !important;
  padding: 24px 28px !important;
}

.pilot-checklist-cards > .card > h3 {
  margin: 0 0 10px !important;
}

.pilot-checklist-cards > .card > .check-list {
  margin-top: 10px !important;
}

.pilot-process-timeline article {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  column-gap: 18px !important;
  row-gap: 8px !important;
  align-items: start !important;
  padding: 20px !important;
}

.pilot-process-timeline article > span {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
}

.pilot-process-timeline article > h3,
.pilot-process-timeline article > p {
  grid-column: 2 !important;
}

.pilot-process-timeline article > h3 {
  margin: 0 !important;
}

.pilot-process-timeline article > p {
  margin: 0 !important;
}

#contact-form {
  padding: 26px 34px !important;
}

#contact-form .form-grid {
  gap: 14px 18px !important;
  margin-top: 0 !important;
}

#contact-form .field {
  gap: 6px !important;
}

#contact-form input,
#contact-form select {
  min-height: 44px !important;
  padding: 10px 14px !important;
}

#contact-form textarea {
  min-height: 94px !important;
  padding: 12px 14px !important;
}

#contact-form .form-submit {
  margin-top: 18px !important;
}

#contact-form .form-note {
  margin-top: 12px !important;
}

.evidence-artifact-section .section-head {
  max-width: var(--layout-reading);
  margin-left: auto;
  margin-right: auto;
}

.evidence-artifact-section .section-head .form-note {
  max-width: var(--layout-reading);
}

.evidence-code-grid {
  align-items: start;
  gap: clamp(20px, 2.8vw, 32px);
  margin-top: var(--space-cluster);
}

.evidence-code-grid .code-card {
  width: 100%;
  margin: 0;
}

.evidence-code-grid .code-head {
  align-items: flex-start;
}

.evidence-code-grid .code-head span {
  text-align: right;
}

.artifact-inspector {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
  margin-top: var(--space-cluster);
}

.inspector-rail {
  display: grid;
  gap: 12px;
}

.inspector-option {
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(57,210,192,.14);
  border-radius: 18px;
  padding: 18px;
  background: rgba(16,39,37,.52);
  color: var(--text);
  cursor: pointer;
}

.inspector-option span {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.inspector-option strong {
  font-size: 16px;
}

.inspector-option em,
.inspector-option small {
  color: var(--text-muted);
  font-style: normal;
}

.inspector-option em {
  flex: 0 0 auto;
  font-size: 12px;
}

.inspector-option small {
  font-size: 13px;
  line-height: 1.45;
}

.inspector-option.is-active {
  border-color: rgba(57,210,192,.42);
  background: linear-gradient(180deg, rgba(57,210,192,.12), rgba(16,39,37,.72));
  box-shadow: inset 3px 0 0 rgba(57,210,192,.78);
}

.inspector-stage {
  min-width: 0;
}

.inspector-panel[hidden] {
  display: none;
}

.artifact-inspector .code-card {
  width: 100%;
}

.artifact-inspector .code-head {
  align-items: baseline;
}

.artifact-inspector .code-head span {
  text-align: right;
}

.artifact-inspector .code-card pre {
  max-height: 560px;
}

.evidence-review-inspector {
  grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
}

.evidence-rail {
  counter-reset: evidence-step;
}

.evidence-rail .inspector-option {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 14px;
}

.evidence-rail .inspector-option::before {
  counter-increment: evidence-step;
  content: counter(evidence-step);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--brand-2);
  border: 1px solid rgba(57,210,192,.24);
  background: rgba(57,210,192,.07);
  font-weight: 900;
  grid-row: 1 / span 2;
}

.evidence-rail .inspector-option span,
.evidence-rail .inspector-option small {
  grid-column: 2;
}

@media (max-width: 920px) {
  .artifact-inspector,
  .evidence-review-inspector {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .inspector-option span {
    display: grid;
  }

  .inspector-option em,
  .artifact-inspector .code-head span {
    text-align: left;
  }
}

.provenance-note {
  max-width: var(--layout-reading);
  margin: 18px auto 0;
  text-align: center;
}

.security-replay-table table {
  min-width: 1272px;
  table-layout: fixed !important;
}

.security-replay-table th:nth-child(1),
.security-replay-table td:nth-child(1) { width: 18%; }
.security-replay-table th:nth-child(2),
.security-replay-table td:nth-child(2) { width: 20%; }
.security-replay-table th:nth-child(3),
.security-replay-table td:nth-child(3) { width: 6%; }
.security-replay-table th:nth-child(4),
.security-replay-table td:nth-child(4) { width: 10%; }
.security-replay-table th:nth-child(5),
.security-replay-table td:nth-child(5) { width: 48%; }

.security-boundary-table table {
  min-width: 1500px;
  table-layout: fixed !important;
}

.security-boundary-table th:nth-child(1),
.security-boundary-table td:nth-child(1) { width: 14%; }
.security-boundary-table th:nth-child(2),
.security-boundary-table td:nth-child(2) { width: 22%; }
.security-boundary-table th:nth-child(3),
.security-boundary-table td:nth-child(3) { width: 10%; }
.security-boundary-table th:nth-child(4),
.security-boundary-table td:nth-child(4) { width: 24%; }
.security-boundary-table th:nth-child(5),
.security-boundary-table td:nth-child(5) { width: 16%; }

.security-replay-table td,
.security-boundary-table td {
  line-height: 1.52;
}

.security-replay-table th,
.security-replay-table td,
.security-boundary-table th,
.security-boundary-table td {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.security-replay-table th,
.security-boundary-table th {
  white-space: normal !important;
}

.security-replay-table code,
.security-boundary-table td:first-child code {
  white-space: nowrap;
}

.security-replay-table td:nth-child(5) code {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.security-replay-table,
.security-boundary-table {
  width: min(100vw - 48px, 1275px) !important;
  max-width: 1275px !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

.evidence-hash-note {
  width: fit-content;
  max-width: min(100%, 640px);
  margin: 10px auto 0;
  padding: 10px 12px;
  border: 1px solid rgba(57,210,192,.14);
  border-radius: var(--radius-md);
  background: rgba(16,39,37,.44);
}

.evidence-hash-note code {
  overflow-wrap: anywhere;
}

.evidence-pack-card {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-block: clamp(16px, 2vw, 22px);
}

.evidence-pack-card h3,
.evidence-pack-card p {
  margin: 0;
}

.evidence-pack-card p + p {
  margin-top: 8px;
}

@media (max-width: 780px) {
  .evidence-pack-card {
    grid-template-columns: 1fr;
  }

  .provenance-note {
    text-align: left;
  }
}

/* V40 outreach-readiness accessibility patch: header link contrast. */
.site-header .main-nav a,
.header-pricing-link,
.header-secondary-link {
  color: var(--text);
}

.site-header .main-nav a:hover,
.site-header .main-nav a[aria-current="page"],
.header-pricing-link:hover,
.header-secondary-link:hover {
  color: #ffffff;
}