/*
 * Shared responsive image heroes.
 * Large desktop keeps each route's approved composition. At tablet, compact
 * desktop and mobile sizes, image heroes follow the Home pattern: one visual
 * layer behind the copy.
 */

/* One horizontal rail, measured from the logo in the header. Section frames
 * follow it; the padding INSIDE a card or form remains a separate rhythm. */
:root {
  --content-gutter: 34px;
}

@media (max-width: 1050px) {
  :root { --content-gutter: 26px; }
}

@media (max-width: 620px) {
  :root { --content-gutter: 18px; }
}

#app > .site[class] > .topbar > .nav {
  padding-inline: var(--content-gutter);
}

#app > .site[class][class] :is(
  .wrap, .pva-wrap, .installer-body, .officials-breadcrumb-v28,
  .officials-directory-v28, .officials-guide-v28,
  .contact-hero-layout, .faq-hero-inner, .resources-hero-inner,
  .guide-offer-hero-inner, .tools-hero-inner, .legal-hero-inner-v28,
  .cookies-hero-inner, .before-breadcrumb, .resource-library
) {
  width: calc(100% - 2 * var(--content-gutter));
  max-width: none;
  margin-inline: auto;
}

#app > .site[class][class] .installer-body {
  padding-inline: 0;
}

#app > .site[class][class] .guide-summary-section .section-head {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

#app > .site[class][class] .guide-summary-section .section-head :is(h2, p) {
  margin-inline: 0;
  text-align: left;
}

#app > .site[class].page-home .hero-copy {
  width: calc(100% - 2 * var(--content-gutter));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

#app > .site[class][class] :is(.page-hero-inner, .arrival-hero-inner) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

#app > .site[class][class] :is(
  .work-hero-copy, .installer-hero-copy, .installer-breadcrumbs,
  .before-hero-copy, .about-hero-copy, .integration-hero-copy,
  .page-hero-copy:where(:not(.guide-offer-hero-copy)), .arrival-hero-copy
) {
  padding-left: var(--content-gutter);
}

/* These frames already carry the rail: do not indent their copy again. */
#app > .site[class][class] :is(
  .contact-hero-copy, .guide-offer-hero-copy, .resources-hero-copy,
  .pva-hero-copy, .legal-hero-copy-v28, .cookies-hero-copy
) {
  padding-inline: 0;
}

@media (min-width: 1280px) {
  #app > .site[class][class] .unified-responsive-hero-copy {
    margin-inline: 0;
  }

  #app > .site[class][class] .officials-hero-v28 {
    padding-inline: var(--content-gutter);
  }

  #app > .site[class][class] .glossary-hero-copy {
    margin-inline: var(--content-gutter);
  }

  #app > .site[class][class] .integration-breadcrumb {
    left: var(--content-gutter);
  }
}

@media (max-width: 1279px) {
  #app > .site[class][class] .unified-responsive-hero-copy {
    width: calc(100% - 2 * var(--content-gutter));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  #app > .site[class][class] .integration-breadcrumb {
    left: 0;
  }
}

@media (max-width: 1279px) {
  #app > .site .unified-responsive-hero {
    position: relative;
    min-height: clamp(460px, 54vw, 520px);
    display: block;
    isolation: isolate;
    overflow: hidden;
    background: var(--surface-base);
  }

  #app > .site .unified-responsive-hero-copy {
    position: relative;
    z-index: 2;
    width: min(100% - 48px, 900px);
    max-width: none;
    min-height: clamp(460px, 54vw, 520px);
    margin: 0 auto;
    padding: 34px 0 32px;
    justify-content: center;
    background: transparent;
  }

  #app > .site .unified-responsive-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    display: block;
    overflow: hidden;
    border: 0;
    background-color: var(--surface-base);
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
  }

  #app > .site .unified-responsive-hero-media::before,
  #app > .site .unified-responsive-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    display: block;
    background:
      linear-gradient(
        90deg,
        var(--surface-base) 0%,
        rgba(255, 254, 250, 0.98) 36%,
        rgba(255, 254, 250, 0.78) 62%,
        rgba(255, 254, 250, 0.08) 100%
      );
    pointer-events: none;
  }

  #app > .site .unified-responsive-hero-media::before {
    display: none;
  }

  #app > .site .unified-responsive-hero-media > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #app > .site .unified-responsive-hero-copy > :is(h1, p, ul, .inline-actions, .guide-preview) {
    max-width: min(780px, 88%);
  }

  #app > .site.page-about .about-swiss-flag {
    display: none;
  }
}

