/* P.S. Coffee mobile experience
   Mobile-only overrides; desktop layout remains controlled by wh.css. */

.mobile-hero-count,
.mobile-hero-progress {
  display: none;
}

@keyframes passLight {
  0%      { transform: translateX(-140%); }
  55%, 100% { transform: translateX(220%); }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  :root {
    --tablet-gut: 42px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  body[data-page="home"] .wh-banners {
    position: relative;
    display: block !important;
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-height: 620px;
    margin: 0 var(--tablet-gut) 72px;
    overflow: hidden;
    background: var(--ps-roast);
  }

  body[data-page="home"] .wh-banner {
    position: absolute;
    inset: 0;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6%);
    transition: opacity .42s cubic-bezier(.2,0,0,1), transform .42s cubic-bezier(.2,0,0,1);
  }

  body[data-page="home"] .wh-banner.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  body[data-page="home"] .wh-banner-img {
    height: 100%;
  }

  body[data-page="home"] .wh-banner-img::after {
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.7) 100%) !important;
  }

  body[data-page="home"] .wh-banner-body {
    inset: auto 42px 38px 42px;
    padding: 0 !important;
    justify-content: end;
  }

  body[data-page="home"] .wh-banner-caption {
    max-width: 560px;
    margin: 0 0 20px !important;
    font-size: clamp(19px, 2.7vw, 24px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  body[data-page="home"] .wh-banner-heading {
    max-width: 720px;
    margin: 0 0 24px !important;
    font-size: clamp(54px, 7.4vw, 76px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
  }

  body[data-page="home"] .wh-banner-price {
    margin-bottom: 16px !important;
  }

  body[data-page="home"] .wh-banner-cta-btn {
    width: fit-content !important;
    min-width: 210px;
    justify-content: center;
    height: 56px !important;
  }

  .mobile-hero-count {
    position: absolute;
    z-index: 4;
    left: 42px;
    top: 34px;
    display: flex;
    gap: 20px;
    color: var(--color-steam-cream);
    font-family: var(--wh-sans);
    font-size: 17px;
    line-height: 1;
  }

  .mobile-hero-count button {
    border: 0;
    background: transparent;
    padding: 0;
    color: rgba(250, 246, 238,.46);
    font: inherit;
  }

  .mobile-hero-count button.is-active {
    color: var(--color-steam-cream);
  }

  .mobile-hero-progress {
    position: absolute;
    z-index: 4;
    left: 42px;
    right: 42px;
    bottom: 24px;
    height: 1px;
    display: block;
    background: rgba(250, 246, 238,.36);
  }

  .mobile-hero-progress span {
    display: block;
    width: 50%;
    height: 100%;
    background: var(--color-steam-cream);
    transform-origin: left center;
    transition: transform .42s cubic-bezier(.2,0,0,1);
  }

  body[data-page="home"] .wh-home-shop {
    display: block !important;
    padding: 0 var(--tablet-gut) 112px !important;
  }

  body[data-page="home"] .wh-home-shop h2 {
    max-width: none;
    margin-bottom: 22px !important;
    font-size: clamp(32px, 4.2vw, 38px) !important;
    line-height: 1 !important;
  }

  body[data-page="home"] .wh-home-cards {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(310px, 42vw);
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="home"] .wh-home-cards::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .wh-home-card {
    scroll-snap-align: start;
  }

  body[data-page="home"] .wh-home-card image-slot {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
  }

  body[data-page="home"] .wh-favourites {
    padding: 42px var(--tablet-gut) 96px !important;
  }

  body[data-page="home"] .wh-favourites header {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px 6px !important;
    align-items: stretch !important;
    margin-bottom: 18px !important;
  }

  body[data-page="home"] .wh-favourites h2 {
    grid-column: 1 / -1 !important;
    max-width: 9.5ch !important;
    margin: 0 0 2px !important;
    white-space: normal !important;
    font-size: clamp(40px, 6.2vw, 52px) !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
  }

  body[data-page="home"] .wh-favourites nav {
    display: contents !important;
  }

  body[data-page="home"] .wh-favourites nav a,
  body[data-page="home"] .wh-favourites header > a {
    position: relative !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px 3px !important;
    border: 0 !important;
    border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0 !important;
    font-family: var(--font-body, "Space Grotesk", sans-serif) !important;
    font-size: clamp(13px, 1.8vw, 15px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] .wh-favourites nav a::after,
  body[data-page="home"] .wh-favourites header > a::after {
    content: "" !important;
    position: absolute;
    right: 7px;
    bottom: 0;
    left: 7px;
    height: 2px;
    margin: 0 !important;
    border-radius: 2px 2px 0 0;
    background: transparent;
  }

  body[data-page="home"] .wh-favourites nav a.on::after {
    background: currentColor;
  }

  body[data-page="home"] .wh-fav-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(270px, 38vw) !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="home"] .wh-fav-row::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .wh-product-card {
    scroll-snap-align: start;
  }

  body[data-page="home"] .ps-callout {
    min-height: 248px;
  }

  body[data-page="home"] .ps-callout-btns {
    margin-top: auto !important;
  }

  body[data-page="home"] .ps-callout-btns a.btn-filled,
  body[data-page="home"] .ps-callout-btns a.btn-outline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 152px;
    min-height: 38px;
    padding: 0 16px !important;
    border-radius: 8px !important;
    text-align: center;
  }

  body[data-page="home"] #ps-footer {
    margin-top: -210px !important;
    padding: 0 var(--tablet-gut) var(--tablet-gut) !important;
  }

  body[data-page="home"] .footer {
    padding: 18px 0 16px !important;
  }

  body[data-page="home"] .footer .wrap {
    padding: 16px 16px 12px !important;
  }

  body[data-page="home"] .footer .f-top {
    grid-template-columns: 1.05fr .72fr .78fr 1.08fr !important;
    grid-template-areas:
      "brand pods mosaic help"
      "email email email email" !important;
    gap: 18px 22px !important;
    align-items: start !important;
  }

  body[data-page="home"] .footer .f-brand {
    grid-area: brand;
    min-height: 0 !important;
  }

  body[data-page="home"] .footer .f-top > .f-col:nth-child(2) {
    grid-area: pods;
  }

  body[data-page="home"] .footer .f-top > .f-col:nth-child(3) {
    grid-area: help;
  }

  body[data-page="home"] .footer .f-mosaic {
    grid-area: mosaic;
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body[data-page="home"] .footer .f-mosaic span {
    aspect-ratio: 1.18 !important;
  }

  body[data-page="home"] .footer .f-email {
    grid-area: email;
    display: grid !important;
    grid-template-columns: minmax(170px, .48fr) 1fr;
    gap: 8px 18px;
    align-items: end;
  }

  body[data-page="home"] .footer .f-email h4,
  body[data-page="home"] .footer .f-email p {
    grid-column: 1;
  }

  body[data-page="home"] .footer .f-email p {
    margin-bottom: 0 !important;
  }

  body[data-page="home"] .footer .f-email .news {
    grid-column: 2;
    align-self: end;
    margin-bottom: 2px;
  }

  body[data-page="home"] .footer .f-bot {
    margin-top: 10px !important;
  }

  body[data-page] .footer .f-top {
    grid-template-columns: 1.05fr .72fr .78fr 1.08fr !important;
    grid-template-areas:
      "brand pods mosaic help"
      "email email email email" !important;
    gap: 18px 22px !important;
    align-items: start !important;
  }

  body[data-page] .footer .f-brand {
    grid-area: brand;
    min-height: 0 !important;
  }

  body[data-page] .footer .f-top > .f-col:nth-child(2) {
    grid-area: pods;
  }

  body[data-page] .footer .f-top > .f-col:nth-child(3) {
    grid-area: help;
  }

  body[data-page] .footer .f-mosaic {
    grid-area: mosaic;
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body[data-page] .footer .f-mosaic span {
    aspect-ratio: 1.18 !important;
  }

  body[data-page] .footer .f-email {
    grid-area: email;
    display: grid !important;
    grid-template-columns: minmax(170px, .48fr) 1fr;
    gap: 8px 18px;
    align-items: end;
  }

  body[data-page] .footer .f-email h4,
  body[data-page] .footer .f-email p {
    grid-column: 1;
  }

  body[data-page] .footer .f-email .news {
    grid-column: 2;
    align-self: end;
    margin-bottom: 2px;
  }

  body[data-page] .footer .f-radhe {
    display: block !important;
    padding: 4px 0 2px !important;
    text-align: right !important;
  }

  body[data-page] .footer .f-bot {
    margin-top: 8px !important;
  }

  body[data-page="menu"] .menu-hero-wh {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    min-height: 0 !important;
    margin: 0 var(--tablet-gut) 76px !important;
    background: var(--color-terracotta, #D95543) !important;
  }

  body[data-page="menu"] .menu-hero-copy,
  body[data-page="menu"] .menu-hero-image {
    min-height: 620px !important;
  }

  body[data-page="menu"] .menu-hero-copy {
    padding: 42px 36px 36px !important;
    justify-content: flex-end !important;
  }

  body[data-page="menu"] .menu-hero-copy p {
    left: 36px !important;
    top: 28px !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 82px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 16px !important;
    border-radius: 8px;
    background: rgba(232, 242, 250, .86);
    color: var(--color-dark-roast) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  body[data-page="menu"] .menu-hero-copy h1 {
    max-width: 320px !important;
    margin: 0 0 28px !important;
    font-size: clamp(42px, 6.2vw, 52px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  body[data-page="menu"] .menu-hero-copy div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
  }

  body[data-page="menu"] .menu-hero-copy span {
    max-width: 280px !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
    font-weight: 600 !important;
  }

  body[data-page="menu"] .menu-hero-copy a {
    width: 100% !important;
    max-width: 280px !important;
    min-height: 34px !important;
    align-items: center !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  body[data-page="menu"] .menu-hero-image image-slot,
  body[data-page="menu"] .menu-hero-image image-slot img {
    height: 100% !important;
    object-position: 62% center !important;
  }

  body[data-page="menu"] .menu-board-wh {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 42px !important;
    margin: 0 var(--tablet-gut) 72px !important;
    padding: 52px 42px !important;
  }

  body[data-page="menu"] .menu-board-wh h2 {
    max-width: 320px;
    font-size: clamp(42px, 5.7vw, 48px) !important;
    line-height: .92 !important;
  }

  body[data-page="menu"] .menu-board-copy p {
    max-width: 30ch !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
  }

  body[data-page="menu"] .menu-board-list {
    padding-top: 0 !important;
  }

  body[data-page="menu"] .menu-board-list p {
    grid-template-columns: minmax(116px, .85fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  body[data-page="menu"] .menu-two-up-wh {
    gap: 28px !important;
    margin: 0 var(--tablet-gut) 88px !important;
  }

  body[data-page="menu"] .menu-two-up-wh a {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-page="menu"] .menu-two-up-wh h2 {
    font-size: clamp(38px, 5.5vw, 46px) !important;
    line-height: .94 !important;
  }

  body[data-page="menu"] .menu-two-up-wh span {
    top: 7.2rem !important;
    font-size: 12px !important;
  }

  body[data-page="partnership"] #host {
    margin: 56px var(--tablet-gut) 84px !important;
    padding: 46px 42px !important;
  }

  body[data-page="partnership"] #host .wh-page-list-grid {
    gap: 24px !important;
    margin: 0 !important;
  }

  body[data-page="partnership"] #host .wh-page-list-copy h2 {
    font-size: clamp(34px, 4.4vw, 40px) !important;
    line-height: .96 !important;
  }

  body[data-page="partnership"] #host .wh-page-list-rows p {
    grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  body[data-page="pods"] .pods-specs,
  body[data-page="pods"] .pods-highlighted {
    padding: 44px 42px !important;
  }

  body[data-page="pods"] .pods-format {
    margin-bottom: 36px !important;
  }

  body[data-page="pods"] .pods-specs {
    margin: 44px var(--tablet-gut) 34px !important;
  }

  body[data-page="pods"] .pods-highlighted {
    margin: 44px var(--tablet-gut) 64px !important;
  }

  body[data-page="pods"] .pods-specs .wh-page-list-grid,
  body[data-page="pods"] .pods-highlighted .wh-page-list-grid {
    gap: 22px !important;
    margin: 0 !important;
  }

  body[data-page="pods"] .pods-specs .wh-page-list-copy h2,
  body[data-page="pods"] .pods-highlighted .wh-page-list-copy h2 {
    font-size: clamp(34px, 4.8vw, 42px) !important;
    line-height: .96 !important;
  }

  body[data-page="pods"] .pods-specs .wh-page-list-rows p,
  body[data-page="pods"] .pods-highlighted .wh-page-list-rows p {
    grid-template-columns: minmax(150px, .44fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 9px 0 !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  body[data-page="pods"] .pods-why {
    margin: 0 var(--tablet-gut) 44px !important;
    padding-top: 10px !important;
  }

  body[data-page="pods"] .pods-why-copy h2 {
    margin-bottom: 12px !important;
    font-size: clamp(34px, 5vw, 42px) !important;
    line-height: .96 !important;
  }

  body[data-page="pods"] .pods-why-copy p {
    font-size: 15px !important;
    line-height: 1.42 !important;
  }

  body[data-page="events"] .events-statement {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    margin: 72px 0 80px !important;
    padding: 0 var(--tablet-gut) !important;
  }

  body[data-page="events"] .events-statement p,
  body[data-page="events"] .events-statement h2 {
    grid-column: 1 !important;
  }

  body[data-page="events"] .events-statement p {
    max-width: 52ch;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }

  body[data-page="events"] .events-statement h2 {
    max-width: 720px !important;
    margin: 0 !important;
    font-size: clamp(40px, 5.6vw, 48px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
  }

  body[data-page="events"] .events-types header {
    padding-top: 0 !important;
  }

  body[data-page="events"] .events-values {
    margin: 0 var(--tablet-gut) 56px !important;
    padding: 52px 42px !important;
  }

  body[data-page="events"] .events-values .wh-page-list-grid {
    gap: 24px !important;
    margin: 0 !important;
  }

  body[data-page="events"] .events-values .wh-page-list-rows p {
    padding: 10px 0 !important;
    grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body[data-page="events"] .events-cta {
    gap: 28px !important;
    margin: 0 var(--tablet-gut) 72px !important;
  }

  body[data-page="events"] .events-cta a {
    min-height: 500px !important;
  }

  body[data-page="events"] .events-cta a::after {
    background: linear-gradient(180deg, rgba(61,32,16,.78) 0%, rgba(61,32,16,.44) 42%, rgba(61,32,16,.88) 100%) !important;
  }

  body[data-page="events"] .events-cta h2 {
    color: var(--ps-steam) !important;
    font-family: var(--font-display, "Bricolage Grotesque", sans-serif) !important;
    font-size: clamp(34px, 5.6vw, 46px) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  body[data-page="events"] .events-cta p {
    color: rgba(250,246,238,.9) !important;
    font-family: var(--font-body, "Space Grotesk", sans-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  body[data-page="events"] .events-cta span {
    color: var(--ps-steam) !important;
    font-family: var(--font-body, "Space Grotesk", sans-serif) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
  }
}

@media (max-width: 760px) {
  :root {
    --mobile-gut: 24px;
    --mobile-section: 54px;
    --mobile-control: 44px;
    --mobile-control-large: 48px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html,
  body {
    overflow-x: hidden;
  }

  .page-top {
    height: calc(var(--wh-header-h) + 28px) !important;
  }

  body[data-page="menu"] .page-top {
    height: calc(var(--wh-header-h) + 28px) !important;
  }

  .wh-announce {
    min-height: 28px !important;
    padding: 0 var(--mobile-gut) !important;
    font-size: 12px !important;
  }

  .nav {
    min-height: 62px !important;
    padding: 0 var(--mobile-gut) !important;
  }

  .nav-logo {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: .95 !important;
  }

  .nav-links,
  .nav-tools .ntool {
    display: none !important;
  }

  .nav-tools {
    gap: 0 !important;
  }

  .nav-burger {
    width: var(--mobile-control) !important;
    height: var(--mobile-control) !important;
  }

  .drawer {
    top: calc(var(--wh-header-h) + 28px) !important;
  }

  body[data-page="home"] .page-top {
    height: calc(var(--wh-header-h) + 28px) !important;
  }

  body[data-page="home"] {
    display: flex;
    flex-direction: column;
  }
  body[data-page="home"] #ps-nav          { order: -10; }
  body[data-page="home"] .page-top        { order: -9; }
  body[data-page="home"] .wh-banners      { order: -8; }
  body[data-page="home"] .wh-modern       { order: -7; }
  body[data-page="home"] .wh-home-shop    { order: -6; }
  body[data-page="home"] .wh-favourites   { order: -5; }
  body[data-page="home"] .wh-subscription { order: -4; }
  body[data-page="home"] .wh-locations    { order: -3; }
  body[data-page="home"] .ps-app-callout    { order: -2; }
  body[data-page="home"] .ps-section-buffer { order: -1; }
  body[data-page="home"] .ps-our-story      { order: 0; }

  body[data-page="home"] .wh-banners {
    position: relative;
    display: block !important;
    height: min(160vw, 640px);
    min-height: 480px;
    margin: 0 var(--mobile-gut) 22px;
    overflow: hidden;
    background: var(--ps-roast);
  }

  body[data-page="home"] .wh-banner {
    position: absolute;
    inset: 0;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8%);
    transition: opacity .4s cubic-bezier(.2,0,0,1), transform .4s cubic-bezier(.2,0,0,1);
  }

  body[data-page="home"] .wh-banner.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  body[data-page="home"] .wh-banner-img {
    height: 100%;
  }

  body[data-page="home"] .wh-banner-img::after {
    background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.16) 38%, rgba(0,0,0,.74) 100%) !important;
  }

  body[data-page="home"] .wh-banner-body {
    inset: auto 18px 14px 18px;
    min-height: 128px;
    padding: 0 !important;
    justify-content: end;
  }

  body[data-page="home"] .wh-banner-caption,
  body[data-page="home"] .wh-banner-heading {
    max-width: 88%;
    margin: 0 0 14px !important;
    font-size: clamp(24px, 6.9vw, 31px) !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
  }

  body[data-page="home"] .wh-banner-caption {
    font-family: var(--wh-serif) !important;
    font-weight: 500 !important;
  }

  body[data-page="home"] .wh-banner-price {
    margin-bottom: 10px !important;
  }

  body[data-page="home"] .wh-banner-cta-btn {
    width: 100% !important;
    justify-content: center;
    height: 44px !important;
  }

  .mobile-hero-count {
    position: absolute;
    z-index: 4;
    left: 18px;
    top: 18px;
    bottom: auto;
    display: flex;
    gap: 18px;
    color: var(--color-steam-cream);
    font-family: var(--wh-sans);
    font-size: 17px;
    line-height: 1;
  }

  .mobile-hero-count button {
    border: 0;
    background: transparent;
    padding: 0;
    color: rgba(250, 246, 238,.46);
    font: inherit;
  }

  .mobile-hero-count button.is-active {
    color: var(--color-steam-cream);
  }

  .mobile-hero-progress {
    position: absolute;
    z-index: 4;
    left: 18px;
    right: 18px;
    bottom: 52px;
    height: 1px;
    display: block;
    background: rgba(250, 246, 238,.36);
  }

  .mobile-hero-progress span {
    display: block;
    width: 50%;
    height: 100%;
    background: var(--color-steam-cream);
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.2,0,0,1);
  }

  .wh-modern {
    display: block !important;
    margin: 0 !important;
    padding: 22px var(--mobile-gut) 28px !important;
  }

  .wh-modern p {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--tc, #E8400C) !important;
    margin-bottom: 10px !important;
  }

  .wh-modern h1 {
    font-size: clamp(28px, 8.5vw, 34px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: -.015em !important;
  }

  .wh-home-shop,
  .wh-favourites,
  .wh-page-rail,
  .menu-category-wh,
  .journal-feature-grid,
  .journal-card-grid {
    padding-left: var(--mobile-gut) !important;
    padding-right: var(--mobile-gut) !important;
  }

  .wh-home-shop {
    display: block !important;
    padding-top: 24px !important;
    padding-bottom: 34px !important;
  }

  .wh-home-shop h2 {
    max-width: none;
    margin-bottom: 12px !important;
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: .98 !important;
  }

  .wh-home-cards {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, calc(78vw - var(--mobile-gut)));
    grid-template-columns: none !important;
    gap: 12px !important;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .wh-home-cards::-webkit-scrollbar,
  .wh-fav-row::-webkit-scrollbar {
    display: none;
  }

  .wh-home-card {
    scroll-snap-align: start;
  }

  .wh-home-card image-slot {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .wh-home-card strong {
    font-size: 16px !important;
    padding: 8px 0 6px !important;
  }

  .wh-subscription {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 var(--mobile-section) !important;
    padding: var(--mobile-gut) !important;
  }

  body[data-page="home"] .ps-pass-showcase {
    padding: 32px var(--mobile-gut) 38px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .wh-sub-img image-slot {
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
  }

  .wh-sub-copy {
    display: block !important;
    padding: 18px 0 0 !important;
  }

  .wh-sub-copy h2,
  .wh-page-statement h2,
  .menu-statement-wh h2,
  .journal-index-note h2 {
    font-size: clamp(30px, 8.8vw, 42px) !important;
    line-height: .94 !important;
  }

  .wh-sub-points {
    gap: 0 !important;
    margin-bottom: 24px;
  }

  .wh-sub-points p {
    padding: 10px 0 10px 20px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .wh-sub-options {
    margin-bottom: 20px !important;
  }

  .wh-sub-options h3 {
    font-size: 20px !important;
  }

  .wh-sub-build {
    min-height: 34px !important;
  }

  .wh-locations {
    min-height: 470px !important;
    margin: 0 var(--mobile-gut) var(--mobile-section) !important;
  }

  .wh-loc-list {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    width: auto !important;
  }

  .wh-loc-list h2 {
    font-size: 24px !important;
  }

  .wh-loc-list p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .wh-favourites {
    padding-top: 18px !important;
    padding-bottom: var(--mobile-section) !important;
  }

  .wh-favourites header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px 14px !important;
    align-items: end !important;
    margin-bottom: 14px !important;
  }

  .wh-favourites h2 {
    grid-column: 1 / -1;
    white-space: nowrap;
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: .92 !important;
  }

  .wh-favourites nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 1 / 2;
    gap: 0 !important;
    overflow-x: auto;
    border-top: 1px solid rgba(61,32,16,.32);
    border-bottom: 1px solid rgba(61,32,16,.32);
  }

  .wh-favourites nav a,
  .wh-favourites header > a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px !important;
    border-right: 1px solid rgba(61,32,16,.18) !important;
    font-size: 14px !important;
  }

  .wh-favourites header > a {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    justify-self: stretch;
    justify-content: space-between;
    border-top: 1px solid rgba(61,32,16,.32) !important;
    border-bottom: 1px solid rgba(61,32,16,.32) !important;
    border-right: 0 !important;
    padding: 0 14px !important;
    white-space: nowrap;
  }

  .wh-fav-row {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(232px, calc(82vw - var(--mobile-gut)));
    grid-template-columns: none !important;
    gap: 14px !important;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .wh-product-card {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
  }

  .wh-product-img {
    aspect-ratio: 1 / 1 !important;
  }

  .wh-product-card h3 {
    font-size: 24px !important;
    margin: 10px 0 8px !important;
  }

  .wh-product-card dl {
    min-height: 0 !important;
    font-size: 12px !important;
  }

  .wh-origin {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 var(--mobile-gut) var(--mobile-section) !important;
  }

  .wh-origin-inner {
    width: auto !important;
    padding: 26px 20px 0 !important;
  }

  .wh-origin h2 {
    margin-bottom: 14px !important;
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .wh-origin-inner image-slot {
    aspect-ratio: 1 / 1 !important;
    max-width: 44vw;
    margin-inline: auto;
  }

  .wh-origin p {
    margin: 14px 0 8px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }

  .wh-menu-story {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 var(--mobile-gut) 24px !important;
  }

  .wh-ms-card {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  .wh-ms-card em {
    bottom: 16px !important;
    left: 18px !important;
    right: 18px !important;
  }

  .wh-ms-card span,
  .menu-two-up-wh h2,
  .wh-page-split h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .wh-footer-banner {
    height: 220px !important;
  }

  .wh-page-hero.is-light {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    margin: 0 var(--mobile-gut) 30px !important;
  }

  /* Bold (non-light) heroes and the menu hero are a full-bleed
     Terracotta/Ceremonial block per sec-11 - they stay edge-to-edge
     on mobile, never inset like a card. Light heroes above keep the
     side gutter. */
  .menu-hero-wh,
  .wh-page-hero:not(.is-light) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    margin: 0 0 30px !important;
    padding-inline: var(--mobile-gut) !important;
  }

  .menu-hero-copy,
  .menu-hero-image,
  .wh-page-hero-copy,
  .wh-page-hero-media {
    min-height: 0 !important;
  }

  .menu-hero-copy,
  .wh-page-hero-copy {
    display: flex !important;
    flex-direction: column !important;
    min-height: 244px !important;
    padding: 20px 18px 18px !important;
  }

  .menu-hero-copy p,
  .wh-page-kicker {
    position: static !important;
    margin: 0 0 28px !important;
    font-size: 13px !important;
  }

  .menu-hero-copy h1,
  .wh-page-hero h1,
  .journal-post-hero h1 {
    font-size: clamp(34px, 9.5vw, 46px) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    margin: 0 0 16px !important;
  }

  .menu-hero-copy div,
  .wh-page-hero-copy footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: auto !important;
  }

  .menu-hero-image,
  .wh-page-hero-media {
    aspect-ratio: 1 / .78 !important;
  }

  .menu-filter-wh,
  .journal-topic-bar {
    top: var(--wh-header-h) !important;
    padding: 10px var(--mobile-gut) !important;
    gap: 18px !important;
  }

  .menu-filter-wh button,
  .menu-filter-wh span,
  .journal-topic-bar span,
  .journal-topic-bar a {
    font-size: 14px !important;
  }

  .menu-statement-wh,
  .wh-page-statement,
  .journal-index-note {
    display: block !important;
    margin: 0 !important;
    padding: 26px var(--mobile-gut) 34px !important;
  }

  .menu-statement-wh p,
  .wh-page-statement p,
  .journal-index-title p {
    margin-bottom: 12px !important;
    font-size: 14px !important;
  }

  .menu-category-wh {
    padding-bottom: var(--mobile-section) !important;
  }

  .menu-category-wh header,
  .wh-page-rail header,
  .wh-page-list header {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .menu-category-wh h2,
  .wh-page-rail h2,
  .wh-page-list h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .menu-category-wh header p,
  .wh-page-rail header p,
  .wh-page-list header p {
    font-size: 13px !important;
  }

  .menu-products-wh {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 20px !important;
    align-items: stretch !important;
  }

  .menu-products-wh .menu-product-wh,
  .menu-products-wh .menu-product-wh:not(:nth-child(2n+1)),
  .menu-products-wh .menu-product-wh:not(:nth-child(3n+1)) {
    display: flex !important;
    flex-direction: column !important;
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  .menu-product-img {
    aspect-ratio: 1 / .82 !important;
  }

  .menu-product-wh h3 {
    font-size: 20px !important;
    margin: 8px 0 6px !important;
  }

  .menu-recipe {
    font-size: 9px !important;
    margin: 3px 0 5px !important;
  }

  .menu-product-note {
    min-height: 52px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    margin-top: 6px !important;
  }

  .menu-product-price {
    min-height: 36px !important;
    margin-top: auto !important;
    padding: 8px 0 !important;
    font-size: 11px !important;
    align-items: center !important;
  }

  .menu-product-img::before {
    top: 8px !important;
    left: 8px !important;
    font-size: 9px !important;
  }

  .menu-product-img::after {
    right: 8px !important;
    bottom: 6px !important;
    font-size: 18px !important;
  }

  .menu-kcal {
    bottom: 6px !important;
    left: 6px !important;
    font-size: 8px !important;
    padding: 2px 6px !important;
  }

  .menu-board-wh,
  .wh-page-list {
    margin: 0 0 var(--mobile-section) !important;
    padding: 30px var(--mobile-gut) !important;
  }

  .menu-board-wh h2,
  .wh-page-list-copy h2 {
    font-size: clamp(34px, 9.5vw, 46px) !important;
  }

  .menu-board-list p,
  .wh-page-list-rows p {
    padding: 10px 0 !important;
    font-size: 14px !important;
  }

  .menu-two-up-wh,
  .wh-page-split {
    margin: 0 var(--mobile-gut) var(--mobile-section) !important;
    gap: var(--mobile-gut) !important;
  }

  .menu-two-up-wh a,
  .wh-page-split a,
  .wh-page-split article {
    min-height: 360px !important;
  }

  .wh-page-cards {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, calc(82vw - var(--mobile-gut)));
    grid-template-columns: none !important;
    gap: 14px !important;
    margin-inline: 0;
    padding-inline: var(--mobile-gut);
    padding-left: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body[data-page="about"] .wh-page-statement {
    padding-bottom: 24px !important;
  }

  body[data-page="about"] .wh-page-rail {
    padding-top: 0 !important;
    padding-bottom: 32px !important;
  }

  body[data-page="about"] .wh-page-rail header {
    margin-bottom: 10px !important;
  }

  body[data-page="about"] .wh-page-list {
    margin-bottom: 34px !important;
    padding-top: 26px !important;
    padding-bottom: 28px !important;
  }

  body[data-page="about"] .wh-page-list-grid {
    gap: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-page="about"] .wh-page-list-rows p {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 8px 0 !important;
  }

  body[data-page="pods"] .pods-intro {
    padding-top: 22px !important;
    padding-bottom: 26px !important;
  }

  body[data-page="pods"] .pods-places {
    padding-bottom: 34px !important;
  }

  body[data-page="pods"] .pods-specs {
    margin-bottom: 34px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  body[data-page="pods"] .pods-specs .wh-page-list-grid {
    gap: 10px !important;
    margin-block: 0 !important;
  }

  body[data-page="pods"] .pods-highlighted {
    margin-bottom: 34px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  body[data-page="pods"] .pods-highlighted .wh-page-list-grid {
    gap: 10px !important;
    margin-block: 0 !important;
  }

  body[data-page="pods"] .pods-place-grid .wh-page-card p {
    min-height: 0 !important;
  }

  body[data-page="pods"] .pods-format {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 0 var(--mobile-section) !important;
  }

  body[data-page="pods"] .pods-format-copy {
    padding: 30px var(--mobile-gut) !important;
  }

  body[data-page="pods"] .pods-format-copy > p {
    margin-bottom: 12px !important;
    font-size: 14px !important;
  }

  body[data-page="pods"] .pods-format-copy h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: .92 !important;
    margin-bottom: 18px !important;
  }

  body[data-page="pods"] .pods-format-copy div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-page="pods"] .pods-format-copy div p {
    font-size: 14px !important;
  }

  body[data-page="pods"] .pods-format-visual {
    min-height: 0 !important;
    aspect-ratio: 1 / .78 !important;
  }

  body[data-page="pods"] .pods-why {
    display: block !important;
    margin: 0 var(--mobile-gut) var(--mobile-section) !important;
    padding-top: 10px !important;
  }

  body[data-page="pods"] .pods-why-label {
    margin-bottom: 12px !important;
    font-size: 14px !important;
  }

  body[data-page="pods"] .pods-why-copy h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: .92 !important;
    margin-bottom: 14px !important;
  }

  body[data-page="pods"] .pods-why-copy p {
    font-size: 14px !important;
  }

  .wh-page-cards::-webkit-scrollbar {
    display: none;
  }

  .wh-page-card {
    scroll-snap-align: start;
  }

  .wh-page-card-img {
    aspect-ratio: 1 / 1 !important;
  }

  body[data-page="events"] .wh-page-hero {
    margin-bottom: 24px !important;
  }

  body[data-page="events"] .wh-page-hero-copy {
    min-height: 270px !important;
  }

  body[data-page="events"] .wh-page-hero-media {
    aspect-ratio: 1 / .78 !important;
  }

  body[data-page="events"] .events-statement {
    padding-top: 22px !important;
  }

  body[data-page="events"] .events-types {
    padding-bottom: 34px !important;
  }

  body[data-page="events"] .events-type-grid .wh-page-card p {
    min-height: 0 !important;
  }

  body[data-page="events"] .events-showcase {
    margin: 0 var(--mobile-gut) var(--mobile-section) !important;
  }

  body[data-page="events"] .events-showcase header {
    display: block !important;
    margin-bottom: 12px !important;
    padding-top: 10px !important;
  }

  body[data-page="events"] .events-showcase h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  body[data-page="events"] .events-showcase header p {
    margin-top: 8px !important;
    font-size: 13px !important;
  }

  body[data-page="events"] .events-slider {
    grid-auto-columns: minmax(230px, calc(82vw - var(--mobile-gut))) !important;
    gap: 14px !important;
    scrollbar-width: none;
  }

  body[data-page="events"] .events-slider::-webkit-scrollbar {
    display: none;
  }

  body[data-page="events"] .event-slide-card image-slot {
    aspect-ratio: 1 / 1 !important;
  }

  body[data-page="events"] .event-slide-card h3 {
    min-height: 0 !important;
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  body[data-page="events"] .event-slide-card a {
    font-size: 11px !important;
  }

  .journal-index-hero {
    display: block !important;
    min-height: 0 !important;
    padding: 24px var(--mobile-gut) 20px !important;
  }

  .journal-index-title {
    margin-bottom: 14px;
  }

  .journal-index-title h1 {
    font-size: clamp(54px, 22vw, 88px) !important;
    line-height: .82 !important;
  }

  .journal-hero-slider {
    min-height: 360px !important;
  }

  .journal-hero-overlay {
    inset: 18px !important;
  }

  .journal-hero-overlay h2 {
    font-size: clamp(34px, 11vw, 54px) !important;
    color: var(--color-steam-cream) !important;
  }

  body[data-page="blogs"] .journal-hero-overlay strong,
  body[data-page="blogs"] .journal-hero-overlay p {
    color: var(--color-steam-cream) !important;
  }

  .journal-feature-grid,
  .journal-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .journal-card-media,
  .journal-feature-card:not(.is-large) .journal-card-media,
  .journal-mini-media {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  .journal-card-copy h2,
  .journal-mini-card h3 {
    font-size: clamp(30px, 9vw, 44px) !important;
  }

  .journal-post article {
    padding-inline: var(--mobile-gut) !important;
  }

  .journal-post-hero {
    display: block !important;
    min-height: 0 !important;
    padding: 36px var(--mobile-gut) 42px !important;
  }

  .journal-post-lede,
  .journal-post-body {
    max-width: none !important;
  }

  body[data-page] #ps-footer,
  body[data-page="home"] #ps-footer {
    padding: 0 16px 16px !important;
    margin-top: 0 !important;
  }

  body[data-page] .footer,
  body[data-page="home"] .footer,
  body[data-page="menu"] .footer {
    padding: 16px 0 14px !important;
  }

  body[data-page] .footer .wrap,
  body[data-page="home"] .footer .wrap {
    padding: 10px 12px 8px !important;
  }

  body[data-page] .footer .f-top,
  body[data-page="home"] .footer .f-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
  }

  body[data-page] .footer .f-brand,
  body[data-page="home"] .footer .f-brand,
  body[data-page] .footer .f-email,
  body[data-page="home"] .footer .f-email {
    grid-column: 1 / -1 !important;
  }

  body[data-page] .footer .f-brand {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    align-items: start;
  }

  body[data-page] .footer .f-brand .display {
    grid-column: 1 / -1;
    margin-bottom: 2px !important;
  }

  body[data-page] .footer .f-brand a {
    line-height: 1.24 !important;
    margin: 0 !important;
  }

  .ps-logo-footer {
    width: 95px !important;
  }

  .ps-logo-footer-mono {
    height: 24px !important;
  }

  body[data-page] .footer .f-mosaic,
  body[data-page="home"] .footer .f-mosaic {
    max-width: none !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-column: 1 / -1;
  }

  body[data-page] .footer .f-mosaic span,
  body[data-page="home"] .footer .f-mosaic span {
    aspect-ratio: 1.45 !important;
  }

  body[data-page] .footer .f-mosaic small {
    grid-column: 1 / -1;
  }

  body[data-page] .footer .f-email p {
    margin-bottom: 8px !important;
  }

  body[data-page] .footer .f-radhe {
    display: none !important;
  }

  body[data-page] .footer .f-bot,
  body[data-page="home"] .footer .f-bot {
    margin-top: 12px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 12px !important;
  }

  body[data-page] .footer .f-bot span:nth-child(2) {
    text-align: right;
  }

  body[data-page] .footer .f-bot span:nth-child(3) {
    grid-column: 1 / -1;
    text-align: left !important;
  }

  /* ─── Pack cards: horizontal scroll carousel ─── */
  body[data-page="home"] .ps-plan-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(148px, 40vw) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding-bottom: 2px !important;
  }

  body[data-page="home"] .ps-plan-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-page="home"] .ps-plan-card {
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }

  body[data-page="home"] .ps-plan-overlay {
    padding: 9px !important;
  }

  body[data-page="home"] .ps-plan-ov-top {
    gap: 5px !important;
  }

  body[data-page="home"] .ps-plan-ov-top h3 {
    font-size: clamp(11px, 3.4vw, 14px) !important;
    line-height: 1.02 !important;
  }

  body[data-page="home"] .ps-plan-badge {
    max-width: 74px !important;
    padding: 3px 6px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-page="home"] .ps-plan-ov-bot {
    align-items: flex-end !important;
    gap: 5px !important;
  }

  body[data-page="home"] .ps-plan-price-block strong {
    font-size: clamp(17px, 5.1vw, 22px) !important;
    line-height: .95 !important;
    letter-spacing: -.02em !important;
  }

  body[data-page="home"] .ps-plan-price-block span {
    max-width: 86px !important;
    font-size: 8px !important;
    line-height: 1.12 !important;
  }

  body[data-page="home"] .ps-plan-get {
    padding: 6px 7px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* ─── App callout: tighter padding + bolder heading ─── */
  .ps-app-callout {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .ps-app-callout .wrap {
    padding-inline: var(--mobile-gut) !important;
    gap: 24px !important;
  }

  .ps-app-copy h2 {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    margin-bottom: .9rem !important;
  }

  .ps-app-features li {
    font-size: 14px !important;
  }

  body[data-page="home"] .ps-app-visual {
    display: block !important;
    width: min(100%, 300px) !important;
    height: auto !important;
    max-height: 540px !important;
    margin: 4px auto 0 !important;
    aspect-ratio: 390 / 844 !important;
    border: 8px solid #1f130d !important;
    border-radius: 34px !important;
    background: #1f130d !important;
    box-shadow: 0 22px 46px rgba(61, 32, 16, .26) !important;
  }

  body[data-page="home"] .ps-app-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 24px !important;
  }

  /* ─── Our Story: reduce padding, left-align body copy ─── */
  .ps-our-story {
    padding: 44px var(--mobile-gut) !important;
    margin-bottom: 24px !important;
  }

  .ps-our-story h2 {
    font-size: clamp(48px, 14vw, 68px) !important;
    line-height: .88 !important;
    margin-bottom: 1rem !important;
  }

  .ps-our-story p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 0 0 1.25rem !important;
    max-width: none !important;
    text-align: left !important;
  }

  /* ─── Callout strip: restore 2-col on mobile (overrides inline 1-col at 640px) ─── */
  .ps-callout-strip {
    grid-template-columns: 1fr 1fr !important;
    border-left: 1px solid rgba(42,26,14,.1) !important;
  }

  .ps-callout {
    padding: 18px 14px !important;
    gap: .3rem !important;
    border-left: 0 !important;
  }

  .ps-callout p.kicker {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }

  .ps-callout h2 {
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.15 !important;
    margin-bottom: .15rem !important;
  }

  .ps-callout p.sub {
    display: none !important;
  }

  .ps-callout-btns {
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: .25rem !important;
  }

  .ps-callout-btns a.btn-filled,
  .ps-callout-btns a.btn-outline {
    font-size: 10px !important;
    padding: 5px 8px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* ─── Feedback: tighter padding + fix h3 font size ─── */
  .ps-feedback {
    margin-bottom: 0 !important;
  }

  .ps-feedback-ticket {
    padding: 28px var(--mobile-gut) !important;
    min-width: 0 !important;
  }

  .ps-feedback-hero {
    font-size: clamp(52px, 15vw, 72px) !important;
    line-height: .84 !important;
  }

  .ps-feedback-body {
    padding: 24px var(--mobile-gut) 28px !important;
  }

  .ps-feedback-body h3 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.1 !important;
    margin-bottom: .75rem !important;
  }

  .ps-feedback-body p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 1.25rem !important;
    max-width: none !important;
  }

  .ps-feedback-cta {
    font-size: 14px !important;
    padding: 12px 22px !important;
  }
}

@media (max-width: 420px) {
  .nav-logo {
    font-size: 29px !important;
  }

  body[data-page="home"] .wh-banners {
    min-height: 348px;
  }

  .mobile-hero-count {
    top: 18px;
    bottom: auto;
  }

  body[data-page="home"] .wh-banner-caption,
  body[data-page="home"] .wh-banner-heading {
    font-size: clamp(23px, 7.2vw, 29px) !important;
  }

  .wh-favourites h2 {
    font-size: clamp(31px, 9vw, 40px) !important;
  }
}

@media (max-width: 760px) {
  /* ─── P.S. Pass: animated membership card in the mobile drawer ─── */
  #psDrawer a.pack-link {
    background: var(--color-terracotta, #E8400C) !important;
    border-radius: var(--radius-lg, 14px) !important;
    margin: 4px 0 8px !important;
    padding: 18px 20px 16px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #psDrawer a.pack-link span:first-child {
    color: var(--color-steam-cream) !important;
  }

  #psDrawer a.pack-link .n {
    color: rgba(250, 246, 238,.42) !important;
  }

  #psDrawer a.pack-link::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      110deg,
      transparent 22%,
      rgba(250, 246, 238,.14) 46%,
      rgba(250, 246, 238,.07) 54%,
      transparent 78%
    ) !important;
    transform: translateX(-140%) !important;
    animation: passLight 2.8s ease-in-out infinite !important;
    pointer-events: none !important;
  }
}

/* Brand Kit 2A mobile alignment */
@media (max-width: 760px) {
  .nav {
    background: var(--ps-steam, #FAF6EE) !important;
    border-bottom: 1px solid var(--ps-linen, #E8DCC8) !important;
    box-shadow: none !important;
  }

  .ps-logo-nav {
    height: 32px !important;
    max-width: 130px !important;
    object-fit: contain !important;
  }

  .navlinks a,
  .drawer a {
    font-family: var(--font-body, "Space Grotesk", sans-serif) !important;
    color: var(--ps-espresso, #5C3518) !important;
    letter-spacing: 0 !important;
  }

  .drawer,
  .mobile-menu {
    background: var(--ps-steam, #FAF6EE) !important;
    color: var(--ps-dark-roast, #3D2010) !important;
  }

  .btn,
  .wh-btn,
  button,
  input,
  textarea,
  select {
    border-radius: var(--radius-md, 9px) !important;
  }
}

/* Brand Kit 2A mobile typography and contrast */
@media (max-width: 760px) {
  .wh-page h1,
  .wh-page-hero h1,
  .journal-hero-title,
  .journal-index h1 {
    font-family: var(--font-display, "Bricolage Grotesque", sans-serif) !important;
    font-size: clamp(32px, 10vw, 48px) !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    line-height: 1.02 !important;
  }

  .wh-page h2,
  .wh-page-statement h2,
  .wh-page-rail h2,
  .wh-page-list h2,
  .wh-page-split h2,
  body[data-page="pods"] .pods-format-copy h2,
  body[data-page="pods"] .pods-why-copy h2 {
    font-family: var(--font-display, "Bricolage Grotesque", sans-serif) !important;
    font-size: clamp(24px, 7vw, 30px) !important;
    font-weight: 800 !important;
    letter-spacing: -.5px !important;
    line-height: 1.12 !important;
  }

  .wh-page-card h3,
  .menu-product-wh h3,
  .wh-fav-card h3,
  .journal-card h3 {
    font-family: var(--font-display, "Bricolage Grotesque", sans-serif) !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    letter-spacing: -.35px !important;
    line-height: 1.15 !important;
  }

  .wh-page p,
  .wh-page-card p,
  .wh-page-list-rows span,
  .journal-post-body p,
  .journal-post-body li,
  .menu-product-wh p {
    font-family: var(--font-body, "Space Grotesk", sans-serif) !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    line-height: 1.55 !important;
    color: var(--ps-espresso, #5C3518) !important;
  }

  .wh-page-kicker,
  .wh-page-statement p,
  .wh-page-rail header p,
  .wh-page-list header p,
  .tag,
  .menu-kcal {
    font-family: var(--font-body, "Space Grotesk", sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
  }

  body:not([data-page="matcha"]) .wh-page-hero,
  body:not([data-page="matcha"]) .wh-page-hero-copy {
    background: var(--ps-terracotta, #E8400C) !important;
    color: var(--ps-steam, #FAF6EE) !important;
  }

  body[data-page="matcha"] .wh-page-hero,
  body[data-page="matcha"] .wh-page-hero-copy {
    background: var(--ps-matcha-deep, #3D6B4A) !important;
    color: var(--ps-steam, #FAF6EE) !important;
  }

  .wh-page-hero h1,
  .wh-page-hero .wh-page-kicker,
  .wh-page-hero footer,
  .wh-page-hero footer p,
  .wh-page-hero footer a {
    color: var(--ps-steam, #FAF6EE) !important;
  }

  #psDrawer a.pack-link span:first-child {
    color: var(--ps-steam, #FAF6EE) !important;
  }

  #psDrawer a.pack-link .n {
    color: rgba(250, 246, 238, .52) !important;
  }
}

/* Design-system hero and overlay hardening */
@media (max-width: 760px) {
  .menu-hero-wh,
  .wh-page-hero {
    background: var(--color-terracotta) !important;
    color: var(--color-steam-cream) !important;
  }

  body[data-page="matcha"] .wh-page-hero {
    background: var(--color-ceremonial) !important;
  }

  body:not([data-page="app"]) .wh-page-hero.is-light:not(.legal-hero) {
    background: var(--color-oat) !important;
    color: var(--color-dark-roast) !important;
  }

  .menu-hero-copy h1,
  .wh-page-hero h1,
  body[data-page="app"] .wh-page-hero h1,
  body[data-page="pack"] .wh-page-hero-copy h1 {
    max-width: 12ch !important;
    color: var(--color-steam-cream) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(36px, 10vw, 48px) !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    line-height: 1.02 !important;
  }

  body:not([data-page="app"]) .wh-page-hero.is-light:not(.legal-hero) h1 {
    color: var(--color-dark-roast) !important;
  }

  body[data-page="app"] .wh-page-hero.is-light h1,
  body[data-page="matcha"] .wh-page-hero h1 {
    color: var(--color-steam-cream) !important;
  }

  body[data-page="matcha"] .wh-page-hero.is-light h1 {
    color: var(--color-steam-cream) !important;
  }

  .menu-hero-copy p,
  .wh-page-hero .wh-page-kicker,
  body[data-page="app"] .wh-page-hero .wh-page-kicker,
  body[data-page="pack"] .wh-page-hero-copy .wh-page-kicker,
  .ps-cap89-copy .eyebrow,
  .ps-app-callout .kicker {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: min(100%, 32ch) !important;
    margin-bottom: 18px !important;
    padding: 6px 9px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-steam-cream) !important;
    color: var(--color-dark-roast) !important;
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  body[data-page="matcha"] .wh-page-hero .wh-page-kicker {
    color: var(--color-ceremonial) !important;
  }

  body[data-page="home"] .ps-app-callout .ps-app-copy p.kicker,
  body[data-page="pack"] .ps-cap89-copy .eyebrow,
  body[data-page="about"] .wh-page-hero .wh-page-kicker,
  body[data-page="pods"] .wh-page-hero .wh-page-kicker,
  body[data-page="partnership"] .wh-page-hero .wh-page-kicker,
  body[data-page="join"] .wh-page-hero .wh-page-kicker,
  body[data-page="events"] .wh-page-hero .wh-page-kicker,
  body[data-page="blogs"] .wh-page-hero .wh-page-kicker,
  .legal-hero .wh-page-kicker {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: min(100%, 32ch) !important;
    margin-bottom: 18px !important;
    padding: 6px 9px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-steam-cream) !important;
    color: var(--color-dark-roast) !important;
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .legal-hero.wh-page-hero .wh-page-kicker,
  .wh-page-hero.is-light.legal-hero .wh-page-kicker {
    background: var(--color-steam-cream) !important;
    color: var(--color-dark-roast) !important;
  }

  .menu-hero-copy span,
  .menu-hero-copy a,
  .wh-page-hero-copy footer p,
  .wh-page-hero-copy footer a,
  body[data-page="app"] .wh-page-hero-copy footer p,
  body[data-page="app"] .wh-page-hero-copy footer a,
  body[data-page="pack"] .wh-page-hero-copy footer p:not(.wh-page-ps-note),
  body[data-page="pack"] .wh-page-hero-copy footer a,
  .ps-cap89-copy p,
  .ps-app-callout li,
  .ps-app-callout .outline {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-body) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
  }

  body:not([data-page="app"]) .wh-page-hero.is-light:not(.legal-hero) .wh-page-hero-copy footer p,
  body:not([data-page="app"]) .wh-page-hero.is-light:not(.legal-hero) .wh-page-hero-copy footer a {
    color: var(--color-dark-roast) !important;
  }

  body[data-page="app"] .wh-page-hero.is-light .wh-page-hero-copy footer p,
  body[data-page="app"] .wh-page-hero.is-light .wh-page-hero-copy footer a,
  body[data-page="matcha"] .wh-page-hero .wh-page-hero-copy footer p,
  body[data-page="matcha"] .wh-page-hero .wh-page-hero-copy footer a {
    color: var(--color-steam-cream) !important;
  }

  .legal-hero .wh-page-hero-copy footer p,
  .legal-hero .wh-page-hero-copy footer a,
  body[data-page="matcha"] .wh-page-hero.is-light .wh-page-hero-copy footer p,
  body[data-page="matcha"] .wh-page-hero.is-light .wh-page-hero-copy footer a {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-body) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }

  body[data-page="pods"] .wh-page-hero .wh-page-hero-copy footer p,
  body[data-page="pods"] .wh-page-hero .wh-page-hero-copy footer a,
  body[data-page="partnership"] .wh-page-hero .wh-page-hero-copy footer p,
  body[data-page="partnership"] .wh-page-hero .wh-page-hero-copy footer a,
  body[data-page="join"] .wh-page-hero .wh-page-hero-copy footer p,
  body[data-page="join"] .wh-page-hero .wh-page-hero-copy footer a,
  body[data-page="events"] .wh-page-hero .wh-page-hero-copy footer p,
  body[data-page="events"] .wh-page-hero .wh-page-hero-copy footer a,
  body[data-page="about"] .wh-page-hero .wh-page-hero-copy footer p,
  body[data-page="about"] .wh-page-hero .wh-page-hero-copy footer a,
  body[data-page="faq"] .wh-page-hero.legal-hero .wh-page-hero-copy footer p,
  body[data-page="faq"] .wh-page-hero.legal-hero .wh-page-hero-copy footer a {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-body) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }

  .legal-hero .legal-hero-note,
  .legal-hero .legal-hero-note p,
  .legal-hero .legal-hero-note h2 {
    color: var(--color-dark-roast) !important;
  }

  .ps-app-callout,
  .ps-app-callout .wrap,
  .ps-app-callout .ps-app-copy,
  .ps-app-callout .ps-app-features,
  .ps-app-callout .ps-app-btns {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-body) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }

  .ps-app-callout .primary,
  .ps-app-callout .ps-app-btns a.primary,
  .app-waitlist-form button {
    background: var(--color-steam-cream) !important;
    color: var(--color-dark-roast) !important;
    border-color: var(--color-steam-cream) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
  }

  .ps-app-callout .primary:hover,
  .ps-app-callout .ps-app-btns a.primary:hover,
  .app-waitlist-form button:hover {
    background: var(--color-oat) !important;
    color: var(--color-dark-roast) !important;
  }

  .ps-pack-card-media {
    background-color: var(--color-dark-roast) !important;
  }

  .ps-pack-card-overlay,
  .ps-pack-card-overlay h4,
  .ps-pack-card-overlay p,
  .ps-pack-card-overlay span,
  .ps-pack-card-overlay strong,
  .ps-pack-card-overlay small,
  .ps-pack-card-math,
  .ps-pack-card-overlay .ps-pack-card-price span {
    color: var(--color-steam-cream) !important;
  }

  .ps-pack-card-validity {
    background: var(--color-steam-cream) !important;
    color: var(--color-dark-roast) !important;
  }
}

/* Menu: mobile product cards stay readable without cropping photos */
@media (max-width: 760px) {
  body[data-page="menu"] .menu-products-wh {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-page="menu"] .menu-products-wh .menu-product-wh,
  body[data-page="menu"] .menu-products-wh .menu-product-wh:not(:nth-child(2n+1)),
  body[data-page="menu"] .menu-products-wh .menu-product-wh:not(:nth-child(3n+1)),
  body[data-page="menu"] .menu-products-wh .menu-product-wh:not(:nth-child(6n+1)) {
    padding: 10px !important;
    border: 1px solid var(--ps-linen-strong, #E4D9C4) !important;
  }

  body[data-page="menu"] .menu-product-img {
    aspect-ratio: 4 / 3 !important;
    padding: 0 !important;
  }

  body[data-page="menu"] .menu-product-img image-slot,
  body[data-page="menu"] .menu-product-img image-slot img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  body[data-page="menu"] .menu-product-wh h3 {
    margin: 9px 0 6px !important;
    font-size: 16px !important;
    line-height: 1.08 !important;
    letter-spacing: -.2px !important;
  }

  body[data-page="menu"] .menu-recipe {
    -webkit-line-clamp: 3 !important;
    margin-bottom: 6px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  body[data-page="menu"] .menu-product-note {
    -webkit-line-clamp: 2 !important;
    padding-top: 7px !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  body[data-page="menu"] .menu-product-note strong,
  body[data-page="menu"] .menu-product-price span {
    font-size: 8.5px !important;
    letter-spacing: 1px !important;
  }

  body[data-page="menu"] .menu-product-price {
    margin-top: 8px !important;
    padding-top: 7px !important;
  }

  body[data-page="menu"] .menu-product-price strong {
    font-size: 18px !important;
  }

  body[data-page="menu"] .menu-kcal {
    right: 7px !important;
    bottom: 7px !important;
    padding: 4px 5px !important;
    font-size: 8px !important;
    letter-spacing: .8px !important;
  }
}

/* Final mobile design-system lock for page heroes and overlays. */
@media (max-width: 760px) {
  /* Body copy stays functional, not display-weight. CTAs are styled separately. */
  body[data-page] .wh-page-hero-copy footer p:not(.wh-page-ps-note) {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    max-width: 36ch !important;
  }

  body[data-page] .wh-page-hero-copy footer a {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  body[data-page] .wh-page-hero-copy footer p.wh-page-ps-note {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-accent) !important;
    font-size: clamp(16px, 4.5vw, 20px) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
  }

  body[data-page="matcha"] .wh-page-hero.is-light:not(.legal-hero) h1,
  body[data-page="matcha"] .wh-page-hero.is-light:not(.legal-hero) .wh-page-hero-copy footer p,
  body[data-page="matcha"] .wh-page-hero.is-light:not(.legal-hero) .wh-page-hero-copy footer a {
    color: var(--color-steam-cream) !important;
  }

  .legal-hero,
  .legal-hero .wh-page-hero-copy {
    color: var(--color-steam-cream) !important;
    font-family: var(--font-body) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }
}

/* Join: keep mobile role copy inside the same gutter as the form and contact block. */
@media (max-width: 600px) {
  body[data-page="join"] .join-block {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page="join"] .join-block-content {
    gap: 24px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 24px var(--mobile-gut) 28px !important;
  }

  body[data-page="join"] .join-block-copy,
  body[data-page="join"] .join-formcard,
  body[data-page="join"] .join-formcard > .form,
  body[data-page="join"] .join-formcard .row-2,
  body[data-page="join"] .join-formcard .field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page="join"] .join-block-copy .jb-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(108px, 44%) !important;
    align-items: baseline !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 8px 0 10px !important;
  }

  body[data-page="join"] .join-block-copy .jb-header h2 {
    min-width: 0 !important;
    color: var(--color-dark-roast) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(34px, 10vw, 42px) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    line-height: .98 !important;
  }

  body[data-page="join"] .join-block-copy .jb-header .j-num {
    min-width: 0 !important;
    max-width: none !important;
    color: var(--color-terracotta) !important;
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  body[data-page="join"] .join-formcard input:not([type="checkbox"]):not([type="radio"]),
  body[data-page="join"] .join-formcard select,
  body[data-page="join"] .join-formcard textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page="join"] .join-block-copy > p:not(.j-num) {
    color: var(--color-espresso) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }

  body[data-page="join"] .join-email {
    gap: 16px !important;
    padding: 36px var(--mobile-gut) 34px !important;
  }

  body[data-page="join"] .join-email h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  body[data-page="join"] .join-email .je-addr {
    font-size: clamp(30px, 9.25vw, 42px) !important;
  }

  body[data-page="join"] .join-email p {
    font-size: 15px !important;
  }

  body[data-page="join"] .join-email .je-ps {
    font-size: 18px !important;
  }
}

/* Partnership photo cards retain readable reversed overlays at mobile widths. */
@media (max-width: 760px) {
  body[data-page="partnership"] .wh-page-hero-copy .partner-ps-note {
    margin-top: 8px !important;
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.3 !important;
  }

  body[data-page="partnership"] .wh-page-split a::after {
    background: linear-gradient(180deg, rgba(61, 32, 16, .7) 0%, rgba(61, 32, 16, .34) 42%, rgba(61, 32, 16, .82) 100%) !important;
  }

  body[data-page="partnership"] .wh-page-split h2 {
    color: var(--color-steam-cream) !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: .98 !important;
  }

  body[data-page="partnership"] .wh-page-split p {
    color: rgba(250, 246, 238, .9) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  body[data-page="partnership"] .wh-page-split span {
    color: var(--color-steam-cream) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
}

/* Pods: keep the mobile hero hierarchy and actions anchored to the copy panel. */
@media (max-width: 760px) {
  body[data-page="pods"] .pods-hero .wh-page-hero-copy {
    justify-content: flex-start !important;
    padding-top: 54px !important;
    padding-bottom: 22px !important;
  }

  body[data-page="pods"] .pods-hero footer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 12px !important;
    margin-top: 0 !important;
  }

  body[data-page="pods"] .pods-hero footer a {
    align-self: end !important;
    font-size: 16px !important;
  }

  body[data-page="pods"] .pods-hero footer .wh-page-ps-note {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }
}

/* Homepage app callout: mobile is an action card, not a compressed desktop split. */
@media (max-width: 760px) {
  body[data-page="home"] .ps-app-callout {
    padding: 22px var(--mobile-gut) 26px !important;
  }

  body[data-page="home"] .ps-app-callout .wrap {
    display: block !important;
    padding: 0 !important;
  }

  body[data-page="home"] .ps-app-visual {
    display: block !important;
    width: min(78vw, 300px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 18px auto 0 !important;
    aspect-ratio: 390 / 844 !important;
    border: 8px solid #1f130d !important;
    border-radius: 34px !important;
    box-shadow: 0 16px 32px rgba(61, 32, 16, .22) !important;
  }

  body[data-page="home"] .ps-app-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 24px !important;
  }

  body[data-page="home"] .ps-app-copy p.kicker {
    margin: 0 0 8px !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  body[data-page="home"] .ps-app-copy h2 {
    margin: 0 0 12px !important;
    color: var(--color-steam-cream) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(32px, 8.5vw, 36px) !important;
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
    line-height: .95 !important;
  }

  body[data-page="home"] .ps-app-features {
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(250, 246, 238, .34) !important;
  }

  body[data-page="home"] .ps-app-features li {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 8px 0 8px 22px !important;
    border-bottom: 1px solid rgba(250, 246, 238, .28) !important;
    color: rgba(250, 246, 238, .92) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

  body[data-page="home"] .ps-app-features li::before {
    left: 0 !important;
    color: var(--color-steam-cream) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  body[data-page="home"] .ps-app-btns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  body[data-page="home"] .ps-app-btns a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 9px 10px !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Keep the paired actions visually equal; the shared primary rule is desktop-sized. */
  body[data-page="home"] .ps-app-btns a.primary,
  body[data-page="home"] .ps-app-btns a.outline {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  body[data-page="home"] .ps-app-btns a.primary {
    background: var(--color-steam-cream) !important;
    border-color: var(--color-steam-cream) !important;
    color: var(--color-terracotta) !important;
  }

  body[data-page="home"] .ps-app-btns a.outline {
    background: transparent !important;
    border: 1px solid rgba(250, 246, 238, .72) !important;
    color: var(--color-steam-cream) !important;
  }
}

/* App caffeine tracker: one product screen and compact, scannable context. */
@media (max-width: 760px) {
  body[data-page="app"] .app-caffeine-tracker {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin: 48px var(--mobile-gut) !important;
    padding: 24px !important;
  }

  body[data-page="app"] .app-caffeine-tracker-media {
    order: -1;
  }

  body[data-page="app"] .app-caffeine-tracker-media picture {
    width: min(100%, 320px) !important;
  }

  body[data-page="app"] .app-caffeine-tracker h2 {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  body[data-page="app"] .app-caffeine-tracker-intro {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  body[data-page="app"] .app-caffeine-tracker-points {
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
  }

  body[data-page="app"] .app-caffeine-tracker-points div,
  body[data-page="app"] .app-caffeine-tracker-points div + div {
    padding: 14px 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(61, 32, 16, .14) !important;
  }

  body[data-page="app"] .app-caffeine-tracker-cta {
    margin-top: 24px !important;
  }
}

/* Blogs signup: keep the field and command button compact, aligned, and clearly actionable. */
@media (max-width: 760px) {
  body[data-page="blogs"] .journal-signup-form {
    grid-template-columns: minmax(0, 1fr) 52px !important;
    gap: 8px !important;
    margin-top: 20px !important;
    border: 0 !important;
  }

  body[data-page="blogs"] .journal-signup-form input,
  body[data-page="blogs"] .journal-signup-form button {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: var(--radius-md) !important;
  }

  body[data-page="blogs"] .journal-signup-form input {
    padding: 0 14px !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
  }

  body[data-page="blogs"] .journal-signup-form button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: var(--color-steam-cream) !important;
    border: 1.5px solid var(--color-steam-cream) !important;
    color: var(--color-terracotta) !important;
    font-size: 24px !important;
  }

  body[data-page="blogs"] .journal-signup-form button:focus-visible {
    outline: 2px solid var(--color-steam-cream) !important;
    outline-offset: 3px !important;
  }
}

/* Mobile interaction contract: shared touch, focus, safe-area, and form behaviour. */
@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--wh-header-h) + 28px + var(--mobile-safe-top));
  }

  body {
    padding-bottom: var(--mobile-safe-bottom);
  }

  #ps-nav {
    padding-top: var(--mobile-safe-top) !important;
    background: var(--color-terracotta) !important;
  }

  .page-top,
  body[data-page="home"] .page-top,
  body[data-page="menu"] .page-top {
    height: calc(var(--wh-header-h) + 28px + var(--mobile-safe-top)) !important;
  }

  .drawer {
    top: calc(var(--wh-header-h) + 28px + var(--mobile-safe-top)) !important;
    padding-bottom: calc(24px + var(--mobile-safe-bottom)) !important;
    overscroll-behavior: contain;
  }

  .drawer a {
    min-height: 52px !important;
  }

  :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 2px solid var(--color-terracotta) !important;
    outline-offset: 3px !important;
  }

  body[data-page="matcha"] :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline-color: var(--color-ceremonial) !important;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p,
  li,
  label,
  a,
  button {
    overflow-wrap: break-word;
  }

  image-slot img,
  .ps-pass-card img,
  .ps-pack-pass-card img,
  .app-motion-media img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .nav-burger,
  .mobile-hero-count button,
  .journal-hero-count button,
  .menu-filter-wh button,
  .journal-topic-bar a,
  .ps-pass-tabs button,
  .ps-pack-pass-tabs button,
  .faq-q,
  .journal-faq summary,
  .ps-pack-pass-detail-row summary,
  .chip,
  .journal-pagination a,
  .app-caffeine-tracker-cta {
    min-height: var(--mobile-control) !important;
  }

  .mobile-hero-count button,
  .journal-hero-count button,
  .menu-filter-wh button,
  .journal-topic-bar a,
  .ps-pass-tabs button,
  .ps-pack-pass-tabs button,
  .journal-pagination a {
    min-width: var(--mobile-control) !important;
  }

  .wh-btn,
  .btn,
  .form-submit,
  .wh-page-card > a,
  .wh-page-card > button,
  .menu-product-wh button,
  .ps-pack-pass-link,
  .wh-page-hero-copy footer a,
  .menu-hero-copy a,
  .wh-line-cta,
  .ps-callout-btns a,
  .recheck {
    min-height: var(--mobile-control) !important;
  }

  .wh-page-hero-copy footer a,
  .menu-hero-copy a,
  .wh-banner-cta-btn {
    min-height: var(--mobile-control-large) !important;
  }

  body[data-page="partnership"] .wh-page-rail .wh-page-card > a {
    min-height: var(--mobile-control) !important;
  }

  .form input:not([type="checkbox"]):not([type="radio"]),
  .form select,
  .form textarea,
  .join-formcard input:not([type="checkbox"]):not([type="radio"]),
  .join-formcard select,
  .join-formcard textarea,
  .app-waitlist-form input,
  .journal-signup-form input {
    min-height: var(--mobile-control-large) !important;
    font-size: 16px !important;
  }

  .form textarea,
  .join-formcard textarea {
    min-height: 104px !important;
    resize: vertical !important;
  }

  main form select {
    height: var(--mobile-control-large) !important;
    min-height: var(--mobile-control-large) !important;
    font-size: 16px !important;
  }

  .field {
    gap: 8px !important;
  }

  .field + .field,
  .form .row-2 + .row-2,
  .form .row-2 + .field {
    margin-top: 16px;
  }

  .field .err {
    min-height: 16px;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .wh-favourites nav a,
  .wh-favourites header > a,
  .ps-app-btns a,
  .ps-our-story a,
  .wh-product-card a,
  .ps-pass-link,
  .event-slide-card a,
  body[data-page="app"] .wh-page-hero-copy footer a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--mobile-control) !important;
  }

  body[data-page="app"] .wh-page-hero-copy footer a {
    min-height: var(--mobile-control-large) !important;
  }

  body[data-page="blog-post"] .toc-list li {
    min-height: var(--mobile-control) !important;
    padding-block: 0 !important;
    align-items: center !important;
  }

  body[data-page="blog-post"] .toc-list li a {
    flex: 1 1 auto;
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--mobile-control) !important;
  }

  [role="dialog"][aria-modal="true"] {
    padding: calc(16px + var(--mobile-safe-top)) var(--mobile-gut) calc(16px + var(--mobile-safe-bottom)) !important;
    overscroll-behavior: contain;
  }

  [role="dialog"][aria-modal="true"] > div {
    max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  [role="dialog"][aria-modal="true"] :where(button, a[href]) {
    min-height: var(--mobile-control) !important;
  }

  #ps-toast {
    bottom: calc(18px + var(--mobile-safe-bottom)) !important;
  }

  .store-badge[aria-disabled="true"] {
    cursor: default !important;
    pointer-events: none !important;
  }

  .ps-pass-dots,
  .ps-pack-pass-dots {
    gap: 0 !important;
  }

  .ps-pass-dots button,
  .ps-pack-pass-dots button {
    position: relative !important;
    width: var(--mobile-control) !important;
    height: var(--mobile-control) !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .ps-pass-dots button::after,
  .ps-pack-pass-dots button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(61, 32, 16, .24);
    transform: translate(-50%, -50%);
  }

  .ps-pass-dots button[aria-current="true"]::after,
  .ps-pack-pass-dots button[aria-current="true"]::after {
    width: 24px;
    background: var(--color-terracotta);
  }

  .ps-pack-pass-detail-row summary {
    padding-block: 10px !important;
    font-size: 11px !important;
  }

  .ps-pack-pass-link,
  .app-caffeine-tracker-cta {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
  }

  /* Editorial links remain visually inline while exposing a full touch target. */
  main p > a:not(.btn):not(.cta-btn),
  .wh-page-list-rows p a,
  body[data-page="faq"] .faq-a .inner a,
  body[data-page="join"] .join-email .je-addr,
  body[data-page="blog-post"] .footer a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: var(--mobile-control) !important;
    padding-inline: 2px !important;
    vertical-align: middle !important;
  }

  body[data-page="blog-post"] .footer a {
    justify-content: center !important;
    min-width: var(--mobile-control) !important;
  }

  /* Menu categories: one stable tab row plus a separate status line. */
  body[data-page="menu"] .menu-filter-wh {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 4px !important;
    overflow: visible !important;
    padding: 8px var(--mobile-gut) 0 !important;
  }

  body[data-page="menu"] .menu-filter-wh button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: var(--mobile-control) !important;
    padding: 0 1px 2px !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    font-family: var(--font-body) !important;
    font-size: clamp(12px, 3.25vw, 14px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-page="menu"] .menu-filter-wh button::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 0;
    left: 4px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
  }

  body[data-page="menu"] .menu-filter-wh button.active::after {
    background: currentColor;
  }

  body[data-page="menu"] .menu-filter-wh button.menu-highlight small {
    position: absolute !important;
    top: 3px;
    right: 2px;
    font-size: 6px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    transform: none !important;
  }

  body[data-page="menu"] .menu-filter-wh > span {
    grid-column: 1 / -1;
    justify-self: stretch !important;
    min-width: 0 !important;
    padding: 7px 0 8px !important;
    border-top: 1px solid var(--color-linen);
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden;
    overflow-wrap: normal !important;
    text-overflow: ellipsis;
  }
}

@media (hover: hover) and (max-width: 760px) {
  body[data-page="menu"] .menu-filter-wh button:hover:not(.active) {
    color: var(--color-terracotta-hover) !important;
    background: var(--color-terracotta-wash) !important;
  }

  body[data-page="menu"] .menu-filter-wh button[data-filter="matcha"]:hover:not(.active) {
    color: var(--color-ceremonial-deep) !important;
    background: var(--color-pale-froth) !important;
  }
}

@media (max-width: 350px) {
  :root {
    --mobile-gut: 20px;
  }
}

/* Narrow-mobile composition: keep dense home navigation and footer groups intentional. */
@media (max-width: 560px) {
  body[data-page="home"] .ps-callout-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    border-left: 0 !important;
  }

  body[data-page="home"] .ps-callout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 124px;
    grid-template-areas:
      "kicker action"
      "title action";
    align-items: center !important;
    gap: 4px 12px !important;
    min-height: 96px;
    padding: 16px var(--mobile-gut) !important;
    border-left: 0 !important;
  }

  body[data-page="home"] .ps-callout p.kicker {
    grid-area: kicker;
    align-self: end;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body[data-page="home"] .ps-callout h2 {
    grid-area: title;
    align-self: start;
    margin: 0 !important;
    font-size: clamp(17px, 5.2vw, 20px) !important;
    line-height: 1.08 !important;
  }

  body[data-page="home"] .ps-callout-btns {
    grid-area: action;
    align-self: center;
    margin: 0 !important;
  }

  body[data-page="home"] .ps-callout-btns a.btn-filled,
  body[data-page="home"] .ps-callout-btns a.btn-outline {
    width: 124px !important;
    min-height: var(--mobile-control) !important;
    padding: 0 10px !important;
    border-radius: var(--radius-md, 9px) !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] .wh-favourites header {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px 4px !important;
    align-items: stretch !important;
  }

  body[data-page="home"] .wh-favourites h2 {
    grid-column: 1 / -1 !important;
    max-width: 9.5ch;
    margin-bottom: 2px !important;
    white-space: normal !important;
    font-size: clamp(30px, 10vw, 36px) !important;
    line-height: 1 !important;
  }

  body[data-page="home"] .wh-favourites nav {
    display: contents !important;
  }

  body[data-page="home"] .wh-favourites nav a,
  body[data-page="home"] .wh-favourites header > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: var(--mobile-control) !important;
    padding: 0 1px 2px !important;
    border: 0 !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    font-family: var(--font-body) !important;
    font-size: clamp(12px, 3.25vw, 14px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-page="home"] .wh-favourites nav a::after,
  body[data-page="home"] .wh-favourites header > a::after {
    content: "" !important;
    position: absolute;
    right: 4px;
    bottom: 0;
    left: 4px;
    height: 2px;
    margin: 0 !important;
    border-radius: 2px 2px 0 0;
    background: transparent;
  }

  body[data-page="home"] .wh-favourites nav a.on::after {
    background: currentColor;
  }

  body[data-page="home"] .wh-favourites header > a {
    grid-column: 5 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

}

@media (max-width: 760px) and (orientation: landscape) {
  .wh-page-hero,
  .menu-hero-wh {
    min-height: 0 !important;
  }

  .wh-page-hero-copy,
  .menu-hero-copy {
    min-height: min(74vh, 360px) !important;
  }
}

/* Pods conversion cards: compact mobile hierarchy with a protected lower text zone. */
@media (max-width: 760px) {
  body[data-page="pods"] .wh-page-split {
    gap: 16px !important;
  }

  body[data-page="pods"] .wh-page-split a {
    min-height: 430px !important;
  }

  body[data-page="pods"] .wh-page-split a::after {
    background: linear-gradient(
      180deg,
      rgba(61, 32, 16, .56) 0%,
      rgba(61, 32, 16, .12) 38%,
      rgba(61, 32, 16, .88) 100%
    ) !important;
  }

  body[data-page="pods"] .wh-page-split h2,
  body[data-page="pods"] .wh-page-split p,
  body[data-page="pods"] .wh-page-split span {
    left: 24px !important;
    right: 24px !important;
  }

  body[data-page="pods"] .wh-page-split h2 {
    top: 24px !important;
    max-width: 11ch !important;
    color: var(--color-steam-cream) !important;
    font-size: clamp(30px, 8.5vw, 36px) !important;
    line-height: .98 !important;
  }

  body[data-page="pods"] .wh-page-split p {
    bottom: 68px !important;
    max-width: 31ch !important;
    color: var(--color-sage-cream) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
  }

  body[data-page="pods"] .wh-page-split span {
    bottom: 20px !important;
    right: auto !important;
    color: var(--color-steam-cream) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 760px) {
  body[data-page="blogs"] .journal-index-hero {
    display: block !important;
    padding: 32px var(--mobile-gut) 24px !important;
  }

  body[data-page="blogs"] .journal-index-title {
    min-height: 0 !important;
    margin-bottom: 22px !important;
  }

  body[data-page="blogs"] .journal-index-title h1 {
    max-width: 9ch !important;
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: .9 !important;
  }

  body[data-page="blogs"] .journal-index-title > p:last-of-type {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  body[data-page="blogs"] .journal-index-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  body[data-page="blogs"] .journal-index-actions a {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  body[data-page="blogs"] .journal-hero-feature-media {
    aspect-ratio: 1 / .82 !important;
  }

  body[data-page="blogs"] .journal-hero-feature-copy h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: .95 !important;
  }

  body[data-page="blogs"] .journal-topic-bar {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 var(--mobile-gut) 18px !important;
    border-bottom: 1px solid var(--color-linen) !important;
    background: var(--color-steam-cream) !important;
  }

  body[data-page="blogs"] .journal-topic-bar span {
    grid-column: 1 / -1 !important;
    padding: 0 0 8px !important;
  }

  body[data-page="blogs"] .journal-topic-bar a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid var(--color-linen) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
  }

  body[data-page="blogs"] .journal-topic-bar a::after {
    content: "→";
  }

  body[data-page="blogs"] .journal-section-head,
  body[data-page="blogs"] .journal-index-note {
    display: block !important;
    margin: 0 var(--mobile-gut) !important;
    padding: 28px 0 16px !important;
  }

  body[data-page="blogs"] .journal-section-head h2,
  body[data-page="blogs"] .journal-index-note h2 {
    font-size: clamp(32px, 9.5vw, 44px) !important;
    line-height: .95 !important;
  }

  body[data-page="blogs"] .journal-feature-grid,
  body[data-page="blogs"] .journal-card-grid {
    padding-inline: var(--mobile-gut) !important;
    gap: 18px !important;
  }

  body[data-page="blogs"] .journal-card-media,
  body[data-page="blogs"] .journal-mini-media {
    aspect-ratio: 1 / .82 !important;
  }

  body[data-page="blogs"] .journal-card-copy h2,
  body[data-page="blogs"] .journal-mini-card h3 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: .95 !important;
  }

  body[data-page="blogs"] .journal-signup-band {
    margin: 0 var(--mobile-gut) 44px !important;
  }

  body[data-page="blogs"] .journal-signup-band .journal-signup-card {
    display: block !important;
    padding: 22px !important;
  }

  body[data-page="blogs"] .journal-signup-card h3 {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: .94 !important;
  }

  body[data-page="blogs"] .journal-signup-form {
    grid-template-columns: 1fr 52px !important;
    margin-top: 18px !important;
  }

  body[data-page="blogs"] .journal-signup-form input,
  body[data-page="blogs"] .journal-signup-form button {
    height: 52px !important;
  }

  body[data-page="blogs"] .journal-signup-form button {
    width: 52px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #psDrawer a.pack-link::after,
  .mobile-hero-progress span {
    animation: none !important;
    transition: opacity 150ms linear !important;
  }
}