/* Solomon-app mobile responsive fixes v2026-07-17
   Adds mobile-safe layouts across service pages without changing desktop design. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html, body{
  max-width:100%;
  overflow-x:hidden;
}
*, *::before, *::after{
  box-sizing:border-box;
}
img, svg, video, canvas, iframe{
  max-width:100%;
  height:auto;
}
pre, code{
  white-space:pre-wrap;
  word-break:break-word;
}

/* Safer default for long Japanese/English mixed text */
p, li, dd, dt, th, td, h1, h2, h3, h4, h5, h6, a, button, label, span, div{
  overflow-wrap:anywhere;
}

@media (max-width: 900px){
  body.has-fixed-header{
    padding-top:0 !important;
  }
  .site-header,
  header.site-header{
    position:sticky !important;
    top:0 !important;
    height:auto !important;
    min-height:0 !important;
    z-index:9999 !important;
  }
  .site-header__inner,
  .header-inner{
    height:auto !important;
    min-height:0 !important;
    padding:10px 14px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }
  .site-brand,
  .brand{
    width:100%;
    justify-content:center !important;
    text-align:center !important;
    font-size:26px !important;
    line-height:1.15 !important;
  }
  .site-brand__logo{
    font-size:26px !important;
    line-height:1.15 !important;
  }
  .site-brand__tag{
    display:none !important;
  }
  .site-nav,
  .nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    justify-content:stretch !important;
    align-items:stretch !important;
  }
  .site-nav a,
  .site-nav .nav-link,
  .nav a,
  .nav .nav-link,
  .nav .btn-outline,
  .nav .btn-plain,
  .nav .btn-cta{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:38px !important;
    padding:8px 9px !important;
    margin:0 !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1.25 !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .container,
  .page-wrap,
  .page-head,
  main,
  section{
    max-width:100% !important;
  }
  .container,
  .page-wrap,
  .page-head{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .section,
  .hero,
  .hero-grid,
  .main-inner{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  h1{
    font-size:clamp(28px, 9vw, 42px) !important;
    line-height:1.16 !important;
  }
  h2,
  .section-title{
    font-size:clamp(22px, 7vw, 32px) !important;
    line-height:1.22 !important;
  }
  h3{
    font-size:clamp(18px, 5.8vw, 24px) !important;
    line-height:1.25 !important;
  }
  .hero-grid,
  .hero-row,
  .two-col,
  .tool-layout,
  .main-grid,
  .main-layout,
  .dashboard-grid,
  .service-grid,
  .services-grid,
  .feature-grid,
  .features-grid,
  .feature-row,
  .card-grid,
  .card-grid.two,
  .pricing-grid,
  .flow,
  .flow-grid,
  .steps,
  .steps-grid,
  .note-strip__inner,
  .product-grid,
  .product-preview-grid,
  .setup-grid,
  .wizard-grid,
  .form-grid,
  .mini-grid,
  .grid,
  .cards{
    grid-template-columns:minmax(0, 1fr) !important;
  }
  .hero-grid,
  .two-col,
  .tool-layout,
  .card-grid,
  .service-grid,
  .services-grid,
  .feature-grid,
  .features-grid,
  .flow,
  .steps-grid,
  .form-grid{
    gap:14px !important;
  }
  .card,
  .panel,
  .service-card,
  .product-preview-card,
  .feature-card,
  .feature-card-v3,
  .stripe-safety-card,
  .notice,
  .box,
  .cta-card{
    max-width:100% !important;
    border-radius:14px !important;
  }
  .form-row,
  .field-map-row,
  .map-row,
  .inline-open{
    grid-template-columns:minmax(0,1fr) !important;
  }
  input,
  select,
  textarea,
  button,
  .btn,
  .btn-link,
  .nav-link{
    max-width:100% !important;
  }
  input,
  select,
  textarea{
    font-size:16px !important;
  }
  .btn,
  button,
  input[type="button"],
  input[type="submit"]{
    white-space:normal !important;
  }
  .btn-row,
  .actions,
  .hero-actions,
  .form-actions,
  .cta-actions,
  .button-row{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
  .btn-row > *,
  .actions > *,
  .hero-actions > *,
  .form-actions > *,
  .cta-actions > *,
  .button-row > *{
    flex:1 1 160px !important;
  }
  table,
  .table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  th, td{
    white-space:normal;
  }
  .table th,
  .table td{
    min-width:120px;
  }
  .hero-visual,
  .toolshot,
  .image-card,
  .preview-card{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width: 520px){
  .site-header__inner,
  .header-inner{
    padding:9px 10px !important;
  }
  .site-brand,
  .brand,
  .site-brand__logo{
    font-size:22px !important;
  }
  .site-nav,
  .nav{
    gap:6px !important;
  }
  .site-nav a,
  .site-nav .nav-link,
  .nav a,
  .nav .nav-link,
  .nav .btn-outline,
  .nav .btn-plain,
  .nav .btn-cta{
    min-height:34px !important;
    padding:7px 6px !important;
    font-size:12px !important;
  }
  .container,
  .page-wrap,
  .page-head,
  .section,
  .hero,
  .hero-grid,
  .main-inner{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .card,
  .panel,
  .service-card,
  .product-preview-card,
  .feature-card,
  .feature-card-v3,
  .stripe-safety-card,
  .notice,
  .box,
  .cta-card{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .site-nav a.nav-guide,
  .nav a.nav-guide{
    grid-column:1 / -1;
  }
}