/* Homepage launch page — ported from planning/landing-page-sudo-launch.html.
   All selectors scoped under .hp so the mockup's generic selectors (section,
   body, .container, .site-nav) don't collide with the global theme. */
.hp *,.hp *::before,.hp *::after{margin:0;padding:0;box-sizing:border-box}/* ── Design Tokens ── */.hp{/* Colors */
  --bg: #020408;
  --surface: #080c14;
  --cyan: #00d4ff;
  --green: #22c55e;
  --amber: #eab308;
  --rose: #ef4444;
  --gray: #5a7a96;
  --mid: #4a6078;
  --light: #8098b0;
  --white: #d4e0ec;

  /* Typography */
  --display: 'Bungee Hairline', sans-serif;
  --heading: 'Bruno Ace SC', sans-serif;
  --body: 'Inter', Arial, sans-serif;
  --mono: 'Courier New', monospace;

  /* Borders */
  --border-subtle: 1px solid rgba(0,212,255,.06);
  --border-hover: 1px solid rgba(0,212,255,.15);
  --border-active: 1px solid var(--cyan);

  /* Shadows */
  --glow-sm: 0 0 15px rgba(0,212,255,.15);
  --glow-md: 0 0 30px rgba(0,212,255,.03);
  --inset-glow: inset 0 0 20px rgba(0,212,255,.05);}/* ── Base ── */html{scroll-behavior: smooth}.hp{font-family: var(--body);
  background: var(--bg);
  color: var(--light);
  overflow-x: hidden;
  line-height: 1.7;}/* ── Typography ── */.hp .code-label{font-family: var(--heading);
  font-size: .65rem;
  color: var(--cyan);
  margin-bottom: 1rem;
  opacity: .75;
  letter-spacing: .08em;}.hp .sec-h{font-family: var(--heading);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  color: var(--white);
  line-height: 1.2;
  margin-bottom: .5rem;
  letter-spacing: .02em;}.hp .sec-p{font-size: .9rem;
  color: var(--mid);
  max-width: 480px;
  margin-bottom: 2.5rem;
  line-height: 1.75;}/* ── Pitch Row ── */.hp .pitch-row{display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;}.hp .pitch-text .sec-p:last-child{margin-bottom: 0;}.hp .pitch-term{width: 100%;}@media (max-width: 768px){.hp .pitch-row{grid-template-columns: 1fr;}}/* ── Layout Utilities ── */.hp section{position: relative;
  z-index: 1;
  padding: clamp(50px, 7vw, 90px) clamp(2rem, 6vw, 8rem);}.hp .container{max-width: 1080px;
  margin: 0 auto;}/* ── Footer ── */.hp .foot{display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem;
  font-family: var(--heading);
  font-size: .55rem;
  color: var(--gray);
  border-top: 1px solid rgba(0,212,255,.04);
  position: relative;
  z-index: 1;
  letter-spacing: .06em;}.hp .foot a{color: var(--mid);
  text-decoration: none;
  transition: color .2s;}.hp .foot a:hover{color: var(--cyan);}/* ── Responsive Breakpoints ── */@media (max-width: 900px){/* Tablet adjustments handled per-component */}@media (max-width: 600px){/* Small tablet */}@media (max-width: 520px){/* Mobile */}@media (max-width: 480px){/* Small mobile */}/* ══════════════════════════════════════════════════════
   Background — Hex warp canvas styles
   ══════════════════════════════════════════════════════ */.hp #bg{position: fixed;
  inset: 0;
  z-index: 0;}/* ══════════════════════════════════════════════════════
   Animations — .reveal, transitions, keyframes
   ══════════════════════════════════════════════════════ *//* ── Scroll Reveal ── */.hp .reveal{opacity: 0;
  transform: translateY(16px);
  transition: all .55s cubic-bezier(.25, .46, .45, .94);}.hp .reveal.visible{opacity: 1;
  transform: none;}/* ── SPA Loading State ── */.hp .sk-partial-loading [data-sk-partial="content"]{opacity: .6;
  transition: opacity .15s;}/* ── Pulse ── */@keyframes pulse{0%, 100%{opacity: 1}50%{opacity: .3}}/* ── Hero ── */.hp .hero{min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 7rem 2rem 8rem;
  text-align: center;}.hp .hero-chip{display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 100px;
  font-family: var(--heading);
  font-size: .6rem;
  background: rgba(0,212,255,.04);
  border: 1px solid rgba(0,212,255,.12);
  color: var(--cyan);
  margin-bottom: 2.5rem;
  letter-spacing: .08em;}.hp .hero-chip .dot{width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2s infinite;}.hp .hero-logo{font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: 2.5rem;
  letter-spacing: .15em;
  text-shadow: 0 0 40px rgba(0,212,255,.15);}.hp .hero-logo .dev{font-family: var(--heading);
  color: var(--cyan);
  letter-spacing: .06em;
  font-size: .8em;
  text-shadow: 0 0 30px rgba(0,212,255,.3);
  vertical-align: 0.14em;}.hp .hero-sub{font-family: var(--heading); font-size: clamp(.75rem, 1.3vw, .9rem); color: var(--mid); margin-bottom: 3.5rem; letter-spacing: .06em}.hp .hero-p{font-size: 1rem; color: var(--mid); max-width: 480px; margin: 0 auto 4rem; line-height: 1.8}.hp .hero-p strong{color: var(--white); font-weight: 600}.hp .hero-btns{display: flex; gap: 12px; justify-content: center; flex-wrap: wrap}.hp .hero-proof{display: flex; gap: 2.5rem; margin-top: 4rem; flex-wrap: wrap; justify-content: center}.hp .hp .n{font-family: var(--heading); font-size: .9rem; color: var(--white); letter-spacing: .04em; text-shadow: 0 0 10px rgba(0,212,255,.1)}.hp .hp .l{font-size: .72rem; color: var(--gray); margin-top: 2px}/* ── Stats Bar ── */.hp .stats{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding: 3rem 0; border-top: 1px solid rgba(0,212,255,.06); border-bottom: 1px solid rgba(0,212,255,.06)}.hp .stat{text-align: center; flex: 1; min-width: 100px}.hp .stat .num{font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); color: var(--white); line-height: 1; text-shadow: 0 0 20px rgba(0,212,255,.1)}.hp .stat .num .u{font-family: var(--heading); color: var(--cyan); font-size: .45em}.hp .stat .lbl{font-size: .72rem; color: var(--gray); margin-top: .15rem}/* ── Quotes ── */.hp .quotes{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2rem}.hp .q{padding: 2rem; background: var(--surface); border: 1px solid rgba(0,212,255,.04); border-left: 2px solid transparent; transition: all .3s}.hp .q:hover{border-left-color: var(--cyan); box-shadow: inset 0 0 15px rgba(0,212,255,.02)}.hp .q blockquote{font-size: .85rem; color: var(--light); line-height: 1.8; margin-bottom: 1.25rem}.hp .q .who{font-size: .7rem}.hp .q .nm{color: var(--white); font-weight: 600}.hp .q .rl{color: var(--gray)}/* ── Bytes Grid ── */.hp .bytes-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; max-width: 600px}.hp .bg-item{display: flex; align-items: center; gap: 14px; padding: 1.15rem 1.5rem; background: var(--surface); border: 1px solid rgba(0,212,255,.04); transition: all .2s}.hp .bg-item:hover{border-color: rgba(0,212,255,.15); box-shadow: inset 0 0 12px rgba(0,212,255,.03)}.hp .bg-item .pts{font-family: var(--heading); font-size: .82rem; color: var(--cyan); min-width: 44px; letter-spacing: .03em; text-shadow: 0 0 6px rgba(0,212,255,.2)}.hp .bg-item .nm{font-size: .85rem; font-weight: 600; color: var(--white)}.hp .bg-item .ds{font-size: .7rem; color: var(--gray); margin-top: 1px}/* ── CTA ── */.hp .cta{text-align: center; padding: clamp(70px, 10vw, 130px) 2rem; position: relative; z-index: 1}.hp .cta-h{font-family: var(--display); font-size: clamp(1.8rem, 4.5vw, 3.5rem); color: var(--white); line-height: 1.1; margin-bottom: 1rem; letter-spacing: .08em; text-shadow: 0 0 30px rgba(0,212,255,.1)}.hp .cta-h2{font-family: var(--heading); font-size: clamp(.85rem, 1.5vw, 1rem); color: var(--light); max-width: 520px; margin: 0 auto 2rem; line-height: 1.8; letter-spacing: .02em}/* ── Responsive ── */@media (max-width: 900px){.hp .quotes{grid-template-columns: 1fr}.hp .bytes-grid{grid-template-columns: 1fr}}@media (max-width: 600px){.hp .stats{flex-direction: column; align-items: center}}/* ══════════════════════════════════════════════════════
   Buttons — .btn-glow, .btn-ghost, .btn-start, .btn-follow
   ══════════════════════════════════════════════════════ */.hp .btn-glow{display: inline-block;
  padding: 13px 34px;
  font-family: var(--heading);
  font-size: .7rem;
  letter-spacing: .06em;
  background: transparent;
  color: var(--cyan);
  border: 1.5px solid var(--cyan);
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0,212,255,.15), inset 0 0 15px rgba(0,212,255,.05);
  transition: all .3s;
  text-decoration: none;}.hp .btn-glow:hover{background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 30px rgba(0,212,255,.3);}.hp .btn-ghost{display: inline-block;
  padding: 13px 34px;
  font-family: var(--heading);
  font-size: .7rem;
  letter-spacing: .06em;
  background: transparent;
  color: var(--mid);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;}.hp .btn-ghost:hover{border-color: rgba(0,212,255,.2);
  color: var(--light);}.hp .btn-start{display: inline-block;
  padding: 11px 30px;
  font-family: var(--heading);
  font-size: .65rem;
  letter-spacing: .06em;
  background: transparent;
  color: var(--cyan);
  border: 1.5px solid var(--cyan);
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0,212,255,.15), inset 0 0 15px rgba(0,212,255,.05);
  transition: all .3s;
  text-decoration: none;}.hp .btn-start:hover{background: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 30px rgba(0,212,255,.3);}.hp .btn-follow{padding: 8px 20px;
  font-family: var(--heading);
  font-size: .6rem;
  letter-spacing: .06em;
  background: transparent;
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,.3);
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;}.hp .btn-follow:hover{background: rgba(0,212,255,.08);
  border-color: var(--cyan);}.hp .btn-rerun{padding: 6px 18px;
  font-family: var(--heading);
  font-size: .55rem;
  letter-spacing: .06em;
  background: transparent;
  color: var(--cyan);
  border: 1px solid rgba(0,212,255,.3);
  cursor: pointer;
  transition: all .25s;
  margin-left: auto;}.hp .btn-rerun:hover{background: rgba(0,212,255,.08);
  border-color: var(--cyan);}/* Responsive */@media (max-width: 640px){.hp .btn-glow,.hp .btn-ghost{padding: 11px 22px; font-size: .62rem}}/* ══════════════════════════════════════════════════════
   Cards — .dash-card, .stat-card, .pillar, .related-card, .repo-card, etc.
   ══════════════════════════════════════════════════════ *//* ── Pillars ── */.hp .pillars{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px}.hp .pillar{padding: 2.25rem 2rem;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  border-top: 2px solid rgba(0,212,255,.08);
  transition: all .3s;
  position: relative;}.hp .pillar::after{content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
  box-shadow: inset 0 0 20px rgba(0,212,255,.05);}.hp .pillar:hover{border-color: rgba(0,212,255,.2); border-top-color: var(--cyan)}.hp .pillar:hover::after{opacity: 1}.hp .pillar .idx{font-family: var(--heading); font-size: .55rem; color: var(--cyan); margin-bottom: 1rem; letter-spacing: .15em}.hp .pillar h3{font-family: var(--heading); font-size: .85rem; color: var(--white); margin-bottom: .5rem; letter-spacing: .03em}.hp .pillar p{font-size: .82rem; color: var(--mid); line-height: 1.75}.hp .pillar.coming{overflow: hidden}.hp .pillar.coming::before{content: 'COMING';
  position: absolute;
  top: 12px;
  left: -26px;
  width: 90px;
  text-align: center;
  font-family: var(--heading);
  font-size: .4rem;
  letter-spacing: .1em;
  color: var(--bg);
  background: var(--cyan);
  padding: 2px 0;
  transform: rotate(-45deg);
  z-index: 1;
  box-shadow: 0 0 10px rgba(0,212,255,.3);}/* ── Dashboard Card ── */.hp .dash-card{background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  margin-bottom: 24px;
  transition: all .3s;
  position: relative;}.hp .dash-card:hover{border-color: rgba(0,212,255,.12)}.hp .dash-card-header{padding: 16px 20px 0}.hp .dash-card-body{padding: 16px 20px 20px}/* ── Stat Card ── */.hp .stat-card{background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  padding: 22px 20px;
  transition: all .3s;
  position: relative;}.hp .stat-card::after{content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
  box-shadow: inset 0 0 20px rgba(0,212,255,.05);}.hp .stat-card:hover::after{opacity: 1}.hp .stat-card:hover{border-color: rgba(0,212,255,.2)}.hp .stat-card .stat-value{font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 0 15px rgba(0,212,255,.1);}.hp .stat-card .stat-value .unit{font-family: var(--heading);
  color: var(--cyan);
  font-size: .5em;
  margin-left: 3px;}.hp .stat-card .stat-label{font-family: var(--heading);
  font-size: .58rem;
  color: var(--gray);
  letter-spacing: .08em;
  text-transform: uppercase;}/* ── Related Card ── */.hp .related-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px}.hp .related-card{padding: 1.75rem;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  border-top: 2px solid rgba(0,212,255,.06);
  transition: all .3s;
  cursor: pointer;
  text-decoration: none;
  display: block;}.hp .related-card:hover{border-top-color: var(--cyan);
  border-color: rgba(0,212,255,.18);
  box-shadow: inset 0 0 15px rgba(0,212,255,.03);}.hp .related-card .r-tag{font-family: var(--heading); font-size: .5rem; color: var(--cyan); letter-spacing: .1em; margin-bottom: .75rem; opacity: .7}.hp .related-card .r-title{font-family: var(--heading); font-size: .78rem; color: var(--white); letter-spacing: .02em; line-height: 1.5; margin-bottom: .75rem}.hp .related-card .r-meta{font-size: .7rem; color: var(--gray); letter-spacing: .02em}.hp .related-card .r-desc{font-size: .7rem; color: var(--gray); line-height: 1.6}/* ── Repo Card ── */.hp .repo-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 24px}.hp .repo-card{padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  transition: all .3s;
  cursor: pointer;}.hp .repo-card:hover{border-color: rgba(0,212,255,.18); box-shadow: inset 0 0 15px rgba(0,212,255,.03)}.hp .repo-card-header{display: flex; align-items: center; gap: 10px; margin-bottom: .5rem}.hp .repo-name{font-family: var(--heading); font-size: .7rem; color: var(--white); letter-spacing: .03em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}.hp .repo-status{font-family: var(--heading); font-size: .45rem; letter-spacing: .08em; padding: 2px 8px; border: 1px solid; flex-shrink: 0}.hp .repo-status.passing{color: var(--green); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.06)}.hp .repo-status.failing{color: var(--rose); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.06)}.hp .repo-status.running{color: var(--amber); border-color: rgba(234,179,8,.35); background: rgba(234,179,8,.06)}.hp .repo-detail{font-size: .7rem; color: var(--mid); line-height: 1.5; margin-bottom: .5rem}.hp .repo-detail code{font-family: var(--mono); font-size: .66rem; color: var(--cyan); background: rgba(0,212,255,.04); padding: 0 4px}.hp .repo-detail .branch{color: var(--amber)}.hp .repo-detail .duration{color: var(--gray); margin-left: 4px}.hp .repo-bar-row{display: flex; align-items: center; gap: 8px}.hp .repo-bar-label{font-family: var(--heading); font-size: .45rem; color: var(--gray); letter-spacing: .06em; white-space: nowrap}.hp .repo-bar{flex: 1; height: 3px; background: rgba(0,212,255,.06); display: flex}.hp .repo-bar .bar-pass{height: 100%; background: var(--green); opacity: .7}.hp .repo-bar .bar-fail{height: 100%; background: var(--rose); opacity: .7}.hp .repo-bar-pct{font-family: var(--heading); font-size: .48rem; color: var(--green); letter-spacing: .04em; min-width: 26px; text-align: right}/* ── Metric Card ── */.hp .metric-card{background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  padding: 18px 16px;
  transition: all .3s;
  position: relative;
  text-align: center;}.hp .metric-card::after{content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; box-shadow: inset 0 0 20px rgba(0,212,255,.05)}.hp .metric-card:hover::after{opacity: 1}.hp .metric-card:hover{border-color: rgba(0,212,255,.2)}.hp .metric-card .m-value{font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--white); line-height: 1; margin-bottom: 3px; text-shadow: 0 0 15px rgba(0,212,255,.1)}.hp .metric-card .m-value .unit{font-family: var(--heading); color: var(--cyan); font-size: .5em; margin-left: 2px}.hp .metric-card .m-value.green{color: var(--green); text-shadow: 0 0 15px rgba(34,197,94,.15)}.hp .metric-card .m-value.amber{color: var(--amber); text-shadow: 0 0 15px rgba(234,179,8,.15)}.hp .metric-card .m-value.rose{color: var(--rose); text-shadow: 0 0 15px rgba(239,68,68,.15)}.hp .metric-card .m-label{font-family: var(--heading); font-size: .5rem; color: var(--gray); letter-spacing: .08em; text-transform: uppercase}/* ── Source Card ── */.hp .source-card{padding: 1.25rem;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  transition: all .3s;
  cursor: pointer;}.hp .source-card:hover{border-color: rgba(0,212,255,.18)}.hp .source-card .source-title{font-size: .82rem; color: var(--white); font-weight: 500; margin-bottom: .4rem; line-height: 1.4}.hp .source-card .source-url{font-size: .68rem; color: var(--cyan); margin-bottom: .6rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}.hp .source-card .relevance-bar{height: 3px; background: rgba(0,212,255,.08); margin-top: .5rem}.hp .source-card .relevance-fill{height: 100%; background: var(--cyan); box-shadow: 0 0 6px rgba(0,212,255,.25)}.hp .source-card .relevance-label{display: flex; justify-content: space-between; margin-top: .3rem}.hp .source-card .relevance-label span{font-family: var(--heading); font-size: .48rem; color: var(--gray); letter-spacing: .06em}/* ── Responsive ── */@media (max-width: 900px){.hp .pillars,.hp .related-grid,.hp .repo-grid{grid-template-columns: 1fr}}/* ══════════════════════════════════════════════════════
   Nav — Navbar, TOC sidebar, quick links, breadcrumb
   ══════════════════════════════════════════════════════ *//* ── Site Navbar ── */.hp .site-nav{position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: rgba(2,4,8,.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,212,255,.06);}.hp .nav-logo{font-family: var(--display);
  font-size: 1.3rem;
  color: var(--white);
  letter-spacing: .12em;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;}.hp .nav-logo .dev{font-family: var(--heading);
  color: var(--cyan);
  font-size: .8em;
  letter-spacing: .06em;
  vertical-align: 0.14em;}.hp .nav-links{display: flex;
  align-items: center;
  gap: 8px;}.hp .nav-links a{color: var(--gray);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid transparent;
  transition: all .2s;
  white-space: nowrap;
  font-family: var(--heading);
  font-size: .62rem;
  letter-spacing: .05em;}.hp .nav-links a:hover{color: var(--cyan); border-color: rgba(0,212,255,.25)}.hp .nav-links a.active{color: var(--cyan); border-color: var(--cyan); background: rgba(0,212,255,.06)}/* ── Dashboard Topbar ── */.hp .dash-topbar{display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 28px;
  border-bottom: 1px solid rgba(0,212,255,.06);
  margin-bottom: 28px;}.hp .dash-logo{font-family: var(--display);
  font-size: 1.3rem;
  color: var(--white);
  letter-spacing: .12em;
  text-decoration: none;}.hp .dash-logo .dev{font-family: var(--heading); color: var(--cyan); font-size: .8em; letter-spacing: .06em; vertical-align: 0.14em}.hp .dash-user{display: flex; align-items: center; gap: 14px}.hp .dash-bell{position: relative; cursor: pointer; color: var(--mid); transition: color .2s}.hp .dash-bell:hover{color: var(--cyan)}.hp .dash-bell svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round}.hp .dash-bell-badge{position: absolute; top: -4px; right: -5px; width: 16px; height: 16px; background: var(--rose); color: #fff; font-size: .55rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--bg)}.hp .dash-avatar{width: 34px; height: 34px; background: rgba(0,212,255,.12); border: 1.5px solid rgba(0,212,255,.25); display: flex; align-items: center; justify-content: center; font-family: var(--heading); font-size: .65rem; color: var(--cyan); letter-spacing: .04em}.hp .dash-greeting{font-family: var(--heading); font-size: .72rem; color: var(--white); letter-spacing: .04em}.hp .dash-greeting span{color: var(--cyan)}/* ── Quick Links ── */.hp .quick-links{display: grid; grid-template-columns: 1fr 1fr; gap: 1px}.hp .quick-link{display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0,212,255,.02);
  border: 1px solid rgba(0,212,255,.04);
  font-family: var(--heading);
  font-size: .62rem;
  color: var(--mid);
  letter-spacing: .05em;
  text-decoration: none;
  transition: all .2s;}.hp .quick-link:hover{color: var(--cyan); border-color: rgba(0,212,255,.2); background: rgba(0,212,255,.04)}.hp .quick-link svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0}/* ── TOC Sidebar ── */.hp .toc-sidebar{position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto}.hp .toc-list{list-style: none}.hp .toc-item{display: block;
  padding: 8px 14px;
  font-family: var(--heading);
  font-size: .56rem;
  color: var(--gray);
  letter-spacing: .05em;
  text-decoration: none;
  border-left: 2px solid rgba(0,212,255,.06);
  transition: all .2s;
  cursor: pointer;}.hp .toc-item:hover{color: var(--light); border-left-color: rgba(0,212,255,.25)}.hp .toc-item.active{color: var(--cyan); border-left-color: var(--cyan); background: rgba(0,212,255,.03)}/* ── Breadcrumb ── */.hp .breadcrumb{font-family: var(--heading);
  font-size: .6rem;
  color: var(--gray);
  letter-spacing: .06em;
  margin-bottom: 1.25rem;}.hp .breadcrumb a{color: var(--cyan); text-decoration: none; transition: color .2s}.hp .breadcrumb a:hover{color: var(--white)}.hp .breadcrumb .sep{margin: 0 .5rem; opacity: .5}/* ── Mobile Nav Toggle ── */.hp .nav-toggle{display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 4px;}.hp .nav-toggle span{display: block;
  width: 20px;
  height: 2px;
  background: var(--gray);
  transition: all .25s;}.hp .nav-toggle[aria-expanded="true"] span:nth-child(1){transform: translateY(6px) rotate(45deg);}.hp .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity: 0;}.hp .nav-toggle[aria-expanded="true"] span:nth-child(3){transform: translateY(-6px) rotate(-45deg);}/* ── Responsive ── */@media (max-width: 900px){.hp .quick-links{grid-template-columns: 1fr}.hp .toc-sidebar{display: none}}@media (max-width: 520px){.hp .dash-topbar{flex-direction: column; gap: 14px; text-align: center}}@media (max-width: 600px){.hp .site-nav{flex-wrap: wrap;}.hp .nav-toggle{display: flex;}.hp .nav-links{display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 8px;}.hp .nav-links.open{display: flex;}.hp .nav-links a{padding: 10px 0; border: none;}.hp .nav-links .sk-connection-status{display: none;}}/* ══════════════════════════════════════════════════════
   Terminal — .term, .term-bar, .term-body, syntax highlighting
   ══════════════════════════════════════════════════════ */.hp .term{background: var(--surface);
  overflow: hidden;
  border: 1px solid rgba(0,212,255,.1);
  box-shadow: 0 0 30px rgba(0,212,255,.03);}.hp .term-bar{display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(0,212,255,.06);}.hp .term-bar .p{margin-left: auto;
  font-family: var(--heading);
  font-size: .55rem;
  color: var(--gray);
  letter-spacing: .05em;}.hp .term-bar .lang-badge{font-family: var(--heading);
  font-size: .5rem;
  color: var(--cyan);
  letter-spacing: .06em;
  padding: 2px 8px;
  border: 1px solid rgba(0,212,255,.2);
  background: rgba(0,212,255,.04);}.hp .term-body{padding: 1.5rem 1.75rem;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 2.2;
  overflow-x: auto;}.hp .term-info{display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0,212,255,.06);}.hp .ti{padding: 1rem;
  text-align: center;
  border-right: 1px solid rgba(0,212,255,.04);}.hp .ti:last-child{border-right: none}.hp .ti strong{display: block;
  font-family: var(--heading);
  font-size: .8rem;
  color: var(--cyan);
  margin-bottom: 1px;
  letter-spacing: .03em;
  text-shadow: 0 0 8px rgba(0,212,255,.2);}.hp .ti span{font-size: .6rem;
  color: var(--gray);
  letter-spacing: .08em;
  text-transform: uppercase;}/* ── Syntax Highlighting ── */.hp .cm{color: var(--mid)}.hp .kw{color: var(--amber)}.hp .fn{color: var(--cyan)}.hp .st{color: var(--green)}.hp .num{color: var(--rose)}.hp .op{color: var(--mid)}.hp .comment{color: #2a4a3e; font-style: italic}/* ══════════════════════════════════════════════════════
   Status — SSE connection status indicator
   ══════════════════════════════════════════════════════ */.hp .sk-connection-status{display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity .3s;
  font-family: var(--heading);
  font-size: .55rem;
  letter-spacing: .06em;}/* Show when JS sets a status class */.hp .sk-connection-status.sk-status--online,.hp .sk-connection-status.sk-status--offline,.hp .sk-connection-status.sk-status--linking{opacity: 1;}.hp .sk-status-dot{width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray);
  transition: all .3s;}.hp .sk-status-label{color: var(--gray);
  transition: color .3s;}/* ── Online ── */.hp .sk-status--online .sk-status-dot{background: var(--green);
  box-shadow: 0 0 8px var(--green);}.hp .sk-status--online .sk-status-label{color: var(--green);}/* ── Offline ── */.hp .sk-status--offline .sk-status-dot{background: var(--rose);}.hp .sk-status--offline .sk-status-label{color: var(--rose);}/* ── Linking (connecting/reconnecting) ── */.hp .sk-status--linking .sk-status-dot{background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: status-pulse 2s infinite;}.hp .sk-status--linking .sk-status-label{color: var(--amber);}@keyframes status-pulse{0%, 100%{opacity: 1}50%{opacity: .3}}/* ══════════════════════════════════════════════════════
   Smarter Dev — Landing Page
   Hero "weight" demo, Lab terminal demo, roadmap, tiers
   ══════════════════════════════════════════════════════ *//* ── Generic section eyebrow / lede ── */.hp .eyebrow{font-family: var(--heading);
  font-size: .6rem;
  color: var(--cyan);
  letter-spacing: .18em;
  opacity: .8;
  margin-bottom: 1.1rem;
  text-transform: uppercase;}.hp .section-narrow{max-width: 760px; margin: 0 auto;}.hp .section-mid{max-width: 940px; margin: 0 auto;}.hp .prose-col{max-width: 940px; margin: 0 auto; text-align: center;}.hp .sec-intro{max-width: 940px; margin: 0 auto; text-align: center;}.hp .prose-col .lede,.hp .sec-intro .lede{max-width: 680px; margin-left: auto; margin-right: auto;}.hp .big-h{font-family: var(--display);
  font-weight: 100;
  color: var(--white);
  letter-spacing: .04em;
  line-height: 1.08;}.hp .lede{font-size: 1.02rem;
  color: var(--light);
  line-height: 1.85;}.hp .lede.muted{color: var(--mid);}.hp .lede strong{color: var(--white); font-weight: 600;}.hp .lede + .lede{margin-top: 1.4rem;}.hp .text-link{font-family: var(--heading);
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,212,255,.3);
  padding-bottom: 3px;
  transition: all .2s;}.hp .text-link:hover{color: var(--white); border-color: var(--cyan);}.hp .text-link .arr{display: inline-block; margin-left: 6px; transition: transform .2s;}.hp .text-link:hover .arr{transform: translateX(4px);}/* ════════════════════════════════════════
   HERO
   ════════════════════════════════════════ */.hp .hero-wrap{min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 116px;
  padding-bottom: 52px;}@media (max-height: 860px), (max-width: 940px){.hp .hero-wrap{min-height: auto;}}/* ── top-centered pitch ── */.hp .hero-pitch{display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  max-width: 940px; margin: 0 auto;
  padding: 0 0 2.4rem;}.hp .status-live{display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 30px; border: none; padding: 0; background: none; border-radius: 0;
  font-family: var(--heading); font-size: .56rem; letter-spacing: .1em; color: var(--cyan);}.hp .status-live .pulse{width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 2s infinite;}.hp .hero-headline{font-family: var(--display);
  font-weight: 100;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  color: var(--white);
  line-height: 1.12;
  letter-spacing: .03em;
  margin: 0 auto 1.9rem;
  text-wrap: balance;}.hp .hero-headline .accent{color: var(--cyan);
  text-shadow: 0 0 34px rgba(0,212,255,.35);}.hp .hero-body{font-size: 1.02rem;
  color: var(--mid);
  line-height: 1.9;
  max-width: 660px;
  margin: 0 auto;
  text-wrap: pretty;}.hp .hero-body strong{color: var(--light); font-weight: 600;}/* ── two path cards, pinned bottom — glow, not fill ── */.hp .hero-paths{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 1100px; width: 100%; margin: 0 auto;}.hp .hero-path{position: relative;
  display: flex; flex-direction: column;
  padding: 26px 28px 26px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.018), transparent 60%),
    var(--surface);
  border: 1px solid rgba(120,150,180,.14);
  transition: border-color .3s, box-shadow .3s, transform .3s;}.hp .hero-path::before{content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  opacity: .55; transition: opacity .3s;}.hp .hero-path.sudo{box-shadow: 0 0 44px rgba(239,68,68,.05), inset 0 0 26px rgba(239,68,68,.02);}.hp .hero-path.sudo::before{background: linear-gradient(90deg, var(--rose), transparent 80%);}.hp .hero-path.explore{box-shadow: 0 0 44px rgba(0,212,255,.05), inset 0 0 26px rgba(0,212,255,.02);}.hp .hero-path.explore::before{background: linear-gradient(90deg, var(--cyan), transparent 80%);}.hp .hero-path.sudo:hover{border-color: rgba(239,68,68,.4);
  box-shadow: 0 0 60px rgba(239,68,68,.13), inset 0 0 30px rgba(239,68,68,.04);
  transform: translateY(-2px);}.hp .hero-path.explore:hover{border-color: rgba(0,212,255,.4);
  box-shadow: 0 0 60px rgba(0,212,255,.13), inset 0 0 30px rgba(0,212,255,.04);
  transform: translateY(-2px);}.hp .hero-path:hover::before{opacity: 1;}.hp .hp-top{display: flex; align-items: center; gap: 12px; margin-bottom: 14px;}.hp .hp-kicker{font-family: var(--heading); font-size: .44rem; letter-spacing: .12em;
  padding: 3px 8px; border: 1px solid currentColor; white-space: nowrap;}.hp .hero-path.sudo .hp-kicker{color: rgba(239,68,68,.85);}.hp .hero-path.explore .hp-kicker{color: rgba(0,212,255,.85);}.hp .hp-head{font-family: var(--display); font-weight: 100;
  font-size: 1.7rem; color: var(--white); letter-spacing: .02em; line-height: 1;}.hp .hero-path.sudo .hp-head{text-shadow: 0 0 26px rgba(239,68,68,.28);}.hp .hero-path.explore .hp-head{text-shadow: 0 0 26px rgba(0,212,255,.28);}.hp .hp-body{font-size: .85rem; color: var(--mid); line-height: 1.72;
  margin: 0 0 22px; text-wrap: pretty; flex: 1;}.hp .hp-list{list-style: none; margin: 0 0 22px; padding: 0; flex: 1;
  display: flex; flex-direction: column; gap: 10px;}.hp .hp-list li{position: relative; padding-left: 20px;
  font-size: .82rem; color: var(--mid); line-height: 1.5;}.hp .hp-list li::before{content: ''; position: absolute; left: 2px; top: .52em;
  width: 5px; height: 5px; transform: rotate(45deg);}.hp .hero-path.sudo .hp-list li::before{background: var(--rose); box-shadow: 0 0 7px rgba(239,68,68,.6);}.hp .hero-path.explore .hp-list li::before{background: var(--cyan); box-shadow: 0 0 7px rgba(0,212,255,.6);}.hp .hp-btn{align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--heading); font-size: .6rem; letter-spacing: .08em;
  padding: 11px 22px; text-decoration: none;
  border: 1px solid; background: transparent;
  transition: all .25s;}.hp .hp-btn .hp-arr{transition: transform .25s;}.hp .hp-btn:hover .hp-arr{transform: translateX(4px);}.hp .hero-path.sudo .hp-btn{color: var(--rose); border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 16px rgba(239,68,68,.08), inset 0 0 14px rgba(239,68,68,.03);}.hp .hero-path.sudo .hp-btn:hover{background: rgba(239,68,68,.1); border-color: var(--rose);
  box-shadow: 0 0 26px rgba(239,68,68,.22);}.hp .hero-path.explore .hp-btn{color: var(--cyan); border-color: rgba(0,212,255,.45);
  box-shadow: 0 0 16px rgba(0,212,255,.08), inset 0 0 14px rgba(0,212,255,.03);}.hp .hero-path.explore .hp-btn:hover{background: rgba(0,212,255,.1); border-color: var(--cyan);
  box-shadow: 0 0 26px rgba(0,212,255,.22);}@media (max-width: 760px){.hp .hero-paths{grid-template-columns: 1fr; gap: 16px;}}/* ════════════════════════════════════════
   SYSTEM MAP (shared by hero demo + lab)
   ════════════════════════════════════════ */.hp .weight-demo{background: var(--surface);
  border: 1px solid rgba(0,212,255,.12);
  box-shadow: 0 0 50px rgba(0,212,255,.05), inset 0 0 30px rgba(0,212,255,.02);
  position: relative;}.hp .weight-head{display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: rgba(0,0,0,.32);
  border-bottom: 1px solid rgba(0,212,255,.08);}.hp .weight-head .dot{width: 9px; height: 9px; border-radius: 50%; background: rgba(0,212,255,.25);}.hp .weight-head .dot.a{background: rgba(239,68,68,.5);}.hp .weight-head .dot.b{background: rgba(234,179,8,.5);}.hp .weight-head .dot.c{background: rgba(34,197,94,.5);}.hp .weight-head .label{margin-left: auto;
  font-family: var(--heading);
  font-size: .5rem;
  letter-spacing: .1em;
  color: var(--gray);}.hp .weight-prompt{padding: 16px 20px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--light);
  border-bottom: 1px solid rgba(0,212,255,.06);}.hp .weight-prompt .tag{font-family: var(--mono);
  font-size: .66rem;
  color: var(--cyan);
  display: block;
  margin-bottom: 5px;
  letter-spacing: .02em;
  opacity: .85;}/* canvas / stage */.hp .map-stage{position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,212,255,.04), transparent 60%);}.hp .map-stage svg.edges{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;}.hp .map-stage .edge{stroke: rgba(0,212,255,.18); stroke-width: 1.4; fill: none; transition: stroke .4s, stroke-width .4s;}.hp .map-stage .edge.faint{stroke: rgba(90,122,150,.22); stroke-dasharray: 4 5;}.hp .map-stage .edge.hot{stroke: var(--rose); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(239,68,68,.5));}.hp .map-stage .edge.cool{stroke: var(--green); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(34,197,94,.4));}.hp .node{position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(0,212,255,.22);
  background: rgba(8,12,20,.9);
  padding: 11px 4px;
  width: 118px;
  text-align: center;
  cursor: pointer;
  transition: all .22s;
  user-select: none;}.hp .node .nm{font-family: var(--heading);
  font-size: .56rem;
  letter-spacing: .06em;
  color: var(--light);
  display: block;}.hp .node .sub{font-family: var(--mono);
  font-size: .54rem;
  color: var(--gray);
  margin-top: 3px;
  letter-spacing: .02em;}.hp .node:hover{border-color: rgba(0,212,255,.5);}.hp .node.selected{border-color: var(--cyan);
  background: rgba(0,212,255,.1);
  box-shadow: 0 0 18px rgba(0,212,255,.25), inset 0 0 14px rgba(0,212,255,.08);}.hp .node.selected .nm{color: var(--white);}.hp .node .check{position: absolute; top: -8px; right: -8px;
  width: 18px; height: 18px;
  background: var(--cyan); color: var(--bg);
  font-family: var(--heading); font-size: .5rem;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%;}.hp .node.selected .check{display: flex;}/* payments contains pricing */.hp .node.payments{width: 156px; padding: 10px 6px 14px;}.hp .node.payments .inner-label{font-family: var(--heading); font-size: .56rem; letter-spacing: .06em;
  color: var(--light); display: block; margin-bottom: 9px;}.hp .node.pricing{position: relative; transform: none; left: auto; top: auto;
  width: auto; margin: 0 6px; padding: 7px 4px;
  border-color: rgba(234,179,8,.3);
  background: rgba(234,179,8,.05);}.hp .node.pricing .nm{color: var(--amber); font-size: .52rem;}.hp .node.pricing.selected{border-color: var(--cyan); background: rgba(0,212,255,.1); box-shadow: 0 0 14px rgba(0,212,255,.2);}.hp .node.pricing.selected .nm{color: var(--white);}/* reveal states */.hp .node.lit{border-color: var(--rose);
  background: rgba(239,68,68,.18);
  box-shadow: 0 0 30px rgba(239,68,68,.4), inset 0 0 16px rgba(239,68,68,.14);
  animation: nodePop .4s ease both;}.hp .node.lit .nm{color: #ff9a9a;}.hp .node.lit.pricing .nm{color: #ff9a9a;}.hp .node.lit .sub{color: rgba(239,68,68,.7);}.hp .node.dark{opacity: .4;
  border-color: rgba(90,122,150,.18);
  background: rgba(8,12,20,.6);}.hp .node.cool{border-color: var(--green);
  background: rgba(34,197,94,.12);
  box-shadow: 0 0 22px rgba(34,197,94,.28), inset 0 0 14px rgba(34,197,94,.08);
  animation: nodePop .4s ease both;}.hp .node.cool .nm{color: #9ff0bd;}@keyframes nodePop{0%{transform: translate(-50%,-50%) scale(.9);}55%{transform: translate(-50%,-50%) scale(1.07);}100%{transform: translate(-50%,-50%) scale(1);}}.hp .node.pricing.lit,.hp .node.pricing.cool{animation: nodePopStatic .4s ease both;}@keyframes nodePopStatic{0%{transform:scale(.9)}55%{transform:scale(1.07)}100%{transform:scale(1)}}/* interim states (lab map, during a session) */.hp .node.warn{border-color: var(--amber);
  background: rgba(234,179,8,.07);
  box-shadow: 0 0 14px rgba(234,179,8,.16);}.hp .node.warn .nm{color: var(--amber);}.hp .node.cool-soft{border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.06);}.hp .node.cool-soft .nm{color: #9ff0bd;}.hp .node.balances .nm{color: var(--green);}.hp .node.balances.cool-soft .nm{color: #9ff0bd;}/* footer of demo: action + result */.hp .weight-foot{padding: 14px 20px 18px;
  border-top: 1px solid rgba(0,212,255,.08);
  background: rgba(0,0,0,.18);}.hp .weight-actionrow{display: flex; align-items: center; gap: 14px;}.hp .tap-count{font-family: var(--mono); font-size: .68rem; color: var(--gray);
  letter-spacing: .02em;}.hp .tap-count b{color: var(--cyan);}.hp .btn-lock{margin-left: auto;
  padding: 9px 22px;
  font-family: var(--heading); font-size: .58rem; letter-spacing: .08em;
  background: transparent; color: var(--cyan);
  border: 1.5px solid var(--cyan); cursor: pointer;
  box-shadow: 0 0 14px rgba(0,212,255,.14), inset 0 0 12px rgba(0,212,255,.05);
  transition: all .25s;}.hp .btn-lock:hover:not(:disabled){background: var(--cyan); color: var(--bg); box-shadow: 0 0 26px rgba(0,212,255,.3);}.hp .btn-lock:disabled{opacity: .3; cursor: not-allowed; border-color: rgba(0,212,255,.2); color: var(--gray); box-shadow: none;}.hp .btn-lock.reset{color: var(--gray); border-color: rgba(255,255,255,.12); box-shadow: none;}.hp .btn-lock.reset:hover:not(:disabled){color: var(--light); border-color: rgba(0,212,255,.25); background: transparent; box-shadow: none;}.hp .weight-result{display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,212,255,.06);}.hp .weight-result.show{display: block; animation: fadeUp .5s ease both;}@keyframes fadeUp{from{opacity:0; transform: translateY(8px);}to{opacity:1; transform:none;}}.hp .result-caption{font-family: var(--heading); font-size: .66rem; color: var(--white);
  letter-spacing: .04em; margin-bottom: 12px;}.hp .result-caption b{color: var(--rose);}.hp .coach{display: flex; gap: 11px;
  padding: 13px 15px;
  background: rgba(0,212,255,.03);
  border: 1px solid rgba(0,212,255,.1);
  border-left: 2px solid var(--cyan);}.hp .coach .ico{font-family: var(--heading); font-size: .46rem; letter-spacing: .08em;
  color: var(--cyan); white-space: nowrap; padding-top: 2px; opacity: .8;}.hp .coach p{font-size: .78rem; color: var(--light); line-height: 1.65; margin: 0;}.hp .coach.win{border-left-color: var(--green); background: rgba(34,197,94,.04);}.hp .coach.win .ico{color: var(--green);}/* ════════════════════════════════════════
   GYM REP — always-open "Try it out" challenge
   ════════════════════════════════════════ */.hp .gym-tryit{text-align: center; margin: 2.8rem 0 1.4rem;
  font-family: var(--display); font-weight: 100;
  font-size: clamp(1.4rem, 2.7vw, 2.1rem);
  color: var(--cyan); letter-spacing: .08em;
  text-shadow: 0 0 26px rgba(0,212,255,.28);}.hp .gym-rep-wrap{margin-top: 0;}.hp .gym-rep{background: var(--surface);
  border: 1px solid rgba(0,212,255,.14);
  box-shadow: 0 0 50px rgba(0,212,255,.05);
  max-width: 1140px; margin: 0 auto;}.hp .gym-rep-head{display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; background: rgba(0,0,0,.32);
  border-bottom: 1px solid rgba(0,212,255,.08);}.hp .gym-rep-head .dot{width: 9px; height: 9px; border-radius: 50%; background: rgba(0,212,255,.3);}.hp .gym-rep-head .label{font-family: var(--heading); font-size: .54rem; letter-spacing: .1em; color: var(--gray);}.hp .gym-rep-head .label b{color: var(--cyan); font-weight: 400;}.hp .gym-rep-head .rep-no{margin-left: auto; font-family: var(--mono); font-size: .6rem; color: var(--gray);}.hp .gym-cols{display: grid; grid-template-columns: 1.55fr 1fr; gap: 0;
  height: clamp(460px, 66vh, 600px);}/* ── main column: the lesson, with the diagram embedded — scrolls on its own ── */.hp .gym-main{padding: 22px 26px 26px; min-width: 0; overflow-y: auto;}.hp .gym-lesson .lh{font-family: var(--heading); font-size: .5rem; letter-spacing: .12em; color: var(--cyan); opacity: .8; margin-bottom: 14px;}.hp .gym-lesson p{font-size: .88rem; color: var(--light); line-height: 1.78; margin: 0; text-wrap: pretty;}.hp .gym-lesson p + p{margin-top: 1.1rem;}.hp .gym-lesson p b{color: var(--white); font-weight: 600;}/* diagram sits inline in the lesson, after the second paragraph */.hp .gym-map-pane{margin: 1.4rem 0;
  border: 1px solid rgba(0,212,255,.1);
  background: rgba(0,0,0,.18);
  padding: 4px;}.hp .gym-map-pane .pane-label{font-family: var(--heading); font-size: .48rem; letter-spacing: .1em;
  color: var(--gray); padding: 9px 10px 4px;}.hp .gym-rep .node{cursor: default;}.hp .gym-rep .node:hover{border-color: rgba(0,212,255,.22);}/* ── side column: a coach chat that scrolls on its own, bottom-anchored ── */.hp .gym-side{border-left: 1px solid rgba(0,212,255,.08);
  background: rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 16px 20px 18px;
  overflow: hidden;            /* the thread inside does the scrolling */}.hp .chat-head{flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--heading); font-size: .5rem; letter-spacing: .12em;
  color: var(--gray); padding-bottom: 13px;
  border-bottom: 1px solid rgba(0,212,255,.06);}.hp .chat-head .cdot{width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan); animation: pulse 2s infinite;}.hp .gym-chat{flex: 1; min-height: 0; overflow-y: auto;
  padding-top: 16px;
  display: flex; flex-direction: column; gap: 13px;}.hp .gym-chat > :first-child{margin-top: auto;}/* bottom-anchor the thread *//* message wrapper — no outer chrome; the tinted bubble is the whole card */.hp .cmsg{display: flex; flex-direction: column;}.hp .cbubble{font-size: .82rem; color: var(--light); line-height: 1.66;
  background: rgba(0,212,255,.06);
  border: 1px solid rgba(0,212,255,.18);
  border-left: 2px solid var(--cyan);
  padding: 12px 14px; text-wrap: pretty;}.hp .cbubble b{color: var(--white); font-weight: 600;}.hp .cb-label{display: block;
  font-family: var(--heading); font-size: .46rem; letter-spacing: .12em;
  color: var(--cyan); opacity: .85; margin-bottom: 9px;}.hp .cmsg.feedback.good .cbubble{border-color: rgba(34,197,94,.3); border-left-color: var(--green); background: rgba(34,197,94,.07);}.hp .cmsg.feedback.bad .cbubble{border-color: rgba(239,68,68,.28); border-left-color: var(--rose); background: rgba(239,68,68,.07);}.hp .cmsg.feedback.warn .cbubble{border-color: rgba(234,179,8,.28); border-left-color: var(--amber); background: rgba(234,179,8,.07);}.hp .composer{display: flex; flex-direction: column; gap: 13px;}/* ── Service ownership map (no lines; each region lists what it owns) ── */.hp .svc-map{display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  padding: 4px 6px 8px;}.hp .svc{border: 1px solid rgba(0,212,255,.13);
  background: rgba(0,212,255,.015);
  padding: 11px 13px 12px;}.hp .svc-wide{grid-column: 1 / -1;}.hp .svc-name{display: block;
  font-family: var(--heading); font-size: .55rem; letter-spacing: .09em;
  color: var(--light); margin-bottom: 9px;}.hp .svc-domains{list-style: none; display: flex; flex-direction: column; gap: 5px;}.hp .svc-domains-row{flex-direction: row; flex-wrap: wrap; gap: 5px 22px;}.hp .dom{font-family: var(--mono); font-size: .68rem; color: var(--light);
  letter-spacing: .01em; display: flex; align-items: baseline; gap: 8px;}.hp .dom::before{content: ''; flex-shrink: 0;
  width: 4px; height: 4px; margin-top: .4em;
  background: var(--cyan);}.hp .dom-note{font-family: var(--mono); font-style: normal; font-size: .58rem;
  color: var(--gray); opacity: .75; letter-spacing: .01em;}.hp .dom-note::before{content: '\2192\00a0'; opacity: .6;}.hp .gym-options{display: flex; flex-direction: column; gap: 9px;}.hp .gym-opt{display: flex; gap: 12px; align-items: flex-start;
  text-align: left; cursor: pointer; width: 100%;
  padding: 12px 15px;
  background: rgba(0,212,255,.02);
  border: 1px solid rgba(0,212,255,.12);
  transition: all .2s; font-family: var(--body);}.hp .gym-opt:hover:not(:disabled){border-color: rgba(0,212,255,.4); background: rgba(0,212,255,.05);}.hp .gym-opt .key{font-family: var(--heading); font-size: .6rem; color: var(--cyan);
  border: 1px solid rgba(0,212,255,.3); width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.hp .gym-opt .opt-text{font-size: .82rem; color: var(--light); line-height: 1.5; padding-top: 2px;}.hp .gym-opt.selected{border-color: var(--cyan); background: rgba(0,212,255,.08); box-shadow: inset 0 0 16px rgba(0,212,255,.06);}.hp .gym-opt.selected .key{background: var(--cyan); color: var(--bg);}.hp .gym-opt:disabled{cursor: default;}.hp .gym-opt.correct{border-color: var(--green); background: rgba(34,197,94,.08);}.hp .gym-opt.correct .key{background: var(--green); color: var(--bg); border-color: var(--green);}.hp .gym-opt.correct .opt-text{color: #c7f0d6;}.hp .gym-opt.wrong{border-color: var(--rose); background: rgba(239,68,68,.07);}.hp .gym-opt.wrong .key{background: var(--rose); color: #fff; border-color: var(--rose);}.hp .gym-opt.partial{border-color: var(--amber); background: rgba(234,179,8,.07);}.hp .gym-opt.partial .key{background: var(--amber); color: var(--bg); border-color: var(--amber);}.hp .btn-submit{align-self: flex-start;
  padding: 11px 28px; cursor: pointer;
  font-family: var(--heading); font-size: .6rem; letter-spacing: .08em;
  background: transparent; color: var(--cyan);
  border: 1.5px solid var(--cyan);
  box-shadow: 0 0 14px rgba(0,212,255,.14), inset 0 0 12px rgba(0,212,255,.05);
  transition: all .25s;}.hp .btn-submit:hover:not(:disabled){background: var(--cyan); color: var(--bg); box-shadow: 0 0 26px rgba(0,212,255,.3);}.hp .btn-submit:disabled{opacity: .3; cursor: not-allowed; border-color: rgba(0,212,255,.2); color: var(--gray); box-shadow: none;}.hp .gym-retry{padding: 9px 20px; cursor: pointer;
  font-family: var(--heading); font-size: .56rem; letter-spacing: .07em;
  background: transparent; color: var(--gray);
  border: 1px solid rgba(255,255,255,.12); transition: all .2s;}.hp .gym-retry:hover{color: var(--light); border-color: rgba(0,212,255,.25);}.hp .gym-bridge{display: none;}/* ════════════════════════════════════════
   PILLARS (what this is)
   ════════════════════════════════════════ */.hp .tri-pillars{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2.5rem;}.hp .tri-pillar{padding: 2rem 1.85rem 2.1rem;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  border-top: 2px solid rgba(0,212,255,.1);
  transition: all .3s;
  position: relative;}.hp .tri-pillar:hover{border-top-color: var(--cyan); border-color: rgba(0,212,255,.18); box-shadow: inset 0 0 22px rgba(0,212,255,.04);}.hp .tri-pillar .pk{display: flex; align-items: baseline; gap: 10px; margin-bottom: 1rem;}.hp .tri-pillar .pk .nm{font-family: var(--heading); font-size: .82rem; color: var(--white); letter-spacing: .04em;}.hp .tri-pillar .pk .tier{font-family: var(--heading); font-size: .44rem; letter-spacing: .1em;
  color: var(--cyan); border: 1px solid rgba(0,212,255,.25);
  padding: 2px 7px; margin-left: auto; white-space: nowrap;
  background: rgba(0,212,255,.04);}.hp .tri-pillar .pk .tier.up{color: var(--amber); border-color: rgba(234,179,8,.3); background: rgba(234,179,8,.04);}.hp .tri-pillar p{font-size: .82rem; color: var(--mid); line-height: 1.72;}.hp .tri-pillar .num{font-family: var(--display); font-size: 1.5rem; color: rgba(0,212,255,.25);
  position: absolute; top: 1.4rem; right: 1.5rem; line-height: 1;}/* ════════════════════════════════════════
   GYM COURSES — the three launch courses (scan ladder)
   ════════════════════════════════════════ */.hp .gym-courses{margin-top: 3.4rem; padding-top: 3rem;}.hp .gc-kicker{font-family: var(--heading); font-size: .52rem; letter-spacing: .14em;
  color: var(--cyan); opacity: .8; margin-bottom: .9rem;}.hp .gc-lead{font-family: var(--display); font-weight: 100;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--white);
  line-height: 1.35; letter-spacing: .02em; max-width: 760px; margin-bottom: 2.4rem;}.hp .gc-lead b{color: var(--cyan); font-weight: 100;}.hp .gc-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,212,255,.08);}.hp .gc-card{background: var(--surface); padding: 1.7rem 1.6rem 1.8rem;
  display: flex; flex-direction: column;
  border-top: 2px solid rgba(0,212,255,.18);
  transition: border-color .3s, box-shadow .3s;}.hp .gc-head{display: flex; align-items: baseline; gap: 10px; margin-bottom: .35rem;}.hp .gc-num{font-family: var(--mono); font-size: .7rem; color: rgba(0,212,255,.5);}.hp .gc-name{font-family: var(--heading); font-size: .92rem; color: var(--white); letter-spacing: .05em;}.hp .gc-sub{font-family: var(--mono); font-size: .74rem; color: var(--gray); margin-bottom: 1.4rem; letter-spacing: .01em;}/* gains — icon + one line */.hp .gc-gains{list-style: none; display: flex; flex-direction: column; gap: .95rem; margin-bottom: 1.7rem;}.hp .gc-gain{display: flex; gap: 11px; align-items: flex-start;}.hp .gc-gain .ic{flex-shrink: 0; width: 18px; height: 18px; color: var(--cyan); margin-top: 1px;}.hp .gc-gain .ic svg{width: 100%; height: 100%; display: block;}.hp .gc-gain span{font-size: .8rem; color: var(--light); line-height: 1.45;}/* tools — logo row */.hp .gc-tools{margin-top: auto; padding-top: 1.3rem; border-top: 1px solid rgba(0,212,255,.07);}.hp .gc-tools-label{font-family: var(--heading); font-size: .44rem; letter-spacing: .14em;
  color: var(--gray); margin-bottom: .85rem;}.hp .gc-logos{display: flex; flex-wrap: wrap; gap: 7px;}.hp .tool{display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(120,150,180,.16);
  background: rgba(255,255,255,.012);}.hp .tool img{width: 15px; height: 15px; display: block; opacity: .92;}.hp .tool .tmark{width: 15px; height: 15px; color: var(--light); flex-shrink: 0; opacity: .92;}.hp .tool .tmark svg{width: 100%; height: 100%; display: block;}.hp .tool .tname{font-family: var(--mono); font-size: .68rem; color: var(--light); letter-spacing: .01em;}@media (max-width: 820px){.hp .gc-grid{grid-template-columns: 1fr;}}/* ════════════════════════════════════════
   LAB TERMINAL DEMO — shares the Gym rep chrome
   ════════════════════════════════════════ */.hp .lab-shell{background: var(--surface);
  border: 1px solid rgba(0,212,255,.14);
  box-shadow: 0 0 50px rgba(0,212,255,.05);
  margin-top: 2.5rem;
  max-width: 1140px; margin-left: auto; margin-right: auto;}.hp .lab-cols{display: grid; grid-template-columns: 1.55fr 1fr; gap: 0;
  height: clamp(460px, 66vh, 600px);
  grid-template-rows: minmax(0, 1fr);}/* ── TUI coding-agent terminal (left column) ── */.hp .lab-term{position: relative;
  border-right: 1px solid rgba(0,212,255,.08);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%;}.hp .tui-scroll{flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px 18px;
  font-family: var(--mono); font-size: .73rem; line-height: 1.65;}.hp .tline{white-space: pre-wrap; word-break: break-word;}.hp .tline.in{animation: lineIn .24s ease both;}@keyframes lineIn{from{opacity: 0; transform: translateY(3px);}to{opacity: 1; transform: none;}}.hp .t-sys{color: var(--mid);}.hp .t-sys .t-banner{color: var(--cyan);}.hp .t-dim{color: var(--gray); opacity: .8;}.hp .t-art{display: block; white-space: pre; color: var(--cyan);
  font-size: .68rem; line-height: 1.12; letter-spacing: 0;
  text-shadow: 0 0 10px rgba(0,212,255,.25); margin-bottom: 6px;}.hp .t-user{display: flex; gap: 9px; align-items: flex-start;
  margin: 13px 0 6px; padding: 9px 12px;
  background: rgba(0,212,255,.06);
  border: 1px solid rgba(0,212,255,.2);
  border-left: 2px solid var(--cyan);
  color: var(--white);}.hp .t-user .uarr{color: var(--cyan);}.hp .t-ask{display: flex; gap: 9px; margin: 14px 0 2px; color: var(--white);}.hp .t-ask .q{color: var(--amber);}.hp .t-agent{display: flex; gap: 9px; margin-top: 9px; color: var(--light);}.hp .t-agent .bul{color: var(--cyan);}.hp .t-agent .hl,.hp .t-user .hl{color: var(--cyan);}.hp .t-sub{display: flex; gap: 8px; padding-left: 6px; color: var(--gray); margin-top: 2px;}.hp .t-sub .cor{color: rgba(0,212,255,.45);}.hp .t-ok{color: var(--green); padding-left: 6px; margin-top: 2px;}.hp .t-warn{color: var(--amber); padding-left: 6px; margin-top: 2px;}.hp .t-bad{color: var(--rose); padding-left: 6px; margin-top: 2px;}.hp .t-edit{display: flex; align-items: baseline; gap: 10px;
  padding-left: 6px; margin-top: 2px;}.hp .t-edit .ed-op{color: rgba(0,212,255,.6);}.hp .t-edit .ed-path{color: var(--light); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.hp .t-edit .ed-add{color: var(--green);}.hp .t-edit .ed-del{color: var(--rose);}/* input dock */.hp .tui-dock{position: relative; padding: 12px 14px 11px; background: rgba(0,0,0,.26); border-top: 1px solid rgba(0,212,255,.1);}.hp .tui-prompt{width: 100%; display: flex; align-items: center; gap: 0;
  padding: 11px 14px; cursor: default; text-align: left;
  font-family: var(--mono); font-size: .73rem; color: var(--gray);
  background: rgba(0,212,255,.025);
  border: 1px solid rgba(0,212,255,.16);
  transition: all .2s;}.hp .tui-prompt .tui-arr{color: rgba(0,212,255,.5); margin-right: 8px;}.hp .tui-prompt[disabled]{opacity: .6;}.hp .tui-prompt.ready{cursor: pointer; color: var(--light);
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0,212,255,.14), inset 0 0 14px rgba(0,212,255,.04);}.hp .tui-prompt.ready .tui-arr{color: var(--cyan);}.hp .tui-prompt.ready:hover{background: rgba(0,212,255,.07);}.hp .tui-prompt.open{border-color: var(--cyan); background: rgba(0,212,255,.08);}.hp .tui-prompt.typing{border-color: var(--cyan); color: var(--light);
  box-shadow: 0 0 18px rgba(0,212,255,.16), inset 0 0 14px rgba(0,212,255,.05);}.hp .tui-line{flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: pre;}.hp .tui-typed{color: var(--light); white-space: pre;}.hp .tui-typed:not(:empty){margin-right: 2px;}.hp .tui-prompt.typing .tui-arr{color: var(--cyan);}.hp .tui-blink{display: none; width: 8px; height: 1.05em; background: var(--cyan); margin-left: 0; box-shadow: 0 0 8px rgba(0,212,255,.5);}/* cursor only blinks when a prompt is actionable — hidden while the agent runs or the demo is done */.hp .tui-prompt.ready .tui-blink,.hp .tui-prompt.typing .tui-blink,.hp .tui-prompt.open .tui-blink{display: block; animation: blink 1s steps(1) infinite;}@keyframes blink{50%{opacity: 0;}}.hp .tui-foot{display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-family: var(--mono); font-size: .55rem; color: var(--gray);}.hp .tui-foot .tui-keys{opacity: .55; white-space: nowrap;}/* options menu — overlay floating over the terminal */.hp .tui-menu{position: absolute; inset: 0; z-index: 20;
  background: rgba(2,5,10,.55);
  backdrop-filter: blur(1.5px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 16px 80px;
  animation: tuiFade .18s ease both;}@keyframes tuiFade{from{opacity: 0;}to{opacity: 1;}}.hp .tui-menu[hidden]{display: none;}.hp .tui-menu-panel{background: transparent;
  max-height: 100%; overflow-y: auto;
  animation: tuiRise .22s cubic-bezier(.4,0,.2,1) both;}@keyframes tuiRise{from{transform: translateY(8px); opacity: 0;}to{transform: none; opacity: 1;}}.hp .tui-menu-head{font-family: var(--mono); font-size: .58rem; letter-spacing: .04em;
  color: var(--gray); padding: 0 4px 9px;}.hp .tui-mi{width: 100%; text-align: left; display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; margin-bottom: 7px; cursor: pointer;
  background: rgba(8,12,20,.72);
  border: 1px solid rgba(0,212,255,.16);
  transition: border-color .15s, background .15s;}.hp .tui-mi::before{content: '\276f'; color: rgba(0,212,255,.45); font-family: var(--mono);
  font-size: .72rem; flex-shrink: 0; transition: color .15s;}.hp .tui-mi:last-child{margin-bottom: 0;}.hp .tui-mi:hover{background: rgba(0,212,255,.07);
  border-color: var(--cyan);}.hp .tui-mi:hover::before{color: var(--cyan);}.hp .tui-mi .mbody{display: flex; flex-direction: column; gap: 3px; min-width: 0;}.hp .tui-mi .mt{font-family: var(--mono); font-size: .82rem; color: var(--light); line-height: 1.45;}.hp .tui-mi:hover .mt{color: var(--white);}/* ── right column: the coaching chat (same chrome as the Gym side) ── */.hp .lab-coach{border-left: 1px solid rgba(0,212,255,.08);
  background: rgba(0,0,0,.12);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%;
  padding: 16px 20px 18px;
  overflow: hidden;}/* lab right rail: live map + resources */.hp .lab-rail{display: flex; flex-direction: column; min-width: 0;}.hp .lab-rail-head{padding: 11px 16px; background: rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(0,212,255,.06);
  font-family: var(--heading); font-size: .52rem; letter-spacing: .1em; color: var(--gray);
  display: flex; align-items: center; justify-content: space-between;}.hp .lab-rail-head .st{color: var(--cyan);}.hp .lab-map{position: relative; padding: 8px;}.hp .lab-map .map-stage{aspect-ratio: 1 / 0.92;}.hp .lab-map .node{width: 92px; padding: 8px 3px;}.hp .lab-map .node .nm{font-size: .5rem;}.hp .lab-map .node.payments{width: 120px;}.hp .lab-metrics{display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0,212,255,.06);
  margin-top: auto;}.hp .lab-metric{padding: 12px 6px; text-align: center; border-right: 1px solid rgba(0,212,255,.05);}.hp .lab-metric:last-child{border-right: none;}.hp .lab-metric .v{font-family: var(--display); font-size: 1.3rem; color: var(--gray); line-height: 1;}.hp .lab-metric .v.g{color: var(--green); text-shadow: 0 0 12px rgba(34,197,94,.25);}.hp .lab-metric .v.r{color: var(--rose); text-shadow: 0 0 12px rgba(239,68,68,.25);}.hp .lab-metric .v.a{color: var(--amber); text-shadow: 0 0 12px rgba(234,179,8,.25);}.hp .lab-metric .l{font-family: var(--heading); font-size: .42rem; color: var(--gray); letter-spacing: .07em; margin-top: 5px; text-transform: uppercase;}.hp .lab-resources{padding: 14px 16px;
  border-top: 1px solid rgba(0,212,255,.06);
  background: rgba(0,212,255,.02);
  min-height: 96px;}.hp .lab-resources .rh{font-family: var(--heading); font-size: .46rem; letter-spacing: .1em;
  color: var(--cyan); opacity: .8; margin-bottom: 7px;}.hp .lab-resources p{font-size: .76rem; color: var(--light); line-height: 1.66; margin: 0;}.hp .lab-resources .placeholder{color: var(--gray); font-style: italic; opacity: .6;}/* ── left-column view toggle (terminal / files) ── */
