:root {
      --bg:#f8f9fb; --surface:#ffffff; --border:#e5e8ef; --border-h:#c7cdd8;
      --text:#111827; --muted:#6b7280; --subtle:#9ca3af;
      --accent:#5b6cf7; --accent-d:#4f46e5; --accent-l:#eff0fe; --accent-b:#c7caf9;
      --green:#16a34a; --green-l:#f0fdf4; --green-b:#bbf7d2;
      --red:#dc2626; --red-l:#fef2f2;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;font-size:15px}
    body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',system-ui,sans-serif;overflow-x:hidden;line-height:1.6}
    .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
    .reveal.visible{opacity:1;transform:translateY(0)}
    nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.92)}
    .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color .2s,box-shadow .2s,transform .2s}
    .card:hover{border-color:var(--border-h);box-shadow:0 4px 24px rgba(0,0,0,.07);transform:translateY(-1px)}
    .badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-l);border:1px solid var(--accent-b);color:var(--accent-d);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
    .btn-p{background:var(--accent);color:white;border-radius:8px;font-weight:600;font-size:14px;padding:10px 22px;transition:background .15s,box-shadow .15s,transform .1s;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
    .btn-p:hover{background:var(--accent-d);box-shadow:0 4px 16px rgba(91,108,247,.3);transform:translateY(-1px)}
    .btn-o{background:white;color:var(--text);border:1px solid var(--border);border-radius:8px;font-weight:500;font-size:14px;padding:10px 22px;transition:border-color .15s,background .15s;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
    .btn-o:hover{border-color:var(--border-h);background:var(--bg)}
    .step-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;flex:1}
    .step-active{background:var(--accent-l);border:1px solid var(--accent-b)}
    .step-inactive{background:var(--bg);border:1px solid var(--border);opacity:.6}
    .step-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
    .num-active{background:var(--accent);color:white}
    .num-inactive{background:white;border:1.5px solid var(--border);color:var(--muted)}
    .feat-icon{width:42px;height:42px;background:var(--accent-l);border:1px solid var(--accent-b);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
    .feat-green{background:var(--green-l);border-color:var(--green-b)}
    .stat-num{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(36px,5vw,60px);font-weight:700;color:var(--accent);line-height:1}
    .input{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 13px;font-family:'IBM Plex Sans',sans-serif;font-size:14px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
    .input::placeholder{color:var(--subtle)}
    .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,108,247,.12)}
    .mock-f{background:var(--accent-l);border:1px solid var(--accent-b);border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--accent-d)}
    .mock-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--subtle);margin-bottom:3px}
    .chk{display:flex;align-items:flex-start;gap:10px;font-size:14px}
    .chk-i{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:10px;font-weight:700}
    .chk-y{background:var(--green-l);border:1px solid var(--green-b);color:var(--green)}
    .chk-n{background:var(--red-l);border:1px solid #fecaca;color:var(--red)}
    .lang-btn{font-size:12px;font-weight:600;padding:3px 8px;border-radius:5px;transition:all .15s;color:var(--muted);background:none;border:none;cursor:pointer}
    .lang-btn.active{background:var(--accent);color:white}
    #toast{position:fixed;bottom:28px;right:28px;z-index:9999;background:var(--surface);border:1px solid var(--green-b);border-left:3px solid var(--green);color:var(--text);padding:12px 18px;border-radius:10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(16px);opacity:0;transition:all .3s ease;max-width:300px}
    #toast.show{transform:translateY(0);opacity:1}
    #mobile-menu{display:none}
    #mobile-menu.open{display:flex}
    ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-track{background:var(--bg)}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
    hr{border:none;border-top:1px solid var(--border)}

    /* FAQ */
    .faq-item{border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s}
    .faq-item.open{border-color:var(--accent-b)}
    .faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:none;border:none;cursor:pointer;text-align:left;font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:600;color:var(--text);transition:background .15s}
    .faq-btn:hover{background:var(--bg)}
    .faq-item.open .faq-btn{background:var(--accent-l);color:var(--accent-d)}
    .faq-chevron{width:16px;height:16px;flex-shrink:0;transition:transform .25s;color:var(--muted)}
    .faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--accent)}
    .faq-body{display:none;padding:0 20px 16px;font-size:13px;line-height:1.7;color:var(--muted)}
    .faq-item.open .faq-body{display:block}

/* ── Custom Select ── */
.custom-select { position:relative; width:100% }
.custom-select-dropdown {
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:999;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.1); overflow:hidden; max-height:260px; overflow-y:auto;
}
.custom-select.open .custom-select-dropdown { display:block }
.custom-select.open .custom-select-arrow { transform:rotate(180deg) }
.custom-select.open .custom-select-trigger { border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,108,247,.12) }
.custom-select-option {
  padding:10px 13px; font-size:14px; cursor:pointer; color:var(--text);
  transition:background .1s; font-family:'IBM Plex Sans',sans-serif;
}
.custom-select-option:hover { background:var(--accent-l); color:var(--accent-d) }
.custom-select-option.selected { background:var(--accent-l); color:var(--accent-d); font-weight:600 }

