/* Responsive layout overrides for the exported HTML. !important is scoped
   to layout properties that already have inline values in that document. */
@media (max-width: 860px) {
  html { scroll-padding-top: 88px; }
  .header-inner { gap: 12px !important; padding-inline: 20px !important; }
  .site-header nav { gap: 12px !important; }
  .header-actions { gap: 6px !important; }
  .header-actions a { padding: 10px !important; font-size: 13px; white-space: nowrap; }
  .page-content { padding: 80px 24px !important; gap: 40px !important; }
  .curriculum-content { padding: 8px 0 0 !important; }
  .layout-grid, .career-grid { gap: 28px !important; }
  .layout-grid > *, .career-grid > *, .day-row > *, .week-row > *, .terms-row > * { min-width: 0; }
  .career-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
  .career-card, .career-label, .interview-card, .modal-body { overflow-wrap: anywhere; }
  .comparison-heading, .day-heading, .week-heading { display: none !important; }
  .comparison-row, .day-row, .week-row, .terms-row { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .comparison-row { gap: 12px !important; padding-block: 20px !important; }
  .comparison-row > :first-child { font-size: 17px; }
  [data-mobile-label]::before {
    content: attr(data-mobile-label);
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-700);
  }
  .day-row > :first-child, .week-row > :first-child {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px !important;
  }
  .day-table { padding-inline: 20px !important; }
  .week-table { min-width: 0 !important; }
  .week-scroll { overflow: visible !important; }
  .week-row { padding-block: 24px !important; }
  .week-row:last-child { padding-bottom: 0 !important; }
  .career-start { padding: 28px 24px !important; }
  .modal-backdrop { left: 0 !important; padding: 16px !important; }
  .modal-panel { max-height: calc(100dvh - 32px) !important; }
  .modal-media image-slot { width: 100% !important; height: 100% !important; }
  .modal-body { min-width: 0; padding: 28px 24px !important; }
  .modal-close { width: 44px !important; height: 44px !important; }
}

@media (max-width: 640px) {
  .header-inner { height: auto !important; min-height: 68px; padding-block: 10px !important; }
  .page-content { padding: 64px 20px !important; gap: 32px !important; }
  .page-content h2 { font-size: clamp(28px, 7.6vw, 36px) !important; line-height: 1.25 !important; }
  .layout-grid, .career-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .hero-content { padding: 56px 20px 48px !important; gap: 40px !important; }
  .hero-content > :first-child { gap: 28px !important; }
  .hero-kicker { font-size: clamp(20px, 5.5vw, 24px) !important; letter-spacing: 0.02em !important; }
  .hero-content h1 { margin-top: 0 !important; font-size: clamp(56px, 15vw, 80px) !important; }
  .hero-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
  .hero-actions a { width: 100% !important; min-height: 48px; padding: 14px 10px !important; font-size: 16px !important; text-align: center; }
  .hero-meta { padding-top: 24px !important; gap: 20px !important; }
  .manifesto-content p { font-size: clamp(26px, 7.5vw, 36px) !important; }
  .intro-image { aspect-ratio: 4 / 3 !important; }
  .intro-image > div { padding: 24px !important; }
  .skill-card { display: flex !important; flex-direction: column; grid-row: auto !important; gap: 16px !important; padding: 24px !important; }
  .comparison-details { padding-inline: 16px !important; }
  .curriculum-content { padding: 0 !important; gap: 32px !important; }
  .stage-card { padding: 24px 20px !important; }
  .career-chart { gap: 20px; }
  .career-branches { display: none !important; }
  .career-card { padding: 24px !important; min-height: 0 !important; }
  .interview-card { padding: 24px !important; min-height: 0 !important; gap: 24px !important; }
  .interview-card > :last-child > :first-child { align-items: flex-start !important; }
  .modal-panel { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; }
  .modal-body { padding: 24px !important; }
  .session-card { padding: 24px !important; }
  #session > .page-content { padding-top: 0 !important; }
  #session h3 { font-size: 28px !important; }
  #session .session-card > :last-child > div > div { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 12px !important; }
  #session .session-card > :last-child > div > div > :first-child { font-size: 20px !important; }
  #session .session-card a { width: 100%; min-height: 48px; text-align: center; padding: 16px !important; }
  #benefit .page-content > :last-child { margin-top: 24px !important; gap: 32px !important; }
  #process .terms-row { padding-block: 24px !important; }
  #process .terms-row > :first-child { font-size: 18px !important; }
  #faq summary { font-size: 16px !important; }
  #apply .page-content { padding-block: 80px !important; }
  #apply .page-content h2 { font-size: clamp(36px, 10vw, 48px) !important; }
  #apply .page-content a { width: 100%; max-width: 320px; padding: 18px 20px !important; }
  .footer-content { padding: 32px 20px !important; flex-direction: column; align-items: flex-start !important; font-size: 13px !important; line-height: 1.7; }
}

@media (max-width: 360px) {
  html { scroll-padding-top: 126px; }
  .header-inner { flex-wrap: wrap; }
  .site-header nav { width: 100%; }
  .header-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .header-actions a { text-align: center; }
}