/* ELO Labs skin for the adapted Vigil, Altiera and Polysoma pages. */
:root {
  --paper: #e8e8db;
  --paper2: #ddd2ba;
  --ink: #14100c;
  --red: #d03415;
  --blue: #d03415;
  --olive: #d03415;
  --line: rgba(20, 16, 12, .18);
}
html[data-theme="light"] {
  --ink: #14100c;
  --bone: #e8e8db;
  --shell: #ddd2ba;
  --ash: #4a4437;
  --dim: #6b6455;
  --signal: #d03415;
  --sodium: #d03415;
  --amber: #d03415;
  --red: #d03415;
  --hair: rgba(20,16,12,.18);
  --cvbg: #e8e8db;
}

html, body { min-height: 100%; background: #e8e8db; color: #14100c; }
body { margin: 0; font-family: Lato, Arial, sans-serif; font-size: 17px; line-height: 1.62; }
body, section, header, footer, main { background-color: transparent; }
html { scroll-behavior: smooth; color-scheme: light; }
a { color: inherit; }

.topnav {
  position: sticky; top: 0; z-index: 80; width: 100%; margin: 0; padding: .55rem var(--gut, 4vw);
  background: rgba(232,232,219,.94); border-bottom: 1px solid rgba(20,16,12,.12); backdrop-filter: blur(12px);
}
.topnav .tn-in { max-width: 1440px; min-height: 42px; margin: auto; display: flex; align-items: center; gap: 1rem; }
.topnav .tn-mark { display: inline-flex; align-items: center; gap: .55rem; flex: none; padding: 0 .55rem; color: #14100c; text-decoration: none; }
.topnav .tn-labs-logo { display: block; width: 25px; height: 25px; object-fit: contain; }
.topnav .tn-labs-word { color: #14100c; font: 700 .58rem "Space Mono", monospace; letter-spacing: .2em; }
.topnav .tn-links { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.topnav .tn-links a, .topnav .tn-panel a {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 .7rem; color: #4a4437;
  font: 400 .58rem "Space Mono", monospace; letter-spacing: .14em; text-decoration: none; text-transform: uppercase;
}
.topnav .tn-links a:hover, .topnav .tn-panel a:hover { color: #d03415; }
.topnav .tn-links a[aria-current="page"], .topnav .tn-panel a[aria-current="page"] { color: #d03415; }
.topnav .tn-right { display: flex; align-items: center; }
.topnav .tn-burger { display: none; width: 38px; height: 34px; border: 1px solid rgba(20,16,12,.24); color: #14100c; background: transparent; align-items: center; justify-content: center; }
.topnav .tn-burger svg { width: 16px; fill: currentColor; }
.topnav .tn-panel { display: none; max-width: 1440px; margin: .65rem auto .15rem; padding: .85rem 0 .4rem; border-top: 1px solid rgba(20,16,12,.12); flex-direction: column; gap: .3rem; }
.topnav .tn-panel[data-open="1"] { display: flex; }
@media (max-width: 899px) {
  .topnav .tn-links { display: none; }
  .topnav .tn-burger { display: inline-flex; }
}

.p-hero {
  min-height: 72vh; position: relative; overflow: hidden; padding: clamp(7rem,12vw,10rem) 0 clamp(4rem,8vw,7rem);
  background: #e8e8db; color: #14100c;
}
.p-hero:after {
  content: ""; position: absolute; z-index: 0; right: 3vw; top: 17%; width: min(36vw,460px); aspect-ratio: 1;
  background-image: radial-gradient(circle,rgba(208,52,21,.34) 0 1px,transparent 1.6px);
  background-size: 15px 15px; mask-image: radial-gradient(circle,#000 12%,transparent 72%); opacity: .44; pointer-events: none;
}
.p-hero.p-pattern-polysoma:after { background-image: radial-gradient(circle,rgba(208,52,21,.4) 0 1px,transparent 1.5px),repeating-linear-gradient(45deg,transparent 0 17px,rgba(208,52,21,.12) 17px 18px,transparent 18px 36px),repeating-linear-gradient(-45deg,transparent 0 17px,rgba(208,52,21,.12) 17px 18px,transparent 18px 36px); }
.p-hero.p-pattern-altiera:after { background-image: repeating-conic-gradient(from 45deg,rgba(208,52,21,.12) 0 25%,transparent 0 50%); background-size: 22px 22px; }
.p-hero .container { position: relative; z-index: 2; max-width: 1440px; }
.p-hero h1, .p-hero h2, .section h2, .dark-band h2, .p-cta h2, .section h3 {
  color: #14100c; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
}
.p-hero h1 { max-width: 8ch; font-size: clamp(5rem,12vw,11rem); line-height: .8; letter-spacing: -.02em; margin: 2rem 0 1.5rem; }
.p-hero .p-promise { max-width: 15ch; color: #14100c; font: 600 clamp(2rem,3.7vw,3.6rem)/.94 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.p-hero .p-lede { max-width: 56ch; color: #4a4437; font: 400 1rem/1.65 Lato, Arial, sans-serif; }
.p-crumb, .p-type, .p-actions .p-btn, .kicker, .p-hero .kicker, .section-head .kicker, .p-cta .kicker {
  font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.p-crumb { color: #6b6455; }
.p-crumb a { border-color: rgba(20,16,12,.3); }
.p-type { border-color: rgba(20,16,12,.24); color: #6b6455; }
.p-actions { gap: .75rem; }
.p-btn { border: 1px solid #14100c; color: #14100c; background: transparent; font: 600 .66rem "Space Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.p-btn.solid { background: #14100c; border-color: #14100c; color: #e8e8db; }
.p-btn:hover, .p-btn.solid:hover { background: #d03415; border-color: #d03415; color: #fff; opacity: 1; }
.section { padding: clamp(5rem,10vw,8rem) 0; background: #e8e8db; color: #14100c; }
.section.alt, .p-stats { background: #ddd2ba; color: #14100c; }
.section-head h2 { max-width: 17ch; font-size: clamp(3rem,6.4vw,6rem); line-height: .88; letter-spacing: -.015em; }
.section-head p, .section p, .p-stats p { color: #4a4437; }
.section-head .kicker, .section .kicker, .p-cta .kicker { color: #14100c; }
.p-stats b { color: #d03415; font-family: "Barlow Condensed", sans-serif; }
.p-steps .p-step, .p-spec, .p-use, .p-others a { border-color: rgba(20,16,12,.18); }
.p-steps .p-step > span, .p-use > a, .p-others a:hover b { color: #d03415; }
.p-steps h3, .p-others b { color: #14100c; font: 600 clamp(1.6rem,2.8vw,2.5rem)/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.p-compare th, .p-compare td { border-color: rgba(20,16,12,.18); color: #4a4437; }
.p-compare thead th { color: #14100c; font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; }
.pc-bar, .pc-label { color: #d03415; }
.pc-result b, .pc-note, .pc-foot { color: #4a4437; }
.pc-dist { color: #d03415; }
.pc-dist path[stroke="#9bbdd1"] { stroke: #d03415; }
.dark-band { padding: clamp(4rem,8vw,7rem) 0; background: #ddd2ba; color: #14100c; }
.dark-band p, .dark-band .statement { color: #4a4437; }
.dark-band .p-method > div { border-color: rgba(20,16,12,.18); }
.p-cta { padding: clamp(5rem,10vw,8rem) 0; background: #e8e8db; color: #14100c; }
.p-cta h2 { font-size: clamp(3.5rem,7vw,6.5rem); line-height: .86; }
.p-cta p { color: #4a4437; }
.p-others a { color: #14100c; }
.p-others span { color: #6b6455; }
.p-others p { color: #4a4437; }
.sfoot { padding-block: 4rem 3rem; background: #ddd2ba; color: #14100c; }
.sfoot .wrap { max-width: 1440px; background: transparent; }
.sfoot .kicker { color: #6b6455; }
.sfoot a { color: #3f392f; }
.sfoot a:hover, .sfoot a:focus-visible { color: #d03415; }
.sfoot .sfoot-id .readout { color: #6b6455; }
.sfoot-social, .sfoot-bottom { border-color: rgba(20,16,12,.18); }

/* Keep product detail tables in the same light palette and type system as Labs. */
.p-details.section.alt { background: #e8e8db; color: #14100c; }
.p-details .section-head { margin-bottom: clamp(2.5rem,5vw,4rem); }
.p-details .section-head h2 {
  color: #14100c;
  font: 700 clamp(3rem,6.4vw,6rem)/.86 "Barlow Condensed",sans-serif;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.p-details .section-head .kicker {
  color: #14100c;
  font: 600 12px/1 "Barlow Condensed",sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.p-details .p-specs { border-color: rgba(20,16,12,.18); }
.p-details .p-spec {
  grid-template-columns: .6fr 1.4fr;
  gap: 70px;
  border-color: rgba(20,16,12,.18);
}
.p-details .p-spec dt {
  padding-top: 3px;
  color: #14100c;
  font: 600 14px/1.3 "Barlow Condensed",sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.p-details .p-spec dd {
  max-width: 720px;
  color: #4a4437;
  font: 400 16px/1.7 Lato,Arial,sans-serif;
}
.p-details .p-spec dd a {
  color: #14100c;
  border-color: #d03415;
}

@media (max-width: 760px) {
  .p-hero { min-height: 0; padding: 7rem 0 4rem; }
  .p-hero h1 { font-size: clamp(4.6rem,20vw,8rem); }
  .p-hero:after { right: -15%; top: 10%; width: 70vw; opacity: .26; }
  .section-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
  .section { padding: 4rem 0; }
}

@media (max-width: 700px) {
  .p-details .p-spec { grid-template-columns: 1fr; gap: .55rem; }
}

/* Shared Mission/About hero composition, with a separate animated field per product. */
.labs-product-hero.hasBanner.top { padding: calc(60px + clamp(1.5rem,4vw,3rem)) clamp(1rem,4vw,3rem) clamp(2rem,5vw,3.5rem); background: #e8e8db; }
.labs-product-hero > .secblock { max-width: 1400px; padding: 0; }
.labs-product-hero .banner.banner--hero { position: relative; isolation: isolate; background: #e8e8db; color: #14100c; border-bottom: 1px solid rgba(20,16,12,.14); }
.labs-product-hero .bannerTxt { width: 40%; padding-left: clamp(1.6rem,4vw,2.6rem); padding-right: 1.5rem; }
.labs-product-hero .bannerLabel { max-width: 17ch; color: #14100c; }
.labs-product-hero .bannerDesc { max-width: 58ch; color: rgba(20,16,12,.78); }
.labs-product-kicker { margin: 0 0 1.25rem; color: #14100c; font: 600 12px/1 "Barlow Condensed",sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.labs-product-hero .p-actions { margin-top: 1.8rem; }
.labs-product-hero .p-btn { border-color: rgba(20,16,12,.7); color: #14100c; }
.labs-product-hero .p-btn.solid { border-color: #14100c; background: #14100c; color: #e8e8db; }
.labs-product-hero .p-btn:hover, .labs-product-hero .p-btn.solid:hover { border-color: #d03415; background: #d03415; color: #fff; }
.labs-product-art { position: absolute; z-index: 0; inset: 0 0 0 40%; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 28%,#000 100%); mask-image: linear-gradient(90deg,transparent 0%,#000 28%,#000 100%); }
.labs-product-art svg { display: block; width: 100%; height: 100%; color: #14100c; }
.labs-product-art svg g, .labs-product-art svg path, .labs-product-art svg circle, .labs-product-art svg ellipse, .labs-product-art svg rect { vector-effect: non-scaling-stroke; }
.labs-product-art .vigil-rings, .labs-product-art .polysoma-rings { fill: none; stroke: rgba(20,16,12,.24); stroke-width: 1; }
.labs-product-art .vigil-links { fill: none; stroke: rgba(20,16,12,.28); stroke-width: 1; }
.labs-product-art .vigil-orbit-a { transform-box: view-box; transform-origin: 58.333% 50%; animation: labs-orbit 52s linear infinite; }
.labs-product-art .vigil-orbit-b { transform-box: view-box; transform-origin: 58.333% 50%; animation: labs-orbit 35s linear infinite reverse; }
.labs-product-art .vigil-orbit circle, .labs-product-art .altiera-nodes circle, .labs-product-art .polysoma-orbit circle { fill: #14100c; }
.labs-product-art .vigil-orbit .signal, .labs-product-art .vigil-core circle:first-child, .labs-product-art .altiera-signal, .labs-product-art .polysoma-scenario rect { fill: #d03415; }
.labs-product-art .vigil-core .core-pulse { fill: none; stroke: #d03415; stroke-width: 1; animation: labs-ring 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.labs-product-art .altiera-planes { fill: none; stroke: rgba(20,16,12,.2); stroke-width: 1; }
.labs-product-art .altiera-links { fill: none; stroke: rgba(20,16,12,.42); stroke-width: 1; }
.labs-product-art .altiera-signal { fill: none; stroke: #d03415; stroke-width: 2; stroke-dasharray: 3 12; animation: labs-dash 5s linear infinite; }
.labs-product-art .altiera-nodes circle { animation: labs-node 2.8s ease-in-out infinite alternate; }
.labs-product-art .altiera-nodes circle:nth-child(3n) { animation-delay: -1.4s; }
.labs-product-art .altiera-core path { fill: #14100c; stroke: #e8e8db; stroke-width: 1.5; }
.labs-product-art .polysoma-orbit { transform-box: view-box; transform-origin: 60% 50%; }
.labs-product-art .polysoma-orbit-a { animation: labs-orbit 24s linear infinite; }
.labs-product-art .polysoma-orbit-b { animation: labs-orbit 39s linear infinite reverse; }
.labs-product-art .polysoma-orbit-c { animation: labs-orbit 58s linear infinite; }
.labs-product-art .polysoma-scenario rect { fill: #14100c; stroke: #d03415; stroke-width: 1.5; }
.labs-product-art .polysoma-scenario path { stroke: #e8e8db; stroke-width: 2; }
.labs-product-art .polysoma-wave { fill: none; stroke: #d03415; stroke-width: 1.25; opacity: 0; transform-box: fill-box; transform-origin: center; animation: labs-ring 3.2s ease-out infinite; }
.labs-product-art .polysoma-wave-b { animation-delay: 1.6s; }
@keyframes labs-orbit { to { transform: rotate(360deg); } }
@keyframes labs-ring { 0% { opacity: .65; transform: scale(.72); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes labs-dash { to { stroke-dashoffset: -60; } }
@keyframes labs-node { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 900px) {
  .labs-product-hero .bannerTxt { width: 100%; flex: 1 1 auto; padding: clamp(2rem,7vw,3rem) clamp(1.4rem,5vw,2rem); }
  .labs-product-hero .banner--hero { height: calc(100svh - 60px); min-height: 0; }
  .labs-product-art { inset: auto 0 0; width: 100%; height: 34%; -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 28%,#000 100%); mask-image: linear-gradient(180deg,transparent 0%,#000 28%,#000 100%); }
}
@media (max-width: 600px) {
  .labs-product-hero .bannerTxt { justify-content: flex-start; padding-top: clamp(3.8rem,14vh,7rem); }
  .labs-product-hero .bannerLabel { font-size: clamp(1.65rem,7vw,2.2rem); }
  .labs-product-hero .bannerDesc { font-size: .84rem; }
  .labs-product-hero .p-actions { flex-wrap: wrap; gap: .55rem; }
  .labs-product-hero .p-btn { padding-inline: .7rem; }
  .labs-product-art { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .labs-product-art *, .labs-product-art *::before { animation: none !important; }
  .labs-product-art .vigil-core .core-pulse, .labs-product-art .polysoma-wave { opacity: .28; transform: none; }
}

/* ELO treatment for the illustrative Vigil, Altiera and Polysoma interfaces. */
.vg, .at, .pconsole { background: #14100c !important; color: #e8e8db !important; border-color: rgba(20,16,12,.7) !important; font-family: "Lato",Arial,sans-serif !important; }
.vg :is(p,b,span,small,i), .at :is(p,b,span,small), .pconsole :is(p,b,span,td,li) { color: inherit; }
.vg-kicker, .at-kicker, .at-col-label, .at-core-label, .pc-label, .pc-bar span:first-child { color: #e8e8db !important; font-family: "Barlow Condensed",sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .14em !important; }
.vg-title, .at-title { color: #e8e8db !important; font: 600 clamp(2rem,3.4vw,3.25rem)/.98 "Barlow Condensed",sans-serif !important; letter-spacing: 0 !important; text-transform: uppercase; }
.vg-sub, .vg-msg p, .vg-mail p, .at-sub { color: rgba(232,232,219,.82) !important; font-family: "Lato",Arial,sans-serif !important; }
.vg-head, .at-head, .at-log, .at-side, .vg-stage, .vg-bar, .vg-foot, .at-foot, .pc-block, .pc-col+.pc-col, .pc-foot { border-color: rgba(232,232,219,.2) !important; }
.vg-tabs, .at-tabs { border-color: rgba(232,232,219,.45) !important; }
.vg-tabs button, .at-tabs button { color: rgba(232,232,219,.82) !important; font-family: "Space Mono",monospace !important; }
.vg-tabs button[aria-selected="true"], .at-tabs button[aria-selected="true"] { color: #14100c !important; background: #e8e8db !important; }
.vg-tabs button+button, .at-tabs button+button { border-color: rgba(232,232,219,.35) !important; }
.vg-sources, .vg-msg small, .vg-bar span, .vg-foot, .vg-src-label, .vg-mail-meta, .at-env-label span:last-child, .at-log-row span, .at-core-meta, .at-foot, .pc-bar, .pc-note, .pc-result span, .pc-conf, .pc-segs span, .pc-foot { color: rgba(232,232,219,.68) !important; }
.vg-sources span { border-color: rgba(232,232,219,.28) !important; }
.vg-av { background: #29231c !important; color: #e8e8db !important; }
.vg-av-bot { background: #e8e8db !important; color: #14100c !important; font: 700 18px "Barlow Condensed",sans-serif !important; }
.vg-at { color: #e8e8db !important; text-decoration: underline; text-decoration-color: #d03415; text-underline-offset: 3px; }
.vg-cite span { color: #e8e8db !important; border-color: rgba(232,232,219,.4) !important; font-family: "Space Mono",monospace !important; }
.at-env { border-color: rgba(232,232,219,.48) !important; }
.at-env-label span:last-child, .at-ok b { color: #e8e8db !important; }
.at-dot { background: #e8e8db !important; box-shadow: 0 0 0 4px rgba(232,232,219,.13) !important; }
.at-chip { color: rgba(232,232,219,.9) !important; border-color: rgba(232,232,219,.32) !important; font-family: "Space Mono",monospace !important; }
.at-flow i { background: linear-gradient(90deg,rgba(208,52,21,0),#d03415,rgba(208,52,21,0)) !important; }
.at-core { background: #e8e8db !important; color: #14100c !important; }
.at-core .at-core-label { color: #14100c !important; }
.at-core b { color: #14100c !important; font: 600 30px/1 "Barlow Condensed",sans-serif !important; text-transform: uppercase; }
.at-core-meta { color: #4a4437 !important; }
.at-out p { color: rgba(232,232,219,.78) !important; }
.pconsole :is(.pc-bar,.pc-block,.pc-foot) { border-color: rgba(232,232,219,.2) !important; }
.pc-label { color: #e8e8db !important; }
.pc-files li, .pc-params td { border-color: rgba(232,232,219,.2) !important; }
.pc-files b, .pc-conf b { color: #e8e8db !important; }
.pc-note, .pc-params td:nth-child(1), .pc-params td:nth-child(3), .pc-result span, .pc-segs span { color: rgba(232,232,219,.68) !important; }
.pc-q, .pc-result b, .pc-segs b { color: #e8e8db !important; font-family: "Barlow Condensed",sans-serif !important; font-weight: 600 !important; text-transform: uppercase; }
.pc-q { font-size: clamp(1.35rem,2vw,1.8rem) !important; line-height: 1.08 !important; }
.pc-result b { font-size: clamp(3rem,5vw,4rem) !important; }
.pc-result small { font-size: .42em !important; }
.pc-ok { color: #e8e8db !important; font-family: "Space Mono",monospace !important; }
.pc-params td:nth-child(2) { color: #e8e8db !important; }
.pc-dist text { fill: rgba(232,232,219,.76) !important; }
.pc-segs { background: rgba(232,232,219,.2) !important; }
.pc-segs div { background: #14100c !important; }
.pc-segs .neg { color: #d03415 !important; }
.pc-segs .pos { color: #e8e8db !important; }

/* Keep Polysoma proof points and comparison copy readable in the ELO light palette. */
.p-stats { background: #e8e8db; color: #14100c; }
.p-stats-grid { border-top-color: rgba(20,16,12,.18); }
.p-stats-grid > div { border-bottom-color: rgba(20,16,12,.18); }
.p-stats-grid > div + div { border-left-color: rgba(20,16,12,.18); }
.p-stats-grid span { color: #4a4437 !important; }
.p-compare th, .p-compare td { color: #4a4437; }
.p-compare thead th, .p-compare thead th:nth-child(2) { color: #14100c; }
.p-compare td:first-of-type:before { color: #14100c !important; }

/* Simulation hero animations adapted for the light ELO product heroes. */
.labs-product-hero .banner > .bannerCv { left: auto; right: 0; width: 60%; height: 100%; opacity: .72; -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 28%,#000 100%); mask-image: linear-gradient(90deg,transparent 0%,#000 28%,#000 100%); }
@media (max-width: 900px) {
  .labs-product-hero .banner > .bannerCv { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 34%; min-height: 180px; -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 28%,#000 100%); mask-image: linear-gradient(180deg,transparent 0%,#000 28%,#000 100%); }
}
@media (max-width: 600px) {
  .labs-product-hero .banner > .bannerCv { height: 30%; }
}