/* Responsive layouts only. Desktop (1200px+) is intentionally untouched. */

@media (max-width: 1199.98px) {
  html { font-size: 14px; max-width: 100%; overflow-x: hidden; }
  body { max-width: 100%; overflow-x: hidden; }

  .container {
    max-width: none !important;
    width: calc(100% - 48px) !important;
  }

  .site-header { position: static !important; }
  .navbar { min-height: 72px; }
  .navbar-brand img { height: auto !important; width: 160px !important; }
  .navbar-toggler { display: block !important; margin-left: auto; }
  .navbar-collapse.collapse:not(.show) { display: none !important; }
  .navbar-collapse.show,
  .navbar-collapse.collapsing { display: block !important; width: 100%; }
  .navbar-collapse { flex-basis: 100% !important; }
  .navbar-nav { align-items: stretch !important; flex-direction: column !important; padding: 16px 0 22px; }
  .navbar-nav .nav-link { font-size: 15px; margin: 0; padding: 10px 4px; }
  .navbar-nav .btn-demo { display: block; margin-top: 8px; text-align: center; }
  .dropdown-menu { box-shadow: none; margin: 0 0 8px 12px; }

  .hero,
  .intro,
  .platform-showcase,
  .feature-grid-section,
  .workflow,
  .reporting,
  .security-section,
  .comparison,
  .demo-cta,
  .pricing,
  .faq-section,
  .site-footer {
    height: auto !important;
    min-height: 0 !important;
  }

  .hero { padding: 44px 0 40px !important; }
  .hero .container { display: block !important; height: auto !important; }
  .hero .row { min-height: 0 !important; }
  .hero .row > div { max-width: 100% !important; }
  .hero .row > .col-lg-7 { order: 1 !important; margin-bottom: 24px !important; }
  .hero .row > .col-lg-5 { order: 2 !important; }
  .hero-title { font-family: "Manrope", sans-serif; line-height: 1.12; }
  .hero-image { height: auto !important; margin: 0 auto !important; max-width: 100% !important; transform: none !important; width: 100% !important; }
  .hero-trust { margin-top: 28px !important; max-width: 100% !important; width: 100% !important; }
  .metric-strip { height: auto !important; margin-top: 36px !important; min-height: 0; }

  .intro { padding: 56px 0 !important; }
  .intro .row > div { max-width: 100% !important; }
  .intro h1 { margin-bottom: 24px; }
  .intro-copy { padding-left: 0 !important; transform: none !important; }

  .platform-showcase {
    aspect-ratio: auto !important;
    margin: 24px 0 0 !important;
    overflow: hidden;
    padding: 48px 0 !important;
    width: 100% !important;
  }
  .platform-showcase .container,
  .platform-showcase .row {
    height: auto !important;
    inset: auto !important;
    margin: 0 auto !important;
    position: relative !important;
    width: calc(100% - 48px) !important;
  }
  .platform-showcase .row { display: grid !important; }
  .platform-copy,
  .platform-artwork {
    height: auto !important;
    inset: auto !important;
    max-width: none !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
    width: auto !important;
  }
  .platform-artwork img { height: auto !important; margin: 0 auto !important; max-width: 100% !important; width: 100% !important; }

  .feature-grid-section { padding: 56px 0 !important; }
  .feature-grid article { height: auto !important; min-height: 310px !important; }
  .feature-grid h3 { font-size: 21px !important; }
  .feature-grid p { font-size: 16px !important; max-height: none !important; min-height: 4.35em; overflow: visible !important; }
  .feature-grid a { font-size: 15px !important; }

  .workflow { margin-top: 0 !important; padding: 44px 0 !important; }
  .workflow .container { display: grid !important; transform: none !important; }
  .workflow-heading,
  .workflow-list { transform: none !important; }
  .workflow-list li::after { display: none !important; }

  .reporting { overflow: visible !important; padding: 64px 0 !important; }
  .reporting .row { margin: 0 !important; }
  .reporting-copy { transform: none !important; }
  .graph-grid { padding: 0 !important; }
  .measure-grid { margin-top: 34px !important; }

  .security-section { margin: 36px 0 !important; padding: 48px 0 !important; }
  .security-section .row { margin: 0 !important; }
  .security-copy,
  .security-shield img { transform: none !important; }
  .security-shield img { display: block; margin: 24px auto !important; max-width: 100% !important; }

  .comparison { padding: 60px 0 !important; }
  .comparison-layout { height: auto !important; position: relative; }
  .comparison .compare-list,
  .comparison-versus,
  .comparison-phone,
  .comparison .benefit-cards {
    inset: auto !important;
    max-width: none !important;
    position: relative !important;
    transform: none !important;
    width: auto !important;
  }
  .comparison .compare-list li { white-space: normal !important; }
  .comparison-phone img { display: block; height: auto !important; margin: auto; max-height: 500px; width: auto !important; }
  .comparison .benefit-cards { height: auto !important; }
  .comparison .benefit-cards > div { height: 120px !important; }

  .demo-cta { padding: 44px 0 !important; }
  .demo-cta-inner { display: grid !important; gap: 30px; padding-left: 0 !important; }
  .demo-cta-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 0 !important; }
  .demo-cta .btn { min-width: 210px; }

  .pricing { overflow: visible !important; padding: 60px 0 !important; }
  .pricing-grid article { height: auto !important; min-height: 530px !important; }

  .faq-section { padding: 52px 0 64px !important; }
  .faq-grid { margin-top: 38px !important; }

  .site-footer {
    aspect-ratio: auto !important;
    overflow: visible !important;
    padding: 56px 0 30px !important;
  }
  .site-footer .footer-brand img { height: auto !important; max-width: 250px !important; width: 100% !important; }
  .site-footer .row { display: grid; }
  .site-footer .row > * { max-width: none; width: auto; }
  .footer-certifications { display: grid !important; padding-left: 0 !important; padding-right: 0 !important; }
  .footer-legal { display: none !important; }
}

