/* Approved October homepage direction. Scoped to the public landing so the
   community form and internal workspace keep their existing styles. */
#landing { --oc-capi-green: #97ab5e; }
#landing .l-main { max-width: 1250px; }
#landing .l-nav,
#landing .oc-footer { padding-inline: max(32px, calc((100vw - 1184px) / 2)); }
#landing .oc-header-links { flex-wrap: wrap; }

#landing h1,
#landing h2,
#landing h3,
#landing .l-hero h1 em,
#landing .oc-explainer h2 em,
#landing .oc-explainer h3 em {
  color: var(--oc-text);
  font-family: var(--oc-sans);
  font-style: normal;
  font-weight: 600;
}
#landing .l-hero h1 em { color: var(--oc-capi-green); }
#landing .oc-accent,
#landing .l-hero-note span,
#landing .oc-entry-arrow,
#landing .oc-explainer .eyebrow,
#landing .oc-explainer .section-number,
#landing .oc-explainer .section-nav span,
#landing .oc-explainer .step-number,
#landing .oc-explainer .rule-number { color: var(--oc-muted); }
#landing .oc-explainer .small-note strong,
#landing .oc-explainer .zero { color: var(--oc-text); }
#landing .oc-explainer .code-art-caption {
  font-family: var(--oc-sans);
  font-style: normal;
  color: var(--oc-muted);
}
#landing .oc-explainer .note { border-left-color: var(--oc-line); }
#landing .oc-explainer .button { color: var(--oc-on-accent); }
#landing .oc-explainer .badge,
#landing .oc-explainer .code-step-tag,
#landing .oc-explainer .rule-number,
#landing .oc-explainer .section-number,
#landing .oc-explainer .step-number,
#landing .oc-explainer .source-links > span { font-size: 11px; }
#landing .oc-explainer .code-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
#landing .oc-explainer .code-file,
#landing .oc-explainer .runtime-row dt { overflow-wrap: anywhere; }
#landing .oc-explainer .code-head-left { flex-wrap: wrap; }
#landing .oc-explainer .section { scroll-margin-top: 24px; }

/* Original geometric code weave inspired by the supplied manta references. */
#landing .l-hero { padding-top: 0; }
#landing .l-hero::before,
#landing .oc-mascot-stage::before,
#landing .oc-mascot-stage::after { display: none; }
#landing .oc-mascot-stage {
  height: 310px;
  max-width: none;
  width: calc(100% + 70px);
  margin: 0 -35px 15px;
  display: block;
  touch-action: pan-y;
}
#landing .oc-code-field {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#landing .oc-mascot-stage .oc-capi {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  width: 166px;
  height: 166px;
  pointer-events: none;
  filter: drop-shadow(0 8px 28px var(--oc-bg));
}

@media (min-width: 1600px) {
  #landing .l-hero h1 { max-width: 890px; font-size: 68px; }
  #landing .l-hero-description { max-width: 680px; font-size: 15px; }
}
@media (max-width: 700px) {
  #landing .l-nav { padding-inline: 22px; }
  #landing .oc-footer { padding-inline: 24px; }
  #landing .oc-mascot-stage {
    height: 250px;
    width: calc(100% + 44px);
    margin: 0 -22px 12px;
  }
  #landing .oc-mascot-stage .oc-capi { width: 145px; height: 145px; }
  #landing .oc-eyebrow,
  #landing .l-hero .oc-eyebrow,
  #landing .l-hero-note,
  #landing .oc-footer,
  #landing .oc-footer > span:not(.oc-wordmark) { font-size: 11px; }
}
@media (max-width: 520px) {
  #landing .l-nav { padding-inline: 18px; }
}