/* EROH1: navy for depth, orange for action, quiet light surfaces for detail. */
:root {
  --navy: #1a1a2e;
  --ink: #1a1a2e;
  --teal: #b83325;
  --mint: #f68d77;
  --lime: #ffd6bb;
  --paper: #f7f5f0;
  --white: #ffffff;
  --muted: #555555;
  --line: #dcdbe1;
  --pale: #f1ece8;
  --accent: #e94f37;
  --light-text: #c4c4d2;
}

.site-header { background: #1a1a2ef5; color: var(--white); border-color: #ffffff15; backdrop-filter: blur(16px); }
.header-inner { min-height: 88px; }
.wordmark span, .site-header nav > a:not(.button):hover { color: var(--accent); }
.wordmark i { background: var(--accent); }
.site-header a:focus-visible, .site-header button:focus-visible { outline-color: #f68d77; }
.site-header > .header-inner > .text-link { color: var(--white); }
.button { gap: 22px; min-height: 64px; padding: 13px 20px; font-size: 14px; border-radius: 4px; }
.button span[aria-hidden], .action-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; font-size: 29px; line-height: 1; }
.button-small { min-height: 54px; padding: 8px 14px; }
.button-ink { background: var(--navy); color: var(--white); }
.button-ink:hover { background: #303047; }
.site-header .button-ink, .button-mint { background: var(--accent); color: var(--navy); }
.site-header .button-ink:hover, .button-mint:hover { background: #f68d77; }
.text-link { min-height: 48px; gap: 15px; }
.text-link span[aria-hidden] { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; font-size: 27px; line-height: 1; }

.hero { isolation: isolate; }
.hero-background { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-background::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #1a1a2efa 0%, #1a1a2ec7 34%, #1a1a2e22 78%), linear-gradient(0deg, #1a1a2e 1%, transparent 30%, #1a1a2e0a 85%); }
.flow-fallback, #data-flow { width: 100%; height: 100%; position: absolute; inset: 0; }
.flow-fallback { object-fit: cover; }
#data-flow { opacity: 0; }
.flow-enhanced #data-flow { opacity: 1; }
.flow-enhanced .flow-fallback { visibility: hidden; }
.hero-main { display: block; min-height: 634px; padding-block: 82px 74px; }
.hero-copy { max-width: 900px; }
.hero .eyebrow { color: #d0ccd5; font-size: 11px; margin-bottom: 27px; }
.status-dot { width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 0 5px #e94f3719; }
.hero h1 { font-size: clamp(64px, 7.55vw, 109px); line-height: 1.035; letter-spacing: -.06em; font-weight: 600; }
.hero h1 span { color: var(--accent); }
.hero-lead { font-size: 25px; margin-top: 28px; line-height: 1.4; }
.hero-description { color: var(--light-text); max-width: 475px; font-size: 16px; margin-top: 16px; }
.hero .button-row { margin-top: 28px; flex-direction: row; align-items: center; gap: 24px; }
.hero .button { font-size: 14px; min-height: 64px; padding: 13px 20px; gap: 22px; }
.hero .light-link { font-size: 13px; }
.hero-play-icon svg { width: 18px; height: 18px; fill: currentColor; }
.flow-caption { position: absolute; right: 0; bottom: 159px; width: 250px; }
.flow-caption p { display: flex; flex-direction: column; font-size: 15px; color: var(--light-text); line-height: 1.1; }
.flow-caption p strong { font-size: 52px; font-weight: 450; letter-spacing: -.05em; color: var(--white); margin-top: 7px; }
.flow-stages { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 40px; }
.flow-stage { display: flex; align-items: center; gap: 17px; min-height: 111px; padding: 23px; background: #232337ed; border: 1px solid #ffffff33; border-radius: 5px; transition: background .2s, border-color .2s, transform .2s; }
.stage-number { font-size: 12px; align-self: flex-start; margin-top: 6px; color: var(--mint); }
.stage-copy { flex: 1; min-width: 0; }
.stage-copy strong { display: block; font-size: 21px; line-height: 1.25; letter-spacing: -.4px; font-weight: 500; }
.stage-copy small { display: block; font-size: 11px; line-height: 1.5; color: var(--light-text); margin-top: 7px; }
.flow-stage .action-icon { border: 1px solid #ffffff55; border-radius: 50%; width: 46px; height: 46px; color: var(--mint); }
.flow-stage:hover { transform: translateY(-4px); background: #303047; border-color: var(--mint); }
.stage-action { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.stage-action .stage-number, .stage-action small, .stage-action .action-icon { color: var(--navy); }
.stage-action .action-icon { border-color: #1a1a2e66; }
.stage-action:hover { background: #f68d77; }
.hero-bottom { position: relative; border-color: #ffffff26; padding-block: 19px; min-height: 76px; }
.hero-bottom p { color: var(--light-text); }
.partner-line > span:not([aria-hidden]) { border-color: #ffffff44; }
.partner-line > span[aria-hidden] { font-size: 26px; padding-left: 4px; }

.video-section { padding-top: 0; }
.video-heading { align-items: end; gap: 36px; }
.video-heading h2 { max-width: 650px; }
.video-heading > p { flex: none; max-width: 340px; }
.video-feature { margin: 0; }
.video-frame { position: relative; padding: 10px; background: var(--navy); border: 1px solid #1a1a2e26; border-radius: 14px; box-shadow: 0 18px 48px #1a1a2e14; overflow: hidden; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--navy); border-radius: 6px; }
.video-frame video:focus-visible { outline: 3px solid var(--mint); outline-offset: -4px; }
.video-play { position: absolute; inset: 10px; width: calc(100% - 20px); border: 0; border-radius: 6px; background: transparent; color: var(--navy); }
.video-play-icon { position: absolute; top: 50%; left: 84%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(60px, 8vw, 104px); height: clamp(60px, 8vw, 104px); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 12px #e94f3726, 0 10px 35px #00000040; transition: background .2s, box-shadow .2s; }
.video-play-icon svg { width: 38%; height: 38%; fill: currentColor; }
.video-play:hover .video-play-icon, .video-play:focus-visible .video-play-icon { background: var(--mint); box-shadow: 0 0 0 16px #e94f3733, 0 10px 35px #00000040; }
.video-play:focus-visible { outline: 3px solid var(--mint); outline-offset: -4px; }
.video-caption { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; }
.video-caption p { font-size: 14px; font-weight: 600; line-height: 1.6; }
.video-caption p span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 5px; }
.video-caption .text-link { flex: none; }
.video-status { color: var(--teal); font-size: 14px; line-height: 1.6; margin-top: 16px; }
.video-status:empty { display: none; }
.video-transcript { margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.video-transcript summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding-block: 12px; color: var(--teal); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.video-transcript summary::-webkit-details-marker { display: none; }
.video-transcript summary span { display: grid; place-items: center; width: 34px; height: 34px; font-size: 26px; line-height: 1; border: 1px solid var(--line); border-radius: 50%; }
.video-transcript[open] summary span { transform: rotate(45deg); }
.video-transcript summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.video-transcript > div { max-width: 78ch; padding-block: 6px 24px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.video-transcript p + p { margin-top: 14px; }

.capability-tabs button { grid-template-columns: 35px 1fr 44px; gap: 12px; min-height: 109px; }
.tab-arrow { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; font-size: 28px; }
.capability-tabs button[aria-selected='true'] .tab-arrow { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.capability-tabs button[aria-selected='true'] { color: var(--teal); }
.capability-tabs button[aria-selected='true'] small { color: #555555; }
html:not(.js) .capability-tabs { display: none; }
.capability-explorer { gap: 62px; }
.demo { border-radius: 8px; }
.demo-heading, .demo-tag, .demo-footer, .queue-item small, .insight-bars span, .insight-finding small, .document-checks > span, .chart-legend { color: var(--light-text); }
.demo-tag, .queue-item, .insight-finding { border-color: #ffffff33; }
.queue-badge { background: #3b3343; color: #ffd6bb; }
.insight-bars > div:nth-child(2) i { background: #cf5748; }
.insight-bars > div:nth-child(3) i { background: #f4baa5; }
.chart-legend > span:nth-child(3) i { background: #794b4b; }
.forecast-svg path[stroke='#35505a'] { stroke: #ffffff28; }
.forecast-svg path[stroke='#52706e'] { stroke: #ffffff66; }
.forecast-svg text { fill: var(--light-text); }
.snowflake-section { background: #eeece8; }
.foundation-platform { border-color: #3d3d54; }
.foundation-platform .eyebrow, .foundation-platform p, .contact-section .section-lead { color: var(--light-text); }
.foundation-sources span { border-color: #d0ccd4; }
.foundation-connectors i { background: #b9b5bf; }
.foundation-outcomes span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.foundation-details, .foundation-details > div { border-color: #ccc8cc; }
.step-number { color: var(--teal); }
.step-output { color: var(--teal); }
.contact-section { background: var(--navy); }
.contact-section h2 span { color: var(--mint); }
.contact-email { min-height: 60px; align-items: center; }
.contact-email span[aria-hidden] { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid #ffffff55; border-radius: 50%; font-size: 31px; }
.contact-card { background: #232337; border-color: #48485e; border-radius: 8px; }
.contact-card > p, .contact-card label, .form-note, .form-status { color: var(--light-text); }
.contact-card select, .contact-card textarea { background-color: var(--navy); border-color: #6c6c80; color: var(--white); font-size: 16px; }
.contact-card textarea::placeholder { color: #b7b7c7; }
.contact-card select { appearance: none; min-height: 58px; padding-right: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='m6 10 8 8 8-8' fill='none' stroke='%23f68d77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 28px; background-position: right 16px center; }
.contact-card .button { min-height: 64px; padding: 13px 20px; }

@media (max-width: 1150px) {
  .hero-main { padding-top: 68px; min-height: 610px; }
  .hero h1 { font-size: clamp(64px, 8.4vw, 94px); }
  .flow-caption { width: 215px; bottom: 156px; }
  .flow-caption p strong { font-size: 45px; }
  .flow-stage { padding: 20px 16px; gap: 12px; }
  .stage-copy strong { font-size: 19px; }
  .stage-copy small { font-size: 10px; }
  .stage-number { font-size: 10px; }
  .capability-explorer { gap: 40px; grid-template-columns: 1fr 1.4fr; }
  .capability-tabs button { grid-template-columns: 27px 1fr 44px; gap: 8px; }
}
@media (max-width: 800px) {
  .video-heading { display: block; }
  .video-heading > p { margin-top: 20px; max-width: 100%; }
  .video-heading > p br { display: none; }
  .video-caption { align-items: flex-start; }
  .header-inner { min-height: 76px; }
  .menu-toggle { min-height: 48px; color: var(--white); border-color: #ffffff55; padding: 8px 13px; }
  .menu-toggle svg { width: 26px; height: 26px; }
  .js .site-header nav { top: 76px; background: var(--navy); border-color: #ffffff33; }
  .js .site-header nav > .button { font-size: 14px; min-height: 58px; }
  .hero-main { min-height: 645px; padding-block: 60px 170px; }
  .hero h1 { font-size: clamp(64px, 9vw, 74px); }
  .hero .eyebrow { font-size: 10px; }
  .hero-description { font-size: 15px; }
  .hero-lead { font-size: 24px; }
  .flow-caption { width: auto; bottom: 35px; display: flex; gap: 26px; align-items: center; }
  .flow-caption p { font-size: 12px; }
  .flow-caption p strong { font-size: 34px; }
  .flow-stages { gap: 10px; padding-bottom: 28px; }
  .flow-stage { min-height: 156px; padding: 17px; display: grid; grid-template-columns: 1fr 44px; gap: 10px 5px; }
  .stage-number { grid-column: 1; align-self: center; margin: 0; }
  .stage-copy { grid-column: 1 / -1; grid-row: 2; }
  .flow-stage .action-icon { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  .stage-copy strong { font-size: 19px; }
  .hero-bottom p { font-size: 9px; }
  .partner-line { gap: 12px; }
  .capability-explorer { grid-template-columns: 1fr 1.35fr; gap: 25px; }
  .capability-tabs button { font-size: 14px; grid-template-columns: 24px 1fr 44px; gap: 5px; }
  .tab-arrow { font-size: 27px; }
  .contact-email { font-size: 21px; gap: 10px; }
  .contact-email span[aria-hidden] { width: 44px; height: 44px; font-size: 28px; }
}
@media (max-width: 600px) {
  .video-frame { padding: 5px; border-radius: 10px; }
  .video-play { inset: 5px; width: calc(100% - 10px); }
  .video-play-icon { width: 54px; height: 54px; box-shadow: 0 0 0 7px #e94f3726, 0 8px 25px #00000040; }
  .video-play:hover .video-play-icon, .video-play:focus-visible .video-play-icon { box-shadow: 0 0 0 9px #e94f3733, 0 8px 25px #00000040; }
  .video-caption { flex-direction: column; gap: 12px; padding-top: 18px; }
  .video-caption p { font-size: 13px; }
  .header-inner { min-height: 74px; }
  .js .site-header nav { top: 74px; }
  .site-header .button-small { font-size: 13px; min-height: 54px; }
  .hero-main { min-height: 0; padding-block: 49px 134px; }
  .hero h1 { font-size: clamp(43px, 11.8vw, 68px); }
  .hero .eyebrow { font-size: 9px; margin-bottom: 26px; }
  .hero-lead { font-size: 22px; margin-top: 25px; }
  .hero-description { font-size: 14px; line-height: 1.75; max-width: 355px; }
  .hero .button-row { gap: 18px; align-items: flex-start; flex-direction: column; margin-top: 26px; }
  .hero .button { font-size: 13px; min-height: 62px; padding: 12px 17px; gap: 18px; }
  .hero .light-link { font-size: 12px; }
  .hero-background::after { background: linear-gradient(90deg, #1a1a2edc, #1a1a2e80 60%, #1a1a2e11), linear-gradient(0deg, #1a1a2e 1%, transparent 38%); }
  .flow-caption { left: 0; right: 0; bottom: 27px; justify-content: space-between; gap: 12px; }
  .flow-caption p { font-size: 11px; }
  .flow-caption p strong { font-size: 32px; }
  .flow-stages { display: flex; flex-direction: column; gap: 10px; padding-bottom: 25px; }
  .flow-stage { display: flex; gap: 15px; min-height: 88px; padding: 17px; }
  .stage-number { font-size: 11px; align-self: center; }
  .stage-copy strong { font-size: 19px; }
  .stage-copy small { font-size: 10px; margin-top: 4px; }
  .hero-bottom { padding-block: 18px; align-items: center; gap: 14px; }
  .hero-bottom p { max-width: 135px; font-size: 8px; }
  .partner-line { padding: 0; gap: 9px; }
  .partner-line img { width: 94px; }
  .partner-line > span:not([aria-hidden]) { padding-left: 9px; font-size: 8px; }
  .partner-line > span[aria-hidden] { font-size: 22px; padding: 0; }
  .capability-explorer { display: block; }
  .capability-tabs button { min-height: 86px; grid-template-columns: 30px 1fr 44px; gap: 9px; padding: 16px 5px; font-size: 15px; }
  .capability-tabs button[aria-selected='true'] { background: #eee5df; padding-inline: 10px; }
  .capability-tabs button small { font-size: 11px; }
  .text-link { gap: 12px; }
  .panel-cta { align-items: center; max-width: 100%; }
  .contact-email { font-size: 23px; gap: 14px; }
  .contact-email span[aria-hidden] { width: 46px; height: 46px; }
  .contact-card { padding: 23px; }
  .footer-main > div a { min-height: 44px; display: inline-flex; align-items: center; gap: 15px; }
  .footer-main > div a span[aria-hidden] { font-size: 25px; }
  html:not(.js) .site-header .header-inner { flex-wrap: wrap; padding-block: 18px; gap: 18px; }
  html:not(.js) .site-header nav { width: 100%; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .flow-stage:hover { transform: none; } }
@media print { .hero-background, .flow-caption, .flow-stages { display: none; } .hero-main { min-height: 0; padding-block: 30px; } }