/* iPad landscape and similarly sized tablets. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container { width: calc(100% - 64px) !important; }

  .hero .row { display: grid; grid-template-columns: 46% 54%; }
  .hero-title { font-size: 40px !important; }
  .hero-copy { font-size: 16px !important; }
  .hero-trust { grid-template-columns: repeat(3, 1fr) !important; width: min(720px, 100%) !important; }
  .metric-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .metric-strip > div { min-height: 72px; }

  .intro .row { display: grid; grid-template-columns: 48% 52%; }
  .intro h1 { font-size: 40px !important; }
  .intro-copy { font-size: 16px !important; padding-left: 26px !important; }

  .platform-showcase .row { align-items: center; grid-template-columns: 32% 68%; gap: 24px; }
  .platform-showcase h2 { font-size: 36px !important; }
  .platform-showcase p:not(.eyebrow) { font-size: 16px !important; }

  .feature-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }

  .workflow .container { grid-template-columns: 26% 74% !important; gap: 20px; }
  .workflow-list { grid-template-columns: repeat(7, 1fr) !important; }
  .workflow-list img { height: 70px !important; width: 70px !important; }
  .workflow-list li { font-size: 13px !important; }

  .reporting .row { display: grid !important; grid-template-columns: 46% 54% !important; gap: 50px !important; }
  .reporting h2 { font-size: 36px !important; }
  .measure-grid { grid-template-columns: repeat(4, 1fr) !important; row-gap: 24px; }

  .security-section .row { display: grid !important; grid-template-columns: 30% 24% 46% !important; }
  .security-section h2 { font-size: 31px !important; }
  .security-shield img { height: 210px !important; width: 270px !important; }
  .security-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 24px 0; }
  .security-grid > div:nth-child(4) { border-left: 0 !important; }

  .comparison-layout {
    display: grid !important;
    gap: 40px 28px !important;
    grid-template-columns: 1fr 80px 1fr !important;
  }
  .comparison .without { grid-column: 1; grid-row: 1; }
  .comparison-versus { align-self: center; grid-column: 2; grid-row: 1; height: 72px; justify-self: center; width: 72px !important; }
  .comparison .with { grid-column: 3; grid-row: 1; }
  .comparison-phone { grid-column: 1 / 2; grid-row: 2; }
  .comparison .benefit-cards { grid-column: 2 / 4; grid-row: 2; grid-template-rows: repeat(3, 120px) !important; }

  .demo-cta-inner { grid-template-columns: 1fr auto !important; }
  .demo-cta h2 { font-size: 34px !important; }
  .demo-cta h2 small { font-size: 24px !important; }

  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  .faq-grid { grid-template-columns: repeat(2, 1fr) !important; column-gap: 34px !important; }

  .site-footer .row { grid-template-columns: 1.4fr repeat(3, 1fr) !important; gap: 36px 24px; }
  .site-footer .row > :last-child { grid-column: 1 / -1; }
  .footer-certifications { grid-template-columns: repeat(2, 1fr) !important; gap: 30px; }
}

/* iPad portrait. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container { width: calc(100% - 48px) !important; }

  .hero { text-align: left !important; }
  .hero .row { display: grid; gap: 32px; grid-template-columns: 1fr; }
  .hero-title { font-size: 44px !important; max-width: 650px; }
  .hero-copy { font-size: 17px !important; max-width: 600px; }
  .hero-image { max-width: 760px !important; }
  .hero-trust { grid-template-columns: repeat(3, 1fr) !important; }
  .metric-strip { grid-template-columns: repeat(3, 1fr) !important; }

  .intro .row { display: grid; grid-template-columns: 1fr; }
  .intro h1 { font-size: 42px !important; max-width: 700px; }
  .intro-copy { font-size: 17px !important; }

  .platform-showcase .row { gap: 38px; grid-template-columns: 1fr; }
  .platform-copy { max-width: 600px !important; }
  .platform-showcase h2 { font-size: 40px !important; }

  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  .workflow .container { gap: 32px; grid-template-columns: 1fr !important; text-align: left !important; }
  .workflow-heading { padding-left: 0 !important; }
  .workflow-list { grid-template-columns: repeat(4, 1fr) !important; gap: 26px 14px; }
  .workflow-list img { height: 76px !important; width: 76px !important; }

  .reporting .row { display: grid !important; gap: 52px !important; grid-template-columns: 1fr !important; }
  .graph-grid { gap: 18px !important; }
  .reporting h2 { font-size: 40px !important; }
  .measure-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px 12px; }

  .security-section .row { display: grid !important; grid-template-columns: 1fr !important; text-align: center; }
  .security-copy { padding: 0 !important; }
  .security-section h2,
  .security-section .security-copy p { margin-left: auto !important; margin-right: auto !important; }
  .security-shield img { height: 250px !important; width: 330px !important; }
  .security-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 30px 0; }
  .security-grid > div:nth-child(4) { border-left: 0 !important; }

  .comparison-layout { display: grid !important; gap: 36px 20px !important; grid-template-columns: 1fr 72px 1fr !important; }
  .comparison .without { grid-column: 1; grid-row: 1; }
  .comparison-versus { align-self: center; grid-column: 2; grid-row: 1; height: 64px; justify-self: center; width: 64px !important; }
  .comparison .with { grid-column: 3; grid-row: 1; }
  .comparison-phone { grid-column: 1 / -1; grid-row: 2; }
  .comparison .benefit-cards { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, 1fr); }

  .demo-cta-inner { grid-template-columns: 1fr !important; text-align: center; }
  .demo-cta-actions { justify-content: center; }

  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
  .faq-grid { grid-template-columns: 1fr !important; }

  .site-footer .row { grid-template-columns: repeat(2, 1fr) !important; gap: 42px 28px; }
  .footer-certifications { grid-template-columns: repeat(2, 1fr) !important; gap: 28px; }
}

/* Shared mobile layout. */
@media (max-width: 767.98px) {
  html { font-size: 14px; }
  .container { width: calc(100% - 24px) !important; }
  .navbar { min-height: 64px; }
  .navbar-brand img { width: 145px !important; }

  .hero { padding: 34px 0 !important; text-align: left !important; }
  .hero .row { display: grid; gap: 28px; }
  .hero-title { font-size: 34px !important; }
  .hero-copy { font-size: 16px !important; }
  .hero-trust { font-size: 10px !important; grid-template-columns: repeat(3, 1fr) !important; }
  .hero-trust li { grid-template-columns: 30px 1fr !important; padding: 0 5px !important; }
  .hero-trust img { height: 28px !important; width: 30px !important; }
  .metric-strip { grid-template-columns: repeat(2, 1fr) !important; padding: 12px 8px !important; }
  .metric-strip > div { border-bottom: 1px solid #b5d8da; min-height: 66px; }

  .intro { padding: 44px 0 !important; }
  .intro h1 { font-size: 34px !important; }
  .intro-copy { font-size: 16px !important; }

  .platform-showcase { padding: 42px 0 50px !important; }
  .platform-showcase .container,
  .platform-showcase .row { width: calc(100% - 24px) !important; }
  .platform-showcase .row { gap: 32px; grid-template-columns: 1fr; }
  .platform-showcase h2 { font-size: 34px !important; }
  .platform-showcase p:not(.eyebrow) { font-size: 16px !important; }

  .feature-grid-section { padding: 44px 0 !important; }
  .feature-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .feature-grid article { min-height: 330px !important; }

  .workflow { padding: 42px 0 !important; }
  .workflow .container { gap: 30px; grid-template-columns: 1fr !important; text-align: left !important; }
  .workflow-heading { padding: 0 !important; }
  .workflow h2 { font-size: 30px !important; }
  .workflow-list { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 14px; }
  .workflow-list img { height: 72px !important; width: 72px !important; }
  .workflow-list li { font-size: 14px !important; }

  .reporting { padding: 48px 0 !important; }
  .reporting .row { display: grid !important; gap: 42px !important; grid-template-columns: 1fr !important; }
  .graph-grid { gap: 12px !important; }
  .reporting h2 { font-size: 34px !important; }
  .measure-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 12px; }

  .security-section { padding: 42px 0 !important; }
  .security-section .row { display: grid !important; grid-template-columns: 1fr !important; text-align: center; }
  .security-copy { padding: 0 !important; }
  .security-section h2 { font-size: 32px !important; margin-left: auto !important; margin-right: auto !important; }
  .security-section .security-copy p { font-size: 16px !important; margin-left: auto !important; margin-right: auto !important; }
  .security-shield img { height: 220px !important; width: 290px !important; }
  .security-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 0; }
  .security-grid > div:nth-child(odd) { border-left: 0 !important; }

  .comparison { padding: 48px 0 !important; }
  .comparison-layout { grid-template-columns: 1fr !important; }
  .comparison .without,
  .comparison-versus,
  .comparison .with,
  .comparison-phone,
  .comparison .benefit-cards { grid-column: 1 !important; grid-row: auto !important; }
  .comparison-versus { height: 64px; justify-self: center; width: 64px !important; }
  .comparison .compare-list h3 { font-size: 17px !important; }
  .comparison .compare-list li { font-size: 16px !important; }
  .comparison-phone img { max-height: 430px; }
  .comparison .benefit-cards { gap: 16px !important; grid-template-columns: 1fr !important; }
  .comparison .benefit-cards > div { height: 110px !important; }

  .demo-cta { padding: 38px 0 !important; text-align: center; }
  .demo-cta-inner { grid-template-columns: 1fr !important; }
  .demo-cta h2 { font-size: 30px !important; }
  .demo-cta h2 small { font-size: 20px !important; }
  .demo-cta-actions { display: grid !important; justify-content: stretch; }
  .demo-cta .btn { min-width: 0 !important; width: 100%; }

  .pricing { padding: 48px 0 !important; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .pricing-grid article { min-height: 520px !important; }

  .faq-section { padding: 46px 0 56px !important; }
  .faq-section h2 { font-size: 30px !important; }
  .faq-grid { grid-template-columns: 1fr !important; margin-top: 32px !important; }
  .faq-grid .accordion-button { font-size: 15px !important; min-height: 56px !important; }

  .site-footer { padding: 48px 0 28px !important; }
  .site-footer .row { grid-template-columns: 1fr !important; gap: 34px; }
  .site-footer .footer-brand img { max-width: 230px !important; }
  .footer-certifications { grid-template-columns: 1fr !important; gap: 26px; }
  .footer-certifications > span { justify-content: flex-start !important; }
}

