/* The product UI supplies the visual language; the page adapts its density. */
:root {
  --ink: var(--serp-text);
  --muted: var(--serp-text-secondary);
  --gold: var(--serp-gold);
  --gold-light: var(--serp-gold);
  --paper: var(--serp-bg);
  --border: var(--serp-border);
  --dark: var(--serp-panel);
  --font: var(--serp-font-ui);
  --heading: var(--serp-font-ui);
}
body { background: var(--serp-bg); color: var(--serp-text); }
::selection { background: #27546b; color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--serp-cyan); outline-offset: 5px; }
.skip-link { background: var(--serp-cyan); color: var(--serp-bg); }
.site-header { height: 88px; }
.brand { font-weight: 750; letter-spacing: 1.2px; }
.brand svg { width: 29px; height: 29px; }
.header-identity { display: flex; align-items: center; }
.brand-context { border-left: 1px solid var(--serp-border); margin-left: 18px; padding-left: 18px; color: var(--serp-text-muted); font: 10px var(--serp-font-data); letter-spacing: 1px; }
nav { font-size: 12px; font-weight: 500; color: var(--serp-text-secondary); }
nav > a:hover { color: var(--serp-cyan); }
.nav-join { background: var(--serp-panel-raised); border-color: #3d5368; color: var(--serp-text); border-radius: var(--serp-radius-control); }
.nav-join:hover { border-color: var(--serp-cyan); }
.nav-join span { color: var(--serp-cyan); }
.hero { padding-top: 64px; position: relative; }
.hero:before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 380px; background: radial-gradient(ellipse at 50% 0, #1c3d531f, transparent 70%); pointer-events: none; z-index: -1; }
.eyebrow { font-family: var(--serp-font-data); font-size: 10px; line-height: 1.6; font-weight: 400; letter-spacing: 1.5px; color: var(--serp-text-muted); }
.status-dot { background: var(--serp-gold); border-radius: 1px; box-shadow: 0 0 0 4px #d1b0780a; }
.eyebrow-divider { background: var(--serp-border); }
h1 { font-weight: 650; letter-spacing: -3px; }
.accent-text { color: var(--serp-cyan); }
.hero-copy { color: var(--serp-text-secondary); font-size: 16px; }
.button { border-radius: var(--serp-radius-control); border: 1px solid transparent; min-height: 48px; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-1px); }
.button-dark, .button-gold { background: var(--serp-cyan); border-color: #71d1ee; color: #07131e; box-shadow: none; }
.button-dark:hover, .button-gold:hover { background: #72d0ee; box-shadow: none; }
.text-link { font-weight: 500; }
.text-link:hover, .small-play { color: var(--serp-cyan); }
.muted, .hero-note { color: var(--serp-text-muted); }
.hero-note { font-size: 10px; }
.film-section { max-width: 960px; }
.film-frame { background: var(--serp-panel); border-color: #354556; border-radius: var(--serp-radius-panel); box-shadow: 0 20px 70px #0004; }
.film-topline { height: 38px; font-family: var(--serp-font-data); font-size: 9px; letter-spacing: 1px; color: var(--serp-text-secondary); background: #151d27; border-color: var(--serp-border); }
.tiny-square { background: var(--serp-blue); width: 6px; height: 6px; }
.film-tag { font-size: 8px; letter-spacing: .6px; color: var(--serp-gold); background: #d1b07808; border-color: #d1b07835; }
.video-stage { background: #090f16; }
.film-play { background: linear-gradient(0deg, #08101bc4, #08101b18 70%); color: var(--serp-text); font-weight: 550; }
.play-circle { border-color: #48bfe799; border-radius: 6px; background: #111c28e8; color: var(--serp-cyan); }
.film-play:hover .play-circle { background: #254558; color: var(--serp-cyan); transform: none; }
.play-subtitle { font: 9px var(--serp-font-data); letter-spacing: 1.5px; color: var(--serp-text-secondary); margin-top: 7px; }
.film-caption { font-size: 10px; color: var(--serp-text-muted); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-block: 1px solid var(--serp-border); margin-top: 39px; padding: 0; background: var(--serp-panel); }
.principles > span { justify-content: center; padding: 20px 10px; color: var(--serp-text-secondary); }
.principles > span + span { border-left: 1px solid var(--serp-border); }
.principle-icon { color: var(--serp-cyan); }
h2 { font-weight: 600; }
.section-intro > p { color: var(--serp-text-secondary); }
.underlined { color: var(--serp-cyan); border-color: #365569; }
.research-list { align-self: start; padding-top: 0; border: 1px solid var(--serp-border); border-radius: var(--serp-radius-panel); background: var(--serp-panel); overflow: hidden; }
.research-list article, .research-list article:first-child { padding: 25px 22px; grid-template-columns: 23px 1fr 65px; gap: 14px; border-bottom: 0; }
.research-list article + article { border-top: 1px solid var(--serp-border); }
.list-number { font: 10px var(--serp-font-data); color: var(--serp-blue); padding-top: 5px; }
.research-list h3 { font-weight: 550; }
.research-list p { color: var(--serp-text-secondary); }
.research-list svg { width: 65px; stroke: var(--serp-cyan); }
.research-list article:last-child svg { stroke: var(--serp-purple); }
.research-list .chart-floor { stroke: #677488; }
.research-note { background: #131b24; color: var(--serp-text-secondary); border: 1px solid var(--serp-border); border-left: 2px solid var(--serp-gold); border-radius: 4px; }
.research-note strong { color: var(--serp-text); font-weight: 550; }
.community-section { background: #111923; color: var(--serp-text); border-block: 1px solid var(--serp-border); }
.community-section:before { display: none; }
.community-heading .eyebrow { color: var(--serp-cyan); }
.community-heading > p, .community-details p { color: var(--serp-text-secondary); }
.community-details article { border-color: var(--serp-border); }
.detail-symbol { background: #1b2a38; border-color: #31495d; border-radius: 4px; color: var(--serp-blue); }
.community-details article:nth-child(2) .detail-symbol { color: var(--serp-cyan); }
.community-details article:nth-child(3) .detail-symbol { color: var(--serp-purple); }
.community-details h3 { font-weight: 550; }
.phase-label { font: 9px var(--serp-font-data); letter-spacing: .65px; color: var(--serp-gold); padding: 4px 7px; border: 1px solid #d1b07835; border-radius: 3px; }
.community-bottom { border-color: var(--serp-border); font-size: 11px; color: var(--serp-text-secondary); }
.light-dot { background: var(--serp-gold); border-radius: 1px; }
.product-heading > p { color: var(--serp-text-secondary); }
.product-grid article { background: var(--serp-panel); border-color: var(--serp-border); border-radius: var(--serp-radius-panel); }
.card-label { font: 9px var(--serp-font-data); letter-spacing: .6px; color: var(--serp-text-secondary); }
.development-tag { font: 9px var(--serp-font-data); color: var(--serp-gold); border-color: #d1b07835; border-radius: 3px; }
.signal-illustration, .terminal-visual { background: #0c131c; border: 1px solid var(--serp-border-subtle); border-radius: 4px; }
.signal-illustration, .terminal-visual { height: auto; aspect-ratio: 16 / 9; }
.terminal-visual > a { display: block; width: 100%; height: 100%; }
.terminal-visual img { object-fit: contain; object-position: center; }
.signal-illustration { background-image: linear-gradient(#40516614 1px, transparent 1px), linear-gradient(90deg,#40516614 1px,transparent 1px); background-size: 40px 40px; }
.gridline { stroke: #334354; }
.signal-line { stroke: var(--serp-cyan); }
.signal-illustration circle { fill: var(--serp-cyan); stroke: #0c131c; }
.signal-marker { stroke: var(--serp-purple); }
.illustration-label { font: 8px var(--serp-font-data); letter-spacing: .3px; color: var(--serp-text-muted); }
.image-caption { background: #101820f2; color: var(--serp-text-secondary); font: 8px var(--serp-font-data); letter-spacing: .3px; border-top: 1px solid var(--serp-border); }
.product-grid h3 { font-weight: 550; }
.product-grid p { color: var(--serp-text-secondary); }
.roadmap li { border-color: #344355; }
.roadmap-dot { background: #4f5c6d; border-color: var(--serp-bg); border-radius: 1px; }
.current .roadmap-dot { background: var(--serp-gold); box-shadow: 0 0 0 4px #d1b0780c; }
.roadmap-status { font: 9px var(--serp-font-data); letter-spacing: 1px; color: var(--serp-text-muted); }
.roadmap h3 { font-weight: 550; }
.roadmap p { color: var(--serp-text-secondary); }
.roadmap-footnote { color: var(--serp-text-muted); }
summary { font-weight: 500; }
summary > span { color: var(--serp-cyan); }
details p { color: var(--serp-text-secondary); }
.final-cta { background: var(--serp-panel); border-color: #354656; border-radius: var(--serp-radius-panel); position: relative; overflow: hidden; margin-top: 80px; }
.final-cta:before { content: ''; display: block; height: 2px; position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(90deg, transparent, var(--serp-cyan), var(--serp-purple), transparent); opacity: .7; }
.final-cta p { color: var(--serp-text-secondary); }
.cta-note, .footer-top > span, .site-footer > p, .footer-bottom { color: var(--serp-text-muted); }
.footer-top > a:last-child { color: var(--serp-cyan); }
.site-footer > p { font-size: 10px; }
.footer-bottom { font-family: var(--serp-font-data); }
.environment-section { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; padding-block: 60px; border-block: 1px solid var(--serp-border); }
.environment-section h2 { font-size: 32px; }
.environment-section > div > p { color: var(--serp-text-secondary); font-size: 14px; }
.environment-section > div > p + p { margin-top: 16px; }
.education-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.education-grid article { background: var(--serp-panel); border: 1px solid var(--serp-border); border-radius: var(--serp-radius-panel); padding: 25px; }
.education-grid h3 { font-size: 19px; letter-spacing: -.4px; line-height: 1.4; font-weight: 550; margin-top: 20px; }
.education-grid p { color: var(--serp-text-secondary); font-size: 12px; margin-top: 15px; }
.education-takeaway { display: block; font-size: 11px; color: var(--serp-cyan); padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--serp-border); }
.education-section { padding-bottom: 0; }
@media (max-width: 900px) {
  .brand-context { display: none; }
  .research-list article, .research-list article:first-child { grid-template-columns: 20px 1fr; padding: 22px 19px; }
  .card-heading { min-height: 45px; }
  .environment-section { gap: 35px; }
  .education-grid { gap: 12px; }
  .education-grid article { padding: 19px; }
}
@media (max-width: 600px) {
  .site-header { height: 76px; }
  .brand svg { width: 26px; height: 26px; }
  .hero { padding-top: 39px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .5px; }
  h1 { font-size: 40px; letter-spacing: -1.9px; }
  .hero-copy { font-size: 14px; }
  .hero-note { font-size: 10px; line-height: 1.7; }
  .watch-link { font-size: 12px; }
  .film-topline { height: 32px; font-size: 7px; letter-spacing: .25px; }
  .film-tag { font-size: 6px; letter-spacing: .15px; padding: 4px; }
  .film-play { font-size: 14px; }
  .play-subtitle { font-size: 7px; letter-spacing: .8px; }
  .film-caption { font-size: 10px; gap: 2px; }
  .principles { margin-top: 26px; padding: 0; }
  .principles > span { padding: 16px 8px; font-size: 10px; line-height: 1.5; }
  .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .research-list article, .research-list article:first-child { grid-template-columns: 19px 1fr 48px; padding: 20px 15px; gap: 10px; }
  .research-list svg { width: 48px; }
  .research-list p, .roadmap p { font-size: 12px; }
  .research-note, .community-bottom { font-size: 11px; }
  .phase-label { font-size: 8px; letter-spacing: .3px; }
  .card-heading { flex-wrap: wrap; min-height: 0; }
  .card-label, .development-tag { font-size: 8px; }
  .illustration-label, .image-caption { font-size: 7px; letter-spacing: 0; }
  .roadmap-footnote { font-size: 10px; }
  details p { font-size: 12px; }
  .final-cta .eyebrow { font-size: 8px; letter-spacing: .5px; }
  .final-cta { margin-top: 55px; }
  .signal-illustration, .terminal-visual { height: auto; }
  .cta-note { font-size: 10px; }
  .footer-top > span { font-size: 10px; }
  .footer-top > a:last-child { font-size: 11px; }
  .site-footer > p { font-size: 10px; }
  .environment-section { grid-template-columns: 1fr; gap: 24px; padding-block: 43px; }
  .environment-section h2 { font-size: 28px; }
  .environment-section > div > p { font-size: 13px; }
  .education-grid { grid-template-columns: 1fr; gap: 16px; }
  .education-grid article { padding: 23px; }
  .education-grid h3 { margin-top: 16px; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .3px; }
}

/* Selected SERP identity */
.brand-logo { display: block; width: 34px; height: 40px; object-fit: contain; flex: 0 0 auto; }
@media (max-width: 640px) { .brand-logo { width: 29px; height: 34px; } }

/* Persistent HTML video controls: pointer, touch and keyboard seeking. */
.film-controls{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#111820;border-top:1px solid var(--serp-border)}
.film-controls[hidden]{display:none}
.film-controls button{border:1px solid #354556;border-radius:4px;background:#17212c;color:var(--serp-text);font:500 11px var(--serp-font-ui);padding:7px 10px;min-height:34px;cursor:pointer;white-space:nowrap}
.film-controls button:hover{border-color:var(--serp-cyan);color:var(--serp-cyan)}
#video-toggle{min-width:58px}#video-sound{min-width:64px}
.film-progress{display:flex;align-items:center;gap:12px;flex:1;min-width:80px}
#video-seek{display:block;flex:1;min-width:40px;margin:0;height:30px;accent-color:var(--serp-cyan);cursor:pointer;touch-action:pan-y}
#video-time{color:var(--serp-text-secondary);font:11px var(--serp-font-ui);font-variant-numeric:tabular-nums;min-width:76px;white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.film-frame:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#090e14;width:100%;height:100%;border-radius:0}
.film-frame:fullscreen .video-stage{flex:1;min-height:0;aspect-ratio:auto}
.film-frame:fullscreen .film-controls{flex:none}
@media(max-width:600px){.film-controls{flex-wrap:wrap;gap:8px;padding:10px}.film-progress{order:-1;flex:1 0 100%}.film-controls button{padding:8px 10px;min-height:38px;font-size:10px}#video-fullscreen{margin-left:auto}#video-sound{min-width:0}#video-toggle{min-width:54px}}
.film-controls select { color: inherit; background: #15202a; border: 1px solid #34424e; border-radius: 3px; padding: 9px 5px; font: inherit; font-size: 12px; }
@media(max-width:600px){.film-controls{gap:5px}.film-controls button{padding:8px 6px}#video-toggle{min-width:42px}.film-controls select{font-size:10px;width:52px;padding:8px 3px;min-height:38px}}