/* =========================================================
   landing-mobile.css — Selvio landing page mobile overrides
   ALL rules are inside @media (max-width: 640px) unless noted.
   Zero desktop styles are changed here.
   ========================================================= */

/* ── 760px → hide nav links (already in landing.html, kept here for clarity) */
@media (max-width: 760px) {
  .nav-links        { display: none !important; }
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  *,
  *::before,
  *::after {
    min-width: 0;
  }
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }
  .nav,
  .nav-inner,
  .hero,
  section.sec,
  .pitch-band,
  .cta-band,
  footer,
  .foot-bottom {
    max-width: 100vw;
  }
  .hero,
  .sec-head,
  .pitch-grid,
  .features,
  .multico,
  .foot-bottom {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .brand,
  .brand-stack,
  .hero-text,
  .nav-right,
  .sec-head > *,
  .multico > *,
  .feat,
  .step {
    min-width: 0;
  }
  h1.headline,
  .sec-title,
  .pitch-h,
  .feat-h,
  .lede,
  .sec-blurb {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {

  /* ── NAV ──────────────────────────────────────────────────── */
  .nav-inner {
    padding: 10px 14px;
    gap: 8px;
    width: 100%;
  }
  body { -webkit-text-size-adjust: 100%; }
  /* Shrink brand on very narrow screens */
  .brand-name { font-size: 22px !important; }
  .brand-tag  { display: none !important; }

  /* Hide desktop CTA in nav */
  .nav-right {
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .nav-right .btn,
  .nav-right .btn-primary,
  .nav-right .btn-ghost {
    padding: 8px 11px;
    font-size: 12px;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-right .btn-primary { display: none !important; }
  .lang-toggle { display: none !important; }
  .nav-cta-secondary { display: inline-flex !important; }

  /* Hamburger button (injected by landing-mobile.js) */
  #m-nav-toggle {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink);
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  #m-nav-toggle:active { background: var(--bg-soft); }

  /* Mobile nav drawer */
  #m-nav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 78vw;
    max-width: 300px;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    z-index: 900;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 40px;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: -8px 0 32px rgba(31,64,49,.10);
  }
  #m-nav-drawer.open { transform: translateX(0); }

  #m-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26,42,34,0.45);
    z-index: 850;
    display: none;
    -webkit-tap-highlight-color: transparent;
  }
  #m-nav-backdrop.visible { display: block; }

  .m-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
  }
  .m-drawer-close {
    background: none; border: none;
    color: var(--ink-mute);
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .m-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }
  .m-drawer-links a {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 12px 8px;
    border-radius: 10px;
    display: block;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, color 0.1s;
  }
  .m-drawer-links a:active { background: var(--bg-soft); color: var(--green); }

  .m-drawer-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
  }
  .m-drawer-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .m-drawer-ctas a {
    text-align: center;
    padding: 13px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
  }

  .m-drawer-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
  }
  .m-drawer-lang span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .m-drawer-lang button {
    appearance: none; border: 0; background: transparent;
    padding: 5px 11px; border-radius: 999px;
    color: var(--ink-mute); font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.08em;
    border: 1px solid var(--border);
  }
  .m-drawer-lang button.active {
    background: var(--green); color: #f4ecdc; border-color: var(--green);
  }

  /* ── HERO ─────────────────────────────────────────────────── */
  .hero {
    padding: 28px 18px 36px !important;
    gap: 32px !important;
  }
  h1.headline {
    font-size: clamp(38px, 11vw, 52px) !important;
    margin-bottom: 20px !important;
  }
  .lede {
    font-size: 16px !important;
    margin-bottom: 28px !important;
  }
  .kicker { margin-bottom: 20px !important; }

  /* CTA buttons: full width, stacked */
  .cta-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .cta-meta {
    gap: 10px !important;
    flex-direction: column !important;
  }

  /* Collage: hide on small screens — too complex for portrait mobile */
  .collage { display: none !important; }

  /* ── PITCH BAND ───────────────────────────────────────────── */
  .pitch-band section.sec {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .pitch-grid { gap: 24px !important; }
  .pitch-num  { font-size: 30px !important; margin-bottom: 10px !important; }
  .pitch-h    { font-size: 22px !important; }

  /* ── HOW IT WORKS ─────────────────────────────────────────── */
  section.sec { padding-left: 18px !important; padding-right: 18px !important; }
  .sec-head   { gap: 16px !important; margin-bottom: 28px !important; }
  .sec-title  { font-size: clamp(30px, 9vw, 42px) !important; }
  .sec-blurb  { font-size: 15px !important; }
  .step       { padding: 24px 18px 28px !important; min-height: unset !important; }
  .step-h     { font-size: 22px !important; }

  /* ── FEATURES ─────────────────────────────────────────────── */
  .feat       { min-height: unset !important; padding: 20px !important; }
  .feat-h     { font-size: 20px !important; }

  /* ── MULTI-COMPANY ────────────────────────────────────────── */
  .multico-text { padding: 28px 22px !important; }
  .multico-vis  { padding: 22px 22px 28px !important; }
  .multico h3   { font-size: clamp(26px, 8vw, 36px) !important; }

  /* ── CTA BAND ─────────────────────────────────────────────── */
  .cta-band h2 { font-size: clamp(32px, 9vw, 48px) !important; }
  .cta-band .cta-row { flex-direction: column !important; align-items: stretch !important; }
  .cta-band .cta-row .btn { justify-content: center !important; }

  /* ── FOOTER ───────────────────────────────────────────────── */
  footer { padding: 40px 18px 32px !important; gap: 28px !important; }
  .foot-bottom { padding: 18px 18px 32px !important; flex-direction: column !important; gap: 8px !important; }

  /* Newsletter: stack input + button on tiny screens */
  .news-form {
    flex-direction: column !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .news-form button {
    width: 100% !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
  }

  /* ── PREVENT iOS ZOOM ON INPUTS ───────────────────────────── */
  input[type="email"],
  input[type="text"],
  input[type="search"],
  textarea {
    font-size: 16px !important;
  }
}