/* Shared navigation and quiet footer. */
.site-header {
  width: min(1440px, 100% - 80px);
  height: 88px;
}
.site-header nav {
  margin: 0;
  gap: 32px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}
.sign-in-link {
  font-size: 11px;
  color: #bcc7da;
}
.menu-toggle {
  display: none;
}
html:not(.enhanced) .account-loading {
  display: none;
}
.site-footer {
  padding: 28px 0 34px;
}
.footer-top {
  gap: 30px;
}
.footer-top nav {
  margin: auto;
  gap: 30px;
  align-items: center;
}
.footer-top nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.footer-top nav .icon {
  width: 12px;
  height: 12px;
}
.footer-copyright {
  font-size: 10px;
  color: #7586a2;
  white-space: nowrap;
}
/* One hero artwork, with a separate wrapper for scroll and pointer depth. */
.hero {
  height: max(830px, 100svh);
  min-height: 830px;
  max-height: 1150px;
  padding: 110px 0 155px;
  overflow: hidden;
}
.hero-layout {
  display: grid;
  grid-template-columns: 43% 57%;
  height: 100%;
  align-items: center;
}
.hero-copy {
  text-align: left;
  width: auto;
  margin: 0;
  z-index: 4;
}
.hero h1 {
  font-size: clamp(75px, 6.9vw, 106px);
  letter-spacing: -0.068em;
}
.hero-lede {
  font-size: 20px;
  margin: 28px 0 13px;
}
.hero-description {
  font-size: 13px;
  max-width: 34ch;
  line-height: 1.85;
}
.hero-actions {
  justify-content: flex-start;
  gap: 22px;
  margin-top: 30px;
}
.hero-art-stage {
  position: relative;
  min-width: 0;
  height: 570px;
  perspective: 1400px;
  z-index: 1;
}
.hero-orbit {
  position: absolute;
  width: 120%;
  max-width: 1010px;
  left: -90px;
  top: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.hero-orbit img {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 41%, transparent 73%);
}
.hero-orbit .orbital-github {
  left: 23.4%;
  top: 23.2%;
  width: 6.3%;
  transform: translate(-50%, -50%) rotate(-15deg) skewY(-4deg);
  filter: drop-shadow(0 0 5px #8bbaff) drop-shadow(1px 2px 0 #124393);
}
.hero-aura {
  background:
    radial-gradient(ellipse at 75% 50%, #1b347a26, transparent 53%),
    radial-gradient(ellipse at 50% 110%, #1f458c33, transparent 58%);
}
.showcase-surface {
  margin-top: -125px;
  padding-top: 24px;
  border-radius: 32px 32px 0 0;
  border-top-color: #809bcf32;
}
.product-heading {
  padding-top: 32px;
}
.product-proof {
  padding-bottom: 0;
}
.proof-caption > span {
  letter-spacing: 0;
  font-size: 10px;
}
.proof-caption > span i {
  margin-inline: 10px;
}
.journey-section {
  padding-top: 110px;
}
.journey-heading {
  margin-bottom: 40px;
}
.journey-card {
  padding-top: 25px;
}
.practice-visual,
.project-visual,
.contribution-visual {
  height: 290px;
}
.practice-invite {
  margin-top: 15px;
}
.practice-invite h3 {
  margin-top: 0;
}
.lesson-track {
  margin-top: 0;
}
.journey-footer {
  justify-content: flex-end;
}
.teacher-section {
  padding-top: 80px;
}
.teacher-copy > p:not(.eyebrow) {
  margin: 23px 0;
}
.final-cta .hero-actions {
  justify-content: center;
}
.final-cta {
  padding-block: 100px 110px;
}
.page-hero {
  padding-block: 180px 75px;
}
.page-hero > .hero-actions {
  margin-top: 30px;
}
.product-end-simple {
  display: block;
  padding-block: 70px 100px;
  border-top: 1px solid var(--line);
}
.product-end-simple h2 {
  font-size: 50px;
}
.guide {
  padding-top: 30px;
}
.guide-heading {
  top: 80px;
}
.download-details h3 {
  margin-top: 0;
}
.product-signals {
  padding-bottom: 40px;
}
/* Abstract, code-native agent identities rather than repeated brand art. */
.agent-bridge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-block: 30px 95px;
  gap: 80px;
  border-top: 1px solid var(--line);
}
.agent-bridge h2 {
  font-size: 60px;
}
.agent-bridge p {
  font-size: 13px;
  margin: 25px 0;
}
.agent-duet {
  height: 420px;
  position: relative;
  perspective: 1000px;
  isolation: isolate;
}
.agent-sphere {
  width: 210px;
  height: 210px;
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  box-shadow:
    inset -28px -22px 55px #030718,
    inset 12px 6px 25px #b5d5ff22,
    0 20px 70px #163c8c22;
  background: radial-gradient(
    circle at 32% 24%,
    #668bdc28,
    #182e5520 45%,
    #090e1e 73%
  );
  border: 1px solid #6e95ed2b;
}
.agent-sphere:before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border-top: 1px solid #9fc2ff65;
  transform: rotate(-28deg);
}
.agent-sphere > i {
  position: absolute;
  inset: -10%;
  border: 1px solid #628eff48;
  border-radius: 50%;
  transform: rotateX(67deg) rotateZ(15deg);
  box-shadow: 0 0 12px #3162c412;
}
.agent-sphere > i:nth-child(2) {
  transform: rotateY(69deg) rotateZ(-24deg);
}
.agent-sphere > i:nth-child(3) {
  transform: rotateX(20deg) rotateY(62deg);
}
.agent-sphere > span {
  font-size: 50px;
  color: #c1d7ff;
  text-shadow: 0 0 24px #6b9cf766;
  transform: translateZ(35px);
}
.teacher-sphere {
  left: 3%;
  top: 18%;
}
.architect-sphere {
  right: 0;
  bottom: 10%;
  width: 175px;
  height: 175px;
  background: radial-gradient(
    circle at 27% 17%,
    #84abcc28,
    #15364c22 45%,
    #091a27 73%
  );
  border-color: #a4d7ea20;
}
.architect-sphere > i {
  border-color: #9fbfcf44;
}
.architect-sphere > span {
  font-size: 40px;
  color: #c3e0f3;
}
.duet-line {
  position: absolute;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #779be36b, transparent);
  top: 49%;
  left: 22%;
  transform: rotate(22deg);
  z-index: -1;
}
.agent-hero-duet {
  position: absolute;
  width: 420px;
  right: 0;
  top: 150px;
  height: 340px;
}
.agents-hero {
  padding-bottom: 110px;
}
.agents-hero h1 {
  font-size: clamp(56px, 6vw, 82px);
  max-width: 850px;
}
.agents-hero > p {
  max-width: 450px;
}
.agent-hero-duet .teacher-sphere {
  width: 160px;
  height: 160px;
  left: 20%;
  top: 0;
}
.agent-hero-duet .architect-sphere {
  width: 135px;
  height: 135px;
  bottom: 0;
}
.agent-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  padding-block: 100px;
  border-top: 1px solid var(--line);
}
.agent-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #bed5ff;
  font:
    15px Manrope,
    sans-serif;
  letter-spacing: -0.2px;
}
.agent-name .icon {
  width: 18px;
  height: 18px;
}
.agent-profile h2 {
  font-size: clamp(36px, 4.4vw, 59px);
}
.agent-profile-copy > p {
  font-size: 13px;
  line-height: 1.95;
  margin: 25px 0;
  max-width: 40ch;
}
.agent-profile .detail-list {
  margin: 20px 0 0;
}
.agent-console,
.architecture-canvas {
  position: relative;
  background: linear-gradient(145deg, #1c2c4729, #111825);
  border: 1px solid #7a94c43d;
  box-shadow: 0 30px 80px #0004;
  border-radius: 13px;
  overflow: hidden;
  padding: 28px;
  min-height: 435px;
}
.agent-console-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ffffff12;
  padding-bottom: 18px;
  font-size: 11px;
  color: #c0d0e8;
}
.agent-console-bar > span:last-child {
  font-size: 9px;
  color: #879ab9;
}
.agent-context-pills {
  display: flex;
  gap: 7px;
  margin: 18px 0;
}
.agent-context-pills span {
  border: 1px solid #ffffff13;
  background: #ffffff02;
  border-radius: 5px;
  font-size: 8px;
  padding: 3px 8px;
  color: #8ca4c9;
}
.agent-question {
  border: 1px solid #ffffff0b;
  background: #ffffff04;
  border-radius: 8px;
  padding: 15px;
  font-size: 12px;
  line-height: 1.8;
  color: #d7e3f6;
}
.agent-response {
  padding-top: 25px;
}
.agent-avatar {
  font-size: 25px;
  color: #a5c7ff;
  line-height: 1;
}
.agent-response p {
  font-size: 12px;
  line-height: 1.9;
  margin: 14px 0;
  color: #b5c4dd;
}
.agent-citation {
  padding: 12px;
  border: 1px solid #40619755;
  border-radius: 6px;
  background: #24457619;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  color: #afc7ee;
  margin-top: 23px;
}
.agent-citation small {
  margin-left: auto;
  font-size: 8px;
  color: #8199bf;
}
.agent-citation .icon {
  width: 14px;
  height: 14px;
}
.reasoning-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-top: 23px;
  margin-top: 23px;
  border-top: 1px solid #ffffff0c;
  font-size: 9px;
  color: #9cb2d6;
}
.reasoning-loop .icon {
  width: 13px;
  height: 13px;
  color: #607ea9;
}
.architecture-root {
  position: relative;
  border: 1px solid #527bb15e;
  background: #223a593a;
  padding: 17px 23px;
  width: max-content;
  max-width: 100%;
  margin: 30px auto 0;
  border-radius: 8px;
  font-size: 13px;
  color: #d8e6fc;
  z-index: 1;
}
.architecture-root small {
  display: block;
  font-size: 9px;
  margin-top: 5px;
  color: #8eacd1;
}
.architecture-connect {
  height: 32px;
  width: 1px;
  background: #5676a8;
  margin: auto;
}
.architecture-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  position: relative;
}
.architecture-branches:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 23%;
  right: 23%;
  height: 1px;
  background: #456492;
}
.architecture-branches > div {
  padding: 17px 12px;
  background: #19273844;
  border: 1px solid #799bc133;
  border-radius: 7px;
  font-size: 11px;
  position: relative;
}
.architecture-branches > div:before {
  content: "";
  height: 14px;
  width: 1px;
  background: #456492;
  position: absolute;
  top: -15px;
  left: 50%;
}
.architecture-branches small {
  display: block;
  font-size: 9px;
  color: #8ba3c1;
  margin-top: 4px;
}
.architecture-decision {
  border-left: 2px solid #90b1ef;
  background: #1e33552e;
  margin-top: 25px;
  padding: 16px 18px;
}
.architecture-decision > span {
  font-size: 9px;
  color: #91b2e3;
}
.architecture-decision p {
  font-size: 12px;
  line-height: 1.85;
  margin-top: 7px;
  color: #c0d0e5;
}
.architecture-memory {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  color: #8ba3c6;
  margin-top: 24px;
}
.memory-node {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #7495cf;
}
.memory-node:nth-child(3) {
  margin-left: 20px;
}
.agent-boundaries {
  padding-block: 80px 100px;
  border-top: 1px solid var(--line);
}
.agent-boundaries > h2 {
  font-size: 45px;
}
.boundary-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 45px;
  margin-top: 55px;
}
.boundary-columns h3 {
  font-size: 22px;
  margin-bottom: 18px;
}
.boundary-columns p {
  font-size: 12px;
  line-height: 1.9;
}
.boundary-columns .text-link {
  font-size: 11px;
  margin-top: 20px;
}
/* Focused account experience; no credentials are exposed to page JavaScript. */
.account-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 110px;
  padding-block: 175px 115px;
  min-height: 88svh;
}
.account-intro h1 {
  font-size: clamp(60px, 6.5vw, 88px);
}
.account-intro > p {
  font-size: 14px;
  margin: 25px 0 40px;
  line-height: 1.9;
}
.account-agent-list {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin-bottom: 45px;
}
.account-agent-list > div {
  display: flex;
  gap: 16px;
  align-items: center;
  color: #bacde9;
  font-size: 12px;
}
.account-agent-list small {
  display: block;
  font-size: 10px;
  color: #8397b6;
  margin-top: 2px;
}
.account-agent-list .icon {
  width: 22px;
  height: 22px;
  color: #8db0ec;
}
.account-panel {
  background: linear-gradient(140deg, #14213a44, #0d121c 65%);
  border: 1px solid #7c96c431;
  border-radius: 14px;
  padding: 35px 38px;
  min-height: 450px;
  box-shadow: 0 25px 100px #0004;
  position: relative;
}
.account-panel:before {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9cbeff7f, transparent);
}
.account-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 29px;
  gap: 20px;
}
.account-preview {
  font-size: 9px;
  color: #91accf;
  border: 1px solid #718dbd3e;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.account-panel h2 {
  font-size: 29px;
  letter-spacing: -1px;
  line-height: 1.25;
}
.account-panel h2 + p {
  font-size: 12px;
  line-height: 1.9;
  margin: 15px 0 26px;
}
.account-panel strong {
  color: #d6e3f6;
  font-weight: 500;
}
.account-panel label {
  display: block;
  font-size: 11px;
  color: #bdc9dc;
  margin-bottom: 8px;
}
.account-panel input {
  background: #080d16;
  border: 1px solid #53617a77;
  border-radius: 7px;
  min-height: 48px;
  width: 100%;
  padding: 11px 14px;
  font:
    13px Inter,
    sans-serif;
  color: #e5ecf9;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  outline: none;
}
.account-panel input:focus-visible {
  border-color: #80adf5;
  box-shadow: 0 0 0 3px #4586f322;
}
.account-panel input::placeholder {
  color: #606e88;
}
.account-panel input:disabled {
  opacity: 0.6;
}
.account-submit {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 20px;
  font-size: 12px;
  gap: 23px;
}
.account-fineprint {
  font-size: 10px;
  line-height: 1.8;
  color: #7c90af;
  margin: 19px 0 0;
}
.account-privacy {
  display: block;
  font-size: 9px;
  color: #90a5c9;
  border-top: 1px solid #ffffff0b;
  padding-top: 22px;
  margin-top: 25px;
}
.account-message {
  font-size: 11px;
  line-height: 1.9;
  color: #a8c5ef;
  margin-top: 16px;
}
.account-message:empty {
  display: none;
}
.account-message.is-error {
  color: #f2afad;
  border: 1px solid #9e555b44;
  background: #48202922;
  padding: 12px;
  border-radius: 6px;
}
.account-back {
  margin-bottom: 20px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 10px;
}
.account-panel .otp-input {
  font: 22px/1.5 monospace;
  letter-spacing: 0.3em;
  text-align: center;
  height: 58px;
}
.account-panel #resend-code {
  font-size: 10px;
  border: 0;
  background: none;
  padding: 0;
  margin-top: 20px;
}
.account-panel [hidden] {
  display: none !important;
}
.account-loading {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #97abcd;
  min-height: 330px;
}
.loading-orbit {
  width: 21px;
  height: 21px;
  border: 1px solid #3a5a89;
  border-top-color: #a2c3ff;
  border-radius: 50%;
  animation: account-spin 1.4s linear infinite;
}
.account-connected {
  font-size: 10px;
  color: #b3cef6;
}
.account-panel #sign-out {
  border: 0;
  background: none;
  padding: 0;
  font-size: 10px;
}
.account-email-display {
  overflow-wrap: anywhere;
  font-size: 11px;
  color: #8ba4c8;
}
.allowance-panel {
  background: #12203855;
  border: 1px solid #5e80b53c;
  border-radius: 8px;
  padding: 22px;
  margin-top: 24px;
}
.allowance-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  align-items: center;
  color: #97aecf;
}
.allowance-panel > div:first-child strong {
  font-size: 9px;
  color: #b6cced;
}
.allowance-number {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 15px;
}
.allowance-number > strong {
  font-size: 43px;
  line-height: 1.1;
  font-family: Manrope, sans-serif;
  letter-spacing: -2px;
}
.allowance-number > span {
  font-size: 10px;
  color: #99afd0;
}
.allowance-panel progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #26374f;
}
.allowance-panel progress::-webkit-progress-bar {
  background: #26374f;
}
.allowance-panel progress::-webkit-progress-value {
  background: linear-gradient(90deg, #4e7deb, #a0c3ff);
}
.allowance-panel progress::-moz-progress-bar {
  background: #83acf5;
}
.allowance-panel > p {
  font-size: 9px;
  line-height: 1.8;
  color: #869ebe;
  margin-top: 12px;
}
.allowance-panel .text-link {
  font-size: 9px;
  margin-top: 13px;
  padding: 0;
  border: 0;
  background: none;
}
.allowance-panel .text-link .icon {
  width: 12px;
  height: 12px;
}
.billing-panel {
  padding: 26px 0;
  border-bottom: 1px solid #ffffff0b;
}
.billing-panel > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.billing-panel h3 {
  font-size: 18px;
  letter-spacing: -0.4px;
}
.billing-panel > p:not(.account-fineprint) {
  font-size: 11px;
  line-height: 1.9;
  margin: 15px 0;
}
.billing-panel .button {
  font-size: 11px;
  min-height: 40px;
}
.account-panel .text-link:disabled {
  opacity: 0.5;
}
.billing-result {
  max-width: 600px;
  min-height: 85svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 145px 100px;
}
.billing-result > h1 {
  font-size: 58px;
  line-height: 1.13;
  margin: 28px 0 22px;
}
.billing-result > p {
  font-size: 13px;
  line-height: 1.9;
}
.billing-result-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid #7f9dcc4b;
  border-radius: 15px;
  background: #1b2b4933;
  color: #aacaff;
  font-size: 26px;
}
.billing-result .hero-actions {
  gap: 25px;
}
.billing-result .account-fineprint {
  font-size: 11px;
}
.billing-result > .wordmark {
  margin-bottom: 48px;
}
.billing-result .billing-result-status {
  padding: 13px 17px;
  background: #2135563a;
  border: 1px solid #6d8eb93d;
  border-radius: 7px;
  margin: 25px 0 0;
  color: #b4cbef;
  font-size: 11px;
}
@keyframes account-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-orbit {
    animation: none;
  }
  .agent-sphere,
  .hero-orbit {
    will-change: auto;
  }
}
@media (max-width: 1200px) {
  .hero h1 {
    font-size: 80px;
  }
  .hero-art-stage {
    height: 480px;
  }
  .hero-orbit {
    top: 20px;
    left: -75px;
    width: 120%;
  }
  .agents-hero h1 {
    font-size: 68px;
  }
  .agent-hero-duet {
    width: 340px;
    right: -40px;
  }
  .agent-hero-duet .teacher-sphere {
    left: 8%;
  }
  .account-layout {
    gap: 65px;
  }
  .agent-profile {
    gap: 55px;
  }
  .agent-bridge {
    gap: 50px;
  }
  .agent-sphere {
    width: 180px;
    height: 180px;
  }
  .architect-sphere {
    width: 145px;
    height: 145px;
  }
  .header-actions {
    gap: 18px;
  }
  .site-header nav {
    gap: 24px;
  }
}
@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: 1000px;
    padding-top: 145px;
    padding-bottom: 135px;
  }
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-description {
    margin: auto;
    max-width: 40ch;
  }
  .hero .hero-actions {
    justify-content: center;
  }
  .hero h1 {
    font-size: 94px;
  }
  .hero-art-stage {
    height: 470px;
    width: 80%;
    margin: 5px auto 0;
  }
  .hero-orbit {
    width: 100%;
    left: 0;
    top: 0;
  }
  .agent-hero-duet {
    position: relative;
    top: 0;
    right: 0;
    width: 400px;
    height: 300px;
    margin: 25px auto 0;
  }
  .agents-hero {
    padding-bottom: 60px;
  }
  .agents-hero h1 {
    font-size: 64px;
  }
  .agent-bridge h2 {
    font-size: 46px;
  }
  .agent-bridge {
    gap: 25px;
    padding-bottom: 50px;
  }
  .agent-duet:not(.agent-hero-duet) {
    height: 330px;
  }
  .teacher-sphere {
    width: 150px;
    height: 150px;
  }
  .architect-sphere {
    width: 120px;
    height: 120px;
  }
  .agent-profile {
    gap: 30px;
  }
  .agent-profile h2 {
    font-size: 36px;
  }
  .agent-profile .detail-list li {
    font-size: 11px;
  }
  .agent-console,
  .architecture-canvas {
    padding: 22px;
  }
  .boundary-columns {
    gap: 25px;
  }
  .boundary-columns h3 {
    font-size: 19px;
  }
  .account-layout {
    gap: 40px;
  }
  .account-panel {
    padding: 28px;
  }
  .account-intro h1 {
    font-size: 65px;
  }
  .account-intro > p {
    font-size: 13px;
  }
  .billing-panel > div {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .header-actions {
    gap: 14px;
  }
  .site-header nav {
    gap: 18px;
  }
  .footer-top nav {
    gap: 20px;
  }
}
@media (max-width: 760px) {
  .site-header {
    height: 76px;
    width: calc(100% - 32px);
    gap: 15px;
  }
  .site-header .wordmark {
    font-size: 18px;
  }
  .header-actions {
    gap: 10px;
    margin-left: auto;
  }
  .sign-in-link {
    font-size: 10px;
  }
  .header-actions > .button {
    padding: 6px 10px;
    min-height: 32px;
    font-size: 9px;
    gap: 6px;
  }
  .header-actions > .button .icon {
    width: 12px;
    height: 12px;
  }
  .menu-toggle {
    order: 3;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 25px;
    height: 30px;
    border: 0;
    background: transparent;
    padding: 3px;
    color: #c7d7ed;
    z-index: 22;
  }
  .enhanced .menu-toggle {
    display: flex;
  }
  .menu-toggle span {
    height: 1px;
    width: 19px;
    background: currentColor;
    transition: transform 0.25s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
  .site-header nav {
    position: absolute;
    top: 75px;
    left: -16px;
    right: -16px;
    padding: 28px 25px;
    background: #0c111cf5;
    border-block: 1px solid #6c8abb2c;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 25px 60px #0008;
    z-index: 21;
  }
  .site-header nav a {
    display: block !important;
    font-size: 13px;
  }
  .enhanced .site-header nav:not(.is-open) {
    display: none;
  }
  .site-header nav:not(.is-open) {
    visibility: hidden;
  }
  .site-header nav.is-open {
    visibility: visible;
  }
  .hero {
    min-height: 0;
    height: auto;
    padding: 130px 0 90px;
    max-height: none;
  }
  .hero-layout {
    height: auto;
    width: calc(100% - 40px);
    gap: 0;
  }
  .hero-copy {
    text-align: left;
  }
  .hero h1 {
    font-size: clamp(52px, 17vw, 96px);
  }
  .hero-lede {
    font-size: 18px;
    margin-top: 25px;
  }
  .hero-description {
    margin: 0;
    max-width: 37ch;
    font-size: 12px;
  }
  .hero .hero-actions {
    justify-content: flex-start;
    gap: 20px;
    margin: 24px 0 10px;
  }
  .hero .hero-actions .text-link {
    font-size: 10px;
  }
  .hero-art-stage {
    width: 100%;
    height: 320px;
    margin: 20px 0 -15px;
  }
  .hero-orbit {
    width: 125%;
    left: -12%;
    top: 0;
  }
  .showcase-surface {
    margin-top: -75px;
    padding-top: 12px;
    border-radius: 22px 22px 0 0;
  }
  .product-heading {
    padding-top: 25px;
  }
  .journey-section {
    padding-top: 70px;
  }
  .journey-heading {
    margin-bottom: 22px;
  }
  .carousel-controls {
    padding-top: 5px;
  }
  .practice-visual,
  .project-visual,
  .contribution-visual {
    height: 280px;
  }
  .practice-invite {
    margin-top: 0;
  }
  .journey-footer {
    margin-top: 12px;
  }
  .teacher-section {
    padding-top: 55px;
  }
  .final-cta {
    padding-block: 70px 80px;
  }
  .agent-bridge {
    grid-template-columns: 1fr;
    padding-block: 50px 45px;
    gap: 20px;
  }
  .agent-bridge h2 {
    font-size: 42px;
  }
  .agent-bridge p {
    font-size: 12px;
    margin-block: 20px;
  }
  .agent-duet:not(.agent-hero-duet) {
    height: 300px;
    width: 320px;
    max-width: 100%;
    margin: auto;
  }
  .teacher-sphere {
    width: 160px;
    height: 160px;
    left: 5%;
    top: 7%;
  }
  .architect-sphere {
    width: 130px;
    height: 130px;
    right: 5%;
    bottom: 8%;
  }
  .agent-sphere > span {
    font-size: 39px;
  }
  .architect-sphere > span {
    font-size: 31px;
  }
  .site-footer {
    padding-block: 24px;
  }
  .footer-top {
    gap: 20px;
    justify-content: space-between;
  }
  .footer-top nav {
    width: auto;
    margin: 0;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 10px;
  }
  .footer-copyright {
    font-size: 8px;
    margin-left: auto;
  }
  .page-hero {
    padding-block: 135px 55px;
  }
  .agents-hero h1 {
    font-size: 46px;
  }
  .agents-hero > p {
    font-size: 12px;
  }
  .agent-hero-duet {
    width: 280px;
    height: 240px;
    max-width: 100%;
    margin-top: 35px;
  }
  .agent-hero-duet .teacher-sphere {
    width: 130px;
    height: 130px;
    left: 5%;
    top: 0;
  }
  .agent-hero-duet .architect-sphere {
    width: 110px;
    height: 110px;
    bottom: 0;
    right: 0;
  }
  .agents-hero .hero-actions {
    gap: 22px;
  }
  .agent-profile {
    grid-template-columns: 1fr;
    gap: 35px;
    padding-block: 60px;
  }
  .agent-profile h2 {
    font-size: 42px;
  }
  .agent-profile-copy > p {
    max-width: 40ch;
    font-size: 12px;
  }
  .agent-profile .detail-list li {
    font-size: 11px;
  }
  .agent-console,
  .architecture-canvas {
    padding: 22px;
    min-height: 400px;
  }
  .architecture-branches {
    gap: 12px;
  }
  .architecture-branches > div {
    font-size: 10px;
    padding: 14px 10px;
  }
  .architecture-memory {
    font-size: 7px;
  }
  .reasoning-loop {
    gap: 17px;
  }
  .agent-boundaries {
    padding-block: 55px 65px;
  }
  .agent-boundaries > h2 {
    font-size: 35px;
  }
  .boundary-columns {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 35px;
  }
  .boundary-columns h3 {
    font-size: 23px;
    margin-bottom: 12px;
  }
  .boundary-columns p {
    font-size: 12px;
  }
  .account-layout {
    grid-template-columns: 1fr;
    padding-block: 125px 65px;
    gap: 40px;
    min-height: 0;
  }
  .account-intro h1 {
    font-size: 57px;
  }
  .account-intro > p {
    margin: 19px 0 0;
    font-size: 12px;
  }
  .account-agent-list,
  .account-intro > .text-link {
    display: none;
  }
  .account-panel {
    padding: 27px 24px;
    min-height: 380px;
    border-radius: 11px;
  }
  .account-panel h2 {
    font-size: 27px;
  }
  .account-panel-top {
    margin-bottom: 23px;
  }
  .account-panel .otp-input {
    letter-spacing: 0.2em;
    font-size: 22px;
  }
  .billing-panel > div {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .billing-panel h3 {
    font-size: 17px;
  }
  .account-panel .account-preview {
    font-size: 8px;
  }
  .allowance-panel {
    padding: 20px;
  }
  .allowance-number > strong {
    font-size: 40px;
  }
  .product-end-simple h2 {
    font-size: 38px;
  }
  .billing-result {
    padding-block: 100px 65px;
    min-height: 90svh;
  }
  .billing-result > h1 {
    font-size: 44px;
  }
  .billing-result > .wordmark {
    margin-bottom: 35px;
  }
}
@media (max-width: 420px) {
  .site-header {
    gap: 8px;
  }
  .site-header .brand-orbit {
    width: 32px;
    height: 25px;
  }
  .site-header .wordmark {
    font-size: 17px;
    gap: 0;
  }
  .header-actions {
    gap: 11px;
  }
  .header-actions > .button {
    font-size: 9px;
    min-height: 30px;
  }
  .header-actions > .button .icon {
    display: none;
  }
  .hero {
    padding-top: 125px;
  }
  .hero h1 {
    font-size: 17vw;
  }
  .hero-art-stage {
    height: 280px;
    margin-top: 27px;
  }
  .footer-top nav {
    width: 100%;
    order: 3;
    justify-content: space-between;
    margin-top: 3px;
  }
  .footer-copyright {
    margin: 0;
  }
  .agents-hero h1 {
    font-size: 43px;
  }
  .account-panel {
    padding: 24px 20px;
  }
  .billing-panel > div {
    align-items: start;
    flex-direction: column;
  }
  .agent-profile h2 {
    font-size: 38px;
  }
}

.pricing-section {
  padding-top: 100px;
  padding-bottom: 100px;
  scroll-margin-top: 100px;
}
.pricing-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 48px;
}
.pricing-heading h2 {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.06em;
  margin: 0;
}
.pricing-heading h2 span {
  color: #929fb8;
}
.pricing-heading > p {
  max-width: 320px;
  color: #9eacc3;
  line-height: 1.8;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.pricing-plan {
  padding: 38px;
  border: 1px solid #ffffff18;
  border-radius: 18px;
  background: #0e131e;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.pricing-plus {
  background:
    radial-gradient(ellipse at 100% 0, #22488750, transparent 65%), #101725;
  border-color: #6c95df55;
}
.pricing-plan h3 {
  font-size: 23px;
  letter-spacing: -0.035em;
  margin: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.pricing-plan > div > p {
  font-size: 14px;
  color: #9eabc0;
  margin: 12px 0 0;
}
.pricing-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid #7ba5f34a;
  color: #b1ccff;
  border-radius: 30px;
  padding: 5px 10px;
}
.pricing-price {
  font-size: 56px;
  letter-spacing: -0.06em;
  line-height: 1.2;
  margin: 34px 0 24px;
  color: #f1f5ff;
}
.pricing-price > span {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  color: #96a7c3;
  margin-top: 8px;
}
.pricing-plan > .button {
  justify-content: center;
}
.pricing-plan ul {
  list-style: none;
  margin: 30px 0 20px;
  padding: 0;
  display: grid;
  gap: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #c4cfe0;
}
.pricing-plan li {
  padding-left: 22px;
  position: relative;
}
.pricing-plan li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #8ab5ff;
}
.pricing-footnote {
  color: #92a1b9;
  font-size: 12px;
  line-height: 1.8;
  margin: auto 0 0;
  padding-top: 12px;
}
.pricing-disclosure {
  max-width: 790px;
  margin: 25px auto 0;
  color: #8493ad;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
}
@media (max-width: 760px) {
  .pricing-section {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .pricing-heading {
    display: block;
  }
  .pricing-heading > p {
    margin-top: 22px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-plan {
    padding: 26px;
  }
  .pricing-price {
    font-size: 48px;
  }
}

.journey-scroll-pinned {
  padding: 28px 0 24px;
}
.journey-scroll-pinned .journey-heading {
  margin-bottom: 24px;
}
.journey-scroll-pinned .journey-heading h2 {
  font-size: clamp(36px, 4.2vw, 62px);
}
.journey-scroll-pinned .journey-track {
  scroll-snap-type: none;
  scrollbar-width: none;
  overflow-x: hidden;
}
.journey-scroll-pinned .practice-visual,
.journey-scroll-pinned .project-visual,
.journey-scroll-pinned .contribution-visual {
  height: 280px;
}
.journey-scroll-pinned .journey-card {
  padding: 20px 26px;
}
.journey-scroll-pinned .journey-card h3 {
  font-size: 26px;
}
.journey-scroll-pinned .journey-footer {
  margin-top: 12px;
}