/* =========================================================
   Dr. Marketo - mascot UI refinements
   Loaded AFTER css/style.css. It only adjusts where the
   character sits and how large he is at each screen size.
   Nothing here changes the original page design.
   ========================================================= */

/* ---------- 1. Desktop (1301px and up): calmer sizes ---------- */
.hero-grid{grid-template-columns:.95fr 1.15fr}
.hero-visual{padding-left:84px}
.hero-mascot{width:210px;left:-84px;bottom:-18px}
.hero-notes{max-width:440px}

.purpose-mascot{width:130px;top:-40px}

.why-panel{padding-right:160px}
.why-mascot{width:150px}

.cta-grid{grid-template-columns:200px 1fr;gap:36px}
.cta-mascot{width:200px}

.hb-mascot{width:86px;flex-basis:86px;margin:-32px 4px -32px -6px}

.rail-mascot .mascot{left:12%;right:12%;width:76%}

.about-mascot{width:176px;left:-56px;bottom:-14px}
.pricing-mascot{width:64%}
.contact-mascot{width:160px}
.auth-mascot{width:160px}
.oops-mascot{width:170px}
.ty-mascot{width:150px}

/* ---------- 2. Laptops 1025–1300px: keep the dashboard readable ---------- */
@media (max-width:1300px){
  .hero-grid{grid-template-columns:45fr 55fr;gap:40px}
  .hero-visual{padding-left:56px}
  .hero-mascot{width:186px;left:-84px;bottom:-14px}
  .hero .lead,.hero-notes,.mood-chips{max-width:380px}
  /* campaigns table takes the full mock width instead of sharing with the donut */
  .mock-split{grid-template-columns:1fr}
  .about-mascot{width:150px;left:-30px}
}
@media (max-width:1180px){
  .hero-grid{gap:32px}
  .hero-visual{padding-left:44px}
  .hero-mascot{width:170px;left:-92px}
  .hero .lead,.hero-notes,.mood-chips{max-width:340px}
  .why-panel{padding-right:24px}
  .why-mascot{position:static;width:140px;margin:16px auto -6px}
}

/* ---------- 3. Stacked layout ≤1024px ----------
   Re-asserts the centred hero character; a later desktop rule in
   style.css was otherwise leaking a -92px offset into mobile. */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-visual{padding-left:0}
  .hero-mascot{position:relative;left:auto;bottom:auto;width:160px;margin:0 auto 14px}
  .hero .lead,.hero-notes,.mood-chips{max-width:none}
  .mock-split{grid-template-columns:1.5fr 1fr}
  .cta-mascot{width:160px}
  .about-mascot{left:8px;bottom:-10px;width:130px}
  .pricing-mascot{width:140px}
}

/* ---------- 4. Phones ---------- */
@media (max-width:760px){
  .hero-mascot{width:150px}
  .mock-split{grid-template-columns:1fr}
  .contact-mascot,.auth-mascot,.oops-mascot,.ty-mascot{width:140px}
}

/* ---------- 5. Pricing ≤1160px ----------
   style.css spans .include-panel across the row at this width, but it now
   sits inside .pricing-side, so the wrapper must span instead - and the
   character rides alongside the list rather than under a squeezed column. */
@media (max-width:1160px){
  .pricing-side{grid-column:1 / -1;flex-direction:row;align-items:center;gap:28px}
  .pricing-side .include-panel{flex:1 1 auto;grid-column:auto}
  .pricing-mascot{width:150px;flex:0 0 150px;margin:0}
}
@media (max-width:760px){
  .pricing-side{flex-direction:column;align-items:stretch}
  .pricing-mascot{width:140px;margin:6px auto 0}
}