/*
 * FIRE RANT content rails, 2026-10-19.
 * Opt in only on the eight managed native pages using body.fr-layout-refresh.
 * The homepage header is the authority: 40px above 768px, 16px through 768px.
 * Load before the separate lower-home layout stylesheet. The added body
 * specificity also wins over the original page-local <style> elements.
 * No dock, card internals, copy, imagery, interaction or overflow changes.
 */
body.fr-layout-refresh {
  --fr-content-gutter: 40px;
}

@media (max-width: 768px) {
  body.fr-layout-refresh {
    --fr-content-gutter: 16px;
  }
}

/* Original page sections own one gutter; their backgrounds remain full bleed. */
body.fr-layout-refresh.fr-original :is(
  .fr-nav,
  .fr-hero-content,
  .fr-stats-overlay,
  .fr-welcome,
  .fr-pillars,
  .fr-showcase,
  .fr-quotes,
  .fr-cta,
  .fr-footer,
  .fr-apphero-nav,
  .fr-apphero-content,
  .fr-apphero-stats,
  .fr-appintro,
  .fr-download,
  .fr-step01,
  .fr-step02,
  .fr-step03,
  .fr-step04,
  .fr-step05,
  .fr-step06
) {
  padding-left: var(--fr-content-gutter);
  padding-right: var(--fr-content-gutter);
}

/* Hero content remains centered within a full-width rail, not an intrinsic box. */
body.fr-layout-refresh.fr-original :is(.fr-hero-content, .fr-apphero-content) {
  width: 100%;
  max-width: none;
}

/* Only the outer grids lose their caps. Nested readable text and cards retain
 * their authored widths/padding. Home through Three Pillars receives no other
 * layout, type, card, phone, or interaction changes. */
body.fr-layout-refresh.fr-original :is(
  .fr-stats-grid,
  .fr-welcome-grid,
  .fr-pillars-grid,
  .fr-feature-row,
  .fr-quotes-grid,
  .fr-cta-container,
  .fr-footer-container,
  .fr-apphero-stats-grid,
  .fr-appintro-grid,
  .fr-step01-grid,
  .fr-step02-grid,
  .fr-step03-grid,
  .fr-step04-grid,
  .fr-step05-grid,
  .fr-step06-grid
) {
  width: 100%;
  max-width: none;
}

/* The download block is a centered text module. Its outer section already
 * spans the rails, so its authored 700px readable inner width is retained. */

/* App and Test Page preserve their existing mobile horizontal stats strip.
 * The strip, rather than both nested levels, owns the single 16px inset. */
@media (max-width: 768px) {
  body.fr-layout-refresh.fr-original .fr-apphero-stats {
    padding-left: 0;
    padding-right: 0;
  }
  body.fr-layout-refresh.fr-original .fr-apphero-stats-grid {
    width: max-content;
    padding-left: var(--fr-content-gutter);
    padding-right: var(--fr-content-gutter);
  }
  body.fr-layout-refresh.fr-original .fr-apphero-stats-grid::after {
    content: none;
  }
}

/* About: retain the full-screen desktop metaphor and centered window sizes.
 * Only its independently edge-anchored content receives the shared insets. */
body.fr-layout-refresh.fr-original :is(
  .fros-menubar,
  .fros-mob-status,
  .fros-mob-app-grid
) {
  padding-left: var(--fr-content-gutter);
  padding-right: var(--fr-content-gutter);
}
body.fr-layout-refresh.fr-original .fros-app-grid {
  left: var(--fr-content-gutter);
}
body.fr-layout-refresh.fr-original :is(.fros-notification, .fros-progress) {
  right: var(--fr-content-gutter);
}
body.fr-layout-refresh.fr-original .fros-mob-notif {
  margin-left: var(--fr-content-gutter);
  margin-right: var(--fr-content-gutter);
}

/* Map: full-bleed section backgrounds, uncapped outer map/content containers. */
body.fr-layout-refresh.fr-original :is(
  .fr-world-nav,
  .fr-world-hero,
  .fr-world-jump,
  .fr-world-section,
  .fr-world-method,
  .fr-world-end
) {
  padding-left: var(--fr-content-gutter);
  padding-right: var(--fr-content-gutter);
}
body.fr-layout-refresh.fr-original :is(
  .fr-world-map,
  .fr-world-jump,
  .fr-world-section-inner,
  .fr-world-method
) {
  width: 100%;
  max-width: none;
}
body.fr-layout-refresh.fr-original .fr-world-section-inner > div:last-child > p,
body.fr-layout-refresh.fr-original .fr-world-method > :is(p, ul, details) {
  max-width: 75ch;
}
@media (max-width: 800px) {
  body.fr-layout-refresh.fr-original .fr-world-menu {
    left: var(--fr-content-gutter);
    right: var(--fr-content-gutter);
  }
}

