/* Use the Donation statement's typography as the shared template for every narrative section. */
:is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-stage {
  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 18px !important;
  border: 1px solid rgba(200, 16, 46, 0.12) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: inset 0 1px 8px rgba(15, 23, 42, 0.1) !important;
}

/* Phone Safety's stage sits directly under its tab bar, so its top corners
   stay square to keep the panel flush with the tabs. */
#PhoneSafety .phone-tabs-stage {
  border-radius: 0 0 10px 10px !important;
}

:is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-copy,
#Reminder .reminder-content {
  width: 100%;
  max-width: 820px !important;
}

#Reminder.story-section,
html.paragraph-scroll-enhanced #Reminder.story-section.paragraph-scroll-section {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
}

#Reminder > .reminder-inner,
html.paragraph-scroll-enhanced #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
}

#Reminder .hero-scroll-copy,
#Reminder .hero-scroll-stage,
html.paragraph-scroll-enhanced #Reminder .hero-scroll-copy,
html.paragraph-scroll-enhanced #Reminder .hero-scroll-stage {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

:is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-item > p {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(1rem, min(6.2cqw, 9cqh), 4.65rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.12 !important;
  text-align: left !important;
  text-wrap: balance;
}

:is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-item > p + p {
  margin-top: 0.72em !important;
}

/* Center short copy vertically while allowing longer copy to begin at the
   top and scroll normally instead of being clipped above the card. */
:is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-doc {
  min-height: 100% !important;
  justify-content: safe center !important;
}

:is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-item > p strong,
#Reminder .reminder-contact-names strong {
  color: #c8102e !important;
  font-size: inherit !important;
  font-style: italic;
  font-weight: 950 !important;
  letter-spacing: inherit;
  line-height: inherit;
}

#Reminder .reminder-contact-names {
  gap: 0.38em;
  margin: 0.72em 0;
  padding-left: 1.15em;
  list-style: disc outside;
}

#Reminder .reminder-contact-names li {
  padding-left: 0.12em;
}

#Reminder .reminder-contact-names li::marker {
  color: #0f172a;
  font-size: 0.72em;
}

#Reminder .reminder-contact-names strong {
  font-size: clamp(1rem, min(6.2cqw, 9cqh), 4.65rem) !important;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-align: left;
  text-wrap: balance;
}

/* Reminder uses black copy throughout; only the warning labels stay red. */
#Reminder .hero-scroll-item,
#Reminder .hero-scroll-item > p,
#Reminder .hero-scroll-item > p strong,
#Reminder .reminder-contact-names strong {
  color: #0f172a !important;
  font-style: normal !important;
}

#Reminder .reminder-contact-names .reminder-not-911 {
  color: #c8102e !important;
  font-style: italic;
  font-weight: 950;
}

@media (min-width: 901px) {
  #Crisis > .hero-sticky-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #Crisis .hero-circles {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #Crisis .hero-left {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #National311 > .section-311-inner,
  #PhoneSafety > .phone-tabs-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #Educate > .reg-void-inner,
  #Reminder > .reminder-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #Educate .ai-number-card-stack {
    --educate-poster-width: clamp(122px, 11.5vw, 170px);
    --educate-poster-step: clamp(50px, 5.6vw, 82px);
    width: min(
      100%,
      calc(
        var(--educate-poster-width) +
        var(--educate-poster-step) +
        var(--educate-poster-step) +
        var(--educate-poster-step)
      )
    );
    height: clamp(320px, 35vw, 380px);
  }

  #Educate .ai-number-card {
    width: var(--educate-poster-width);
    border-radius: 15px;
  }

  #Educate .ai-number-card--911 {
    left: var(--educate-poster-step);
  }

  #Educate .ai-number-card--311 {
    left: calc(var(--educate-poster-step) + var(--educate-poster-step));
  }

  #Educate .ai-number-card--211 {
    left: calc(
      var(--educate-poster-step) +
      var(--educate-poster-step) +
      var(--educate-poster-step)
    );
  }

  html body #Educate .ai-education-visual {
    isolation: isolate;
    overflow: hidden !important;
  }

  html body #Educate .ai-education-visual > .bg-patch {
    display: block !important;
    position: absolute !important;
    inset: -18% !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.045 !important;
    z-index: 0 !important;
    transform: none !important;
    mask-image: radial-gradient(
      ellipse 40% 40% at 50% 54%,
      black 28%,
      rgba(0, 0, 0, 0.85) 46%,
      rgba(0, 0, 0, 0.45) 64%,
      rgba(0, 0, 0, 0.12) 78%,
      transparent 88%
    ) !important;
    -webkit-mask-image: radial-gradient(
      ellipse 40% 40% at 50% 54%,
      black 28%,
      rgba(0, 0, 0, 0.85) 46%,
      rgba(0, 0, 0, 0.45) 64%,
      rgba(0, 0, 0, 0.12) 78%,
      transparent 88%
    ) !important;
  }

  #Educate .ai-poster-quote {
    width: min(360px, 100%);
  }

  #Educate .ai-poster-order-button {
    margin-top: -48px;
  }

  #Crisis .hero-monitor-quote {
    top: clamp(42px, 7%, 64px) !important;
  }

  #National311 .section-311-quote,
  #Educate .ai-poster-quote {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto;
    margin: 0 0 -8px !important;
    transform: none !important;
  }

  #PhoneSafety .phone-platform-quote,
  #Reminder .reminder-phone-quote {
    top: clamp(16px, 3%, 24px) !important;
  }

}

