/* One surface owner on all current pages. Menu content may fade;
   viewport edges and navigation never retain a closing colour. */
html[data-qc-mobile-page] {
  --qc-safe-pine: #15231c;
  --qc-footer-pine: #10231b;
  --qc-nav-paper: #d8cdc0;
  --quiet-nav-surface: #d8cdc0;
  --qc-page-canvas: #ddd5c9;
  /* Default canvas for pages with a green footer; Places and FAQ switch
     their ordinary canvas to limestone below. */
  background-color: var(--qc-footer-pine) !important;
}
html[data-qc-mobile-page] body {
  /* Most pages keep the footer colour behind their own content surfaces. */
  background-color: var(--qc-footer-pine) !important;
}
html[data-qc-mobile-page] body::before {
  background-color: var(--qc-footer-pine) !important;
}
html[data-qc-mobile-page="places"] body,
html[data-qc-mobile-page="faq"] body {
  /* Ordinary document colour; both canvases turn pine at the footer end. */
  background-color: var(--qc-page-canvas) !important;
}
html:is([data-qc-mobile-page="places"], [data-qc-mobile-page="faq"])[data-qc-safe-surface="footer"],
html:is([data-qc-mobile-page="places"], [data-qc-mobile-page="faq"])[data-qc-safe-surface="footer"] body {
  /* Safari can expose either canvas during the final rubber-band gesture. */
  background-color: var(--qc-footer-pine) !important;
}
html.qc-place-page,
html[data-qc-mobile-page="index3"] {
  --qc-nav-paper: #ddd5c9;
  --quiet-nav-surface: #ddd5c9;
}
html[data-qc-mobile-page="index3"] {
  --qc-safe-edge: var(--qc-safe-pine);
}
html[data-qc-mobile-page="index3"][data-qc-safe-surface="paper"] {
  --qc-safe-edge: var(--qc-nav-paper);
}

html[data-qc-mobile-page] body > :is(.ios-safe-fill, .menu-safe-area) {
  display: none !important;
  pointer-events: none !important;
  transition: none !important;
}

@media (min-width: 1181px) {
  html[data-qc-mobile-page="index3"],
  html[data-qc-mobile-page="index3"] body {
    background-color: var(--qc-footer-pine) !important;
  }
}

