/* CCSA Natal Midlands v55.12.40 — unified mobile headings and compact desktop scrolling */

/* Keep headings readable even when the browser accessibility layer allows long-body text to wrap anywhere. */
.app :is(h1,h2,h3,h4,h5,h6,.label,.screen-kicker,.section-kicker,.tile-overline,.committee-role,.notice-overline,.resource-overline,.recipe-overline,.faq-overline,.merch-overline){
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

/* Prominent direct route to the member intention form. */
.home-intention-cta,
.rally-intention-launch.rally-intention-primary{
  width:auto;
  min-height:76px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 30px;
  align-items:center;
  gap:13px;
  margin:18px;
  padding:13px 15px;
  border:2px solid color-mix(in srgb,var(--gold-light) 82%,#fff 18%);
  border-radius:21px;
  color:#171006;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.33),transparent 36%),
    linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:0 18px 38px color-mix(in srgb,var(--gold) 31%,transparent),inset 0 1px 0 rgba(255,255,255,.56);
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.home-intention-cta{margin-top:18px;margin-bottom:8px;}
.home-intention-cta-icon,
.rally-intention-primary .rally-intention-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:var(--gold-light);
  background:#13351f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 20px rgba(0,0,0,.2);
  font-size:27px;
  font-weight:950;
}
.home-intention-cta-copy,
.rally-intention-primary .rally-intention-copy{min-width:0;display:grid;gap:2px;}
.home-intention-cta strong,
.rally-intention-primary strong{display:block;color:#171006;font-size:18px;line-height:1.15;font-weight:950;}
.home-intention-cta small,
.rally-intention-primary small{display:block;color:rgba(23,16,6,.76);font-size:13px!important;line-height:1.35!important;font-weight:760;}
.home-intention-cta-arrow,
.rally-intention-primary .rally-intention-arrow{justify-self:end;color:#171006;font-size:32px;font-weight:700;line-height:1;}
.home-intention-cta:active,
.rally-intention-primary:active{transform:scale(.985);}

/* The rally-page action belongs immediately below the page heading, before the next-rally card. */
.rallies-screen > .rally-intention-primary{margin-top:18px;margin-bottom:4px;}

@media (max-width: 720px){
  html,body{max-width:100%;overflow-x:hidden;}
  .app,.screen,#screen-home{width:100%;max-width:100%;box-sizing:border-box;}
  .screen{padding-bottom:calc(108px + env(safe-area-inset-bottom))!important;}

  /* Consistent mobile page headings: no decorative element stealing half the width. */
  .screen-header{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    align-items:center!important;
    gap:13px!important;
    padding:19px 16px!important;
  }
  .screen-header::after{display:none!important;}
  .screen-header::before{left:77px!important;right:16px!important;bottom:11px!important;}
  .screen-header>div{min-width:0!important;}
  .screen-header h2{
    margin:3px 0 0!important;
    max-width:100%!important;
    font-size:clamp(1.55rem,7.3vw,2rem)!important;
    line-height:1.08!important;
    letter-spacing:-.015em!important;
  }
  .screen-kicker{font-size:12px!important;line-height:1.3!important;}

  /* Hero/card copy receives the full available width instead of a narrow column beside the icon. */
  .notice-hero,
  .resource-hero,
  .recipe-hero,
  .faq-hero,
  .newsletter-hero,
  .merch-hero,
  .finance-hero{
    width:auto!important;
    max-width:none!important;
    margin:16px 12px!important;
    padding:18px!important;
    box-sizing:border-box!important;
    border-radius:22px!important;
  }

  .notice-hero,
  .resource-hero,
  .recipe-hero{display:grid!important;grid-template-columns:1fr!important;gap:15px!important;}

  .notice-hero-copy.has-premium-section-icon,
  .resource-hero>.has-premium-section-icon,
  .recipe-hero>.has-premium-section-icon{
    display:grid!important;
    grid-template-columns:70px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:13px!important;
    row-gap:11px!important;
    min-width:0!important;
    max-width:none!important;
  }
  .notice-hero-copy.has-premium-section-icon>.premium-section-icon,
  .resource-hero>.has-premium-section-icon>.premium-section-icon,
  .recipe-hero>.has-premium-section-icon>.premium-section-icon{
    grid-column:1!important;
    grid-row:1!important;
    width:68px!important;
    height:68px!important;
    margin:0!important;
  }
  .notice-hero-copy.has-premium-section-icon>.notice-overline,
  .resource-hero>.has-premium-section-icon>.resource-overline,
  .recipe-hero>.has-premium-section-icon>.recipe-overline{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
  }
  .notice-hero-copy.has-premium-section-icon>h3,
  .notice-hero-copy.has-premium-section-icon>p,
  .resource-hero>.has-premium-section-icon>h3,
  .resource-hero>.has-premium-section-icon>p,
  .recipe-hero>.has-premium-section-icon>h3,
  .recipe-hero>.has-premium-section-icon>p{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .notice-hero h3,
  .resource-hero h3,
  .recipe-hero h3{
    margin:0!important;
    font-size:clamp(1.75rem,8vw,2.18rem)!important;
    line-height:1.06!important;
  }
  .notice-hero p,
  .resource-hero p,
  .recipe-hero p{margin:0!important;font-size:1rem!important;line-height:1.5!important;}
  .notice-hero-count,
  .resource-hero-count,
  .recipe-count-badge{
    width:100%!important;
    min-width:0!important;
    min-height:88px!important;
    box-sizing:border-box!important;
    justify-self:stretch!important;
  }

  /* AI help title: icon and overline share the first row; the title then spans the card. */
  .faq-hero-top{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
  }
  .faq-hero-top>div:last-child{display:contents!important;}
  .faq-hero-icon{grid-column:1!important;grid-row:1!important;width:70px!important;height:70px!important;}
  .faq-hero-top .faq-overline{grid-column:2!important;grid-row:1!important;}
  .faq-hero h3,.faq-hero p{grid-column:1/-1!important;width:100%!important;max-width:none!important;}
  .faq-hero h3{margin:2px 0 0!important;font-size:clamp(1.72rem,8vw,2.1rem)!important;line-height:1.05!important;}
  .faq-hero p{margin:0!important;font-size:1rem!important;line-height:1.5!important;}
  .faq-hero-stats{grid-template-columns:1fr!important;}

  /* Merchandise title and description no longer squeeze beside an absolutely-positioned icon. */
  .merch-hero{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
  }
  .merch-hero-copy{display:contents!important;padding:0!important;}
  .merch-hero-icon{position:static!important;grid-column:1!important;grid-row:1!important;width:70px!important;height:70px!important;opacity:1!important;}
  .merch-hero .merch-overline{grid-column:2!important;grid-row:1!important;}
  .merch-hero h3,.merch-hero p,.merch-cart-launch{grid-column:1/-1!important;width:100%!important;max-width:none!important;}
  .merch-hero h3{margin:2px 0 0!important;font-size:clamp(1.8rem,8.6vw,2.2rem)!important;line-height:1.05!important;}
  .merch-hero p{margin:0!important;font-size:1rem!important;line-height:1.5!important;}
  .merch-cart-launch{box-sizing:border-box!important;}

  /* Newsletter hero remains magazine-like but uses one readable text column. */
  .newsletter-hero-top{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
  }
  .newsletter-hero-top>div:last-child{display:contents!important;}
  .newsletter-hero-icon{grid-column:1!important;grid-row:1!important;width:70px!important;height:70px!important;}
  .newsletter-hero-top .newsletter-overline{grid-column:2!important;grid-row:1!important;}
  .newsletter-hero h3,.newsletter-hero p{grid-column:1/-1!important;width:100%!important;max-width:none!important;}
  .newsletter-hero h3{margin:2px 0 0!important;font-size:clamp(1.72rem,8vw,2.05rem)!important;line-height:1.07!important;}
  .newsletter-hero p{margin:0!important;font-size:1rem!important;line-height:1.5!important;}
  .newsletter-hero-stats{grid-template-columns:1fr 1fr!important;}

  /* Committee cards: preserve the portrait without sacrificing the member's name/contact width. */
  .committee-hero,.committee-intro,.committee-payment,.committee-update-note{margin-left:12px!important;margin-right:12px!important;}
  .committee-list{padding-left:12px!important;padding-right:12px!important;}
  .committee-card{
    grid-template-columns:84px minmax(0,1fr)!important;
    gap:13px!important;
    padding:14px!important;
  }
  .committee-card>div:nth-child(2){min-width:0!important;}
  .committee-photo{width:84px!important;height:84px!important;border-radius:16px!important;}
  .committee-card h3{
    margin:4px 0 9px!important;
    font-size:clamp(1.35rem,6.8vw,1.72rem)!important;
    line-height:1.08!important;
  }
  .committee-contact-lines{font-size:.94rem!important;line-height:1.4!important;}
  .committee-contact-lines a{overflow-wrap:anywhere!important;word-break:break-word!important;}
  .committee-actions{grid-template-columns:1fr!important;}
  .committee-hero{min-height:390px!important;}
  .committee-hero-copy h3{font-size:clamp(1.9rem,9vw,2.45rem)!important;line-height:1.04!important;}
  .committee-hero-copy p{font-size:1rem!important;line-height:1.5!important;}

  /* Controls and filter rows must never force the page wider than the phone. */
  .notice-controls,.resource-controls,.recipe-controls,.merch-controls,.newsletter-controls,
  .finance-controls,.finance-content{
    width:auto!important;
    max-width:none!important;
    margin-left:12px!important;
    margin-right:12px!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  :is(.notice-search,.resource-search,.recipe-search,.merch-search,.newsletter-search),
  :is(.notice-search,.resource-search,.recipe-search,.merch-search,.newsletter-search) input,
  .notice-view-button,.resource-refresh,.recipe-control-row button,
  .finance-report-tabs,.finance-report-tabs button,.finance-period-control,.finance-period-control select{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .notice-view-button{justify-content:space-between!important;}
  .notice-filter-row,.resource-filter-row,.recipe-course-filters,.merch-filters,
  .newsletter-year-filters{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    gap:8px!important;
    padding:3px 2px 8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }
  .notice-filter-row>*,.resource-filter-row>*,.recipe-course-filters>*,.merch-filters>*,
  .newsletter-year-filters>*{flex:0 0 auto!important;scroll-snap-align:start;white-space:nowrap!important;}
  .newsletter-control-row{display:grid!important;grid-template-columns:minmax(0,1fr) 52px!important;gap:8px!important;}
  .newsletter-refresh{width:52px!important;min-width:52px!important;}
  .recipe-control-row{display:grid!important;grid-template-columns:1fr!important;}

  /* Finance report controls and cards stack cleanly on small screens. */
  .finance-hero{grid-template-columns:1fr!important;text-align:left!important;}
  .finance-hero-icon{width:84px!important;min-height:84px!important;justify-self:start!important;}
  .finance-hero h3{font-size:clamp(1.65rem,7.6vw,2rem)!important;line-height:1.08!important;}
  .finance-hero p{font-size:1rem!important;line-height:1.5!important;}
  .finance-report-tabs,.finance-summary-grid,.finance-chart-grid{grid-template-columns:1fr!important;}
  .finance-period-control{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .finance-report-tabs button,.finance-period-control select{font-size:1rem!important;line-height:1.25!important;}
  .finance-detail-group p{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;}

  /* Form fields stay inside their cards. */
  .settings-form-grid,.settings-profile-form,.merch-checkout-form{grid-template-columns:1fr!important;}
  :is(.settings-form-grid,.settings-profile-form,.merch-checkout-form) .full{grid-column:auto!important;}
  :is(input,textarea,select){max-width:100%;box-sizing:border-box;}

  /* Compact, legible five-item bottom navigation. */
  .tabbar{
    left:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:none!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    padding:6px 4px calc(7px + env(safe-area-inset-bottom))!important;
    border-radius:18px 18px 0 0!important;
  }
  .tabbar .tab{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    gap:2px!important;
    padding:5px 1px 4px!important;
    border-radius:13px!important;
    overflow:hidden!important;
  }
  .tabbar .tab-icon{width:29px!important;height:29px!important;transform:none!important;}
  .tabbar .tab-icon img,.tabbar .tab-icon svg{max-width:27px!important;max-height:27px!important;}
  html body .app .tabbar .tab>span:last-child{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
    line-height:1.1!important;
    letter-spacing:-.01em!important;
    text-align:center!important;
  }
  .tabbar button.active{transform:none!important;}

  .home-intention-cta,
  .rally-intention-launch.rally-intention-primary{margin-left:12px!important;margin-right:12px!important;}
}

@media (max-width: 390px){
  .screen-header{grid-template-columns:44px minmax(0,1fr)!important;padding-left:12px!important;padding-right:12px!important;}
  .screen-header::before{left:69px!important;right:12px!important;}
  .home-intention-cta,
  .rally-intention-launch.rally-intention-primary{
    grid-template-columns:48px minmax(0,1fr) 22px;
    min-height:72px;
    padding:11px 12px;
    gap:10px;
  }
  .home-intention-cta-icon,
  .rally-intention-primary .rally-intention-icon{width:46px;height:46px;border-radius:14px;font-size:24px;}
  .home-intention-cta strong,
  .rally-intention-primary strong{font-size:16px;}
  .home-intention-cta small,
  .rally-intention-primary small{font-size:12px!important;}
  .committee-card{grid-template-columns:74px minmax(0,1fr)!important;gap:11px!important;padding:12px!important;}
  .committee-photo{width:74px!important;height:74px!important;}
  .committee-role{font-size:11px!important;letter-spacing:.07em!important;}
  .committee-card h3{font-size:1.35rem!important;}
  .newsletter-hero-stats{grid-template-columns:1fr!important;}
  html body .app .tabbar .tab>span:last-child{font-size:9px!important;}
}


/* v55.12.36 — corrected rally intention placement, compact recipes and hidden cookbook rendering */
.home-intention-cta{display:none!important;}
.rallies-screen>.rally-intention-primary{display:none!important;}
.park-rally-card{order:-1;margin:0 0 18px;padding:16px;border:2px solid var(--gold-light,#f4cf58)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--gold-light,#f4cf58) 16%,var(--surface-raised,#113522)),color-mix(in srgb,var(--gold,#c99a27) 10%,var(--surface,#071d12)))!important;box-shadow:0 14px 34px rgba(0,0,0,.28);}
.park-rally-card .park-intention-only{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;min-height:72px!important;padding:12px 15px!important;border:2px solid var(--gold-light,#f4cf58)!important;border-radius:17px!important;background:linear-gradient(145deg,var(--gold-light,#f4cf58),var(--gold,#c99a27))!important;color:#171006!important;box-shadow:0 10px 26px rgba(0,0,0,.25);}
.park-rally-card .park-intention-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(23,16,6,.13);font-size:25px;color:#171006!important;}
.park-rally-card .park-intention-copy{display:grid;gap:2px;min-width:0;text-align:left;}
.park-rally-card .park-intention-copy strong{font-family:inherit!important;font-size:18px!important;line-height:1.15;color:#171006!important;}
.park-rally-card .park-intention-copy small{font-size:12px!important;line-height:1.3;color:rgba(23,16,6,.76)!important;}
.park-rally-card .park-intention-arrow{font-size:30px!important;line-height:1;color:#171006!important;}
.park-rally-card .park-intention-only.is-completed{grid-template-columns:auto 1fr;opacity:.82;background:var(--surface-raised,#113522)!important;color:var(--cream,#fff8e7)!important;}
.park-rally-card .park-intention-only.is-completed .park-intention-icon,.park-rally-card .park-intention-only.is-completed strong,.park-rally-card .park-intention-only.is-completed small{color:var(--cream,#fff8e7)!important;}

.recipe-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;align-items:start;}
@media (min-width:1180px){.recipe-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
@media (min-width:760px) and (max-width:1179px){.recipe-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media (max-width:759px){.recipe-list{grid-template-columns:1fr!important;}.recipe-cover{aspect-ratio:16/9!important;}}
.recipe-card-copy{padding:14px!important;}
.recipe-card h3{font-size:1.25rem!important;}
.recipe-card p{font-size:11.5px!important;line-height:1.42!important;}
.recipe-open-btn{min-height:42px!important;margin-top:11px!important;}

.cookbook-progress-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:2147483647;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));padding:14px 18px;border:2px solid var(--gold-light,#f4cf58);border-radius:16px;background:#082417;color:#fff8e7;box-shadow:0 18px 54px rgba(0,0,0,.5);font-weight:850;text-align:center;}

/* v55.12.37 — consistent stacked mobile page heroes (icon above copy) */
@media (max-width: 760px){
  /* Shared text behaviour: prevent narrow side columns and awkward word breaks. */
  :is(
    .calendar-hero,
    .newsletter-hero,
    .notice-hero,
    .resource-hero,
    .recipe-hero,
    .faq-hero,
    .finance-hero,
    .merch-hero,
    .settings-hero
  ) :is(h3,p,span,strong){
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  /* Calendar: icon first, complete copy underneath. */
  .calendar-hero-main{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
  }
  .calendar-hero-icon{
    align-self:center!important;
    width:92px!important;
    height:92px!important;
    flex:0 0 92px!important;
    margin:0 auto 2px!important;
  }
  .calendar-hero-main>div:last-child{width:100%!important;}

  /* Newsletter: icon first, copy underneath, then statistics. */
  .newsletter-hero-top{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
  }
  .newsletter-hero-top>div:last-child{display:block!important;width:100%!important;}
  .newsletter-hero-icon{
    align-self:center!important;
    width:94px!important;
    height:94px!important;
    margin:0 auto 2px!important;
  }

  /* Notice, resources and recipes share the same nested icon/copy structure. */
  .notice-hero-copy.has-premium-section-icon,
  .resource-hero>.has-premium-section-icon,
  .recipe-hero>.has-premium-section-icon{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
  }
  .notice-hero-copy.has-premium-section-icon>.premium-section-icon,
  .resource-hero>.has-premium-section-icon>.premium-section-icon,
  .recipe-hero>.has-premium-section-icon>.premium-section-icon{
    align-self:center!important;
    width:94px!important;
    height:94px!important;
    margin:0 auto 5px!important;
  }
  .notice-hero-copy.has-premium-section-icon>.notice-overline,
  .resource-hero>.has-premium-section-icon>.resource-overline,
  .recipe-hero>.has-premium-section-icon>.recipe-overline,
  .notice-hero-copy.has-premium-section-icon>h3,
  .notice-hero-copy.has-premium-section-icon>p,
  .resource-hero>.has-premium-section-icon>h3,
  .resource-hero>.has-premium-section-icon>p,
  .recipe-hero>.has-premium-section-icon>h3,
  .recipe-hero>.has-premium-section-icon>p{
    display:block!important;
    width:100%!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .notice-hero-count,
  .resource-hero-count,
  .recipe-count-badge{
    width:max-content!important;
    min-width:138px!important;
    max-width:100%!important;
    min-height:92px!important;
    justify-self:start!important;
    align-self:flex-start!important;
    margin-top:2px!important;
    padding:15px 18px!important;
  }

  /* AI help: icon first, copy underneath. */
  .faq-hero-top{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
  }
  .faq-hero-top>div:last-child{display:block!important;width:100%!important;}
  .faq-hero-icon{
    align-self:center!important;
    width:96px!important;
    height:96px!important;
    margin:0 auto 2px!important;
  }

  /* Finance and Settings: direct icon, followed by full-width copy. */
  .finance-hero,
  .settings-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
    text-align:left!important;
  }
  .finance-hero-icon,
  .settings-hero-icon{
    align-self:center!important;
    justify-self:center!important;
    width:96px!important;
    height:96px!important;
    min-height:96px!important;
    flex:0 0 96px!important;
    margin:0 auto 2px!important;
  }
  .finance-hero-icon img{width:88px!important;height:88px!important;}
  .settings-hero>div:last-child,.finance-hero>div:last-child{width:100%!important;}

  /* Merchandise icon is later in the DOM, so visually move it to the top. */
  .merch-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
  }
  .merch-hero-icon{
    order:-2!important;
    position:static!important;
    align-self:center!important;
    width:96px!important;
    height:96px!important;
    margin:0 auto 2px!important;
  }
  .merch-hero-icon .premium-registry-image{width:90px!important;height:90px!important;}
  .merch-hero-copy{
    order:-1!important;
    display:block!important;
    width:100%!important;
    padding:0!important;
  }
  .merch-cart-launch{order:0!important;width:100%!important;}

  /* Keep the visual hierarchy close to the Gallery landing card. */
  :is(
    .calendar-hero,
    .newsletter-hero,
    .notice-hero,
    .resource-hero,
    .recipe-hero,
    .faq-hero,
    .finance-hero,
    .merch-hero,
    .settings-hero
  ) h3{
    margin:4px 0 8px!important;
    font-size:clamp(1.75rem,8vw,2.25rem)!important;
    line-height:1.05!important;
  }
  :is(
    .calendar-hero,
    .newsletter-hero,
    .notice-hero,
    .resource-hero,
    .recipe-hero,
    .faq-hero,
    .finance-hero,
    .merch-hero,
    .settings-hero
  ) p{
    margin:0!important;
    font-size:.98rem!important;
    line-height:1.52!important;
  }
}

/* v55.12.39 — complete stacked mobile heroes and compact desktop scrolling */
@media (max-width: 760px){
  /* Notice, Resource Library and Recipes: fully reset the older absolute-icon layout. */
  .notice-hero,
  .resource-hero,
  .recipe-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:16px!important;
  }
  .notice-hero-copy.has-premium-section-icon,
  .resource-hero > .has-premium-section-icon,
  .recipe-hero > .has-premium-section-icon{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding-left:0!important;
    gap:0!important;
  }
  .notice-hero-copy.has-premium-section-icon > .premium-section-icon,
  .resource-hero > .has-premium-section-icon > .premium-section-icon,
  .recipe-hero > .has-premium-section-icon > .premium-section-icon{
    position:static!important;
    inset:auto!important;
    align-self:center!important;
    flex:0 0 auto!important;
    width:104px!important;
    height:104px!important;
    margin:0 auto 17px!important;
    padding:4px!important;
  }
  .notice-hero-copy.has-premium-section-icon > .premium-section-icon .premium-registry-image,
  .resource-hero > .has-premium-section-icon > .premium-section-icon .premium-registry-image,
  .recipe-hero > .has-premium-section-icon > .premium-section-icon .premium-registry-image{
    width:96px!important;
    height:96px!important;
  }
  .notice-hero-copy.has-premium-section-icon > :is(.notice-overline,h3,p),
  .resource-hero > .has-premium-section-icon > :is(.resource-overline,h3,p),
  .recipe-hero > .has-premium-section-icon > :is(.recipe-overline,h3,p){
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }
  .notice-hero-copy.has-premium-section-icon > :is(.notice-overline),
  .resource-hero > .has-premium-section-icon > :is(.resource-overline),
  .recipe-hero > .has-premium-section-icon > :is(.recipe-overline){
    margin-bottom:5px!important;
  }
  .notice-hero-count,
  .resource-hero-count,
  .recipe-count-badge{
    align-self:flex-start!important;
    justify-self:start!important;
    width:auto!important;
    min-width:142px!important;
    max-width:100%!important;
    margin:0!important;
  }

  /* Emergency action card: explanation first, call button clearly below it. */
  .emergency-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
  }
  .emergency-hero > div{
    width:100%!important;
    max-width:none!important;
  }
  .emergency-hero p{
    width:100%!important;
    max-width:none!important;
  }
  .emergency-hero-call{
    width:100%!important;
    min-height:58px!important;
    justify-self:stretch!important;
  }

  /* Campground Games landing card: game icon above the page introduction. */
  .games-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
    text-align:left!important;
  }
  .games-hero > img{
    align-self:center!important;
    width:104px!important;
    height:104px!important;
    margin:0 auto 3px!important;
  }
  .games-hero > div{
    width:100%!important;
    min-width:0!important;
  }
  .games-hero h3{
    margin:5px 0 0!important;
    max-width:100%!important;
    font-size:clamp(1.65rem,7.7vw,2.05rem)!important;
    line-height:1.06!important;
  }
}

/* The installed Windows app can be resized to a compact phone-like width.
   Give that standalone window its own vertical scroller instead of clipping
   content inside the rounded app shell. This does not affect touch phones. */
@media (display-mode: standalone) and (max-width: 899px) and (pointer: fine){
  html,body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }
  body{padding:0!important;}
  .app{
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
    border-radius:0!important;
  }
}

/* Browser-window fallback for compact desktop use outside installed mode. */
@media (max-width: 899px) and (pointer: fine){
  .app{
    overflow-x:hidden!important;
    overflow-y:visible;
  }
}


/* v55.12.39 — definitive compact Windows/PWA scrolling repair.
   A Windows or desktop-like narrow window gets one explicit scroll container. */
html.compact-desktop-window,
html.compact-desktop-window body{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
html.compact-desktop-window .app{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  max-width:none!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100vh!important;
  max-height:100dvh!important;
  margin:0!important;
  border-radius:0!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  scrollbar-gutter:auto!important;
  -webkit-overflow-scrolling:touch;
}
html.compact-desktop-window .tabbar{position:fixed!important;}

/* v55.12.40 — one consistent compact/mobile heading and hero system */
@media (max-width: 760px){
  /* Every page title uses the same scale, spacing and back-button relationship. */
  .screen > .screen-header{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
    padding:18px 16px 20px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .screen > .screen-header::after{display:none!important;}
  .screen > .screen-header::before{left:78px!important;right:16px!important;bottom:9px!important;}
  .screen > .screen-header > div{min-width:0!important;width:100%!important;}
  .screen > .screen-header .screen-kicker{
    display:block!important;
    margin:0 0 4px!important;
    font-size:11px!important;
    line-height:1.25!important;
    letter-spacing:.14em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .screen > .screen-header h2{
    margin:0!important;
    max-width:100%!important;
    font-size:clamp(1.78rem,7.7vw,2.12rem)!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .emergency-page-header{padding-right:16px!important;}
  .emergency-page-header::before{right:16px!important;}
  .emergency-header-icon{display:none!important;}

  /* Shared visual scale for every main introduction card. */
  .mobile-unified-hero{
    box-sizing:border-box!important;
  }
  .mobile-unified-hero :is(h3,p){
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    text-align:left!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .mobile-unified-hero h3{
    margin:5px 0 8px!important;
    font-family:var(--font-display,Georgia,serif)!important;
    font-size:clamp(1.75rem,7.8vw,2.12rem)!important;
    line-height:1.05!important;
    letter-spacing:-.025em!important;
  }
  .mobile-unified-hero p,
  .mobile-unified-hero .milestone-intro{
    margin:0!important;
    font-size:.96rem!important;
    line-height:1.52!important;
  }
  .mobile-unified-hero :is(
    .spotlight-type,.calendar-overline,.milestone-overline,.notice-overline,.gallery-overline,
    .newsletter-overline,.recipe-overline,.settings-overline,.park-intel-overline,
    .classifieds-overline,.resource-overline,.faq-overline,.merch-overline
  ),
  .mobile-unified-hero > div > span:first-child,
  .mobile-unified-hero > span:first-child{
    font-size:11px!important;
    line-height:1.25!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    font-weight:900!important;
  }

  /* All feature icons use the same centred position and visual footprint. */
  .mobile-unified-icon,
  .mobile-unified-hero .mobile-unified-icon{
    position:static!important;
    inset:auto!important;
    display:grid!important;
    place-items:center!important;
    align-self:center!important;
    justify-self:center!important;
    width:96px!important;
    height:96px!important;
    min-width:96px!important;
    min-height:96px!important;
    max-width:96px!important;
    max-height:96px!important;
    margin:0 auto 16px!important;
    padding:4px!important;
    box-sizing:border-box!important;
  }
  .mobile-unified-icon :is(img,.premium-registry-image,svg),
  img.mobile-unified-icon{
    width:86px!important;
    height:86px!important;
    max-width:86px!important;
    max-height:86px!important;
    object-fit:contain!important;
  }
  img.mobile-unified-icon{padding:5px!important;}

  /* Rally spotlight: status first, centred icon, then the complete rally name. */
  .rally-spotlight.mobile-unified-hero{padding:20px!important;}
  .rally-spotlight .spotlight-content{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
  }
  .rally-spotlight .spotlight-copy{width:100%!important;min-width:0!important;}
  .rally-spotlight .spotlight-icon{margin-bottom:14px!important;}
  .rally-spotlight .spotlight-copy h3{font-size:clamp(1.75rem,7.8vw,2.12rem)!important;}

  /* Calendar, Gallery, Newsletters, FAQ: icon above, complete copy beneath. */
  .calendar-hero-main,
  .gallery-hero,
  .newsletter-hero-top,
  .faq-hero-top{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
  }
  .calendar-hero-main>div:last-child,
  .newsletter-hero-top>div:last-child,
  .faq-hero-top>div:last-child,
  .gallery-hero-copy{display:block!important;width:100%!important;}
  .gallery-hero{padding:20px!important;}
  .gallery-hero-art{height:96px!important;}

  /* Milestones follows the same icon/heading rhythm before its form. */
  .milestone-lookup-card .milestone-trophy{margin:0 auto 16px!important;}
  .milestone-lookup-card .milestone-intro{margin-bottom:21px!important;}

  /* Direct-layout heroes. */
  .emergency-hero,
  .park-intel-hero,
  .park-rating-hero,
  .classifieds-hero,
  .finance-hero,
  .merch-hero,
  .settings-hero,
  .games-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    text-align:left!important;
  }
  .emergency-hero-icon,
  .park-intel-hero-icon,
  .park-rating-hero-icon,
  .classifieds-hero-icon{border:1px solid var(--border-strong)!important;border-radius:24px!important;background:color-mix(in srgb,var(--surface-raised) 90%,transparent)!important;}
  .emergency-hero-icon img,
  .park-intel-hero-icon img,
  .park-rating-hero-icon img,
  .classifieds-hero-icon img{width:86px!important;height:86px!important;object-fit:contain!important;}
  .emergency-hero>div:not(.emergency-hero-icon),
  .park-intel-hero>div:not(.park-intel-hero-icon),
  .classifieds-hero>div:not(.classifieds-hero-icon),
  .finance-hero>div:last-child,
  .settings-hero>div:last-child{width:100%!important;}
  .emergency-hero-call{margin-top:18px!important;}
  .classifieds-hero-actions{width:100%!important;margin-top:18px!important;}
  .park-intel-hero-icon{order:-1!important;}
  .merch-hero-icon{order:-2!important;}
  .merch-hero-copy{order:-1!important;display:block!important;width:100%!important;padding:0!important;}
  .merch-cart-launch{order:0!important;margin-top:18px!important;}

  /* Counts and statistics use the same compact card proportions. */
  .mobile-unified-hero :is(.notice-hero-count,.resource-hero-count,.recipe-count-badge,.gallery-hero-stats>div){
    width:auto!important;
    min-width:140px!important;
    max-width:100%!important;
    min-height:88px!important;
    align-self:flex-start!important;
    justify-self:start!important;
    margin-top:16px!important;
    padding:14px 18px!important;
    box-sizing:border-box!important;
  }

  /* Keep the sound control out of the Campground Games title. */
  .game-experience .screen-header{padding-right:16px!important;}
  .game-experience .screen-header .game-sound-toggle{
    position:static!important;
    grid-column:2!important;
    justify-self:start!important;
    width:auto!important;
    min-width:102px!important;
    min-height:36px!important;
    margin:9px 0 0!important;
  }
}