/* The navigation's own clipping boxes were cutting off the active button's
   lower shadow. Keep the shell and its desktop item row open for paint. */
.float-nav {
  overflow: visible !important;
}

@media (min-width: 901px) {
  .float-nav > .float-nav-items {
    overflow: visible !important;
  }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 650px) {
  #Crisis .hero-circles {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #Crisis .hero-left {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #Crisis .hero-monitor-quote {
    top: clamp(18px, 5svh, 32px) !important;
  }

  #PhoneSafety .phone-platform-quote,
  #Reminder .reminder-phone-quote {
    top: clamp(10px, 3svh, 20px) !important;
  }
}

/* Large desktops: every narrative section is a true 50/50 split. */
@media (min-width: 1101px) {
  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Educate > .reg-void-inner,
  html body #PhoneSafety > .phone-tabs-inner,
  html body #Reminder > .reminder-inner {
    box-sizing: border-box !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    column-gap: clamp(36px, 4vw, 80px) !important;
    width: 100% !important;
    padding-right: clamp(24px, 4vw, 64px) !important;
    padding-left: clamp(24px, 4vw, 64px) !important;
  }

  html body #Crisis .hero-left,
  html body #National311 .section-311-copy,
  html body #Educate .ai-education-copy,
  html body #PhoneSafety .phone-tabs-copy,
  html body #Reminder .reminder-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 900px),
  (orientation: landscape) and (max-width: 1100px) and (max-height: 650px) {
  :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-item > p,
  #Reminder .reminder-contact-names strong {
    font-size: clamp(0.9rem, 5.8cqw, 1.8rem) !important;
  }
}

@media (max-width: 900px) {
  #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: clamp(24px, 7vw, 48px) !important;
    padding: var(--content-section-safe-top) 20px var(--content-section-safe-bottom) !important;
  }

  #Reminder .reminder-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: stretch;
  }

  #Reminder .reminder-phone-visual {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: clamp(380px, 112vw, 520px) !important;
    margin-bottom: 0 !important;
  }
}

/* Narrow screens: every story uses the same stacked viewport and the same
   section-boundary spacing. Visual artwork is sized by staticLayout.js to the
   exact band between its quote and the text card, minus an 8px inset. */