@media (max-width: 1180px) {
  /* Clip the document edge, not the inner galleries or interactive maps. */
  html.qc-place-page,
  html.qc-place-page body,
  html[data-qc-mobile-page="places"],
  html[data-qc-mobile-page="places"] body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }
  html.qc-place-page body > main,
  html[data-qc-mobile-page="places"] body > main {
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  /* Editorial pages use centred 100vw hero and card surfaces. WebKit can
     rubber-band the root horizontally around those elements even when their
     geometry is visually correct. Keep the document on its vertical axis. */
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]),
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body > main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    touch-action: pan-y pinch-zoom !important;
  }

  html:is([data-qc-mobile-page="places"], [data-qc-mobile-page="faq"]) {
    /* The ordinary page edge is limestone. Green belongs to an open menu or
       the actual end of the footer, not to every closed-menu viewport. */
    background-color: var(--qc-page-canvas) !important;
  }
  html[data-qc-mobile-page="faq"],
  html[data-qc-mobile-page="faq"] body {
    /* Contain horizontal rubber-banding at the page, while nested card
       rails retain their own horizontal scrolling. */
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"])[data-qc-safe-surface]:is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]),
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"])[data-qc-safe-surface]:is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]) body {
    background-color: var(--qc-page-canvas) !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body::before {
    /* Keep a green underlay ready before Safari starts rubber-banding.
       The paper main (z-index:1), footer (z-index:20), navigation and safe
       fills paint above it; only space exposed below the footer sees green. */
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: var(--qc-footer-pine) !important;
    pointer-events: none !important;
  }
  /* Reserve the working Index tint band separately from the controls.
     Otherwise its extra 12px consume the logo's original top breathing room. */
  html[data-qc-mobile-page="index3"] {
    --qc-header-edge-space: 12px;
  }
  html[data-qc-mobile-page="places"] {
    /* The 12px beige sampling band must not consume the controls' air. */
    --qc-header-edge-space: 12px;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) {
    --qc-header-edge-space: 12px;
  }
  /* Keep Safari's under-page fallback and its fixed edge on the same
     surface, including the return from paper to the transparent hero. */
  html[data-qc-mobile-page="index3"] {
    background-color: var(--qc-safe-edge) !important;
  }
  html[data-qc-mobile-page="index3"] body,
  html[data-qc-mobile-page="index3"] body::before {
    background-color: var(--qc-footer-pine) !important;
  }
  /* On a place portrait the menu's pine must not remain the browser's
     closed-state fallback. The menu and footer rules below own their green
     states; ordinary hero and paper views use the existing nav limestone. */
  html.qc-place-page:is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]),
  html.qc-place-page:is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]) body {
    background-color: var(--qc-nav-paper) !important;
  }
  html.qc-place-page body > .masthead:not(.is-scrolled) {
    --qc-header-height: 68px;
  }
  html[data-qc-mobile-page] body > :is(#home-masthead, #places-masthead, .masthead, .topbar) {
    box-sizing: border-box !important;
    height: calc(var(--hero-header-height, var(--qc-header-height, 52px)) + env(safe-area-inset-top, 0px) + var(--qc-header-edge-space, 0px)) !important;
    padding: calc(env(safe-area-inset-top, 0px) + var(--qc-header-edge-space, 0px)) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)) !important;
  }
  html[data-qc-mobile-page] body > :is(#home-masthead, #places-masthead, .masthead, .topbar) > .masthead__brand {
    grid-area: auto !important;
    justify-self: auto !important;
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + var(--qc-header-edge-space, 0px) + var(--hero-header-height, var(--qc-header-height, 52px)) / 2) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
  }
  html[data-qc-mobile-page] body > :is(#home-masthead, #places-masthead, .masthead, .topbar) > .masthead__menu {
    grid-area: auto !important;
    justify-self: auto !important;
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + var(--qc-header-edge-space, 0px) + var(--hero-header-height, var(--qc-header-height, 52px)) / 2) !important;
    right: max(20px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="menu"],
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body {
    background-color: var(--qc-safe-pine) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="modal"],
  html[data-qc-mobile-page][data-qc-safe-surface="modal"] body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body > #site-menu.menu-overlay {
    overscroll-behavior: none !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body > :is(.ios-safe-fill, .menu-safe-area),
  html[data-qc-mobile-page="index3"] body > .menu-safe-area--top {
    display: block !important;
    position: fixed !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2004 !important;
    background: var(--qc-safe-edge, var(--qc-safe-pine)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body > :is(.ios-safe-fill--top, .menu-safe-area--top),
  html[data-qc-mobile-page="index3"] body > .menu-safe-area--top {
    top: 0 !important;
    bottom: auto !important;
    height: env(safe-area-inset-top, 0px) !important;
    min-height: 0 !important;
  }
  /* WebKit samples inward from the fixed viewport edge and ignores thin
     primary backgrounds. Extend the safe-area surface 12px into the header
     so it stays sampleable with either zero or positive obscured insets.
     This remains above the logo/strokes; do not replace DOM or toggle menus. */
  html[data-qc-mobile-page="index3"][data-qc-safe-surface] body > .menu-safe-area--top {
    height: calc(var(--qc-header-edge-space, 12px) + env(safe-area-inset-top, 0px)) !important;
    background: var(--qc-safe-edge) !important;
  }
  html.qc-place-page body:is(.newsletter-opening, .modal-open, .newsletter-closing) > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    display: block !important;
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1999 !important;
    height: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--qc-nav-paper) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.qc-place-page body:is(.modal-open, .newsletter-closing) > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
      background: rgba(7,20,14,.44) !important;
      -webkit-backdrop-filter: blur(6px) saturate(103%) !important;
      backdrop-filter: blur(6px) saturate(103%) !important;
    }
  }
  html.qc-place-page body.newsletter-closing > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    opacity: 0 !important;
    transition: opacity 1000ms cubic-bezier(.2,.75,.25,1) !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    top: auto !important;
    bottom: 0 !important;
    height: env(safe-area-inset-bottom, 0px) !important;
    min-height: 0 !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]):is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]) body > .ios-safe-fill--bottom {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2004 !important;
    height: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--qc-page-canvas) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"])[data-qc-safe-surface="menu"] body > .ios-safe-fill--bottom {
    height: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--qc-safe-pine) !important;
  }
  html.qc-place-page[data-qc-safe-surface="menu"] body > .ios-safe-fill--bottom {
    height: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
  /* A fading full-screen menu can keep tinting Safari's lower chrome after
     its content looks closed. Give the ordinary place view an opaque edge
     to sample immediately; modal and footer states retain their own edge. */
  html.qc-place-page:is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]) body > .ios-safe-fill--bottom {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2004 !important;
    height: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--qc-nav-paper) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
  }

  /* Keep the top edge stable for Safari's tint sampling. The lower edge has
     no painted layer during ordinary scrolling; it exists only for the menu
     and the footer, where there is an actual solid surface to continue. */
  html[data-qc-mobile-page="places"] body > :is(.ios-safe-fill, .menu-safe-area),
  html[data-qc-mobile-page="faq"] body > :is(.ios-safe-fill, .menu-safe-area) {
    display: none !important;
    position: fixed !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2004 !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
  }
  html[data-qc-mobile-page="places"] body > :is(.ios-safe-fill--top, .menu-safe-area--top),
  html[data-qc-mobile-page="faq"] body > :is(.ios-safe-fill--top, .menu-safe-area--top) {
    display: block !important;
    top: 0 !important;
    bottom: auto !important;
    height: env(safe-area-inset-top, 0px) !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]) body > .ios-safe-fill--top {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 2004 !important;
    height: calc(env(safe-area-inset-top, 0px) + var(--qc-header-edge-space, 12px)) !important;
    background: var(--qc-nav-paper) !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"])[data-qc-safe-surface="menu"] body > .ios-safe-fill--top {
    background: var(--qc-safe-pine) !important;
  }
  /* Safari 26 may keep the menu's sampled green chrome after closing when
     the beige fill stops exactly at the safe-area boundary. As on Index,
     make the paper edge sampleable a little inside the viewport. It stays
     above the controls and does not alter the header's layout. */
  html[data-qc-mobile-page="places"] body > .ios-safe-fill--top {
    height: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  }
  html[data-qc-mobile-page="places"] body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom),
  html[data-qc-mobile-page="faq"] body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    top: auto !important;
    bottom: 0 !important;
    height: env(safe-area-inset-bottom, 0px) !important;
  }
  html[data-qc-mobile-page="faq"]:not([data-qc-safe-surface="menu"]) body > :is(.ios-safe-fill--top, .menu-safe-area--top),
  html[data-qc-mobile-page="places"][data-qc-safe-surface="hero"] body > :is(.ios-safe-fill--top, .menu-safe-area--top),
  html[data-qc-mobile-page="places"][data-qc-safe-surface="paper"] body > :is(.ios-safe-fill--top, .menu-safe-area--top),
  html[data-qc-mobile-page="places"][data-qc-safe-surface="footer"] body > :is(.ios-safe-fill--top, .menu-safe-area--top) {
    background: var(--qc-nav-paper) !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body > :is(.ios-safe-fill, .menu-safe-area) {
    background: var(--qc-safe-pine) !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="footer"] body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    background: var(--qc-footer-pine) !important;
  }
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"])[data-qc-safe-surface="footer"] body > .ios-safe-fill--bottom {
    display: block !important;
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2004 !important;
    height: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html:is([data-qc-mobile-page="places"], [data-qc-mobile-page="faq"])[data-qc-safe-surface="footer"] body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    display: block !important;
  }

  /* On these two pages the overlay closes in the same frame as its edge
     colours change. A lingering opacity layer left a tinted lower strip and
     a compositing hairline above Safari's toolbar. Opening may still fade. */
  html:is([data-qc-mobile-page="places"], [data-qc-mobile-page="faq"]) body > #site-menu.menu-overlay:not(.is-open) {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
  }

  /* Detail pages use individual data-qc-mobile-page values. Their closing
     overlay must release the physical iPhone edge in the same frame instead
     of leaving its pine canvas behind for the global fade duration. */
  html.qc-place-page body > #site-menu.menu-overlay:not(.is-open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }

  /* The newsletter scrim owns the complete visual viewport. Extending it
     through the physical insets prevents a paper strip below the dialog. */
  html.qc-place-page body:is(.newsletter-opening, .modal-open, .newsletter-closing) > :is(#themesPanel, #directory-launch-modal) {
    top: calc(0px - env(safe-area-inset-top, 0px)) !important;
    right: 0 !important;
    bottom: calc(0px - max(12px, env(safe-area-inset-bottom, 0px))) !important;
    left: 0 !important;
    min-height: calc(100dvh + env(safe-area-inset-top, 0px) + max(12px, env(safe-area-inset-bottom, 0px))) !important;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(16px + max(12px, env(safe-area-inset-bottom, 0px))) !important;
    overscroll-behavior: none !important;
  }

  /* Neither the legacy share dock nor the enhanced Plan your stay control
     may remain visible through the translucent newsletter backdrop. */
  html.qc-place-page body:is(.newsletter-opening, .modal-open, .newsletter-closing) > :is(.share-dock, .qc-actions-dock, .qc-actions-layer) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Geometry and content fades are separate from viewport-surface state.
     Never interpolate pine into paper/transparent when closing the menu. */
  html[data-qc-mobile-page] body > :is(#home-masthead, #places-masthead, .masthead, .topbar) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: height .35s ease, color .35s ease, border-color .35s ease !important;
  }
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body > :is(#home-masthead, #places-masthead, .masthead, .topbar),
  html[data-qc-mobile-page][data-qc-safe-surface="menu"] body > .topbar .nav {
    background: var(--qc-safe-pine) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* The fading menu must not show through a restored transparent header or
     the physical viewport edges. Only its content area continues fading. */
  html[data-qc-mobile-page]:not(.menu-surface-open) body > #site-menu.menu-overlay {
    clip-path: inset(var(--qc-menu-clear-top, 68px) 0 env(safe-area-inset-bottom, 0px) 0) !important;
  }
  html[data-qc-mobile-page].menu-surface-open body > #site-menu.menu-overlay {
    clip-path: none !important;
  }

  /* As on detail pages: content fades, not an animated canvas over the
     mobile header. Fixed image heroes stay on their own root plane. */
  html[data-qc-mobile-page]::after {
    content: none !important;
    animation: none !important;
  }

  /* Ordinary page views do not own the lower iPhone inset. Let the visible
     content continue beneath it. Only menu, modal and footer states paint a
     deliberate lower surface through the dedicated rules above. */
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]):is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]) body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    display: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* The menu overlay keeps fading for one second after menu-open is removed.
     Cover its lower edge immediately with the restored page surface so
     Safari cannot keep sampling green during the closing animation. */
  html:is([data-qc-mobile-page="about"], [data-qc-mobile-page="contact"], [data-qc-mobile-page="context"], [data-qc-mobile-page="partners"]).qc-menu-edge-reset body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    display: block !important;
    position: fixed !important;
    inset: auto 0 0 !important;
    height: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2004 !important;
    background: var(--qc-page-canvas) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* When iOS collapses its bottom toolbar it samples the root canvas rather
     than the content visible beneath the glass. Keep only that root canvas
     on the page surface during ordinary viewing; do not alter body, heroes
     or section backgrounds. Menu and footer states retain pine above. */
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]):is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]) {
    background-color: var(--qc-page-canvas) !important;
  }

  /* The old fixed pine underlay covered the whole viewport, including the
     area exposed when the browser toolbar collapsed. Ordinary pages use
     their existing opaque body surface instead of that fixed green layer. */
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"]):is([data-qc-safe-surface="hero"], [data-qc-safe-surface="paper"]) body::before {
    display: none !important;
  }

  /* Continue the real footer at the document edge on every inner page. */
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"])[data-qc-safe-surface="footer"],
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"])[data-qc-safe-surface="footer"] body {
    background-color: var(--qc-footer-pine) !important;
  }
  html[data-qc-mobile-page]:not([data-qc-mobile-page="index3"])[data-qc-safe-surface="footer"] body > :is(.ios-safe-fill--bottom, .menu-safe-area--bottom) {
    display: block !important;
    position: fixed !important;
    inset: auto 0 0 !important;
    height: env(safe-area-inset-bottom, 0px) !important;
    z-index: 2004 !important;
    background: var(--qc-footer-pine) !important;
    pointer-events: none !important;
  }

}