@media (min-width: 621px) and (max-width: 1279px) {
  #app > .site.page-organismes .unified-responsive-hero-copy {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 620px) {
  #app > .site .unified-responsive-hero,
  #app > .site .unified-responsive-hero-copy {
    min-height: 460px;
  }

  #app > .site .unified-responsive-hero-copy {
    width: calc(100% - 32px);
    padding: 26px 0 28px;
    justify-content: flex-start;
  }

  #app > .site .unified-responsive-hero-media {
    opacity: 0.74;
  }

  #app > .site .unified-responsive-hero-media::after {
    background:
      linear-gradient(
        90deg,
        rgba(255, 254, 250, 0.99) 0%,
        rgba(255, 254, 250, 0.94) 54%,
        rgba(255, 254, 250, 0.42) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 254, 250, 0.08) 0%,
        rgba(255, 254, 250, 0.26) 48%,
        var(--surface-base) 100%
      );
  }

  #app > .site .unified-responsive-hero-copy > :is(h1, p, ul, .inline-actions, .guide-preview) {
    width: 100%;
    max-width: 100%;
  }

  /*
   * Avant le départ contains a carousel after its copy inside the same hero
   * wrapper. Keep the photograph behind the editorial copy only: otherwise
   * the media stretches over the carousel and consumes almost a full viewport.
   */
  #app > .site.page-avant-le-depart .unified-responsive-hero-copy {
    min-height: 350px;
  }

  #app > .site.page-avant-le-depart .unified-responsive-hero-media {
    inset: 0 0 auto;
    height: 350px;
  }
}

@media (max-width: 360px) {
  #app > .site.page-avant-le-depart .unified-responsive-hero-copy {
    min-height: 390px;
  }

  #app > .site.page-avant-le-depart .unified-responsive-hero-media {
    height: 390px;
  }
}

/* Organismes : la photo reste un vrai fond compact sans hauteur vide héritée. */
@media (max-width: 1279px) {
  #app > .site.page-organismes .officials-hero-v28 {
    min-height: clamp(470px, 48vw, 520px);
    padding: 0;
    background: var(--surface-base);
  }

  #app > .site.page-organismes .officials-hero-copy-v28 {
    width: min(calc(100% - 64px), 1328px);
    min-height: clamp(470px, 48vw, 520px);
    margin-inline: auto;
    padding: 54px 0 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #app > .site.page-organismes .officials-hero-media-v28 {
    opacity: 0.78;
  }

  #app > .site.page-organismes .officials-hero-media-v28::after {
    background:
      linear-gradient(
        90deg,
        rgba(255, 254, 250, 0.99) 0%,
        rgba(255, 254, 250, 0.96) 44%,
        rgba(255, 254, 250, 0.48) 73%,
        rgba(255, 254, 250, 0.08) 100%
      ),
      linear-gradient(180deg, rgba(255, 254, 250, 0.08), var(--surface-base));
  }

  #app > .site.page-organismes .officials-hero-media-v28 > img {
    object-position: center;
    transform: scaleX(-1);
  }
}

/*
 * Contrat de finition desktop final-v28.
 * Ces corrections restent limitées à chaque route et conservent des retours
 * naturels : aucune ligne n'est artificiellement bloquée avec nowrap.
 */