@media (max-width: 900px) {
  html body #Crisis.story-section,
  html body #National311.story-section,
  html body #Educate.story-section,
  html body #PhoneSafety.story-section,
  html body #Reminder.story-section,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section {
    height: var(--mobile-card-height, 100svh) !important;
    min-height: var(--mobile-card-height, 100svh) !important;
    max-height: var(--mobile-card-height, 100svh) !important;
    overflow: hidden !important;
  }

  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Educate > .reg-void-inner,
  html body #PhoneSafety > .phone-tabs-inner,
  html body #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section > .hero-sticky-shell,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section > .section-311-inner,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section > .reg-void-inner,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section > .phone-tabs-inner,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--mobile-card-height, 100svh) !important;
    min-height: var(--mobile-card-height, 100svh) !important;
    max-height: var(--mobile-card-height, 100svh) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: calc(68px + env(safe-area-inset-top)) 7% calc(68px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section > .hero-sticky-shell,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section > .section-311-inner,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    grid-template-rows: minmax(0, calc(30svh - 48px)) minmax(0, 1fr) !important;
  }

  /* Phone Safety's quote uses two lines, so its visual row gets exactly the
     extra line-height needed to preserve the same phone size. */
  html body #PhoneSafety > .phone-tabs-inner,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section > .phone-tabs-inner {
    grid-template-rows: minmax(0, calc(30svh - 28px)) minmax(0, 1fr) !important;
  }

  html body #Educate > .reg-void-inner,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section > .reg-void-inner {
    grid-template-rows: minmax(0, calc(34svh - 30px)) minmax(0, 1fr) !important;
  }

  html body #Crisis .hero-circles,
  html body #National311 .section-311-visual,
  html body #Educate .ai-education-visual,
  html body #PhoneSafety .phone-tabs-right-col,
  html body #Reminder .reminder-phone-visual {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
  }

  html body #Crisis .hero-left,
  html body #National311 .section-311-copy,
  html body #Educate .ai-education-copy,
  html body #PhoneSafety .phone-tabs-copy,
  html body #Reminder .reminder-content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body #Reminder .reminder-content,
  html body #Reminder .hero-scroll-copy {
    display: flex !important;
    flex-direction: column !important;
  }

  html body #Reminder .hero-scroll-copy,
  html body #Reminder .hero-scroll-stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html body #Reminder .hero-scroll-copy {
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  html body #Reminder .hero-scroll-stage {
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
  }

  html body #Crisis .hero-circles,
  html body #National311 .section-311-visual,
  html body #PhoneSafety .phone-tabs-right-col,
  html body #Reminder .reminder-phone-visual {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body #Crisis .hero-monitor-quote,
  html body #National311 .section-311-quote,
  html body #PhoneSafety .phone-platform-quote,
  html body #Reminder .reminder-phone-quote {
    position: absolute !important;
    top: 8px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 8 !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  html body #PhoneSafety .phone-platform-icons {
    display: block !important;
    padding: 0 !important;
  }

  html body #PhoneSafety .phone-platform-icon {
    display: none !important;
  }

  html body #Crisis .overload-monitor {
    position: absolute !important;
    top: var(--narrow-art-top, 54px) !important;
    left: 50% !important;
    width: min(460px, calc(100% - 16px)) !important;
    margin: 0 !important;
    transform: translateX(-50%) scale(var(--narrow-art-scale, 0.35)) !important;
    transform-origin: top center !important;
  }

  html body #National311 .section-311-visual > .section-311-route,
  html body #PhoneSafety .phone-tabs-right-col > .shared-phone-holder,
  html body #Reminder .reminder-phone-visual > .shared-phone-holder {
    position: absolute !important;
    top: var(--narrow-art-top, 44px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: var(--narrow-shared-phone-height, var(--narrow-art-height, 152px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body #National311 .section-311-phone-node,
  html body #PhoneSafety .shared-phone-frame,
  html body #Reminder .shared-phone-frame {
    position: relative !important;
    width: var(--narrow-shared-phone-width, var(--narrow-art-width, 75.6px)) !important;
    height: var(--narrow-shared-phone-height, var(--narrow-art-height, 152px)) !important;
    min-height: 0 !important;
  }

  html body #National311 .section-311-call-phone.phone-shell,
  html body #PhoneSafety .phone-tabs-right-col .shared-phone-frame > .static-phone.phone-shell,
  html body #Reminder .reminder-phone-visual .shared-phone-frame > .static-phone.phone-shell {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 216px !important;
    height: 434px !important;
    transform: scale(var(--narrow-shared-phone-scale, var(--narrow-art-scale, 0.35))) !important;
    transform-origin: top left !important;
  }
}

/* On small screens Reminder keeps its stacked, content-sized composition, but
   uses the same boundary inset as the neighboring narrative sections. */
@media (max-width: 900px) {
  html body #Reminder.story-section,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section {
    overflow: hidden !important;
  }

  html body #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    padding: calc(68px + env(safe-area-inset-top)) 7% calc(68px + env(safe-area-inset-bottom)) !important;
  }
}

