/* B2 homepage: tablet and phone calibration of the board's inline styles.
   The board is drawn at 1280 px; these rules key on its inline style values. */

/* notebook prompts ("In [1]:") on one line */
.b2-home [style*="flex: 0 0 50px"]{flex-basis:60px !important;white-space:nowrap}

/* ---------- tablets (up to 900 px) ---------- */
@media (max-width:900px){
  .b2-home h1[style*="font-size: 68px"]{font-size:52px !important}
  .b2-home [style*="font-size: 44px"],.b2-home [style*="font-size: 48px"]{font-size:36px !important}
  .b2-home blockquote[style*="font-size: 46px"]{font-size:36px !important}
  /* roadmap stages: one scrolling row of tabs, the connecting line hidden */
  .b2-home div:has(> [role=tablist][aria-label="Roadmap stages"]) > div[aria-hidden]{display:none}
  .b2-home [role=tablist][aria-label="Roadmap stages"]{display:flex !important;gap:6px !important;overflow-x:auto;scroll-snap-type:x proximity;
    margin:0 -28px;padding:8px 28px 20px !important;scrollbar-width:thin}
  .b2-home [role=tablist][aria-label="Roadmap stages"] > button{flex:0 0 96px;scroll-snap-align:start}
  /* comparison table fits a tablet without scrolling */
  .b2-home table[style*="min-width: 720px"]{min-width:600px !important}
}

/* ---------- phones (up to 640 px) ---------- */
@media (max-width:640px){
  /* side gutters: 40 px on the board, 20 px here */
  .b2-home [style*="padding: 96px 40px"]{padding:64px 20px !important}
  .b2-home [style*="padding: 96px 40px 88px"]{padding:56px 20px 56px !important}
  .b2-home [style*="padding: 104px 40px"]{padding:64px 20px !important}
  .b2-home [style*="padding: 104px 40px 0"]{padding:64px 20px 0 !important}
  .b2-home [style*="padding: 96px 40px 0"]{padding:64px 20px 0 !important}
  .b2-home [style*="padding: 36px 40px 0"]{padding:28px 20px 0 !important}
  .b2-home [style*="padding: 48px 40px 96px"]{padding:36px 20px 64px !important}
  .b2-home [style*="padding: 64px 40px 80px"]{padding:36px 20px 48px !important;gap:36px !important}
  .b2-home [style*="padding: 8px 40px"]{padding:8px 16px !important}
  .b2-home [style*="padding: 0 40px"]{padding:0 20px !important}
  .b2-home section[style*="margin-top: 104px"]{margin-top:64px !important}

  /* type scale */
  .b2-home h1[style*="font-size: 68px"]{font-size:40px !important;line-height:1.06 !important;letter-spacing:-.02em !important}
  .b2-home p[style*="font-size: 19px"]{font-size:17px !important}
  .b2-home [style*="font-size: 44px"],.b2-home [style*="font-size: 48px"]{font-size:30px !important;line-height:1.15 !important}
  .b2-home blockquote[style*="font-size: 46px"]{font-size:28px !important;line-height:1.25 !important}
  .b2-home [style*="font-size: 34px"]{font-size:26px !important}
  .b2-home h3[style*="font-size: 28px"]{font-size:22px !important}
  .b2-home blockquote[style*="font-size: 21px"]{font-size:19px !important}

  /* hero visual: the video card on its own, the two small cards stacked under it */
  .b2-home [style*="padding: 24px 0 64px 28px"]{padding:0 !important;display:flex;flex-direction:column;gap:12px;flex-basis:100% !important}
  .b2-home .hx-float,.b2-home .hx-float2{position:static !important;width:auto !important;animation:none !important}
  .b2-home .hx-float2{order:2}
  .b2-home .hx-vid [style*="font-size: 26px"]{font-size:20px !important}
  .b2-home .hx-vid [style*="width: 76px"]{width:60px !important;height:60px !important;margin:-30px 0 0 -30px !important}

  /* roadmap card */
  .b2-home [style*="padding: 26px 28px 0"]{padding:18px 16px 0 !important}
  .b2-home [style*="padding: 26px 28px 0"] > div:first-child{display:none !important}
  .b2-home [role=tablist][aria-label="Roadmap stages"]{margin:0 -16px;padding:8px 16px 18px !important}
  .b2-home [role=tablist][aria-label="Roadmap stages"] > button{flex-basis:84px}
  .b2-home .hx-stage > div{padding:22px 0 24px !important;gap:24px !important}

  /* comparison table: the feature column and the ML+ column stay put, the other three scroll between them */
  .b2-home table[style*="min-width: 720px"]{min-width:520px !important;font-size:13.5px !important}
  .b2-home table[style*="min-width: 720px"] tr > :first-child{position:sticky;left:0;z-index:1;background:#FFFFFF;
    width:128px !important;min-width:128px;padding:12px 10px 12px 2px !important;box-shadow:8px 0 8px -8px rgba(26,34,51,.22)}
  .b2-home table[style*="min-width: 720px"] tr > :last-child{position:sticky;right:0;z-index:1;
    width:92px !important;min-width:92px;box-shadow:-8px 0 8px -8px rgba(26,34,51,.22)}
  .b2-home table[style*="min-width: 720px"] thead th:last-child{font-size:15px !important;line-height:1.2;padding:14px 8px !important}
  .b2-home table[style*="min-width: 720px"] thead th:not(:first-child):not(:last-child){font-size:12.5px;line-height:1.3}

  /* "Everything you need" cards */
  .b2-home li[style*="min-height: 260px"]{min-height:190px !important;padding:16px !important}
  .b2-home li[style*="min-height: 260px"] [style*="font-size: 23px"]{font-size:19px !important}
  .b2-home ul[style*="minmax(min(240px, 100%), 1fr)"] li{border-left:0 !important;border-top:1px solid #ECEFF3}
  .b2-home ul[style*="minmax(min(240px, 100%), 1fr)"] li:first-child{border-top:0}

  /* video testimonials: one card and a bit per screen */
  .b2-home .hx-track > li{flex:0 0 78vw !important}
  /* course filter pills wrap under the heading */
  .b2-home [style*="font-size: 176px"]{font-size:140px !important}
}
@media (prefers-reduced-motion:reduce){
  .b2-home .hx-float,.b2-home .hx-float2{animation:none !important}
}