@media (min-width: 1280px) {

  #app > .site.page-prevoyance main > .section .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.6fr);
  }

  #app > .site.page-prevoyance main > .section .section-head h2 {
    max-width: none;
  }

  #app > .site.page-about #about-title {
    max-width: 780px;
  }

  #app > .site.page-about .about-section-head {
    max-width: 900px;
  }

  #app > .site.page-about #about-method-title {
    white-space: normal;
  }

  #app > .site.page-cookies .cookies-flow h3.short-card-title {
    white-space: normal;
    text-wrap: pretty;
  }

  #app > .site.page-cookies #cookies-reglages {
    --type-h2: clamp(32px, 2.78vw, 39px);
  }

  #app > .site.page-cookies #cookies-reglages > div > h2 {
    max-width: none;
  }

  #app > .site.page-terms .legal-hero-inner-v28 {
    grid-template-columns: minmax(0, 1fr) 448px;
  }

  #app > .site.page-s-installer-en-suisse .page-installer .installer-cta > div {
    max-width: none;
  }
}

@media (min-width: 1400px) {
  #app > .site.page-cookies .cookies-flow {
    --type-h3: 18.5px;
  }

  #app > .site.page-cookies .cookies-flow h3.short-card-title {
    font-size: 18.5px !important;
  }

}

/* Une liste principale, deux aides secondaires : aucune carte étirée à la
   hauteur de toute la checklist. La lecture reste de gauche à droite. */
@media (min-width: 1024px) {
  #app > .site.page-s-installer-en-suisse .page-installer .installer-checklist-panel {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }

  #app > .site.page-s-installer-en-suisse .page-installer .installer-checklist-main {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  #app > .site.page-s-installer-en-suisse .page-installer :is(.installer-rhythm-card, .installer-help-card) {
    grid-column: 2;
    min-height: 0;
    padding: 22px;
    grid-template-rows: auto auto;
  }

  #app > .site.page-s-installer-en-suisse .page-installer .installer-rhythm-card {
    grid-row: 1;
  }

  #app > .site.page-s-installer-en-suisse .page-installer .installer-help-card {
    grid-row: 2;
  }
}

@media (min-width: 1280px) and (max-width: 1399px) {
  #app > .site.page-organismes .officials-grid-v28 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app > .site.page-organismes .official-card-summary-v28 small {
    white-space: normal;
  }
}

@media (min-width: 1400px) {
  #app > .site.page-organismes .official-card-v28 {
    padding-inline: 14px;
  }

  #app > .site.page-organismes .official-card-summary-v28 {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  #app > .site.page-organismes .official-card-summary-v28 small {
    font-size: 12px !important;
    white-space: normal;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  #app > .site.page-organismes .officials-hero-copy-v28 > h1 {
    max-width: min(100%, 960px);
    letter-spacing: -0.036em !important;
  }
}

@media (min-width: 1051px) and (max-width: 1279px) {
  #app > .site.page-legal .legal-hero-inner-v28 {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 340px);
    gap: 16px;
  }
}

@media (min-width: 901px) and (max-width: 1050px) {
  #app > .site.page-legal .legal-hero-copy-v28 h1 {
    max-width: none;
  }
}

@media (max-width: 1179px) {
  #app > .site.page-s-installer-en-suisse .page-installer .installer-essential-card .installer-card-arrow {
    right: 25px;
    bottom: 14px;
  }
}

@media (max-width: 620px) {
  #app > .site.page-organismes .officials-hero-v28,
  #app > .site.page-organismes .officials-hero-copy-v28 {
    min-height: 500px;
  }

  #app > .site.page-organismes .officials-hero-copy-v28 {
    width: calc(100% - 32px);
    padding: 48px 0 28px;
    justify-content: center;
  }

  #app > .site.page-organismes .officials-hero-media-v28 {
    opacity: 0.58;
  }

  #app > .site.page-organismes .officials-hero-media-v28::after {
    background:
      linear-gradient(
        90deg,
        rgba(255, 254, 250, 0.995) 0%,
        rgba(255, 254, 250, 0.97) 64%,
        rgba(255, 254, 250, 0.54) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 254, 250, 0.12) 0%,
        rgba(255, 254, 250, 0.3) 66%,
        var(--surface-base) 100%
      );
  }
}