.hp .lab-left-tabs{display: flex; flex-shrink: 0; background: rgba(0,0,0,.22);
  border-bottom: 1px solid color-mix(in oklab, var(--cyan) 12%, transparent);}
.hp .ll-tab{display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--gray);
  transition: color .15s, border-color .15s, background .15s;}
.hp .ll-tab .ll-ic{font-size: .7rem; opacity: .8;}
.hp .ll-tab .ll-ic-svg{display: inline-flex; align-items: center; opacity: .85;}
.hp .ll-tab .ll-ic-svg svg{width: .95em; height: .95em;}
.hp .ll-tab:hover{color: var(--light); background: color-mix(in oklab, var(--cyan) 5%, transparent);}
.hp .ll-tab.is-active{color: var(--cyan); border-bottom-color: var(--cyan);}
/* the two stacked left panes — exactly one shows at a time */
.hp .lab-left-pane{display: none; position: relative; flex: 1; min-height: 0; min-width: 0;}
.hp .lab-left-pane.is-active{display: flex; flex-direction: column;}
/* ── file browser (static preview, locked) ── */
.hp .lab-files{flex: 1; min-height: 0; display: grid; grid-template-columns: 148px 1fr;
  overflow: hidden; font-family: var(--mono);}
.hp .lf-tree{border-right: 1px solid color-mix(in oklab, var(--cyan) 10%, transparent);
  padding: 12px 0; overflow: hidden; background: rgba(0,0,0,.14);}
