/* =========================================================
   WBIZ — responsive.css   (desktop-first)
   1600 → 1280 → 1024 → 768 → 480
   ========================================================= */

@media (max-width: 1600px) {
  :root { --container: 1240px; }
}

@media (max-width: 1280px) {
  :root { --space-12: 88px; }
  .site-header .main-nav > ul > li > a { padding: 10px 15px; }
  .app-window { grid-template-columns: 210px 1fr; }
}

@media (max-width: 1040px) {
  .site-header .main-nav {
    position: absolute; left: 0; right: 0; top: calc(100% - 2px);
    margin: 0; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .site-header .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-header .main-nav > ul {
    flex-direction: column; align-items: stretch; gap: 4px; padding: 10px;
    border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card);
  }
  .site-header .main-nav > ul > li > a { padding: 15px 18px; border-radius: var(--radius-lg); font-size: var(--fs-small); min-height: 48px; }
  .site-header .header-inner { position: relative; }
  .site-header .header-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; order: 3; }
  .site-header .header-login { order: 1; }
  .site-header .header-actions .btn { order: 2; }
  .site-header .brand img { height: 40px; }
}

@media (max-width: 640px) {
  .site-header .header-inner { gap: 8px; }
  .site-header .brand img { width: min(112px, 31vw); height: auto; }
  .site-header .header-actions { gap: 6px; }
  .site-header .header-actions .btn { min-height: 44px; padding: 10px 14px; font-size: 14px; }
  .site-header .header-actions .btn .icon { width: 13px; height: 13px; }
  .nav-toggle { width: 46px; height: 46px; }
  .site-header .main-nav > ul {
    max-height: calc(100svh - 112px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border-radius: 22px;
  }
}

@media (max-width: 1024px) {
  :root { --space-12: 72px; --header-height: 92px; }
  .hero-visual { padding-inline: var(--gutter); }
  .app-mockup { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-xl); }
  .app-window { min-width: 900px; }
  .site-footer .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .site-footer .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --fs-lead: 18px; --space-12: 64px; }
  .hero-content { padding-top: var(--space-6); }
  .hero-note { margin-top: var(--space-5); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .site-header .header-login { display: none; }
  .app-window { min-width: 820px; }
  .site-footer .footer-legal ul { margin-left: 0; }
}

/* mobile-app navigation: a real side drawer, not a dropdown below the header */
@media (max-width: 768px) {
  .site-header.nav-open { background: var(--color-surface); box-shadow: 0 8px 20px -18px rgba(4,22,14,.35); }
  .site-header .main-nav {
    position: fixed; z-index: 90; inset: var(--mobile-nav-top, 74px) auto 0 0;
    width: 100vw; height: auto;
    padding: 12px 12px 24px; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-surface);
    border-top: 1px solid #E1EAE2;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 24px 48px -28px rgba(4,22,14,.48);
    opacity: 1; visibility: hidden; transform: translateX(-105%);
    transition: transform .3s var(--ease), visibility .3s;
  }
  .site-header .main-nav.is-open { visibility: visible; transform: none; }
  .site-header .main-nav > ul {
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    max-height: none; overflow: visible; padding: 0; background: transparent; border: 0; box-shadow: none;
  }
  .site-header .main-nav > ul > li > a,
  .site-header .main-nav .mega-trigger {
    width: 100%; min-height: 50px; padding: 13px 14px; border-radius: 14px;
    font-size: 16px; justify-content: space-between;
  }
  .site-header .main-nav .mega-trigger:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--color-brand-mid);
  }
  .site-header .main-nav > ul > li > a { display: flex; }
  .site-header .main-nav .current-menu-item > a { box-shadow: 0 10px 18px -14px rgba(4,126,69,.7); }
  .site-header .main-nav .mega-panel { max-height: 0; overflow: hidden; padding: 0 8px; }
  .site-header .main-nav [data-mega].is-open .mega-panel { max-height: none; overflow: visible; padding: 4px 8px 12px; }
  .site-header .main-nav .mega-cols { gap: 8px; }
  .site-header .main-nav .mega-col-title { margin: 10px 0 4px; padding-inline: 8px; font-size: 11px; }
  .site-header .main-nav .mega-col a { min-height: 44px; padding: 8px; font-size: 14px; }
  .site-header .main-nav .mega-ico { width: 26px; height: 26px; }
  .site-header .main-nav .mega-foot { margin-top: 12px; padding-top: 12px; font-size: 13px; }
  .site-header .main-nav .mega-featured { width: 100%; justify-content: center; }
  .site-header .nav-toggle { position: relative; z-index: 80; }
}

@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .eyebrow { font-size: var(--fs-label); }
  .btn-large { width: 100%; justify-content: center; }
  .site-footer .footer-nav { grid-template-columns: 1fr; }
  .back-to-top { right: 16px; bottom: 16px; }
}