/*
 * Reflow des titres de héros : les titres longs doivent rester dans leur
 * colonne et conserver assez d'air pour que les glyphes ne soient pas rognés.
 */
@media (min-width: 769px) {
  #app > .site.page-about #about-title,
  #app > .site.page-s-integrer-en-suisse #integration-title {
    padding-block: 0.08em;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }
}

/*
 * FAQ desktop : le titre court global en nowrap imposait sa largeur minimale
 * aux cartes latérales. Les pistes restent rétractables et le texte se replie,
 * sans masquer ni couper le contenu.
 */
@media (min-width: 901px) {
  #app > .site.page-faq .faq-directory-layout > * {
    min-width: 0;
  }

  #app > .site.page-faq .faq-side {
    grid-template-columns: minmax(0, 1fr);
  }

  #app > .site.page-faq .faq-side-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #app > .site.page-faq .faq-side-panel h3.short-card-title {
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  #app > .site.page-faq :is(.faq-quick-links, .faq-quick-links a, .faq-quick-links strong, .faq-quick-links small) {
    min-width: 0;
  }

  #app > .site.page-faq .faq-quick-links :is(strong, small) {
    overflow-wrap: anywhere;
  }
}

/*
 * Harmonie mobile finale : une échelle courte, des titres de section alignés
 * à gauche et un rythme plus compact sur toutes les routes publiques.
 */
/* Dernier niveau de cascade : fonds et rythme identiques sans !important. */
#app > .site.page-about .about-hero,
#app > .site:is(
  .page-legal,
  .page-privacy,
  .page-cookies,
  .page-terms,
  .page-accessibility
) :is(.legal-hero-v28, .legal-content-v28) {
  background-color: var(--surface-base);
}

#app > .site.page-avant-le-depart > main > .before-departure-content,
#app > .site.page-legal.page-legal > main.legal-page-v28 > .legal-content-v28 {
  padding-block: var(--surface-space-section);
}

