/** Homepage experiment and navigation presentation; keep game, chart, Boardroom and legal styles isolated. */
.hero { min-height: 720px; padding-block: 154px 64px; }
.hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 48px; }
.hero h1 { font-size: clamp(3.4rem, 6.6vw, 5.8rem); }
.hero__identity { display: block; margin-top: 18px; max-width: 690px; font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -.035em; text-transform: none; }
.hero__line { margin-top: 24px; max-width: 660px; color: var(--soft); font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 500; line-height: 1.6; letter-spacing: 0; }
.hero__copy { margin-top: 14px; max-width: 650px; color: var(--muted); font-size: .98rem; line-height: 1.65; }
.hero__actions { margin-top: 24px; }
.hero__actions .button { white-space: normal; text-align: center; line-height: 1.4; }
.hero-highlight { padding: 0; border: 0; background: none; margin-top: 20px; font-size: .9rem; }
.experiment-play { display: inline-block; margin-top: 8px; min-height: 44px; padding-block: 10px; color: var(--cyan); font-size: .87rem; font-weight: 700; }
.hero__visual { min-height: 360px; }
.hero__visual .orb-card { width: min(100%, 340px); }
.experiment-section { padding-block: 48px; border-block: 1px solid var(--line); background: rgba(17, 24, 39, .35); }
.experiment-section .section__head { margin-bottom: 28px; }
.experiment-section h2, .experiment-log h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.experiment-section .section__head--split { grid-template-columns: 1fr auto; gap: 24px; }
.experiment-text-link { color: var(--cyan); font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }
.experiment-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; }
.experiment-pillars li { min-width: 0; display: flex; gap: 12px; }
.experiment-number { color: var(--cyan); font: .75rem/1.8 'Roboto Mono', monospace; }
.experiment-pillars h3, .experiment-milestones h3 { font-size: 1.03rem; line-height: 1.4; }
.experiment-pillars p { color: var(--muted); margin-top: 10px; font-size: .88rem; line-height: 1.7; }
.experiment-pillars a, .experiment-milestones a { display: inline-block; margin-inline-end: 18px; padding-block: 12px 8px; min-height: 44px; color: var(--cyan); font-size: .85rem; }
.experiment-log { padding-block: 72px; }
.experiment-log .section__head { margin-bottom: 24px; }
.experiment-log .section__copy { font-size: .9rem; }
.experiment-milestones { list-style: none; }
.experiment-milestones li { display: grid; grid-template-columns: minmax(170px, .45fr) minmax(0, 1fr); gap: 40px; padding-block: 24px; border-top: 1px solid var(--line); }
.experiment-milestone-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--cyan); font-size: .8rem; }
.experiment-milestone-meta time { font: .75rem/1.6 'Roboto Mono', monospace; color: var(--muted); }
.experiment-milestones p { margin-top: 8px; max-width: 750px; color: var(--muted); line-height: 1.7; }
.experiment-boundaries { margin-top: 24px; padding: 22px 26px; border-inline-start: 2px solid var(--cyan); background: rgba(84, 221, 242, .04); }
.experiment-boundaries h3 { font-size: 1rem; }
.experiment-boundaries p { margin-top: 8px; color: var(--muted); font-size: .92rem; }
.command-network .hero-verify { margin-block: 0 24px; }
#experiment, #experiment-log, #ecosystem { scroll-margin-top: 124px; }
.experiment-play:focus-visible, .experiment-text-link:focus-visible, .experiment-pillars a:focus-visible, .experiment-milestones a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 3px; }
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(230px, .7fr); gap: 28px; }
  .experiment-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (max-width: 760px) {
  .hero { min-height: auto; padding-block: 140px 32px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero h1 { font-size: clamp(3.2rem, 14vw, 4rem); margin-top: 14px; }
  .hero__identity { font-size: clamp(1.8rem, 7.6vw, 2.4rem); margin-top: 14px; }
  .hero__line { margin-top: 20px; font-size: 1.02rem; line-height: 1.55; }
  .hero__copy { margin-top: 12px; font-size: .92rem; line-height: 1.55; }
  .hero__actions { margin-top: 20px; gap: 10px; }
  .hero__actions .button { min-height: 46px; padding-block: 10px; }
  .hero__visual { display: none; }
  .hero .eyebrow { font-size: .66rem; letter-spacing: .13em; }
  .hero-highlight { margin-top: 16px; font-size: .85rem; }
  .experiment-section { padding-block: 32px; }
  .experiment-section .section__head--split { grid-template-columns: 1fr; gap: 10px; }
  .experiment-section .section__head { margin-bottom: 20px; }
  .experiment-pillars { gap: 22px 18px; }
  .experiment-pillars li { display: block; }
  .experiment-number { display: block; margin-bottom: 6px; }
  .experiment-pillars h3 { font-size: .95rem; }
  .experiment-pillars p { font-size: .84rem; }
  .experiment-pillars a { font-size: .8rem; margin-inline-end: 0; }
  .experiment-log { padding-block: 48px; }
  .experiment-milestones li { grid-template-columns: 1fr; gap: 12px; }
  .experiment-milestone-meta { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .experiment-milestones p { font-size: .92rem; }
  .experiment-boundaries { padding: 18px; }
}

@media (max-width: 360px) {
  /* The existing mobile navigation wraps to three rows on the smallest phones. */
  .hero { padding-top: 164px; }
}

/* Bridge the gap between desktop links and mobile tabs without changing either layout.
   A dedicated second row keeps all six existing links reachable, including long/RTL labels. */
@media (min-width: 641px) and (max-width: 1080px) {
  .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 64px 52px; gap: 0 20px; }
  .nav__actions { grid-column: 2; grid-row: 1; }
  .nav__links { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-self: stretch; align-items: stretch; gap: 8px; letter-spacing: .04em; }
  .nav__links a { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
  .network-bar { top: 116px; }
  .hero { padding-top: 188px; }
  [id] { scroll-margin-top: 168px; }
}