/* Final public-page pass: keep app/admin untouched, unify every marketing/info subpage. */
:is(
  .legal-shell,
  .agent-page,
  .bot-page,
  .promo-page,
  .intel-page,
  .oil-page,
  .deals-page,
  .netnode-shell,
  .orbii-page,
  .comic-shell,
  .live-page,
  .shell
) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  background: #ffffff;
}

:is(
  .legal-nav,
  .agent-brand,
  .agent-nav,
  .bot-brand,
  .bot-nav,
  .promo-brand,
  .promo-nav,
  .intel-topbar,
  .oil-brand,
  .oil-nav,
  .hero-topbar,
  .live-brand,
  .live-nav
) {
  position: relative;
  z-index: 3;
  color: #ffffff;
}

:is(.legal-brand, .agent-brand, .bot-brand, .promo-brand, .intel-brand, .oil-brand, .hero-brand, .live-brand) {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 800;
}

:is(
  .legal-hero,
  .agent-hero,
  .bot-hero,
  .promo-hero,
  .intel-hero,
  .oil-hero,
  .hero,
  .comic-hero,
  .live-hero
) {
  min-height: 620px;
  margin: 0;
  padding: 128px 20px 170px;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  color: #ffffff;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(49, 108, 235, 0.88) 0%, rgba(118, 75, 162, 0.88) 100%),
    #03a9f4 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

:is(
  .legal-hero,
  .agent-hero,
  .bot-hero,
  .promo-hero,
  .intel-hero,
  .oil-hero,
  .hero,
  .comic-hero,
  .live-hero
)::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -1px;
  height: 132px;
  background: #ffffff;
  clip-path: polygon(0 62%, 9% 48%, 19% 42%, 31% 58%, 44% 39%, 56% 53%, 69% 35%, 81% 51%, 92% 38%, 100% 52%, 100% 100%, 0 100%);
}

:is(
  .legal-hero h1,
  .agent-hero h1,
  .bot-hero h1,
  .promo-hero h1,
  .intel-hero h1,
  .oil-hero h1,
  .hero h1,
  .comic-hero h1,
  .live-hero h1
) {
  max-width: 920px;
  margin: 0;
  color: #ffffff;
  font-size: 3.45rem;
  line-height: 1.14;
  font-weight: 300;
}

:is(
  .legal-hero p,
  .agent-subhead,
  .bot-subhead,
  .promo-subhead,
  .intel-hero p,
  .oil-subhead,
  .hero .lede,
  .comic-hero p,
  .live-subhead
) {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.13rem;
  line-height: 1.65;
  font-weight: 300;
}

:is(
  .legal-actions,
  .agent-actions,
  .bot-actions,
  .promo-actions,
  .hero-actions,
  .oil-form-row,
  .live-actions
) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

:is(
  .legal-hero .login-link,
  .agent-btn,
  .bot-btn,
  .promo-btn,
  .cta,
  .oil-form-row button,
  .live-actions a
) {
  min-height: 46px;
  padding: 0 22px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ffffff;
  color: #1673d1;
  text-decoration: none;
  font-weight: 800;
}

:is(
  .legal-hero .login-link.secondary,
  .agent-btn.secondary,
  .bot-btn.secondary,
  .promo-btn.secondary,
  .promo-btn.tertiary,
  .cta.secondary,
  .oil-form-row button.secondary,
  .live-actions a.secondary
) {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.72);
}

:is(
  .legal-grid,
  .agent-proof-grid,
  .agent-surface-grid,
  .agent-grid,
  .bot-grid,
  .profile-grid,
  .trust-grid,
  .examples-grid,
  .promo-angle-grid,
  .promo-snippet-grid,
  .oil-results,
  .oil-detail-grid,
  .comic-grid,
  .live-layout,
  .layout
) {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 74px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #e7eef7;
}

:is(.agent-panel, .bot-panel, .promo-panel, .oil-controls, .panel, .deals-panel, .netnode-panel, .orbii-panel) {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(
  .legal-panel,
  .agent-card,
  .agent-surface-card,
  .agent-code-card,
  .lane-card,
  .profile-card,
  .trust-card,
  .example-card,
  .limit-card,
  .promo-panel,
  .promo-snippet-card,
  .oil-card,
  .oil-panel,
  .panel,
  .comic-card
) {
  padding: 30px;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(.legal-panel h2, .agent-panel h2, .bot-panel h2, .promo-panel h2, .oil-panel h2, .panel h2, .comic-card h2) {
  margin: 0 0 12px;
  color: #3c424f;
  font-weight: 300;
}

:is(.legal-panel p, .agent-panel p, .bot-panel p, .promo-panel p, .oil-panel p, .panel p, .comic-card p) {
  color: #6b7c93;
  line-height: 1.7;
}

:is(.legal-footer, .agent-footer, .bot-footer, .promo-footer, .footer) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 42px 20px;
  justify-content: center;
  color: #ffffff;
  background: #222222;
  border: 0;
}

@media (max-width: 980px) {
  :is(
    .legal-grid,
    .agent-proof-grid,
    .agent-surface-grid,
    .agent-grid,
    .bot-grid,
    .profile-grid,
    .trust-grid,
    .examples-grid,
    .promo-angle-grid,
    .promo-snippet-grid,
    .oil-results,
    .oil-detail-grid,
    .comic-grid,
    .live-layout,
    .layout
  ) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :is(
    .legal-hero,
    .agent-hero,
    .bot-hero,
    .promo-hero,
    .intel-hero,
    .oil-hero,
    .hero,
    .comic-hero,
    .live-hero
  ) {
    min-height: 680px;
    padding: 132px 16px 150px;
  }

  :is(
    .legal-hero h1,
    .agent-hero h1,
    .bot-hero h1,
    .promo-hero h1,
    .intel-hero h1,
    .oil-hero h1,
    .hero h1,
    .comic-hero h1,
    .live-hero h1
  ) {
    font-size: 2.4rem;
  }
}

/* Guard against old page-local grids using min-content widths on mobile. */
.netnode-shell > *,
.netnode-hero,
.netnode-hero > *,
.start-strip,
.operator-facts,
.hero-grid,
.steps-grid,
.surface-grid,
.gap-list,
.code-grid,
.code-grid > *,
.code-block,
.runtime-card,
.shell > *,
.shell .hero,
.shell .hero > *,
.shell .layout,
.shell .panel,
.shell .network-map,
.shell .map-detail {
  min-width: 0;
  max-width: 100%;
}

.code-block,
.runtime-card {
  width: 100%;
}

@media (max-width: 720px) {
  .netnode-shell,
  .shell {
    overflow-x: clip;
  }

  .netnode-brand,
  .netnode-nav,
  .hero-actions,
  .shell .hero-topbar,
  .shell .hero-nav {
    width: 100%;
  }

  .shell .hero,
  .shell .layout,
  .shell .panel {
    width: 100%;
  }

  .shell #map {
    width: auto;
    max-width: 100%;
  }
}