@media (min-width: 768px) {
  #app > .site[class][class] main h1,
  #app > .site.page-outils-pratiques #tools-page-title,
  #app > .site.page-preparer-votre-arrivee #pva-title,
  #app > .site.page-resources #resources-title,
  #app > .site.page-legal .legal-page-v28 .legal-hero-copy-v28 h1 {
    font-size: clamp(40px, 3.2vw, 46px) !important;
    line-height: 1.08 !important;
  }

  #app > .site[class][class] main h2 {
    font-size: clamp(28px, 2.3vw, 34px) !important;
    line-height: 1.14 !important;
  }

  #app > .site.page-preparer-votre-arrivee #pva-guide-title,
  #app > .site.page-outils-pratiques #pva-guide-title,
  #app > .site.page-avant-le-depart #before-advice-title,
  #app > .site.page-about #about-method-title {
    font-size: clamp(28px, 2.3vw, 34px) !important;
    line-height: 1.14 !important;
  }

  #app > .site[class][class] main h3 {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }

  #app > .site.page-cookies main .cookies-flow h3.short-card-title {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 767px) {
  #app > .site[class] main h1 {
    font-size: clamp(30px, 8.5vw, 32px) !important;
    line-height: 1.08 !important;
  }

  #app > .site[class] main h2 {
    font-size: clamp(24px, 7.4vw, 28px) !important;
    line-height: 1.14 !important;
  }

  #app > .site[class] main h3 {
    font-size: clamp(18px, 5.3vw, 20px) !important;
    line-height: 1.22 !important;
  }

  #app > .site main :is(h1, h2, h3) {
    max-width: 100%;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  #app > .site main :is(
    .section-head,
    .about-section-head,
    .arrival-section-head,
    .installer-section-heading,
    .integration-section-head,
    .pva-section-head,
    .resource-section-heading,
    .tools-section-heading,
    .work-section-head
  ) {
    align-items: center;
    text-align: center;
  }

  #app > .site main :is(
    .section-head,
    .about-section-head,
    .arrival-section-head,
    .installer-section-heading,
    .integration-section-head,
    .pva-section-head,
    .resource-section-heading,
    .tools-section-heading,
    .work-section-head
  ) :is(h2, h3, p) {
    margin-inline: auto;
    text-align: center;
  }

  #app > .site main p {
    text-wrap: pretty;
  }

  #app > .site main > .section {
    padding-block: clamp(40px, 12vw, 48px);
  }

  /* Les quatre exceptions historiques rejoignent la même échelle H1. */
  #app > .site.page-outils-pratiques #tools-page-title,
  #app > .site.page-preparer-votre-arrivee #pva-title,
  #app > .site.page-resources #resources-title,
  #app > .site.page-legal .legal-page-v28 .legal-hero-copy-v28 h1 {
    font-size: clamp(30px, 8.5vw, 32px) !important;
    line-height: 1.08 !important;
  }

  #app > .site.legal-site main .legal-summary-v28 h2,
  #app > .site.page-contact main .contact-faq-access h2 {
    font-size: clamp(24px, 7.4vw, 28px) !important;
    line-height: 1.14 !important;
  }

  #app > .site.page-logement main .volume-tab-head h3,
  #app > .site.page-s-installer-en-suisse main .installer-card-copy h3 {
    font-size: clamp(18px, 5.3vw, 20px) !important;
    line-height: 1.22 !important;
  }

  /* Le brief client exige aussi cette introduction et ses quatre thèmes sur
     mobile : aucun texte demandé n'est masqué à ce breakpoint. */
  #app > .site.page-home #download .download-feature-copy {
    display: block;
  }

  /* Le menu mobile contient déjà ces liens. Le footer conserve la marque,
     le contact et toutes les destinations légales sans rallonger la page. */
  #app > .site .unified-footer-main {
    padding-block: 28px 24px;
    gap: 0;
  }

  #app > .site .unified-footer-intro .brand {
    margin-bottom: 14px;
  }

  #app > .site .unified-footer-intro p {
    max-width: 42ch;
    margin-bottom: 14px;
    line-height: 1.55;
  }

  #app > .site .unified-footer-groups {
    display: none;
  }

  #app > .site .unified-footer-bottom {
    padding-block: 14px 16px;
  }
}

@media (max-width: 700px) {
  /* Une carte entière à la fois : aucune amorce de texte ou carte coupée. */
  #app > .site .mobile-card-carousel.is-carousel-active {
    grid-auto-columns: 100% !important;
  }

  /* Le contenu le plus long fixe la hauteur du carrousel automobile : une
     ancienne réserve de 610 px ajoutait du vide sous chaque carte courte. */
  #app > .site.page-automobile main .volume-tab-grid.mobile-card-carousel.is-carousel-active > .volume-tab-card {
    min-height: 0;
  }
}
@media (min-width: 1181px) {
  #app > .site .search-button {
    display: grid;
  }

  #app > .site .nav-actions .btn-primary > svg {
    display: block;
  }
}

/* Global heading and mobile alignment policy, approved 15 October 2026.
   Keep natural wrapping and the existing type scale; short headings use all
   the room in their component instead of a second, narrower text column. */
#app > .site[class][class] main :is(h1, h2, h3, h4) {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}

#app > .site.editorial-article-site .editorial-article-hero h1 {
  max-width: none;
}

#app > .site[class][class] main h1 > span,
#app > .site[class][class] main h1 .hero-title-line {
  display: inline;
}

