/* ——— Global safety; no visual change ——— */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
img, video, iframe { max-width: 100%; height: auto; display: block; }
.w-richtext, .section, .container { overflow-wrap: anywhere; }

/* Keep navbar above content and stick to top (no style change) */
#site-navbar { position: sticky; top: 0; z-index: 1000; }

/* ——— Desktop keeps current look ——— */
@media (min-width: 1200px) {
  .nav-hamburger { display: none !important; }
  .nav-panel { display: none !important; }
}

/* ——— Tablet/Phone layout only (no color/typography changes) ——— */
@media (max-width: 1199px) {
  /* Navigation */
  .nav-inline { display: none !important; }
  .nav-hamburger { display: inline-flex !important; cursor: pointer; }

  .nav-panel {
    position: fixed; inset: 64px 0 0 0; /* below header */
    display: none; overflow-y: auto; z-index: 1001;
    background: rgba(0,0,0,.85); /* prevents content showing through */
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .nav-panel.open { display: block; }
  body.nav-open { overflow: hidden; } /* stop page scroll when menu open */

  /* Grids/rows that currently overflow: stack on small screens */
  .row, .grid, .columns, .flex-row { flex-wrap: wrap; }
  .col, .column, [class*="col-"] { min-width: 0; width: 100%; }

  /* Cards/sections with fixed widths: let them shrink gracefully */
  .card, .feature-card, .panel, .box, .hero-copy, .cta-block {
    max-width: 100%;
  }

  /* Vimeo/YouTube iframes become responsive if in .video-wrap */
  .video-wrap { position: relative; aspect-ratio: 16/9; }
  .video-wrap > iframe, .video-wrap > video { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* Prevent long headings from causing sideways scroll */
  h1, h2, h3, h4 { word-break: normal; overflow-wrap: anywhere; }

  /* Buttons that clip near edges */
  .btn, .button { max-width: 100%; white-space: normal; }
}

/* ====== INDEX (home) mobile fixes only (≤768px) ====== */
@media (max-width: 768px) {

  body.home-page, 
  body.home-page html {
    overflow-x: hidden !important;
  }

  /* 1) Force hero & features grids/rows to single column */
  body.home-page .w-layout-grid,
  body.home-page .w-row,
  body.home-page .hero-grid,
  body.home-page .two-col,
  body.home-page .features-grid,
  body.home-page .features-row {
    display: block !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* 2) Make each column full width and reset any end alignment */
  body.home-page .w-col,
  body.home-page .col,
  body.home-page .hero-left,
  body.home-page .hero-right,
  body.home-page .feature-col,
  body.home-page .features-col {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: start !important;
    align-self: start !important;
  }

  /* 3) Prevent tiny/narrow columns that cause letters to stack */
  body.home-page .feature-col,
  body.home-page .features-col,
  body.home-page .w-richtext {
    min-width: 320px;
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 4) Headings center for hero, text left for paragraphs/lists */
  body.home-page h1,
  body.home-page .hero-heading {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.home-page p,
  body.home-page ul,
  body.home-page li,
  body.home-page h2,
  body.home-page h3 {
    text-align: left !important;
  }

  /* 5) Long lines can wrap; nothing can push the page sideways */
  body.home-page .section,
  body.home-page .container,
  body.home-page .w-container {
    max-width: 100% !important;
    overflow: hidden;
  }
  body.home-page .section * {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* 6) Media must shrink to viewport */
  body.home-page img,
  body.home-page video,
  body.home-page iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* === Fix ONLY the Features & Future Vision section on index.html (≤991px) === */
@media (max-width: 991px) {
  /* Target the specific Features section using data-record-id */
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* If it's a Webflow grid/row, force single column on mobile */
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .w-layout-grid {
    grid-template-columns: 1fr !important;
    column-gap: 24px !important;
    row-gap: 24px !important;
  }
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .w-row,
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] [class*="row"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .w-row .w-col,
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] [class*="row"] > [class*="col"] {
    width: 100% !important;
    float: none !important;
  }

  /* Make sure nothing inside can be wider than the viewport */
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] * {
    max-width: 100% !important;
  }
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] img,
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] video,
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] iframe {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Headings and lists center/wrap properly */
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] h2,
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .h2,
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .section-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] ul,
  body.home-page section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] ol {
    list-style-position: outside;
    padding-left: 1.25rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* === Mobile fix: ONLY for the 'Features & Future Vision' section on index.html === */
@media (max-width: 991px) {
  /* Scope to the section that contains the rich text block */
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* The rich text wrapper */
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    text-align: left;
  }

  /* Make sure nothing inside can overflow the viewport */
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 * {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Center the headings only (as in your design) */
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 h1,
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Bullet list spacing so it doesn't push right */
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 ul {
    list-style-position: outside;
    padding-left: 1.25rem;
    margin-left: 0;
  }

  /* Media inside this section */
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 img,
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 video,
  section[data-record-id="0c1c14ee-2ba1-a6aa-0953-d62a2f5fccb7"] .rich-text-block-14 iframe {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* === ROI section layout (scoped) === */
#roi-calculator .roi-wrap{
  display:grid; gap:16px;
  grid-template-columns: 1.05fr .95fr; /* inputs | results */
}
#roi-calculator .roi-panel{ background:transparent; }

#roi-calculator .roi-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
#roi-calculator .roi-field{ display:flex; flex-direction:column; gap:6px; }
#roi-calculator .roi-field > span{ font-weight:600; }

#roi-calculator input, #roi-calculator select{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:#121315; color:#fff; outline:none;
}

/* Force readable dropdown on dark UI */
#roi-calculator select.roi-select{ background:#fff; color:#000; border-color:#d0d0d0; }
#roi-calculator option{ color:#000; background:#fff; }

#roi-calculator .roi-advanced{ margin-top:8px; }
#roi-calculator .roi-advanced summary{ cursor:pointer; padding:8px 0; }
#roi-calculator .roi-advanced-grid{
  display:grid; gap:12px; margin-top:8px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

#roi-calculator .roi-cards{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
#roi-calculator .roi-card{
  background:#16181c; border:1px solid rgba(255,255,255,.10);
  padding:14px; border-radius:12px; min-height:84px;
}
#roi-calculator .roi-card h4{ margin:0 0 8px 0; font-size:14px; opacity:.9; }
#roi-calculator .roi-big{ font-size:20px; font-weight:800; letter-spacing:.3px; }

#roi-calculator .period-label{ font-weight:600; }

/* Responsive stacking */
@media (max-width: 991px){
  #roi-calculator .roi-wrap{ grid-template-columns:1fr; }
  #roi-calculator .roi-grid{ grid-template-columns:1fr; }
  #roi-calculator .roi-advanced-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  #roi-calculator .roi-cards{ grid-template-columns:1fr; }
}
@media (max-width: 767px){
  #roi-calculator input, #roi-calculator select{ font-size:16px; } /* avoid iOS zoom */
}