/* Reminder must use the same compact row geometry as its neighbors when a
   large display resolves to the short-landscape CSS viewport. Without this,
   its inherited 560px visual minimum adds extra space above and below it. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1100px) and (max-height: 650px) {
  html body #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html body #Reminder .reminder-content,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section .reminder-content {
    align-self: stretch !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body #Reminder .hero-scroll-copy,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section .hero-scroll-copy {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html body #Reminder .reminder-phone-visual.phone-tabs-right-col,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section .reminder-phone-visual.phone-tabs-right-col {
    position: relative !important;
    inset: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
}

/* Desktop target: use one compact type scale across every narrative copy card. */
@media (min-width: 901px) {
  :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-copy,
  #Reminder .reminder-content {
    width: 100% !important;
    max-width: none !important;
  }

  :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-item > p,
  #Reminder .reminder-contact-names strong {
    font-size: clamp(1rem, 1.8vw, 2.15rem) !important;
  }

  :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-stage,
  html.paragraph-scroll-enhanced :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder).story-section.paragraph-scroll-section .hero-scroll-stage {
    flex: 0 0 min(440px, calc(100svh - 176px)) !important;
    height: min(440px, calc(100svh - 176px)) !important;
    min-height: min(440px, calc(100svh - 176px)) !important;
    max-height: min(440px, calc(100svh - 176px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-color: var(--red) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-stage::-webkit-scrollbar {
    width: 8px;
  }

  :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-stage::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
  }

  :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder) .hero-scroll-stage::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--red);
    background-clip: padding-box;
  }

  /* Explicit section selectors prevent older, higher-specificity desktop
     rules from giving Crisis a different width from the other copy cards. */
  html body #Crisis .hero-scroll-copy,
  html body #National311 .hero-scroll-copy,
  html body #Educate .hero-scroll-copy,
  html body #PhoneSafety .hero-scroll-copy,
  html body #Reminder .hero-scroll-copy,
  html body #Reminder .reminder-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html body #Crisis .hero-scroll-stage,
  html body #National311 .hero-scroll-stage,
  html body #Educate .hero-scroll-stage,
  html body #PhoneSafety .hero-scroll-stage,
  html body #Reminder .hero-scroll-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Keep each phone centered directly across from its text card. The sizing
     variables are synchronized to 80% of the neighboring card by
     staticLayout.js. */
  .shared-phone-visual {
    position: relative !important;
    top: auto !important;
  }

  .shared-phone-visual > .shared-phone-holder {
    position: absolute !important;
    top: var(--aligned-phone-top, calc(50% - 176px)) !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: var(--aligned-phone-height, 352px) !important;
    min-height: 0 !important;
    transform: none !important;
  }

  :is(#National311, #PhoneSafety, #Reminder) .shared-phone-visual .shared-phone-frame {
    position: relative !important;
    width: var(--aligned-phone-width, 175.36px) !important;
    height: var(--aligned-phone-height, 352px) !important;
  }

  #National311 .shared-phone-frame > .section-311-call-phone.phone-shell,
  #PhoneSafety .phone-tabs-right-col .shared-phone-frame > .static-phone.phone-shell,
  #Reminder .reminder-phone-visual .shared-phone-frame > .static-phone.phone-shell {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    transform: scale(var(--aligned-phone-scale, 0.8111)) !important;
    transform-origin: top left !important;
  }

  :is(#National311, #PhoneSafety, #Reminder) .shared-phone-visual .shared-phone-quote {
    position: absolute !important;
    top: var(--aligned-quote-top, 0) !important;
    left: 50% !important;
    z-index: 6 !important;
    width: min(440px, 100%) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  /* Give every desktop phone the same visible square field. 311 previously
     had a stronger section-specific rule, which made the other two patches
     look absent on large displays. */
  html body :is(#National311, #PhoneSafety, #Reminder) .shared-phone-visual {
    isolation: isolate;
    overflow: hidden !important;
  }

  html body :is(#National311, #PhoneSafety, #Reminder) .shared-phone-visual > .bg-patch {
    display: block !important;
    position: absolute !important;
    inset: -18% !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.045 !important;
    z-index: 0 !important;
    transform: none !important;
    background-image:
      repeating-linear-gradient(
        45deg,
        var(--red) 0,
        var(--red) 1.5px,
        transparent 1.5px,
        transparent 8px
      ),
      repeating-linear-gradient(
        -45deg,
        var(--red) 0,
        var(--red) 1.5px,
        transparent 1.5px,
        transparent 8px
      ) !important;
    background-size: 12px 12px !important;
    mask-image: radial-gradient(
      ellipse 40% 40% at 50% 50%,
      black 28%,
      rgba(0, 0, 0, 0.85) 46%,
      rgba(0, 0, 0, 0.45) 64%,
      rgba(0, 0, 0, 0.12) 78%,
      transparent 88%
    ) !important;
    -webkit-mask-image: radial-gradient(
      ellipse 40% 40% at 50% 50%,
      black 28%,
      rgba(0, 0, 0, 0.85) 46%,
      rgba(0, 0, 0, 0.45) 64%,
      rgba(0, 0, 0, 0.12) 78%,
      transparent 88%
    ) !important;
  }

  html body :is(#National311, #PhoneSafety, #Reminder) .shared-phone-visual > .shared-phone-holder {
    z-index: 1 !important;
  }
}