@media (max-width: 680px) {
  .billing-toggle {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    width: min(100%, 340px); gap: 8px; padding: 10px 12px;
  }
  .billing-label { text-align: center; font-size: 14px; }
  .billing-label[data-month] { text-align: right; }
  .billing-label[data-year] { text-align: left; }
  .billing-note {
    grid-column: 1 / -1; justify-self: center; max-width: 100%;
    padding: 8px 14px; text-align: center; line-height: 1.35;
  }
  .plan-price { align-items: flex-start; gap: 8px 10px; }
  .plan-price strong { font-size: clamp(34px, 10vw, 42px); line-height: 1; }
  .plan-price span { flex: 1 1 110px; min-width: 0; line-height: 1.35; }
  .plan-dark { padding: 24px; }
}

/* Reflow every comparison/data table into readable phone cards. */
@media (max-width: 680px) {
  .compare-shell { overflow: visible; }
  .compare-head { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .compare-head-other { display: none; }
  .compare-row { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .compare-row > span:not(.compare-label) {
    display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px;
    border-radius: 10px; background: #F7FAF8; line-height: 1.4;
  }
  .compare-row > .compare-yes::before,
  .compare-row > .compare-no::before {
    flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-muted);
  }
  .compare-row > .compare-yes::before { content: "WBIZ"; color: var(--color-brand-mid); }
  .compare-row > .compare-no::before { content: "Other tools"; }
  .ptable-shell { overflow: visible; }
  .ptable { min-width: 0; }
  .ptable-head { display: none; }
  .ptable-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px; padding: 14px 16px; font-size: 14px;
  }
  .ptable-row > .ptable-key { grid-column: 1 / -1; }
  .ptable-row > span:not(.ptable-key) {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    min-width: 0; overflow-wrap: anywhere; line-height: 1.35;
  }
  .ptable-row > span:not(.ptable-key)::before {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--color-muted);
  }
  .ptable-row > span:nth-child(2)::before { content: "WBIZ"; color: var(--color-brand-mid); }
  .ptable-row > span:nth-child(3)::before { content: "WATI / Admin"; }
  .ptable-row > span:nth-child(4)::before { content: "Interakt / Agent"; }
  .ptable-row > span:nth-child(5)::before { content: "AiSensy / Read only"; }
  .mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 8px; }
}

@media (max-width: 1080px) {
  .step-grid .step-card:last-child { grid-column: 1 / -1; }
  .team-grid .team-card:last-child { grid-column: 1 / -1; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento-wide { grid-column: span 4; }
  /* the brand tile goes full width so no row is left half empty */
  .bento-brand { grid-column: span 4; min-height: 220px; }
}

@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-wide, .bento-brand { grid-column: span 1; }
  .device-stage { min-height: 270px; }
  .device-phone { width: 240px; }
  .bento-wide { grid-template-columns: 1fr; }
  .flow-step + .flow-step { margin-left: 12px; }
  .flow-step + .flow-step + .flow-step { margin-left: 24px; }
}

@media (max-width: 1024px) {
  .feature-panel { overflow-x: auto; }
  .feature-panel-inner { min-width: 520px; }
}

@media (max-width: 680px) {
  .split-panel-side { border-right: 0; border-bottom: 1px solid var(--color-border-soft); }
  .node-branch { width: 100%; margin-left: 20px; }
  .node-indent { margin-left: 20px; }
  .api-node { margin-left: 20px; }
}

@media (max-width: 1024px) {
  .step-panel { overflow-x: auto; }
  .step-panel-inner { min-width: 300px; }
}

@media (max-width: 680px) {
  .feature-panel-inner { min-height: 400px; }
}

@media (max-width: 780px) {
  .compare-shell { overflow-x: auto; }
  .compare-table { min-width: 640px; }
}

@media (max-width: 1000px) {
  .ind-row { grid-template-columns: 44px 1fr 22px; row-gap: 8px; }
  .ind-desc, .ind-out { grid-column: 2 / 4; }
}

@media (max-width: 620px) {
  .faq-a p { padding-left: 20px; padding-right: 24px; }
}

