/* Toastie site layout — responsive scaffolding for the marketing pages.
   Breakpoints follow readme.md → Layout → Responsive Strategy:
   mobile <768px (1-up, hamburger nav) · tablet 768–1023px (2-up) · desktop ≥1024px. */

.t-band{padding:var(--band-y) var(--container-gutter)}
.t-band.tight{padding:var(--band-y-tight) var(--container-gutter)}
.t-wrap{max-width:var(--container-max);margin:0 auto}

.t-grid{display:grid;gap:var(--space-5)}
.t-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.t-grid-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.t-grid-4{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.t-grid-stat{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-8)}
.t-grid-plans{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6);align-items:stretch}

.t-split{display:grid;gap:var(--space-16);align-items:center;grid-template-columns:1.05fr .95fr}
.t-split.even{grid-template-columns:1fr 1fr}
.t-split.narrow{grid-template-columns:.8fr 1.2fr;align-items:start}
.t-split.top{align-items:start}
.t-split.t-hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:var(--space-10)}

.t-footer-grid{display:grid;gap:var(--space-8);grid-template-columns:1.5fr repeat(5,1fr)}

.t-nav{display:flex;gap:var(--space-5);flex:1}
.t-nav-actions{display:flex;align-items:center;gap:var(--space-4);white-space:nowrap}
.t-burger{display:none}
.t-nav-mobile{display:none}

@media (max-width:1199px){
  .t-nav{display:none}
  .t-burger{display:inline-flex}
  .t-nav-mobile.open{display:block}
  .t-split{gap:var(--space-10)}
}
@media (max-width:1100px){.t-footer-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1023px){
  :root{--band-y:64px;--band-y-tight:48px}
  .t-split,.t-split.even,.t-split.narrow,.t-split.t-hero{grid-template-columns:1fr;gap:var(--space-10)}
  .t-split.reverse>*:first-child{order:2}
}
@media (max-width:767px){
  :root{--container-gutter:20px;--band-y:48px;--band-y-tight:36px}
  .t-footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
  .t-grid{gap:var(--space-4)}
  /* Display type steps down; inline font shorthands need the override. */
  .t-hero h1{font-size:34px!important;line-height:38px!important}
  .t-band h2{font-size:28px!important;line-height:33px!important}
  .t-band h3{font-size:20px!important;line-height:26px!important}
}
@media (max-width:520px){.t-footer-grid{grid-template-columns:1fr}}