/* One full-width desktop frame for every visible content card. */
@media (min-width: 901px) {
  :root {
    --aligned-desktop-gap: clamp(36px, 4vw, 80px);
    --aligned-desktop-gutter: clamp(24px, 4vw, 64px);
  }

  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Educate > .reg-void-inner,
  html body #PhoneSafety > .phone-tabs-inner,
  html body #Reminder > .reminder-inner,
  html body #FAQ > .faq-shell,
  html.paragraph-scroll-enhanced body #FAQ.story-section.paragraph-hold-section > .faq-shell,
  html body #Donate > .donation-inner,
  html.paragraph-scroll-enhanced body #Donate.story-section.paragraph-scroll-section > .donation-inner {
    box-sizing: border-box !important;
    width: calc(100% - var(--aligned-desktop-gutter) - var(--aligned-desktop-gutter)) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Educate > .reg-void-inner,
  html body #PhoneSafety > .phone-tabs-inner,
  html body #Reminder > .reminder-inner {
    column-gap: var(--aligned-desktop-gap) !important;
  }

  html body #Donate .hero-scroll-stage {
    padding-right: 0 !important;
    padding-left: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #Donate .donation-impact-layout {
    gap: var(--aligned-desktop-gap) !important;
  }

  html body #Donate .donation-impact-message {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* Keep the desktop story rhythm compact and predictable on every monitor.
   The artwork already establishes a 560px content row, so a viewport-height
   minimum only adds variable blank space on taller displays. */
@media (min-width: 901px) {
  :root {
    --content-section-safe-top: 80px;
    --content-section-safe-bottom: 80px;
  }

  html body :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder).story-section,
  html.paragraph-scroll-enhanced body :is(#Crisis, #National311, #Educate, #PhoneSafety, #Reminder).story-section.paragraph-scroll-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Educate > .reg-void-inner,
  html body #PhoneSafety > .phone-tabs-inner,
  html body #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section > .hero-sticky-shell,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section > .section-311-inner,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section > .reg-void-inner,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section > .phone-tabs-inner,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: var(--content-section-safe-top) !important;
    padding-bottom: var(--content-section-safe-bottom) !important;
  }

  html body #FAQ,
  html body #FAQ > .faq-shell {
    --faq-safe-top: var(--content-section-safe-top) !important;
    --faq-safe-bottom: var(--content-section-safe-bottom) !important;
  }

  html body #Donate {
    --donation-safe-top: var(--content-section-safe-top) !important;
  }

  /* Phone Safety must stay centered in its full visual column on desktop.
     This deliberately overrides the calculated top offset used by the other
     phone sections so tall monitors cannot shift it up or down. */
  html body #PhoneSafety .phone-tabs-right-col > .shared-phone-holder {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* Every desktop narrative uses two equal columns. The copy fills one complete
   track; once the viewport is too narrow, every pair stacks into one column. */
@media (min-width: 901px) {
  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Educate > .reg-void-inner,
  html body #PhoneSafety > .phone-tabs-inner,
  html body #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section > .hero-sticky-shell,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section > .section-311-inner,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section > .reg-void-inner,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section > .phone-tabs-inner,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    box-sizing: border-box !important;
    width: calc(100% - var(--aligned-desktop-gutter) - var(--aligned-desktop-gutter)) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    column-gap: var(--aligned-desktop-gap) !important;
  }

  html body #Crisis .hero-left,
  html body #National311 .section-311-copy,
  html body #Educate .ai-education-copy,
  html body #PhoneSafety .phone-tabs-copy,
  html body #Reminder .reminder-content,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section .hero-left,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section .section-311-copy,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section .ai-education-copy,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section .phone-tabs-copy,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section .reminder-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body #Crisis .hero-scroll-copy,
  html body #National311 .hero-scroll-copy,
  html body #Educate .hero-scroll-copy,
  html body #PhoneSafety .hero-scroll-copy,
  html body #Reminder .hero-scroll-copy,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section .hero-scroll-copy,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section .hero-scroll-copy,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section .hero-scroll-copy,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section .hero-scroll-copy,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section .hero-scroll-copy {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 900px) {
  html body #Crisis > .hero-sticky-shell,
  html body #National311 > .section-311-inner,
  html body #Educate > .reg-void-inner,
  html body #PhoneSafety > .phone-tabs-inner,
  html body #Reminder > .reminder-inner,
  html.paragraph-scroll-enhanced body #Crisis.story-section.paragraph-scroll-section > .hero-sticky-shell,
  html.paragraph-scroll-enhanced body #National311.story-section.paragraph-scroll-section > .section-311-inner,
  html.paragraph-scroll-enhanced body #Educate.story-section.paragraph-scroll-section > .reg-void-inner,
  html.paragraph-scroll-enhanced body #PhoneSafety.story-section.paragraph-scroll-section > .phone-tabs-inner,
  html.paragraph-scroll-enhanced body #Reminder.story-section.paragraph-scroll-section > .reminder-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}