/* Test Page: adjust only top-level demo section gutters, never the wrappers
 * nested inside the protected home demo or the phone-screen interfaces. */
body.fr-layout-refresh.page-id-902 #main-content > :is(
  .fr-original-section,
  .fr-reports-mockup-wrap,
  .fr-kb-mockup-wrap,
  .fr-prof-mockup-wrap,
  .fr-cam-mockup-wrap,
  .fr-ai-mockup-wrap,
  .fr-scan-mockup-wrap,
  .frcr-wrap,
  .frps-wrap,
  .frhs-wrap,
  .fr-mockup-wrap
) {
  padding-left: var(--fr-content-gutter);
  padding-right: var(--fr-content-gutter);
}

/* Privacy: retain article/sidebar/card geometry inside a consistent outer rail. */
body.fr-layout-refresh.fr-original :is(
  .fr-privacy-nav,
  .fr-privacy-hero-inner,
  .fr-privacy-summary,
  .fr-privacy-main,
  .fr-privacy-footer
) {
  padding-left: var(--fr-content-gutter);
  padding-right: var(--fr-content-gutter);
}
body.fr-layout-refresh.fr-original .fr-privacy-section > :is(p, ul) {
  max-width: 75ch;
}
/* The Chinese policy contains an English-original disclosure. Its author-set
 * inline padding requires these two targeted !important declarations. */
body.fr-layout-refresh.fr-original .fr-privacy-english-wrap {
  padding-left: var(--fr-content-gutter) !important;
  padding-right: var(--fr-content-gutter) !important;
}
body.fr-layout-refresh.fr-original .fr-privacy-english-original :is(
  .fr-privacy-hero-inner,
  .fr-privacy-summary,
  .fr-privacy-main
) {
  padding-left: 0;
  padding-right: 0;
}

/* Contact and mainland China use native core-block containers. Their header,
 * footer and section containers all share the homepage's outer edge. */
body.fr-layout-refresh.fr-native .fr-container,
body.fr-layout-refresh.fr-native #main-content > .fr-notice {
  width: calc(100% - var(--fr-content-gutter) - var(--fr-content-gutter));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
/* This CTA is itself a section, not a nested card. Let its background bleed
 * and place its content on the same rails instead of adding a second gutter. */
body.fr-layout-refresh.fr-native .fr-container.fr-cta {
  width: 100%;
  padding-left: var(--fr-content-gutter);
  padding-right: var(--fr-content-gutter);
}
/* Readable paragraphs stay bounded without pulling their parent sections in. */
body.fr-layout-refresh.fr-native .fr-section > p:not(.fr-lead),
body.fr-layout-refresh.fr-native .fr-safety-note > p {
  max-width: 75ch;
}

/* Test Page only: let the mobile intro grid fit its shared content rails.
 * The original 300px phone must not set the grid's automatic minimum width.
 * Existing phone markup, height and decoration are retained.
 */
@media (max-width: 768px) {
  body.fr-layout-refresh.page-id-902 .fr-appintro-grid > :is(.fr-appintro-text, .ant-phone-wrap) {
    min-width: 0;
    max-width: 100%;
  }
  body.fr-layout-refresh.page-id-902 .fr-appintro-grid > .ant-phone-wrap > .ant-iphone {
    min-width: 0;
    max-width: 100%;
  }
  /* Let the island fit between the existing fixed time and status columns. */
  body.fr-layout-refresh.page-id-902 .ant-iphone .ant-status {
    grid-template-columns: 48px minmax(0, 1fr) 68px;
  }
  body.fr-layout-refresh.page-id-902 .ant-iphone .ant-dynamic-island {
    min-width: 0;
    max-width: 100%;
  }
}

/* The inherited small-screen rule scales the OUTER section to .82 at 320px.
 * Its complete active scene is actually 340px, including scene padding.
 * Scale that complete scene instead: 340px * .8 = 272px, fitting the 273px
 * available between 16px rails in the observed 305px layout viewport.
 * Every phone screen keeps its authored dimensions and scales uniformly.
 */
@media (max-width: 375px) {
  body.fr-layout-refresh.page-id-902 #frOriginalDemoSection.fr-phone-only-section {
    zoom: 1;
    width: 100%;
    max-width: 100%;
  }
  body.fr-layout-refresh.page-id-902 #frOriginalDemoSection > .fr-phone-only-demo {
    zoom: .8;
    width: 340px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}