.hp .lf-tree-head{padding: 0 14px 9px; font-size: .58rem; letter-spacing: .04em; color: var(--cyan); opacity: .8;}
.hp .lf-tree ul{list-style: none;}
.hp .lf-file{display: flex; align-items: center; gap: 6px; padding: 5px 14px; font-size: .68rem; color: var(--mid);}
.hp .lf-file.is-active{background: color-mix(in oklab, var(--cyan) 8%, transparent); color: var(--light);
  border-left: 2px solid var(--cyan); padding-left: 12px;}
.hp .lf-name{flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.hp .lf-badge{font-size: .56rem;}
.hp .lf-badge.add{color: var(--green);}
.hp .lf-badge.del{color: var(--rose);}
.hp .lf-main{display: flex; flex-direction: column; min-width: 0; overflow: hidden;}
.hp .lf-diff-head{padding: 10px 14px 8px; font-size: .64rem; color: var(--light);
  border-bottom: 1px solid color-mix(in oklab, var(--cyan) 8%, transparent);}
.hp .lf-diff{flex: 1; min-height: 0; overflow: hidden; padding: 8px 0; font-size: .67rem; line-height: 1.6;}
.hp .lf-hunk{padding: 2px 14px; color: var(--cyan); opacity: .65; font-size: .6rem;}
.hp .lf-ln{display: flex; gap: 12px; padding: 0 14px;}
.hp .lf-no{flex: 0 0 auto; width: 16px; text-align: right; color: var(--gray); opacity: .5;}
.hp .lf-tx{white-space: pre; min-width: 0;}
.hp .lf-ln.add{background: rgba(34,197,94,.08);}
.hp .lf-ln.add .lf-tx{color: var(--green);}
.hp .lf-ln.del{background: rgba(239,68,68,.08);}
.hp .lf-ln.del .lf-tx{color: var(--rose);}
.hp .lf-ln.ctx .lf-tx{color: var(--mid);}
.hp .lf-log{border-top: 1px solid color-mix(in oklab, var(--cyan) 8%, transparent); padding: 10px 14px 12px;}
.hp .lf-log-head{font-size: .58rem; letter-spacing: .04em; color: var(--cyan); opacity: .7; margin-bottom: 7px;}
.hp .lf-commit{display: flex; gap: 10px; font-size: .64rem; padding: 2px 0; color: var(--mid);}
.hp .lf-hash{color: var(--amber); flex: 0 0 auto;}
.hp .lf-msg{min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* ── gentle "coming soon" blur overlay ── */
.hp .lab-files-lock{position: absolute; inset: 0; z-index: 5; display: flex; align-items: center;
  justify-content: center; padding: 24px; text-align: center;
  backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); background: rgba(6,10,16,.5);}
.hp .lfl-card{max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 24px; background: rgba(8,13,20,.72);
  border: 1px solid color-mix(in oklab, var(--cyan) 26%, transparent);
  box-shadow: 0 0 40px color-mix(in oklab, var(--cyan) 12%, transparent);}
.hp .lfl-icon{color: var(--cyan);}
.hp .lfl-icon svg{width: 26px; height: 26px; display: block;}
.hp .lfl-title{font-family: var(--heading); font-size: .8rem; letter-spacing: .04em; color: var(--white);}
.hp .lfl-body{font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--mid); margin: 0;}
/* ════════════════════════════════════════
   ROADMAP
   ════════════════════════════════════════ */.hp .roadmap{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2.5rem;}.hp .road-col{padding: 1.9rem 1.75rem;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  position: relative;}.hp .road-col::before{content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 100%;}.hp .road-col.now::before{background: var(--cyan); box-shadow: 0 0 12px rgba(0,212,255,.4);}.hp .road-col.next::before{background: rgba(0,212,255,.35);}.hp .road-col.then::before{background: rgba(0,212,255,.15);}.hp .road-col .when{font-family: var(--heading); font-size: .68rem; letter-spacing: .1em;
  color: var(--white); margin-bottom: .3rem;}.hp .road-col.now .when{color: var(--cyan);}.hp .road-col .ph{font-family: var(--mono); font-size: .56rem; color: var(--gray); letter-spacing: .04em; margin-bottom: 1.3rem; text-transform: uppercase;}.hp .road-col ul{list-style: none; display: flex; flex-direction: column; gap: .85rem;}.hp .road-col li{font-size: .8rem; color: var(--mid); line-height: 1.6; display: flex; gap: 9px;}.hp .road-col li::before{content: '›'; color: var(--cyan); font-family: var(--mono); opacity: .6;}.hp .road-col.now li{color: var(--light);}/* roadmap closing coda — a deliberate sign-off, not a trailing sentence */.hp .roadmap-coda{display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 3vw, 1.8rem);
  margin-top: 3.2rem;}.hp .roadmap-coda .coda-line{height: 1px; flex: 1; max-width: 140px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.32));}.hp .roadmap-coda .coda-line:last-child{background: linear-gradient(90deg, rgba(0,212,255,.32), transparent);}.hp .coda-text{font-family: var(--heading); font-size: .72rem; letter-spacing: .12em;
  color: var(--mid); white-space: nowrap; text-align: center;}.hp .coda-text b{color: var(--cyan); font-weight: 400;}.hp .coda-text s{color: var(--gray); opacity: .55; text-decoration-thickness: 1px;}@media (max-width: 560px){.hp .coda-text{white-space: normal;}.hp .roadmap-coda .coda-line{display: none;}}/* ════════════════════════════════════════
   PRICE LADDER (founder pricing — matches the sudo pricing page)
   ════════════════════════════════════════ */.hp .price-ladder{margin-top: 2.5rem;}/* axis header — perm badge + tier name | tag */.hp .pl-head{display: grid; grid-template-columns: 1fr 1fr 1.15fr;
  gap: 1px; margin-bottom: 1px; background: rgba(0,0,0,.3);}.hp .pl-hcell{padding: 14px 18px; background: var(--surface);
  border-top: 1px solid rgba(0,212,255,.18);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;}.hp .pl-hcell .pl-id{display: flex; align-items: center; gap: 12px;}.hp .pl-perm{font-family: var(--mono); font-size: .95rem; color: var(--cyan);
  padding: 2px 10px; border: 1px solid rgba(0,212,255,.35);
  background: rgba(0,212,255,.06); letter-spacing: .05em;}.hp .pl-tier{font-family: var(--heading); font-size: .78rem; color: var(--white); letter-spacing: .1em;}.hp .pl-tag{font-family: var(--heading); font-size: .5rem; color: var(--gray); letter-spacing: .14em; white-space: nowrap;}.hp .pl-hcell.pl-hero{background: rgba(239,68,68,.05); border-top-color: rgba(239,68,68,.35);}.hp .pl-hcell.pl-hero .pl-perm{color: var(--rose); border-color: var(--rose); background: rgba(239,68,68,.1);}.hp .pl-hcell.pl-hero .pl-tag{color: var(--rose);}/* card body — columns are flex stacks; the 1px gaps draw the grid lines */.hp .pl-body{display: grid; grid-template-columns: 1fr 1fr 1.15fr;
  gap: 1px; background: rgba(0,212,255,.06);}.hp .pl-col{display: flex; flex-direction: column; gap: 1px;}.hp .pl-cell{background: var(--surface); padding: 16px 22px;}.hp .pl-col.pl-hero .pl-cell{background: rgba(239,68,68,.04);}/* price */.hp .pl-price{display: flex; align-items: center; gap: 10px; min-height: 76px;}.hp .pl-price .amt{font-family: var(--display); font-weight: 100; font-size: 3.4rem; color: var(--white); line-height: 1;}.hp .pl-price .amt .cur{font-size: 1.05rem; vertical-align: .6em; color: var(--cyan);}.hp .pl-col.pl-hero .pl-price .amt .cur{color: var(--rose);}.hp .pl-price .once{font-family: var(--heading); font-size: .55rem; color: var(--gray); letter-spacing: .1em; line-height: 1.6;}.hp .pl-price .once b{color: var(--cyan); font-weight: 400;}.hp .pl-col.pl-hero .pl-price .once b{color: var(--rose);}/* vs public */.hp .pl-vs{display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 78px;}.hp .pl-vs .pub{font-family: var(--mono); font-size: .72rem; color: var(--gray); display: flex; gap: 8px; align-items: baseline;}.hp .pl-vs .pub s{color: var(--gray);}.hp .pl-vs .save{font-family: var(--heading); font-size: .62rem; color: var(--cyan); letter-spacing: .08em;}.hp .pl-col.pl-hero .pl-vs .save{color: var(--rose);}/* description */.hp .pl-desc{min-height: 110px; font-size: .82rem; color: var(--light); line-height: 1.65;}/* feats */.hp .pl-feats{min-height: 178px;}.hp .pl-feats ul{list-style: none; display: flex; flex-direction: column; gap: 9px;}.hp .pl-feats li{font-size: .74rem; color: var(--light); display: flex; gap: 9px; line-height: 1.5;}.hp .pl-feats li::before{content: '\203a'; color: var(--cyan); font-family: var(--mono); font-size: .7rem;}.hp .pl-col.pl-hero .pl-feats li::before{color: var(--rose);}/* availability */.hp .pl-avail{min-height: 78px; display: flex; flex-direction: column; justify-content: center; gap: 6px;}.hp .pl-avail .open{display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .74rem; color: var(--light);}.hp .pl-avail .open .dot{width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan);}.hp .pl-seats{display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px;}.hp .pl-seats .seat{aspect-ratio: 1 / 1; background: rgba(239,68,68,.2); border: 1px solid var(--rose); box-shadow: 0 0 4px rgba(239,68,68,.4);}.hp .pl-seats .seat.claimed{background: rgba(90,122,150,.15); border-color: rgba(90,122,150,.3); box-shadow: none;}.hp .pl-avail .seatlabel{font-family: var(--mono); font-size: .7rem; color: var(--rose);}/* action */.hp .pl-action{border-top: 1px solid rgba(0,212,255,.06); display: flex; align-items: center;}.hp .pl-col.pl-hero .pl-action{border-top-color: rgba(239,68,68,.18);}.hp .pl-cta{display: block; width: 100%; text-align: center;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  padding: 13px 18px; text-decoration: none;
  color: var(--cyan); border: 1.5px solid var(--cyan); background: transparent;
  box-shadow: 0 0 14px rgba(0,212,255,.15), inset 0 0 14px rgba(0,212,255,.04);
  transition: all .25s;}.hp .pl-cta:hover{background: var(--cyan); color: var(--bg); box-shadow: 0 0 26px rgba(0,212,255,.3);}.hp .pl-col.pl-hero .pl-cta{color: var(--rose); border-color: var(--rose);
  box-shadow: 0 0 20px rgba(239,68,68,.2), inset 0 0 20px rgba(239,68,68,.06);}.hp .pl-col.pl-hero .pl-cta:hover{background: var(--rose); color: var(--bg); box-shadow: 0 0 30px rgba(239,68,68,.35);}/* single shared reserve action (condensed ladder) */.hp .pl-reserve{position: relative;
  margin-top: 1px; padding: 18px 22px;
  background: var(--surface);
  border-top: 1px solid rgba(0,212,255,.1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px;}/* red only under the Execute (rwx) column — rightmost 1.15fr of 3.15fr */.hp .pl-reserve::before{content: ''; position: absolute; top: -1px; right: 0;
  width: calc(1.15 / 3.15 * 100%); height: 1px;
  background: rgba(239,68,68,.5);}.hp .pl-cta-single{width: auto; min-width: 0; padding: 10px 22px;
  font-size: .8rem; letter-spacing: .02em;
  order: 2;
  color: var(--rose) !important; border-color: var(--rose) !important;
  box-shadow: 0 0 16px rgba(239,68,68,.16), inset 0 0 14px rgba(239,68,68,.04) !important;}.hp .pl-cta-single:hover{background: var(--rose) !important; color: var(--bg) !important; box-shadow: 0 0 26px rgba(239,68,68,.32) !important;}.hp .pl-reserve-note{font-family: var(--mono); font-size: .68rem; color: var(--gray); letter-spacing: .02em;
  order: 1; margin-right: auto;}/* fine print */.hp .pl-fine{margin-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; justify-content: space-between;
  font-family: var(--mono); font-size: .7rem; color: var(--gray);}@media (max-width: 820px){
  /* .pl-head and .pl-body are two separate grids; collapsing each to one
     column independently stacks all three tier headers, then all three price
     blocks, so a price detaches from its header. Promote both grids' children
     into one shared grid on .price-ladder and interleave with `order` so each
     tier reads header → price → … as a unit. */
  .hp .price-ladder{display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(0,212,255,.08);}
  .hp .pl-head,.hp .pl-body{display: contents;}
  .hp .pl-head .pl-hcell:nth-child(1){order: 1;}
  .hp .pl-body .pl-col:nth-child(1){order: 2;}
  .hp .pl-head .pl-hcell:nth-child(2){order: 3;}
  .hp .pl-body .pl-col:nth-child(2){order: 4;}
  .hp .pl-head .pl-hcell:nth-child(3){order: 5;}
  .hp .pl-body .pl-col:nth-child(3){order: 6;}
  .hp .pl-reserve{order: 7;}
  .hp .pl-fine{order: 8; margin-top: 18px;}
  .hp .pl-desc,.hp .pl-feats,.hp .pl-price,.hp .pl-vs,.hp .pl-avail{min-height: 0;}
}/* ════════════════════════════════════════
   TIERS (ground floor)
   ════════════════════════════════════════ */.hp .tiers{display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2.5rem;}.hp .tier{padding: 2.1rem 1.9rem 2.2rem;
  background: var(--surface);
  border: 1px solid rgba(0,212,255,.06);
  transition: all .3s;
  position: relative;}.hp .tier:hover{border-color: rgba(0,212,255,.2); box-shadow: inset 0 0 24px rgba(0,212,255,.04);}.hp .tier.feature{border-color: rgba(0,212,255,.3); box-shadow: 0 0 36px rgba(0,212,255,.06);}.hp .tier .perm{font-family: var(--mono); font-size: 1.5rem; letter-spacing: .12em;
  color: var(--cyan); margin-bottom: .2rem;
  text-shadow: 0 0 16px rgba(0,212,255,.25);}.hp .tier .perm .off{color: rgba(90,122,150,.4);}.hp .tier .grants{font-family: var(--heading); font-size: .58rem; letter-spacing: .05em; color: var(--white); margin-bottom: 1.3rem;}.hp .tier .price{font-family: var(--display); font-size: 1.6rem; color: var(--white); line-height: 1; margin-bottom: .35rem;}.hp .tier .price .confirm{font-family: var(--mono); font-size: .62rem; color: var(--amber); letter-spacing: .02em;}.hp .tier .price-note{font-family: var(--mono); font-size: .58rem; color: var(--gray); margin-bottom: 1.5rem;}.hp .tier ul{list-style: none; display: flex; flex-direction: column; gap: .6rem;}.hp .tier li{font-size: .76rem; color: var(--mid); display: flex; gap: 9px; align-items: center;}.hp .tier li .y{color: var(--green); font-family: var(--mono); font-size: .7rem;}.hp .tier li .n{color: rgba(90,122,150,.4); font-family: var(--mono); font-size: .7rem;}.hp .tier li.off{color: rgba(90,122,150,.5);}.hp .tier .badge-feature{position: absolute; top: -1px; right: -1px;
  font-family: var(--heading); font-size: .44rem; letter-spacing: .1em;
  color: var(--bg); background: var(--cyan); padding: 4px 12px;}.hp .zero-day{margin-top: 1px;
  padding: 1.5rem 1.9rem;
  background: rgba(0,212,255,.03);
  border: 1px solid rgba(0,212,255,.1);
  font-size: .8rem; color: var(--mid); line-height: 1.7;}.hp .zero-day strong{color: var(--cyan); font-weight: 600; font-family: var(--heading); font-size: .7rem; letter-spacing: .04em;}.hp .zero-day .confirm{color: var(--amber); font-family: var(--mono); font-size: .72rem;}.hp .runhacks-free{display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 1px;
  padding: 1.1rem 1.6rem;
  background: rgba(34,197,94,.04);
  border: 1px solid rgba(34,197,94,.18);
  border-left: 2px solid var(--green);}.hp .runhacks-free .rf-tag{font-family: var(--heading); font-size: .48rem; letter-spacing: .1em;
  color: var(--green); border: 1px solid rgba(34,197,94,.3);
  padding: 4px 9px; background: rgba(34,197,94,.06); white-space: nowrap;}.hp .runhacks-free .rf-text{font-size: .84rem; color: var(--mid); line-height: 1.6; flex: 1; min-width: 220px;}.hp .runhacks-free .rf-text b{color: var(--light); font-weight: 600;}.hp .runhacks-free .rf-link{font-family: var(--heading); font-size: .56rem; letter-spacing: .07em;
  color: var(--green); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(34,197,94,.3); padding-bottom: 3px; transition: all .2s;}.hp .runhacks-free .rf-link:hover{color: #9ff0bd; border-color: var(--green);}/* confirm flag pill */.hp .confirm-flag{display: inline-block;
  font-family: var(--mono); font-size: .58rem;
  color: var(--amber); background: rgba(234,179,8,.06);
  border: 1px solid rgba(234,179,8,.25); padding: 1px 7px;
  letter-spacing: .02em; vertical-align: middle;}/* ════════════════════════════════════════
   WHO / GROUND-FLOOR shared block
   ════════════════════════════════════════ */.hp .framing-note{margin-top: 2rem;
  padding: 1.2rem 1.5rem;
  border-left: 2px solid rgba(0,212,255,.3);
  background: rgba(0,212,255,.02);
  font-size: .82rem; color: var(--mid); line-height: 1.7;}.hp .framing-note strong{color: var(--light); font-weight: 600;}/* ════════════════════════════════════════
   SUDO WAITLIST — pre-announce email capture (blue)
   ════════════════════════════════════════ */.hp #sudo-waitlist{padding-top: 2rem;}.hp .sudo-wl{max-width: 720px; margin: 0 auto; text-align: center;}.hp .sudo-wordmark{font-family: var(--display); font-weight: 100;
  font-size: clamp(3.4rem, 9vw, 7rem); line-height: 1;
  letter-spacing: clamp(.2em, 2vw, .5em);
  color: var(--cyan);
  text-shadow: 0 0 40px rgba(0,212,255,.35);
  margin-bottom: 1.6rem; padding-left: clamp(.2em, 2vw, .5em);}.hp .sudo-head{font-family: var(--heading); font-size: clamp(1rem, 2.2vw, 1.4rem);
  color: var(--white); letter-spacing: .04em; margin-bottom: 1.3rem;}.hp .sudo-blurb{font-size: .95rem; color: var(--mid); line-height: 1.85;
  max-width: 560px; margin: 0 auto 2.4rem; text-wrap: pretty;}.hp .sudo-notify{font-size: 1rem; color: var(--light); line-height: 1.6;
  margin: 0 auto 1.8rem; letter-spacing: .01em;}/* email + notify */.hp .sudo-form{display: flex; gap: 1px; max-width: 560px; margin: 0 auto 3rem;
  background: rgba(0,212,255,.12); border: 1px solid rgba(0,212,255,.25);}.hp .sudo-input{flex: 1; min-width: 0;
  background: var(--surface); border: none; outline: none;
  padding: 16px 20px;
  font-family: var(--mono); font-size: .9rem; color: var(--white);
  letter-spacing: .01em;}.hp .sudo-input::placeholder{color: var(--gray);}.hp .sudo-input:focus{background: rgba(0,212,255,.04);}.hp .sudo-btn{flex-shrink: 0; cursor: pointer;
  background: rgba(0,212,255,.06); border: none;
  padding: 16px 30px;
  font-family: var(--heading); font-size: .68rem; letter-spacing: .08em;
  color: var(--cyan);
  box-shadow: inset 0 0 18px rgba(0,212,255,.1);
  transition: all .25s;}.hp .sudo-btn:hover{background: var(--cyan); color: var(--bg); box-shadow: 0 0 26px rgba(0,212,255,.35);}/* terminal */.hp .sudo-term{text-align: left; max-width: 560px; margin: 0 auto;
  background: var(--surface); border: 1px solid rgba(0,212,255,.12);
  box-shadow: 0 0 40px rgba(0,212,255,.04);}.hp .sudo-term-bar{display: flex; justify-content: flex-end;
  padding: 10px 16px; background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(0,212,255,.08);}.hp .sudo-term-label{font-family: var(--heading); font-size: .5rem; letter-spacing: .12em; color: var(--gray);}.hp .sudo-term-body{padding: 18px 20px;
  font-family: var(--mono); font-size: .82rem; line-height: 2;}.hp .sudo-term-body .stl{color: var(--light); white-space: pre-wrap; word-break: break-word;}.hp .sudo-term-body .st-amber{color: var(--amber);}.hp .sudo-term-body .st-cyan{color: var(--cyan);}.hp .sudo-term-body .st-green{color: var(--green);}.hp .sudo-term-body .st-dim{color: var(--gray);}@media (max-width: 520px){.hp .sudo-form{flex-direction: column; gap: 1px;}.hp .sudo-btn{padding: 14px;}}/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */.hp .site-foot{position: relative; z-index: 1;
  border-top: 1px solid rgba(0,212,255,.06);
  padding: 2.4rem clamp(2rem, 6vw, 8rem);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;}.hp .site-foot .fl{font-family: var(--display); font-size: 1.2rem; color: var(--white); letter-spacing: .12em;}.hp .site-foot .fl .dev{font-family: var(--heading); color: var(--cyan); font-size: .8em; vertical-align: .14em;}.hp .site-foot .fnav{display: flex; gap: 1.6rem; flex-wrap: wrap;}.hp .site-foot .fnav a{font-family: var(--heading); font-size: .56rem; letter-spacing: .08em;
  color: var(--gray); text-decoration: none; transition: color .2s;}.hp .site-foot .fnav a:hover{color: var(--cyan);}.hp .site-foot .fc{font-family: var(--heading); font-size: .5rem; color: var(--mid); letter-spacing: .08em;}/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */@media (max-width: 940px){.hp .hero-grid{grid-template-columns: 1fr; gap: 2.5rem;}.hp .hero-wrap{min-height: auto;}.hp .tri-pillars,.hp .roadmap,.hp .tiers{grid-template-columns: 1fr;}}@media (max-width: 560px){.hp .node{width: 96px;}.hp .node.payments{width: 130px;}}
