/* Mobile and narrow-screen safeguards for the shared site and dashboard. */
html{-webkit-text-size-adjust:100%}
button,a,[role="button"]{touch-action:manipulation}
img,video,canvas,svg{max-width:100%}
.bl-wrap,.dash-main,.dash-panel,.welcome-copy{min-width:0}
.site-header .menu-toggle{min-width:44px;min-height:44px}
@media(pointer:coarse){input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}.round-icon{min-width:44px;min-height:44px}}
@media(max-width:650px){
  body:has(.dash-shell){padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .dash-shell{min-height:calc(100vh - 16px);min-height:calc(100dvh - 16px)}
  .dash-sidebar{scrollbar-width:thin;overscroll-behavior-x:contain}
  .dash-sidebar nav{flex:none}
  .dash-top{flex-wrap:wrap}
  .dash-tools{max-width:100%}
  .dash-search{min-width:0}
  .dash-welcome-mascot{flex:0 0 36%}
  .welcome-copy{padding:12px 10px 12px 0}
  .dash-bottom{flex-wrap:wrap}
}
@media(max-width:420px){
  .dash-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .dash-tools{width:100%;display:flex}
  .dash-search{flex:1;width:auto}
  .dash-tools .profile{display:grid}
  .dash-welcome{min-height:195px;height:auto}
  .dash-welcome-mascot{align-self:stretch;min-height:195px}
  .welcome-copy h2{font-size:clamp(16px,5vw,18px);overflow-wrap:anywhere}
  .welcome-copy p br{display:none}
  .dash-bottom a{margin-left:0}
}
/* Tablet dashboard controls wrap before the sidebar makes the header too narrow. */
.dash-search input{min-width:0}
@media(min-width:651px) and (max-width:900px){.dash-top{flex-wrap:wrap}.dash-tools{min-width:0;max-width:100%}}
@media(min-width:651px) and (max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:minmax(0,1fr)}
  .dash-bottom{flex-wrap:wrap}
}

/* Keep the main dashboard shortcut visible beside the mobile menu. */
@media(max-width:1199px){
  .site-header .header-cta.cartoon-dashboard{display:inline-flex;flex-shrink:0;margin-left:auto;margin-right:12px}
}
@media(max-width:650px){
  .site-header{gap:8px}
  .site-header .brand{min-width:0;gap:3px;font-size:clamp(18px,5.2vw,25px);letter-spacing:-1px}
  .site-header .brand-icon{width:clamp(34px,10vw,46px);height:clamp(34px,10vw,46px)}
  .site-header .header-cta.cartoon-dashboard{height:44px;min-height:44px;padding:0 12px;margin-right:0;font-size:13px}
  .site-header .header-cta .cartoon-dashboard-label{font-size:0}
  .site-header .header-cta .cartoon-dashboard-label::after{content:'Dashboard';font-size:13px;line-height:1}
  .site-header .menu-toggle{flex:0 0 44px}
  .site-header .mobile-nav .mobile-dashboard{width:calc(100% - 28px);max-width:calc(100% - 28px);justify-self:stretch;padding:0 12px;font-size:clamp(15px,4vw,18px)}
}
@media(max-width:480px){
  .bl-page>.bl-hero .bl-hero-copy .bl-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px}
  .bl-page>.bl-hero .bl-hero-copy .bl-button{width:100%;min-height:48px;text-align:center;white-space:normal}
}
@media(max-width:300px){
  .site-header .brand>span:last-child{display:none}
  .site-header .header-cta.cartoon-dashboard{padding:0 9px}
}

