/* Cross-page typography and layout. Keep campaign artwork and specialized
   components in their own stylesheets; standard text uses the shared scale. */
body {
  color: var(--dark-slate);
  font-family: var(--font-sans);
}

body h1, h1.heading--primary {
  font-size: var(--type-h1);
  line-height: var(--leading-h1);
}
body h2 { font-size: var(--type-h2); line-height: var(--leading-h2); }
body h3 { font-size: var(--type-h3); line-height: var(--leading-h3); }
body h4 { font-size: var(--type-h4); line-height: var(--leading-h4); }
body h5 { font-size: var(--type-h5); line-height: var(--leading-h5); }
body h6 { font-size: var(--type-h6); line-height: var(--leading-h6); }

body p, body li {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

/* Apply to standard reading columns, not full-bleed artwork or campaign grids. */
.container, .container--narrow {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}
.container--narrow { max-width: var(--reading-width); }
.measure { max-width: var(--reading-width); }
.section > .container > .measure { margin-inline: auto; }

/* Outer containers own the shared grid; standalone prose uses a reading column. */
.site-page .container,
.site-page .container--narrow,
:is(.legacy-page, .webflow-transfer-page) .container,
.page-ignite .ignite-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.site-page .container > :is(.measure, .hero-home__text),
.site-page :is(.rn-hero__content, .rn-intro__content) {
  width: 100%;
  max-width: var(--reading-width);
  margin-inline: auto;
}

/* A split is a multi-column layout, not a standalone reading column. */
.site-page .container > .split {
  max-width: none;
  margin-inline: 0;
}

.site-page .offset-intro__columns {
  max-width: none;
  margin-inline: 0;
}

.site-page :is(.offset-intro__statement, .case-study-hero__content),
.site-page .block-group:not(:has(.narrative)) > .block-group__heading {
  max-width: var(--reading-width);
  margin-inline: auto;
}

/* The team heading belongs to the full-width portrait grid, not a centered
   reading column. Keep their left edges on the same container line. */
.site-page .block-group:has(.team-grid) > .block-group__heading {
  margin-inline: 0;
}

.site-page .hero-img--contact .measure {
  padding-inline: 0;
}

.site-page .container--narrow > :is(h1, h2, h3, p, ul, ol) {
  max-width: var(--reading-width);
  margin-inline: auto;
}

.site-page .container--narrow {
  max-width: calc(var(--reading-width) + 2 * var(--page-gutter));
}

.site-page.expo-page .expo-hero-wrapper {
  max-width: var(--reading-width);
  margin-inline: auto;
  align-items: flex-start;
}

/* Imported pages use presentation classes for otherwise-standard headings.
   Resolve those aliases back to the shared type scale after vendor CSS. */
:where(.legacy-page, .webflow-transfer-page) :is(h1, .h1--reversed, .heading--primary) {
  font-size: var(--type-h1);
  line-height: var(--leading-h1);
}
:where(.legacy-page, .webflow-transfer-page) :is(h2, .h2--reversed, .heading--simple) {
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
}
:where(.legacy-page, .webflow-transfer-page) :is(h3, .h3--reversed) {
  font-size: var(--type-h3);
  line-height: var(--leading-h3);
}

/* Imported aliases of the same lead paragraph. */
.p--large, .p--large.p--reversed, .lead {
  font-size: var(--type-lead);
  line-height: var(--leading-lead);
}

/* Consistent, visible keyboard focus on either light or dark backgrounds. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: var(--focus-ring-width) solid currentColor;
  outline-offset: var(--focus-ring-offset);
}

/* The shared invitation should not acquire per-page heading/button styles. */
.bottom-cta-content h2, .site-footer__cta h2, .bottom-cta-heading {
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: 600;
  line-height: var(--leading-h2);
  text-align: left;
  text-wrap: balance;
  margin: 0 0 var(--space-md);
}
.bottom-cta-content p {
  font-family: var(--font-serif);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  text-align: left;
  margin: 0 0 var(--space-md);
}

/* Legacy section labels should use the same palette as current components. */
.footer-nav-col-label {
  color: var(--on-dark-muted);
  opacity: 1;
}

/* The old sitemap was a non-wrapping flex row even at phone widths. */
.sitemap__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.sitemap__links__col { min-width: 0; padding: 0; }
.link--sitemap { overflow-wrap: anywhere; }

@media (max-width: 991px) {
  /* Legacy grids use .w-row rather than the newer feature-grid component. */
  .col-icon-4 { display: flex; flex-flow: row wrap; gap: var(--space-md) 0; }
  .col-icon-4 > .col-icon__col { flex: 0 0 50%; width: 50%; min-width: 0; }
}
@media (max-width: 767px) {
  .sitemap__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
}
@media (max-width: 479px) {
  .col-icon-4 > .col-icon__col { flex-basis: 100%; width: 100%; }
  .sitemap__links { grid-template-columns: 1fr; }
}

/* Content must be allowed to shrink inside the shared phone gutter. */
.blog-list__card__content { min-width: 0; }
.twitter-tweet { margin-inline: 0; overflow-wrap: anywhere; }
.copy-contain--sm { max-width: 100%; }
@media (max-width: 767px) {
  .top-x-meta-col { flex-wrap: wrap; gap: var(--space-md); }
}

/* Imported editorial sections need the same heading-to-copy rhythm as PHP
   sections. Keep compact card, navigation and campaign headings independent. */
:where(.legacy-page, .webflow-transfer-page) :is(.alt-blocks__content, .section-intro, .sub-intro, .copy-contain--sm) > :is(h1, h2, h3) {
  margin-top: 0;
  margin-bottom: var(--space-md);
}
:where(.legacy-page, .webflow-transfer-page) .alt-blocks__content > p {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

/* React Native Desktop: align the hero and alternating sections to one grid,
   rather than combining percentage margins with oversized offset artwork. */
.page-react-native-desktop .hero-2col.full-width {
  margin: 0;
  padding: var(--space-xl) 0 var(--space-lg);
}
.page-react-native-desktop .hero-2col__flex.full-width {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: var(--space-lg);
}
.page-react-native-desktop .hero-2col__flex__content {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
.page-react-native-desktop .hero-2col__content__cta {
  margin: 0 0 var(--space-md);
}
.page-react-native-desktop .hero-2col__content__cta h1 {
  margin: 0 0 var(--space-md);
}
.page-react-native-desktop .hero-2col__flex__img.full-width {
  display: block;
  position: static;
  width: 100%;
  order: initial;
}
.page-react-native-desktop .img-rnd {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.page-react-native-desktop .grid-overview__links {
  margin-top: var(--space-md);
}
.page-react-native-desktop .social-cta-2 {
  padding: var(--space-lg) 0;
}
.page-react-native-desktop .social-cta__flex-2 {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
}
.page-react-native-desktop :is(.social-cta__overview, .social-cta__links) {
  width: 100%;
  padding: 0;
  min-width: 0;
}
.page-react-native-desktop .social-cta__overview h3 { margin: 0 0 var(--space-md); }
.page-react-native-desktop .social-cta__links__block-2 {
  padding: var(--space-md) 0;
  gap: var(--space-md);
}
.page-react-native-desktop .social-cta__links .link-arrow__icon { flex-shrink: 0; }
@media (max-width: 991px) {
  .page-react-native-desktop .hero-2col__flex.full-width,
  .page-react-native-desktop .social-cta__flex-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .page-react-native-desktop .hero-2col__flex__img.full-width {
    max-width: 560px;
    justify-self: center;
  }
}

.page-react-native-desktop .testimonial { padding: var(--space-lg) 0; }

/* The React Native landing page follows the same left-aligned hero rhythm. */
.react-native-page .rn-hero__content,
.react-native-page .rn-hero__eyebrow,
.react-native-page .rn-hero__cta { text-align: left; align-items: flex-start; }
.react-native-page .rn-hero__cta { margin-top: var(--space-md); }
.react-native-page .rn-hero__eyebrow { margin-bottom: var(--space-md); }
.react-native-page .rn-hero__eyebrow {
  align-items: center;
  text-align: center;
}
@media (max-width: 767px) {
  .webflow-transfer-page .landing-container { padding-inline: var(--page-gutter); }
  .page-learn-tensorflowjs .hero-book__container { padding-inline: var(--page-gutter); }
}
.webflow-transfer-page .landing-description-red { margin-left: .2em; }
.case-study-hero__content h1 {
  font-size: var(--type-h1);
  line-height: var(--leading-h1);
}

/* Community introductions share the wider editorial box and content edge. */
.community-page .hero-sub {
  /* Fixed navigation: 77px primary row + 52px links + two 1px borders. */
  padding-top: calc(131px + var(--space-lg));
  padding-bottom: var(--space-lg);
}

.community-page .hero-sub :is(h1, .lead) {
  text-align: left;
}

.community-page .hero-sub .hero-home__text > :last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .community-page .hero-sub {
    padding-top: calc(65px + var(--space-lg));
  }
}

:is(.hero-img--open-source, .hero-img--podcasts, .hero-img--talks, .hero-img--newsletters) .measure {
  width: 100%;
  max-width: var(--reading-width);
  margin: 0 auto;
}

:is(.hero-img--open-source, .hero-img--podcasts, .hero-img--talks, .hero-img--newsletters) .hero-home__text {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* One height for interior heroes, including imported campaign templates.
   Important dimensions override older vendor breakpoint and inline sizing. */
body.interior-page :is(.hero-sub, .hero-full, .hero-small, .hero-gradient,
  .hero-2col, .hero--learntensorflowjs, .rn-hero, .expo-hero, .ignite-hero,
  .ios-hero, .case-study-hero, .podcast-hero) {
  box-sizing: border-box;
  height: var(--interior-hero-height) !important;
  min-height: var(--interior-hero-height) !important;
  max-height: var(--interior-hero-height) !important;
  padding-block: var(--space-lg) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.interior-page .expo-hero-wrapper {
  width: 100%;
  max-width: min(100%, var(--reading-width));
}

/* Fit Ignite's original large promotional stack into the shared hero height. */
body.interior-page .ignite-hero-heading-container {
  gap: var(--space-sm);
  position: relative;
  z-index: 2;
}
body.interior-page .ignite-hero-heading-container > * {
  margin-block: 0;
}
body.interior-page .ignite-hero-code {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 991px) {
  body.interior-page .ignite-hero-code,
  body.interior-page .ignite-hero-mockup {
    display: none;
  }
}
@media (max-width: 991px) {
  body.interior-page .ignite-hero {
    padding-top: calc(var(--space-lg) + var(--space-md)) !important;
    padding-bottom: var(--space-md) !important;
  }
  body.interior-page .ignite-hero-heading-container {
    gap: var(--space-xs);
  }
  body.interior-page .ignite-hero-h4 {
    font-size: var(--type-body);
    line-height: 1.4;
  }
}

/* Shared separation between an eyebrow label (or logo lockup) and its headline. */
:is(body.site-page, body.legacy-page, body.webflow-transfer-page)
:is(h5, h6, .eyebrow, .case-study-eyebrow, .rn-hero__eyebrow):has(+ :is(h1, h2, h3, h4)) {
  margin-bottom: var(--label-heading-gap);
}
:is(body.site-page, body.legacy-page, body.webflow-transfer-page)
:is(h5, h6, .eyebrow, .case-study-eyebrow, .rn-hero__eyebrow) + :is(h1, h2, h3, h4) {
  margin-top: 0;
}

/* Shared with the homepage; imported pages also load this stylesheet. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Only hero text and its actions enter on load; artwork and later sections stay put. */
@media (prefers-reduced-motion: no-preference) {
  body.interior-page :is(.hero-sub, .hero-full, .hero-small, .hero-gradient,
    .hero-2col, .hero--learntensorflowjs, .rn-hero, .expo-hero, .ignite-hero,
    .ios-hero, .case-study-hero, .podcast-hero)
  :is(h1, h2, h3, h4, h5, h6, p, .bttn, .bttn-2, .case-study-eyebrow, .ignite-hero-download) {
    animation: hero-rise 800ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: 0ms;
  }

  body.interior-page :is(.hero-sub, .hero-full, .hero-small, .hero-gradient,
    .hero-2col, .hero--learntensorflowjs, .rn-hero, .expo-hero, .ignite-hero,
    .ios-hero, .case-study-hero, .podcast-hero) :is(p, h4) {
    animation-delay: 120ms;
  }

  body.interior-page :is(.hero-sub, .hero-full, .hero-small, .hero-gradient,
    .hero-2col, .hero--learntensorflowjs, .rn-hero, .expo-hero, .ignite-hero,
    .ios-hero, .case-study-hero, .podcast-hero) :is(.bttn, .bttn-2, .ignite-hero-download) {
    animation-delay: 240ms;
  }
}

/* Building Community alone uses a full-viewport video hero. */
body.interior-page.building-community-page .hero-full {
  height: 100svh !important;
  min-height: 600px !important;
  max-height: none !important;
  padding-block: 140px 80px !important;
  justify-content: flex-end;
  align-items: stretch;
}
body.building-community-page .hero-full__content {
  width: 100%;
  max-width: var(--content-width);
}
body.building-community-page .hero-full h1 {
  max-width: 1040px;
  margin: 0;
  text-align: left;
  font-size: 77px;
  line-height: 1;
  text-wrap: balance;
}
body.building-community-page .hero-full__labels {
  justify-content: space-between;
  margin-top: var(--space-lg);
}
@media (max-width: 991px) {
  body.interior-page.building-community-page .hero-full {
    padding-block: var(--space-xl) var(--space-lg) !important;
  }
  body.building-community-page .hero-full h1 {
    font-size: clamp(40px, 7vw, 77px);
  }
}
@media (max-width: 479px) {
  body.building-community-page .hero-full__labels {
    gap: var(--space-sm);
  }
  body.building-community-page .hero-full__labels li:nth-child(2) {
    display: none;
  }
}

/* This community introduction preserves the live site's editorial layout. */
body.building-community-page .offset-intro > .container {
  max-width: calc(1040px + 2 * var(--page-gutter));
}

body.building-community-page .offset-intro__statement {
  max-width: 76%;
  margin-inline: 0;
  margin-bottom: 64px;
  font-size: 38.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-wrap: wrap;
}

body.building-community-page .offset-intro__columns {
  max-width: 76%;
  margin: 0 0 0 auto;
  gap: 64px;
}

@media (max-width: 991px) {
  body.building-community-page .offset-intro__columns {
    max-width: 84%;
  }
}

@media (max-width: 767px) {
  body.building-community-page .offset-intro__statement,
  body.building-community-page .offset-intro__columns {
    max-width: 100%;
  }

  body.building-community-page .offset-intro__columns {
    gap: var(--space-md);
  }
}

@media (max-width: 479px) {
  body.building-community-page .offset-intro__statement {
    font-size: 25.2px;
    margin-bottom: 32px;
  }
}

/* Semantic heading wrappers retain the imported layouts and type treatments. */
.imported-content h1[data-semantic-heading="remote-work"] {
  margin-block: 0;
}
.top-react-native-firm-page h1[data-semantic-heading="top-react-native-firm"] {
  font-size: inherit;
  line-height: inherit;
  text-wrap: wrap;
}
.page-privacy-policy .privacy-policy-heading {
  font-size: var(--type-h2);
  line-height: var(--leading-h2);
}
.expo-page h1.expo-hero-heading-wrapper {
  margin-top: 0;
}
.sitemap__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The shared container centers children; directory columns start at one baseline. */
.sitemap-page .sitemap__links {
  align-items: start;
}