/* Responsive utilities for templates. Container-query based (root .r-page is the container), so pages respond
   both in a real viewport and when framed at 390/1024px inside the states boards. Inline styles carry the
   desktop design; these classes only override at the two breakpoints (tablet ≤1180, mobile ≤760). */
.r-page{container-type:inline-size;container-name:page;min-width:320px}
.r-mobile-only{display:none}
@container page (max-width:1180px){
  .r-pad{padding-left:40px!important;padding-right:40px!important}
  .r-cols-4{grid-template-columns:repeat(2,1fr)!important}
  .r-cols-3{grid-template-columns:repeat(2,1fr)!important}
  .r-aside{grid-template-columns:1fr!important}
  .r-sticky{position:static!important}
  .r-h1{font-size:40px!important;line-height:1.12!important}
  .r-h2{font-size:32px!important}
  .r-hero{height:440px!important}
}
@container page (max-width:760px){
  .r-pad{padding-left:16px!important;padding-right:16px!important}
  .r-cols-2,.r-cols-3,.r-cols-4{grid-template-columns:1fr!important}
  .r-stack{flex-direction:column!important;align-items:stretch!important}
  .r-btns{flex-direction:column!important}
  .r-btns>*{width:100%!important}
  .r-desktop-only{display:none!important}
  .r-mobile-only{display:block!important}
  .r-h1{font-size:30px!important;line-height:1.15!important}
  .r-h2{font-size:26px!important;line-height:1.2!important}
  .r-lead{font-size:16px!important;line-height:24px!important}
  .r-hero{height:auto!important;grid-template-columns:1fr 1fr!important;grid-template-rows:200px 200px!important}
  .r-hero>*:first-child{grid-row:1!important;grid-column:1 / -1!important}
  .r-timeline{grid-template-columns:1fr!important;column-gap:0!important}
  .r-timeline>div{grid-column:1!important;justify-content:flex-start!important;padding:0 0 24px!important}
  .r-timeline .r-spine{display:none!important}
  .r-timeline .r-year{display:none!important}
  .r-card-w{max-width:100%!important}
  .r-full{width:100%!important;max-width:100%!important}
  .r-modal{grid-template-columns:1fr!important}
  .r-modal-img{min-height:260px!important;padding:12px!important}
  .r-rows{grid-template-columns:56px 1fr!important}
  .r-rows>*:nth-child(n+3){grid-column:2!important;justify-self:start!important}
  .r-rows>*:last-child{align-items:flex-start!important}
  .r-section{padding-top:32px!important;padding-bottom:32px!important}
  .r-footer div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .r-footer div[style*="display: flex"]{flex-wrap:wrap}
  .r-figure{aspect-ratio:auto!important;flex-direction:column!important}
  .r-figure>*{flex:none!important;height:220px!important}
  .r-hide-m{display:none!important}
}

/* States-board frames (design-system documentation only): desktop/tablet scaled, mobile 1:1. */
.rf-d,.rf-t,.rf-m{display:flex;flex-direction:column;gap:12px}
.rf-d{width:576px}.rf-t{width:512px}.rf-m{width:390px}
.rf-box{overflow:hidden;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(33,33,33,.08);height:640px}
.rf-m .rf-box{height:760px}
.rf-scale{transform-origin:top left}
.rf-d .rf-scale{width:1440px;transform:scale(.4)}
.rf-t .rf-scale{width:1024px;transform:scale(.5)}
.rf-m .rf-scale{width:390px}