/* ════════════════════════════════════════
   MOBILE DEMO TABS — Gym + Lab collapse to a single tabbed pane
   ════════════════════════════════════════ */
.hp .demo-tabs{display: none;}
.hp .demo-tab-badge{display: none;}
.hp .lab-coach-alert{display: none;}
@media (max-width: 768px){
  /* dock the tab bar to the bottom of each demo card */
  .hp .gym-rep,.hp .lab-shell{display: flex; flex-direction: column;}
  .hp .demo-tabs{order: 2; display: flex; background: rgba(0,0,0,.32); border-top: 1px solid rgba(0,212,255,.08);}
  .hp .demo-tab{flex: 1; padding: 12px 10px; background: none; border: 0; border-top: 2px solid transparent; cursor: pointer; font-family: var(--heading); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); transition: color .2s, border-color .2s;}
  .hp .demo-tab.is-active{color: var(--cyan); border-top-color: var(--cyan);}
  .hp .demo-tab-badge{display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; margin-left: 7px; border-radius: 8px; background: var(--cyan); color: #02060c; font-family: var(--heading); font-size: .5rem; line-height: 1; vertical-align: middle;}
  .hp .demo-tab-badge[hidden]{display: none;}
  /* floating "coach replied" toast over the agent pane while coach is off-screen */
  .hp .lab-coach-alert{position: absolute; z-index: 6; top: 10px; left: 10px; right: 10px;
    display: flex; align-items: center; gap: 11px; padding: 11px 13px; text-align: left; cursor: pointer; border-radius: 8px;
    background: color-mix(in oklab, var(--cyan) 16%, #0b1119); border: 1px solid color-mix(in oklab, var(--cyan) 42%, transparent);
    box-shadow: inset 3px 0 0 var(--cyan), 0 10px 28px rgba(0,0,0,.5), 0 0 22px color-mix(in oklab, var(--cyan) 18%, transparent);
    animation: lcaIn .26s ease both; transition: opacity .4s ease, transform .4s ease;}
  .hp .lab-coach-alert[hidden]{display: none;}
  .hp .lab-coach-alert.is-leaving{opacity: 0; transform: translateY(-8px); pointer-events: none;}
  .hp .lab-coach-alert .lca-dot{flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 color-mix(in oklab, var(--cyan) 70%, transparent); animation: lcaPulse 1.6s ease-out infinite;}
  .hp .lab-coach-alert .lca-text{flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.25;}
  .hp .lab-coach-alert .lca-text b{color: var(--white); font-size: .82rem; font-weight: 600;}
  .hp .lab-coach-alert .lca-sub{color: var(--gray); font-size: .68rem;}
  .hp .lab-coach-alert .lca-cta{flex: none; color: var(--cyan); font-family: var(--heading); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;}
  @keyframes lcaIn{from{opacity: 0; transform: translateY(-8px);} to{opacity: 1; transform: translateY(0);}}
  @keyframes lcaPulse{0%{box-shadow: 0 0 0 0 color-mix(in oklab, var(--cyan) 70%, transparent);} 70%{box-shadow: 0 0 0 7px transparent;} 100%{box-shadow: 0 0 0 0 transparent;}}
  .hp .gym-cols,.hp .lab-cols{display: block; height: auto;}
  .hp .lab-cols{position: relative;}
  .hp .gym-cols [data-tab-pane],.hp .lab-cols [data-tab-pane]{display: none; height: min(68vh, 560px);}
  .hp .gym-main[data-tab-pane].is-active{display: block; overflow-y: auto; padding: 20px 20px 22px;}
  .hp .gym-side[data-tab-pane].is-active,.hp .lab-term[data-tab-pane].is-active,.hp .lab-coach[data-tab-pane].is-active{display: flex; flex-direction: column;}
  .hp .gym-side,.hp .lab-term,.hp .lab-coach{border-left: none; border-right: none; border-top: none;}
}/* ══════════════════════════════════════════════════════
   DEMO SKIN — accent + surface treatments to explore (Tweaks)
   Both demos (.lab-shell card and .gym-rep card) take a shared
   skin: data-skin sets the accent hue (--ax), data-surf sets
   the background treatment. Semantic tone colours (good/warn/
   bad feedback) are left untouched — only the cyan "brand"
   accent shifts.
   ══════════════════════════════════════════════════════ */.hp [data-skin="cyan"]{--ax: #00d4ff;}.hp [data-skin="violet"]{--ax: #8b5cf6;}.hp [data-skin="rose"]{--ax: #ef4444;}.hp [data-skin="amber"]{--ax: #f0a830;}.hp [data-skin="green"]{--ax: #22c55e;}/* Flip the brand accent for everything inside the demo: every var(--cyan)
   text/border/shadow under the skinned wrapper becomes the accent at once. */.hp [data-skin]{--cyan: var(--ax);}/* frame: accent border + top bar + ambient glow */.hp .lab-shell[data-skin],.hp [data-skin] .gym-rep{border-color: color-mix(in oklab, var(--ax) 34%, transparent) !important;
  border-top: 2px solid var(--ax) !important;
  box-shadow: 0 0 54px color-mix(in oklab, var(--ax) 13%, transparent) !important;}/* surface treatments */.hp [data-surf="edge"] .gym-rep,.hp .lab-shell[data-surf="edge"]{background: var(--surface);}.hp [data-surf="tint"] .gym-rep,.hp .lab-shell[data-surf="tint"]{background:
    linear-gradient(color-mix(in oklab, var(--ax) 5%, transparent), color-mix(in oklab, var(--ax) 5%, transparent)),
    var(--surface);}.hp [data-surf="panel"] .gym-rep,.hp .lab-shell[data-surf="panel"]{background:
    linear-gradient(color-mix(in oklab, var(--ax) 7%, transparent), color-mix(in oklab, var(--ax) 3%, transparent)),
    #0d141e;}/* ── retint the literal rgba(0,212,255,…) touchpoints the var swap can't reach ── *//* dividers / structural borders */.hp [data-skin] :is(.gym-rep-head, .lab-bar, .gym-side .chat-head, .lab-coach .chat-head, .gym-side, .lab-term, .gym-map-pane, .weight-foot, .tui-dock, .tui-top){border-color: color-mix(in oklab, var(--ax) 15%, transparent) !important;}.hp [data-skin] .gym-side{border-left-color: color-mix(in oklab, var(--ax) 12%, transparent) !important;}.hp [data-skin] .lab-term{border-right-color: color-mix(in oklab, var(--ax) 12%, transparent) !important;}/* ASCII banner glow + terminal accents */.hp [data-skin] .t-art{color: var(--ax) !important; text-shadow: 0 0 10px color-mix(in oklab, var(--ax) 26%, transparent) !important;}.hp [data-skin] :is(.t-banner, .ed-op, .hl, .tui-arr, .cb-label, .chat-head, .qn, .uarr){color: var(--ax) !important;}.hp [data-skin] .t-sub .cor{color: color-mix(in oklab, var(--ax) 55%, transparent) !important;}.hp [data-skin] :is(.tui-blink, .cursor){background: var(--ax) !important; box-shadow: 0 0 8px var(--ax) !important;}.hp [data-skin] .t-user{background: color-mix(in oklab, var(--ax) 7%, transparent) !important; border-color: color-mix(in oklab, var(--ax) 22%, transparent) !important;}.hp [data-skin] .t-user{border-left-color: var(--ax) !important;}.hp [data-skin] .tui-prompt{border-color: color-mix(in oklab, var(--ax) 16%, transparent) !important;}.hp [data-skin] .tui-prompt.ready{border-color: var(--ax) !important; box-shadow: 0 0 18px color-mix(in oklab, var(--ax) 14%, transparent), inset 0 0 14px color-mix(in oklab, var(--ax) 4%, transparent) !important;}.hp [data-skin] .tui-prompt.ready .tui-arr{color: var(--ax) !important;}.hp [data-skin] .tui-menu-panel{border-color: var(--ax) !important;}.hp [data-skin] .tui-menu-head{color: color-mix(in oklab, var(--ax) 70%, var(--gray)) !important;}.hp [data-skin] .tui-mi{border-color: color-mix(in oklab, var(--ax) 16%, transparent) !important;}.hp [data-skin] .tui-mi::before{color: color-mix(in oklab, var(--ax) 55%, transparent) !important;}.hp [data-skin] .tui-mi:hover::before{color: var(--ax) !important;}.hp [data-skin] .tui-mi:hover{border-color: var(--ax) !important; background: color-mix(in oklab, var(--ax) 7%, transparent) !important;}.hp [data-skin] .tui-mi:hover .mt{color: var(--white) !important;}/* coach prompt bubbles (non-feedback) */.hp [data-skin] .cmsg:not(.feedback) .cbubble{background: color-mix(in oklab, var(--ax) 6%, transparent) !important;
  border-color: color-mix(in oklab, var(--ax) 22%, transparent) !important;
  border-left: 2px solid var(--ax) !important;}/* gym service-map boxes */.hp [data-skin] .svc{border-color: color-mix(in oklab, var(--ax) 14%, transparent) !important; background: color-mix(in oklab, var(--ax) 2.5%, transparent) !important;}.hp [data-skin] .dom::before{background: var(--ax) !important;}/* ── submit button ── */.hp [data-skin] .btn-submit{color: var(--ax) !important; border-color: var(--ax) !important;
  box-shadow: 0 0 14px color-mix(in oklab, var(--ax) 18%, transparent) !important;}.hp [data-skin] .btn-submit:hover:not(:disabled){background: var(--ax) !important; color: #04140a !important;
  box-shadow: 0 0 26px color-mix(in oklab, var(--ax) 32%, transparent) !important;}.hp [data-skin] .btn-submit:disabled{color: var(--gray) !important; border-color: color-mix(in oklab, var(--ax) 20%, transparent) !important; box-shadow: none !important;}/* ── option states — legible on the panel surface ── *//* default */.hp [data-skin] .gym-opt{background: rgba(255,255,255,.014) !important; border-color: rgba(140,162,184,.18) !important;}.hp [data-skin] .gym-opt .key{color: var(--ax) !important; border-color: color-mix(in oklab, var(--ax) 34%, transparent) !important;}/* hover */.hp [data-skin] .gym-opt:hover:not(:disabled){border-color: var(--ax) !important; background: color-mix(in oklab, var(--ax) 7%, transparent) !important;}/* selected = your pick — green OUTLINE + bright key (hollow) */.hp [data-skin] .gym-opt.selected{border-color: var(--ax) !important;
  background: color-mix(in oklab, var(--ax) 9%, transparent) !important;
  box-shadow: 0 0 0 1px var(--ax), inset 0 0 16px color-mix(in oklab, var(--ax) 12%, transparent) !important;}.hp [data-skin] .gym-opt.selected .key{background: var(--ax) !important; color: #04140a !important; border-color: var(--ax) !important;}.hp [data-skin] .gym-opt.selected .opt-text{color: var(--white) !important;}/* correct = verdict — green FILLED + glow (solid, distinct from the outline pick) */.hp [data-skin] .gym-opt.correct{border-color: var(--green) !important;
  background: color-mix(in oklab, var(--green) 24%, #0d141e) !important;
  box-shadow: 0 0 20px color-mix(in oklab, var(--green) 32%, transparent) !important;}.hp [data-skin] .gym-opt.correct .key{background: var(--green) !important; color: #04140a !important; border-color: var(--green) !important;}.hp [data-skin] .gym-opt.correct .opt-text{color: #eafff2 !important;}/* wrong = rose FILLED */.hp [data-skin] .gym-opt.wrong{border-color: var(--rose) !important;
  background: color-mix(in oklab, var(--rose) 22%, #0d141e) !important;
  box-shadow: 0 0 20px color-mix(in oklab, var(--rose) 30%, transparent) !important;}.hp [data-skin] .gym-opt.wrong .key{background: var(--rose) !important; color: #fff !important; border-color: var(--rose) !important;}.hp [data-skin] .gym-opt.wrong .opt-text{color: #ffe6e6 !important;}/* partial = amber FILLED */.hp [data-skin] .gym-opt.partial{border-color: var(--amber) !important;
  background: color-mix(in oklab, var(--amber) 22%, #0d141e) !important;
  box-shadow: 0 0 20px color-mix(in oklab, var(--amber) 28%, transparent) !important;}.hp [data-skin] .gym-opt.partial .key{background: var(--amber) !important; color: #04140a !important; border-color: var(--amber) !important;}.hp [data-skin] .gym-opt.partial .opt-text{color: #fff3d6 !important;}/* blur preview — briefly defocus everything but the tweaks panel */.hp html.pop-blurtest body > *:not(#tweaks-root){filter: blur(5px); transition: filter .25s ease;}

/* Lab terminal static transcript highlight + waitlist signup status */
.hp .tok{color: var(--green, #22c55e); font-weight: 600;}
.hp .sudo-signup-msg{margin-top: 1rem; min-height: 1.2em; font-family: var(--mono); font-size: .85rem; color: var(--light); text-align: center;}
.hp .sudo-signup-msg.err{color: #ff6b6b;}
.hp .sudo-signup-msg.ok{color: var(--green, #22c55e);}