@import url("/framework-fix.css");

/* Framework viewport containment: decorative off-canvas layers may never widen the document. */
html,
body {
  overflow-x: hidden;
}

/* SuusStudio Framework mobile width and readability correction. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html,
  body,
  .framework-shell,
  .framework-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: 17px;
  }

  .framework-nav {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 16px !important;
  }

  .framework-hero,
  .framework-section,
  .framework-section--panel,
  .framework-flowline,
  .framework-quote,
  .framework-closing,
  .framework-footer {
    width: 100vw !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .framework-hero,
  .framework-heading,
  .pillar-grid,
  .framework-card-grid,
  .framework-highlight-grid,
  .framework-scope-grid,
  .framework-included-grid,
  .framework-at-glance,
  .framework-version {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .framework-hero {
    gap: 28px !important;
    min-height: 0 !important;
    padding-top: 38px !important;
    padding-bottom: 52px !important;
  }

  .framework-hero > *,
  .framework-heading > *,
  .pillar-card,
  .framework-card,
  .framework-highlight,
  .framework-scope-card,
  .framework-included-card,
  .framework-version > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .framework-hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 22px !important;
    font-size: clamp(3.1rem, 13.5vw, 4.7rem) !important;
    line-height: 0.92 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .framework-hero-lead,
  .framework-hero-note,
  .framework-hero-panel p,
  .framework-heading > p,
  .framework-heading > div + div p,
  .framework-copy,
  .framework-card p,
  .framework-scope-card p,
  .framework-closing p,
  .framework-quote p,
  .framework-version p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  .framework-hero-panel {
    width: 100% !important;
    max-width: none !important;
    padding: 26px 22px !important;
  }

  .framework-hero-panel strong {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .framework-flowline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .framework-flowline span {
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 12px 8px !important;
    font-size: 0.7rem !important;
    line-height: 1.35;
  }

  .framework-section {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  .framework-section--panel {
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 30px 20px !important;
  }

  .framework-heading {
    gap: 18px !important;
    margin-bottom: 30px !important;
  }

  .framework-heading h2 {
    font-size: clamp(2.45rem, 11.5vw, 3.9rem) !important;
    line-height: 0.98 !important;
  }

  .pillar-grid,
  .framework-card-grid,
  .framework-highlight-grid,
  .framework-scope-grid,
  .framework-included-grid {
    gap: 14px !important;
  }

  .pillar-card,
  .framework-card,
  .framework-highlight,
  .framework-scope-card,
  .framework-included-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 26px 22px !important;
  }

  .pillar-card h2 {
    font-size: clamp(2.35rem, 10vw, 3.3rem) !important;
  }

  .framework-list li {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  .framework-highlight strong,
  .framework-at-glance strong {
    font-size: 2.35rem !important;
  }

  .framework-highlight span,
  .framework-at-glance span {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
  }

  .framework-process {
    gap: 10px !important;
  }

  .framework-process span {
    padding: 12px 15px !important;
    font-size: 0.75rem !important;
  }

  .framework-quote {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .framework-quote blockquote {
    font-size: clamp(2.7rem, 12vw, 4.2rem) !important;
    line-height: 0.98 !important;
  }

  .framework-version {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 28px 22px !important;
  }

  .framework-closing-mark {
    width: 100% !important;
    justify-content: center;
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    text-align: center;
  }

  .framework-footer {
    padding-top: 30px !important;
    padding-bottom: 38px !important;
    font-size: 0.88rem !important;
    line-height: 1.6;
  }
}