/* mega menu -> accordion on mobile */
@media (max-width: 1040px) {
  .mega-panel { position: static; width: auto; margin: 0; padding: 4px 8px 14px; border: 0; border-radius: 0; box-shadow: none; transform: none; opacity: 1; visibility: visible; pointer-events: auto; max-height: 0; overflow: hidden; }
  [data-mega].is-open .mega-panel { max-height: 48svh; overflow-y: auto; transform: none; }
  .mega-cols { grid-template-columns: 1fr; gap: 14px; }
  .mega-trigger { width: 100%; justify-content: space-between; padding: 15px 18px; border-radius: 16px; font-size: 17px; }
  .mega-foot { flex-direction: column; align-items: flex-start; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
}

/* phone-safe mockups: preserve the hierarchy instead of forcing a desktop canvas */
@media (max-width: 680px) {
  .feature-panel { padding: 12px; overflow-x: hidden; }
  .feature-panel-inner { min-width: 0; min-height: 0; }
  .panel-head { align-items: flex-start; flex-wrap: wrap; padding: 13px 14px; }
  .panel-title-row { width: 100%; }
  .panel-meta { margin-left: auto; }
  .panel-filter { font-size: 12px; }
  .table-head, .table-row { padding-inline: 12px; }
  .table-head { font-size: 11px; }
  .table-row { font-size: 12px; }
  .table-queue .table-head, .table-queue .table-row {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(48px, .72fr) minmax(44px, .68fr);
  }
  .cell-sub { font-size: 11px; }
  .split-panel { grid-template-columns: 1fr; }
  .split-panel-side { border-right: 0; border-bottom: 1px solid var(--color-border-soft); }
  .node, .node-accent { min-width: 0; max-width: 100%; }
  .canvas { padding: 18px 14px; }
}

@media (max-width: 640px) {
  .app-mockup { overflow-x: hidden; }
  .app-window { min-width: 0; grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .app-main { min-width: 0; }
  .app-main .app-topbar { padding-inline: 14px; }
  .mini-row { grid-template-columns: 1.25fr 1fr .8fr; padding-inline: 12px; }
  .compare-shell { padding: 12px; }
}

@media (max-width: 900px) {
  .mod-row { grid-template-columns: 40px 1fr 22px; row-gap: 6px; }
  .mod-text { grid-column: 2 / 4; }
  .split-flip .split-copy { order: 0; }
  .page-cta-actions { justify-content: flex-start; }
}
@media (max-width: 780px) {
  .ptable-shell { overflow-x: auto; }
  .ptable { min-width: 660px; }
}

@media (max-width: 900px) {
  .ptable { min-width: 720px; }
}

@media (max-width: 620px) {
  .gt-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .calc-row { flex-wrap: wrap; }
}

/* ---- Phase 1 global design refresh — responsive ---- */
@media (max-width: 1100px) {
  .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .pcard-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 0; padding-block: 28px; }
  .foot-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .foot-actions .btn { width: 100%; justify-content: center; }
  .foot-col { min-width: 0; padding-block: 15px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .foot-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; cursor: pointer; }
  .foot-title::after { content: "+"; color: #7BD9A6; font-size: 20px; font-weight: 400; line-height: 1; }
  .foot-col.is-open .foot-title::after { content: "−"; }
  .foot-list { display: none; margin-top: 14px; gap: 10px; font-size: 14px; }
  .foot-col.is-open .foot-list { display: flex; }
  .foot-list a { line-height: 1.35; }
}
@media (max-width: 760px) {
  .foot-meta, .foot-bottom { align-items: flex-start; flex-direction: column; }
  .foot-credit { order: -1; }
  .foot-legal { gap: 12px 18px; }
  .foot-badges { margin-left: 0; }
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}
@media (max-width: 900px) { .indg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .indg-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .proof-chips { gap: 8px 0; }
  .proof-chip { padding: 4px 14px; }
  .proof-chip:not(:last-child)::after { display: none; }
}

/* ---- Phase 2 — legal + docs pages ---- */
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; gap: 26px; }
  .legal-toc { position: static; }
  .legal-toc ul { flex-flow: row wrap; }
  .legal-toc a { padding: 7px 12px; }
  .legal-body { max-width: none; }
}
@media (max-width: 560px) {
  .doc-facts { grid-template-columns: 1fr; }
  .doc-ep { grid-template-columns: 64px 1fr; gap: 12px; }
  .doc-scope { margin-left: 0; }
  .doc-cat-head .doc-ico { width: 40px; height: 40px; font-size: 17px; }
}

/* ---- Phase 3 — resource pages ---- */
@media (max-width: 760px) { .glossary { grid-template-columns: 1fr; } }

/* Final mobile table guard: keep later legacy breakpoint rules from restoring overflow. */
@media (max-width: 680px) {
  .compare-shell,
  .compare-table,
  .ptable-shell,
  .ptable,
  .feature-panel,
  .feature-panel-inner {
    min-width: 0; max-width: 100%; overflow-x: hidden;
  }
  .compare-shell { overflow: visible; }
  .compare-table { min-width: 0; }
  .ptable-shell { overflow: visible; }
  .ptable { min-width: 0; }
  .ptable-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Final mockup policy: previews must fit the viewport at tablet and phone widths. */
@media (max-width: 1024px) {
  .app-mockup,
  .feature-panel,
  .step-panel,
  .feature-panel-inner,
  .step-panel-inner,
  .canvas,
  .mini-panel,
  .dark-panel {
    min-width: 0; max-width: 100%; overflow-x: hidden;
  }
  .feature-panel-inner,
  .step-panel-inner { min-width: 0; }
  .app-window { min-width: 0; }
  .app-sidebar { display: none; }
  .app-window { grid-template-columns: 1fr; }
  .table-head, .table-row, .mini-row { min-width: 0; }
}

@media (max-width: 680px) {
  .feature-panel-inner,
  .step-panel-inner { min-height: 0; }
  .panel-head, .panel-foot, .table-head, .table-row,
  .split-panel-side, .split-panel-main, .call-stack, .metric-row,
  .check-list, .team-list, .spark-wrap { min-width: 0; }
  .panel-title, .panel-sub, .panel-meta, .cell-title, .cell-sub,
  .node-title, .node-note, .log-text, .log-dur { overflow-wrap: anywhere; }
}