/* Mobile landscape: use available width without reverting to desktop composition. */
@media (min-width: 568px) and (max-width: 767.98px) and (orientation: landscape) {
  .container { width: calc(100% - 40px) !important; }
  .hero .row { align-items: center; grid-template-columns: 47% 53%; }
  .hero-title { font-size: 31px !important; }
  .hero-trust { grid-column: 1 / -1; }
  .metric-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .platform-showcase .row { grid-template-columns: 36% 64%; }
  .feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .workflow-list { grid-template-columns: repeat(4, 1fr) !important; }
  .measure-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .security-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .security-grid > div:nth-child(odd) { border-left: 3px solid rgba(255,255,255,.85) !important; }
  .security-grid > div:nth-child(3n+1) { border-left: 0 !important; }
  .comparison-layout { grid-template-columns: 1fr 64px 1fr !important; }
  .comparison .without { grid-column: 1 !important; grid-row: 1 !important; }
  .comparison-versus { grid-column: 2 !important; grid-row: 1 !important; }
  .comparison .with { grid-column: 3 !important; grid-row: 1 !important; }
  .comparison-phone { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  .comparison .benefit-cards { grid-column: 1 / -1 !important; grid-row: 3 !important; grid-template-columns: repeat(3, 1fr) !important; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .site-footer .row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Small mobile portrait refinements. */
@media (max-width: 420px) and (orientation: portrait) {
  .hero-title { font-size: 31px !important; }
  .hero-trust { grid-template-columns: 1fr !important; gap: 14px !important; }
  .hero-trust li { border-left: 0 !important; border-bottom: 1px solid rgba(17,157,164,.3); padding: 8px 0 !important; }
  .metric-strip { grid-template-columns: 1fr !important; }
  .feature-grid article { min-height: 310px !important; }
  .security-grid { grid-template-columns: 1fr !important; }
  .security-grid > div { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.35); padding: 20px 0 !important; }
  .comparison .compare-list li { white-space: normal !important; }
}