@media (max-width: 767px) {
  #app > .site[class][class] {
    text-align: center;
  }

  #app > .site[class][class] :is(main, footer) :is(
    h1, h2, h3, h4, p, li, dt, dd, figcaption, blockquote,
    .hero-kicker, .section-label, [class*="eyebrow"],
    .editorial-verification, .volume-tab-head, .faq-question
  ) {
    text-align: center;
  }

  #app > .site[class][class] main :is(h1, h2, h3, h4) {
    margin-inline: auto;
    text-wrap: balance;
  }

  #app > .site[class][class] :is(
    .section-head, .guide-summary-section .section-head,
    .unified-responsive-hero-copy, .hero-copy, .page-hero-copy,
    .editorial-cta-inner, .editorial-toc, .volume-card-copy,
    .work-essential-card, .installer-essential-card,
    .unified-footer-intro, .unified-footer-bottom
  ) {
    align-items: center;
    text-align: center;
  }

  #app > .site[class][class] .guide-summary-section .section-head :is(h2, p) {
    margin-inline: auto;
    text-align: center;
  }

  #app > .site[class][class] :is(
    .hero-copy, .unified-responsive-hero-copy, .page-hero-copy,
    .guide-offer-hero-copy, .contact-hero-copy,
    .guide-summary-section .section-head, .unified-footer-intro
  ) > :is(h1, h2, p, .hero-kicker, .inline-actions, .hero-actions) {
    margin-inline: auto;
  }

  #app > .site[class][class] :is(
    .inline-actions, .hero-actions, .hero-kicker, .volume-actions,
    .editorial-breadcrumb, .breadcrumb, .breadcrumb-nav,
    .unified-footer-intro .brand, .unified-footer-links,
    .unified-footer-legal, .unified-footer-contact, .unified-footer-bottom nav
  ) {
    justify-content: center;
  }

  #app > .site[class][class] :is(
    .editorial-direct-answer, .editorial-verification,
    .editorial-cta-actions, .unified-footer-intro p
  ) {
    margin-inline: auto;
  }

  #app > .site[class][class] :is(
    .btn, .text-link, .volume-tab-action, .editorial-toc a,
    .resource-editorial-card, .editorial-related-grid a,
    .mobile-link, .mobile-feature-link, .search-result, .popular-terms a, .popular-terms button
  ) {
    text-align: center;
  }

  #app > .site[class][class] :is(.btn, .volume-tab-action) > span {
    text-align: center;
  }

  #app > .site[class][class] .unified-footer-bottom {
    justify-content: center;
  }

  /* Inputs, their labels and data tables keep a stable reading edge. Their
     cards are centred; dates retain their seven-column calendar geometry. */
  #app > .site[class][class] :is(
    form label, form legend, input, textarea, select,
    .field-error, .form-error, th, td
  ) {
    text-align: left;
  }

  #app > .site[class][class] > .topbar:not(.fallback-topbar) > .nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 0;
  }

  #app > .site[class][class] > .topbar:not(.fallback-topbar) > .nav > .brand {
    grid-column: 2;
    justify-self: center;
    margin: 0;
  }

  #app > .site[class][class] > .topbar:not(.fallback-topbar) > .nav > .nav-actions {
    grid-column: 3;
    justify-self: end;
  }

  /* Initial HTML has a direct guide link rather than a burger. Keep both
     links visible without placing the guide label in a 44px icon column. */
  #app > .site[class][class] > .fallback-topbar {
    height: auto;
  }

  #app > .site[class][class] > .fallback-topbar > .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: auto;
    min-height: 64px;
    padding-block: 14px;
  }

  #app > .site[class][class] > .fallback-topbar > .nav > :is(.brand, .btn) {
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }

  #app > .site[class][class] > .fallback-topbar > .nav > .btn {
    padding-inline: 24px;
    white-space: normal;
  }

  #app > .site[class][class] main .hero-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    padding-inline: 0;
    margin-inline: auto;
  }

  #app > .site[class][class] main .hero-kicker::before {
    position: static;
    flex: 0 0 12px;
    transform: none;
  }

  #app > .site[class][class] :is(
    .mobile-menu-inner, .mobile-menu-head, .search-panel-inner,
    .search-empty, .search-result-copy, .mobile-volume-overview
  ),
  .analytics-consent-copy {
    text-align: center;
  }

  .analytics-consent-current, .analytics-consent-close {
    justify-self: center;
  }

  .analytics-consent-inner, .analytics-consent-actions {
    justify-content: center;
    align-items: center;
  }
}