/* Compact mobile cards keep their copy in the flow instead of reserving desktop-height art. */
@media(max-width:650px){
  .bl-page .bl-section{padding:clamp(54px,12vw,75px) 0}
  .bl-page h2{font-size:clamp(30px,8vw,37px);line-height:1.12;overflow-wrap:break-word}
  .bl-feature{
    min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(86px,35%);
    grid-template-areas:"title title" "description description" "details mascot" "action mascot";
    gap:10px 12px;align-items:start;padding:20px
  }
  .bl-feature h3{grid-area:title;font-size:clamp(21px,6vw,25px);line-height:1.15}
  .bl-feature p{grid-area:description;max-width:none;margin:0;font-size:14px;line-height:1.5}
  .bl-feature-mini{grid-area:details;width:100%;min-width:0;margin:0;padding:11px;gap:5px}
  .bl-card-link{grid-area:action;position:static;display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:9px 12px;line-height:1.3;overflow-wrap:break-word}
  .bl-card-mascot{grid-area:mascot;position:relative;right:auto;bottom:auto;align-self:stretch;width:100%;height:100%;min-height:112px}
  .bl-card-mascot .cap-rig{max-height:155px}

  .bl-plans article{min-height:0;padding:22px}
  .bl-plans article p{margin:8px 0 14px;font-size:14px;line-height:1.5}
  .bl-plans article .bl-price{padding:15px;gap:4px}
  .bl-plans article ul{gap:9px;margin:16px 0 20px;font-size:14px;line-height:1.4}
  .bl-plans article .bl-button{min-height:48px}
  .bl-plans article.featured{margin-top:20px}
  .bl-plans .featured .bl-mascot{top:-24px;right:14px;width:78px;height:78px}
  .bl-plans .featured h3,.bl-plans .featured>p{padding-right:68px}

  .bl-use-grid a{display:grid;grid-template-columns:minmax(82px,32%) minmax(0,1fr);grid-template-areas:"image tag" "image title" "image description" "image action";align-content:start;gap:0;padding:0}
  .bl-use-grid a .bl-use-image{grid-area:image;width:100%;height:100%;min-height:160px}
  .bl-use-grid a>span{grid-area:tag;margin:16px 14px 0;font-size:10px;line-height:1.4}
  .bl-use-grid a>h3{grid-area:title;margin:7px 14px 0;font-size:clamp(19px,5.3vw,24px);line-height:1.18;overflow-wrap:break-word}
  .bl-use-grid a>p{grid-area:description;margin:8px 14px 0;font-size:14px;line-height:1.5}
  .bl-use-grid a>b{grid-area:action;margin:0 14px;padding:12px 0 16px;font-size:12px;line-height:1.3}
  .bl-principle-grid>article>div{min-height:0;padding:16px}
  .bl-principle-grid>article h3{margin:18px 12px 8px}
  .bl-principle-grid>article p,.bl-history p,.bl-audience-grid p,.bl-venue-grid p{font-size:14px;line-height:1.5}
  .bl-detail-pane{min-height:0}
  .bl-detail-graphic{height:clamp(150px,45vw,190px)}
  .bl-venue-grid article{min-height:0}
  .cap-supplied-visual{height:clamp(160px,48vw,200px)}
  .cap-supplied-card-copy{padding:16px 18px 18px}
  .cap-coffee-card{min-height:260px}
  .cap-coffee-title{top:24px}
  .cap-coffee-tile{width:clamp(120px,42vw,160px);transform:translateY(12px)}

  /* The original two narrow columns made the quote copy wrap into tall cards. */
  .cap-quote-cards .sc__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .cap-quote-cards .sc__card{display:grid;grid-template-columns:minmax(78px,32%) minmax(0,1fr);align-items:stretch}
  .cap-quote-cards .sc__media{aspect-ratio:auto;min-height:135px}
  .cap-quote-cards .sc__body{min-width:0;padding:14px}
  .cap-quote-cards .sc__title{font-size:20px;line-height:1.18}
  .cap-quote-cards .sc__text{font-size:14px;line-height:1.4;margin-bottom:10px}
  .cap-quote-cards .sc__category{font-size:10px;line-height:1.3;margin-bottom:7px}
  .cap-quote-cards .sc__detail{font-size:12px;line-height:1.3;margin-bottom:7px}
  .cap-quote-cards .sc__cta{min-height:44px;font-size:13px;line-height:1.3}
  .cap-quote-detail{padding:20px}
  .cap-quote-detail p{font-size:14px;line-height:1.5}

  .cap-hero-card{min-height:0;padding:10px;gap:6px}
  .cap-hero-icon{width:30px;height:30px;flex:none;font-size:19px}
  .cap-hero-card-kicker{font-size:10px;line-height:1.25;overflow-wrap:break-word}
  .cap-hero-card strong{font-size:14px;line-height:1.2;overflow-wrap:break-word}
  .cap-hero-card-note{font-size:11px;line-height:1.3;overflow-wrap:break-word}
}
@media(max-width:650px){
  /* Readable, short horizontal tiles instead of three very narrow tall columns. */
  .cap-hero-cards{grid-template-columns:minmax(0,1fr);gap:8px}
  .cap-hero-card{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"icon kicker arrow" "icon title arrow" "icon note arrow";column-gap:10px;row-gap:2px;padding:10px 12px;align-items:center}
  .cap-hero-icon{grid-area:icon}
  .cap-hero-card-kicker{grid-area:kicker;font-size:10px}
  .cap-hero-card strong{grid-area:title;font-size:14px}
  .cap-hero-card-note{grid-area:note;margin:0;font-size:12px}
  .cap-hero-card-arrow{grid-area:arrow;position:static;font-size:16px}
}

@media(max-width:480px){
  /* Toolkit links become readable, short rows rather than narrow columns. */
  .cap-rope-links{grid-template-columns:minmax(0,1fr)}
  .cap-rope-links a{align-items:center;min-height:48px;padding:10px 12px}
  .cap-rope-links strong{font-size:14px;line-height:1.3}
  .cap-rope-links small{font-size:12px;line-height:1.4;margin-top:3px}
}