:root{
  --topbar-mobile-offset:84px;
  --site-mobile-gutter:16px;
  --site-mobile-gutter-tight:12px;
}

html{
  scroll-padding-top:96px;
}

body{
  overflow-x:hidden;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
}

img,
video,
canvas{
  height:auto;
}

.container,
.panel,
.hero-card,
.hero-main,
.hero-side,
.hero-media,
.book-card,
.course-card,
.resource-card,
.timeline-card,
.result,
.field,
.path-card,
.path-step,
.method-card,
.access-card,
.default-card,
.asset-card,
.card{
  min-width:0;
}

.nav-menu{
  z-index:40;
  min-width:300px;
  max-width:min(360px, calc(100vw - 24px));
}

.nav-menu a{
  align-items:flex-start;
}

.btn{
  min-height:48px;
}

@media (max-width:1024px){
  body{
    overflow-x:hidden;
  }

  .container{
    padding:0 var(--site-mobile-gutter) !important;
  }

  .topbar-inner{
    align-items:flex-start !important;
    gap:14px !important;
    padding:14px var(--site-mobile-gutter) !important;
  }

  .brand{
    min-width:0;
  }

  .brand-copy{
    min-width:0;
  }

  .nav{
    width:100% !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:visible;
    padding-bottom:4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .nav > *{
    flex:0 0 auto;
  }

  .nav a,
  .nav summary{
    white-space:nowrap;
  }

  .nav-dropdown{
    position:static !important;
  }

  .nav-dropdown[open] .nav-menu{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    top:var(--topbar-mobile-offset) !important;
    min-width:0 !important;
    max-height:calc(100vh - var(--topbar-mobile-offset) - 16px);
    overflow:auto;
    border-radius:20px;
  }

  .nav-menu a{
    white-space:normal;
  }

  body.nav-menu-open{
    overflow:hidden;
  }

  .hero-shell,
  .hero-grid,
  .hero-stats,
  .duo,
  .grid-2,
  .grid-3,
  .grid-4,
  .resource-grid,
  .catalog,
  .catalog-grid,
  .course-grid,
  .tool-layout,
  .tool-metrics,
  .asset-band,
  .map-grid,
  .method-grid,
  .access-grid,
  .default-grid,
  .route-grid,
  .calculator-shell,
  .legend-grid,
  .why-grid,
  .blueprint-shell{
    grid-template-columns:1fr !important;
  }

  .hero-main,
  .hero-side,
  .hero-card,
  .hero-media,
  .section-head,
  .pad,
  .footer-panel,
  .calculator-shell,
  .calculator-legend{
    padding:22px !important;
  }

  .panel,
  .hero-card,
  .hero-main,
  .hero-side,
  .hero-media,
  .book-card,
  .course-card,
  .resource-card,
  .timeline-card{
    border-radius:24px !important;
  }

  .section-head p,
  .section-head-wide p,
  .hero p,
  .hero-card p,
  .hero-main p,
  .hero-side p{
    max-width:none !important;
  }

  .hero h1,
  .hero-main h1{
    font-size:clamp(2.8rem, 10vw, 4.8rem) !important;
    line-height:.94 !important;
  }

  .section-head h2,
  .hero-side h2{
    font-size:clamp(2rem, 6vw, 3.2rem) !important;
    line-height:1.05 !important;
  }

  .timeline-card h3,
  .resource-card h3,
  .course-card h3,
  .book-card h3{
    font-size:clamp(1.75rem, 5vw, 2.35rem) !important;
  }

  .hero-actions,
  .hero-image-actions,
  .tool-actions,
  .path-toolbar{
    width:100%;
    flex-wrap:wrap !important;
  }

  .hero-actions .btn,
  .hero-image-actions .btn,
  .tool-actions .btn{
    flex:1 1 calc(50% - 6px);
  }

  .blueprint-sidebar,
  .blueprint-route,
  .result-panel{
    position:static !important;
    top:auto !important;
  }

  .book-cover-wrap{
    max-width:220px;
    margin-inline:auto;
  }

  .hero-side-image{
    align-self:auto !important;
  }

  .hero-image-card{
    flex:none !important;
  }

  .hero-image-card img{
    height:auto !important;
    object-fit:contain !important;
  }

  .book-rail,
  .book-actions{
    width:100%;
  }
}

@media (max-width:720px){
  .container{
    padding:0 var(--site-mobile-gutter-tight) !important;
  }

  .nav-dropdown[open] .nav-menu{
    left:var(--site-mobile-gutter-tight) !important;
    right:var(--site-mobile-gutter-tight) !important;
  }

  .hero-main,
  .hero-side,
  .hero-card,
  .hero-media,
  .section-head,
  .pad,
  .footer-panel,
  .calculator-shell,
  .calculator-legend{
    padding:18px !important;
  }

  .hero h1,
  .hero-main h1{
    font-size:clamp(2.2rem, 13vw, 3.55rem) !important;
  }

  .section-head h2,
  .hero-side h2{
    font-size:clamp(1.75rem, 8vw, 2.55rem) !important;
  }

  input,
  select,
  textarea{
    font-size:16px !important;
  }

  .hero-actions{
    width:100%;
  }

  .hero-actions .btn{
    flex:1 1 100%;
    width:100%;
  }

  .hero-image-actions .btn,
  .tool-actions .btn{
    flex:1 1 100%;
    width:100%;
  }

  .hero-side-image{
    gap:12px !important;
    padding:14px !important;
    display:block !important;
  }

  .hero-image-card{
    max-height:none !important;
    margin:0 0 12px 0 !important;
    border-radius:20px !important;
    overflow:visible !important;
  }

  .hero-image-card img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
  }

  .hero-image-actions{
    margin-top:0 !important;
    gap:10px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .hero-image-actions .btn{
    min-height:44px !important;
    padding:12px 14px !important;
    font-size:15px !important;
  }

  .catalog,
  .cards,
  .grid-3,
  .grid-2,
  .result-grid,
  .legend-grid,
  .tool-metrics,
  .hero-grid,
  .hero-shell,
  .tool-layout,
  .calculator-shell{
    grid-template-columns:1fr !important;
  }

  .form-grid,
  .result-grid{
    grid-template-columns:1fr !important;
  }

  .path-toolbar{
    align-items:stretch !important;
    gap:10px !important;
  }

  .path-toolbar a,
  .path-dropdown,
  .country-dropdown{
    flex:1 1 100%;
    width:100%;
  }

  .path-dropdown summary,
  .country-dropdown summary{
    width:100%;
    justify-content:space-between;
  }

  .path-dropdown-menu{
    width:100% !important;
    min-width:0 !important;
    left:0 !important;
    right:auto !important;
  }

  .timeline{
    gap:18px !important;
  }

  .timeline::before{
    left:20px !important;
  }

  .timeline-step{
    grid-template-columns:56px minmax(0, 1fr) !important;
    gap:12px !important;
  }

  .timeline-stop{
    min-width:56px !important;
  }

  .timeline-card{
    padding:18px !important;
  }

  .timeline-card h3{
    font-size:clamp(1.55rem, 7vw, 2rem) !important;
  }

  .blueprint-summary h3{
    font-size:clamp(1.75rem, 7vw, 2.25rem) !important;
  }

  .resource-card h3,
  .course-card h3,
  .book-card h3{
    font-size:clamp(1.5rem, 7vw, 1.95rem) !important;
  }
}

@media (max-width:560px){
  .brand-copy strong{
    font-size:1.15rem;
  }

  .brand-copy span{
    font-size:.95rem;
  }

  .nav a,
  .nav summary{
    padding:10px 13px;
    font-size:13px;
  }

  .btn{
    width:100%;
  }

  .book-cover-wrap{
    max-width:190px;
  }

  .hero-side-image{
    padding:12px !important;
  }

  .hero-image-card{
    margin-bottom:10px !important;
  }

  .hero-image-actions .btn{
    font-size:14px !important;
    padding:11px 12px !important;
  }
}