/* ═══════════════════════════════════════════════════
   SMALL PHONES — 375px and below (iPhone SE, etc.)
   ═══════════════════════════════════════════════════ */
@media (max-width: 375px) {
  html { font-size: 13px; }
  h1.font-display { font-size: 1.875rem; }
  .btn-p, .btn-o { font-size: 0.875rem; padding: 0.75rem 1rem; }
  .grid.grid-cols-3.gap-3 { grid-template-columns: 1fr; }
  .stat-num { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════
   TABLET — 641px to 1024px
   ═══════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
  h1.font-display { font-size: clamp(2.25rem, 5vw, 3rem); }
  .font-display.text-3xl { font-size: clamp(1.875rem, 4vw, 2.5rem); }
  .grid.lg\:grid-cols-2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .grid.lg\:grid-cols-3 { grid-template-columns: 1fr 1fr; }
  .lg\:col-span-2 { grid-column: span 2; }
  .grid.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — All phones ≤ 640px (iPhone SE through iPhone Pro Max)
   Root fix: everything must be contained within the viewport width
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Containment ── */
  /* overflow-x:hidden on html/body is ignored by iOS Safari — use #page-wrapper instead */
  html { overflow-x: clip; }   /* clip is more reliable than hidden in modern Safari */
  body { overflow-x: hidden; }
  #page-wrapper { overflow-x: hidden; max-width: 100vw; width: 100%; position: relative; }
  /* Every direct section/div inside body must not exceed viewport */
  body > * { max-width: 100vw; }

  /* All inner containers respect viewport */
  .max-w-6xl, .max-w-4xl, .max-w-3xl, .max-w-xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    overflow-x: hidden;
  }

  /* ── Base typography ── */
  html { font-size: 14px; }

  /* ── Section rhythm ── */
  section.py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section.py-16 { padding-top: 3rem; padding-bottom: 3rem; }
  .pt-28 { padding-top: 5rem !important; }
  .pb-20 { padding-bottom: 3rem !important; }

  /* ── Grid children: prevent overflow from expanding tracks ── */
  .grid > * { min-width: 0; }

  /* ── HERO ── */
  h1.font-display {
    font-size: clamp(1.875rem, 8.5vw, 2.5rem) !important;
    line-height: 1.12;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .font-display {
    font-size: clamp(1.625rem, 7vw, 2.25rem) !important;
    line-height: 1.15;
  }

  /* Hero paragraph — full width, no overflow */
  p.text-lg {
    font-size: 0.9375rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hero CTA buttons — full width stacked */
  .flex.flex-col.sm\:flex-row.flex-wrap.gap-3.mb-10,
  .flex.flex-wrap.gap-3.mb-10 {
    flex-direction: column !important;
    width: 100%;
    gap: 0.625rem;
  }
  .flex.flex-col.sm\:flex-row.flex-wrap.gap-3.mb-10 .btn-p,
  .flex.flex-col.sm\:flex-row.flex-wrap.gap-3.mb-10 .btn-o,
  .flex.flex-wrap.gap-3.mb-10 .btn-p,
  .flex.flex-wrap.gap-3.mb-10 .btn-o {
    width: 100% !important;
    box-sizing: border-box;
    justify-content: center;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }

  /* Hero social proof — stack, no overflow */
  .flex.flex-col.sm\:flex-row.flex-wrap.items-start.sm\:items-center.gap-3.sm\:gap-5,
  .flex.flex-wrap.items-center.gap-5 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
    width: 100%;
  }

  /* Clutch rating — inline */
  .flex.items-center.gap-1\.5 { flex-wrap: wrap; }

  /* Hero grid — single column */
  .grid.lg\:grid-cols-2,
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* ── MOCKUP CARD ── */
  /* Card must not overflow */
  .card {
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  .card.p-5 { padding: 1rem !important; }
  .card.p-7 { padding: 1.25rem !important; }
  .card.p-10 { padding: 1.75rem 1.25rem !important; }

  /* Step bar — fit all 3 within card width */
  .step-item {
    padding: 7px 7px !important;
    gap: 6px !important;
    min-width: 0;
    flex: 1 1 0 !important;
    overflow: hidden;
  }
  .step-num { width: 24px !important; height: 24px !important; font-size: 10px !important; flex-shrink: 0; }
  .step-item > div { min-width: 0; overflow: hidden; }
  .step-item .text-xs.font-semibold { font-size: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .step-item .text-xs:not(.font-semibold) { display: none !important; }

  /* Scan result grid — full width cells, no overflow */
  .rounded-lg.p-4 .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .mock-f {
    font-size: 11px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mockup bottom row — clock + button: stack if tight */
  .card.p-5 .flex.items-center.justify-between:last-child {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Below-mockup badges — stack single column */
  .grid.grid-cols-1.sm\:grid-cols-3,
  .grid.grid-cols-3.gap-2.mt-3 {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-3 > div,
  .grid.grid-cols-3.gap-2.mt-3 > div {
    justify-content: flex-start;
    padding: 0.625rem 0.75rem;
  }

  /* ── CERTIFICATIONS BAR ── */
  .grid.grid-cols-2.sm\:flex,
  .flex.flex-wrap.items-center.justify-center.gap-8,
  .flex.flex-wrap.items-center.justify-center {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.875rem 1rem !important;
    justify-items: start !important;
  }

  /* ── STATS ── */
  .grid.grid-cols-2.lg\:grid-cols-4 { gap: 0.625rem !important; }
  .stat-num { font-size: clamp(2rem, 10vw, 2.75rem) !important; }

  /* ── FEATURES ── */
  .grid.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .lg\:col-span-2 { grid-column: span 1 !important; }

  /* Feature flow chips — wrap */
  .flex.items-center.gap-2.flex-wrap { gap: 0.5rem; flex-wrap: wrap; }

  /* Scalability 3-tile grid */
  .grid.grid-cols-3.gap-3 { gap: 0.5rem !important; }
  .grid.grid-cols-3.gap-3 .rounded-xl { padding: 0.6rem 0.4rem !important; }
  .grid.grid-cols-3.gap-3 .text-xs.font-bold { font-size: 9px !important; }
  .grid.grid-cols-3.gap-3 > div > div:first-child svg { width: 22px !important; height: 22px !important; }

  /* ── Template list: truncate long underscore filenames ── */
  #panel-1 [id^="tpl-"] span.flex-1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── INTERACTIVE DEMO ── */
  /* Demo step progress bar */
  .flex.items-center.gap-1\.5.sm\:gap-2.px-3.sm\:px-5.py-3.sm\:py-4.overflow-x-auto {
    padding: 0.5rem 0.75rem !important;
    gap: 0.25rem !important;
  }

  /* Demo panels */
  #panel-1 { padding: 1.25rem 1rem !important; }
  #panel-2 { padding: 1.25rem 1rem !important; }
  #panel-3 { padding: 1.25rem 1rem !important; }

  /* Demo action buttons — stack */
  #panel-3 .flex.flex-wrap.items-center.gap-3 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #panel-3 .flex.flex-wrap.items-center.gap-3 .btn-o,
  #panel-3 .flex.flex-wrap.items-center.gap-3 .btn-p {
    width: 100% !important;
    justify-content: center !important;
  }
  #panel-3 .flex-1 { display: none !important; }

  /* Signature canvas — shorter */
  #sig-area { height: 80px !important; }
  #sig-canvas { height: 80px !important; }

  /* ── COMPARISON ── */
  .grid.grid-cols-1.md\:grid-cols-2 { grid-template-columns: 1fr !important; }

  /* ── FAQ ── */
  .faq-btn { padding: 13px 14px !important; font-size: 13px; }
  .faq-body { padding: 0 14px 13px !important; font-size: 12.5px; }

  /* ── CONTACT FORM ── */
  .grid.grid-cols-1.sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
  /* Prevent iOS Safari zoom on form inputs */
  input.input, textarea.input, select.input {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* ── HOW IT WORKS (4 steps) ── */
  .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  /* ── TESTIMONIAL ── */
  blockquote.text-xl, blockquote.md\:text-2xl {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }

  /* ── FOOTER ── */
  footer .flex.items-center.justify-between { flex-direction: column; gap: 1rem; align-items: flex-start; }
  footer .flex.flex-wrap.items-center.gap-4 { flex-direction: column; align-items: flex-start; gap: 0.375rem; }

  /* ── CUSTOM SELECT ── */
  .custom-select-dropdown { max-height: 220px; overflow-y: auto; }
  .custom-select-option { padding: 10px 13px !important; font-size: 14px !important; }

  /* ── TOAST ── */
  #toast {
    left: 1rem !important;
    right: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
    bottom: 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SMALL PHONES ≤ 390px  (iPhone SE, older Androids)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  html { font-size: 13px; }
  h1.font-display { font-size: 1.75rem !important; }
  .btn-p, .btn-o { font-size: 0.875rem; padding: 0.75rem 1rem; }
  .stat-num { font-size: 1.875rem !important; }
  .grid.grid-cols-3.gap-3 { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   TABLET  641px – 1023px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1023px) {
  h1.font-display { font-size: clamp(2.25rem, 5vw, 3rem) !important; }
  .font-display { font-size: clamp(1.875rem, 4vw, 2.5rem) !important; }
  .grid.lg\:grid-cols-2,
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .grid.lg\:grid-cols-3 { grid-template-columns: 1fr 1fr !important; }
  .lg\:col-span-2 { grid-column: span 2 !important; }
  .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}