/* ── Hide mobile-only elements on desktop ────────────────────────────────── */

.nav__hamburger         { display: none; }
.nav-drawer             { display: none; }
.feature-card__close-btn { display: none; }


/* ── Mobile layout ───────────────────────────────────────────────────────── */

@media (max-width: 1300px) {

  /* Prevent horizontal overflow from 100vw pseudo-elements */
  html, body { overflow-x: hidden; }

  /* Column edge lines (fixed pseudo-element on .page-wrapper) */
  .page-wrapper::after { display: none; }

  /* ── Hero background overlay ──────────────────────────────────────── */

  .bg-layer {
    max-height: 100dvh;
  }

  .bg-layer::after {
    background: rgba(10, 10, 10, 0.3);
  }

  /* ── Logos ────────────────────────────────────────────────────────── */

  .logos-section {
    background: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 10, 0.45) 40%);
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    padding-bottom: 0;
    margin-top: 0;
  }

  .logos-section__marquee {
    margin-top: auto;
    padding-bottom: 24px;
  }

  .logos-section__label {
    margin-bottom: 28px;
    padding: 0 24px;
  }

  /* ── Nav ──────────────────────────────────────────────────────────── */

  .nav {
    position: static;
    height: 48px;
  }

  .chat-expanded .nav {
    visibility: hidden;
  }

  .nav__logo img {
    margin-top: 0;
  }

  .nav__links,
  .nav__menu-btn,
  .nav__hero-corner { display: none !important; }

  .nav__inner { padding: 0 16px; }

  .nav__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    margin-top: 0;
  }

  .nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
  }

  /* ── Nav drawer ───────────────────────────────────────────────────── */

  .nav-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
  }

  .nav-drawer--open {
    pointer-events: auto;
    opacity: 1;
  }

  .nav-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .nav-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: var(--almost-black);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 24px 32px;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }

  .nav-drawer--open .nav-drawer__panel {
    transform: translateX(0);
  }

  .nav-drawer__close {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--white);
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    margin-bottom: 32px;
    line-height: 1;
  }

  .nav-drawer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .nav-drawer__links a {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Sub-links under a top-level drawer item (e.g. ABOUT → Company / Contact).
     The first child keeps no top border so it tucks under its parent. */
  .nav-drawer__sublinks {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--orange);
  }

  .nav-drawer__sublinks a {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.80);
    padding: 12px 0;
  }

  .nav-drawer__sublinks li:last-child a { border-bottom: none; }

  .nav-drawer__ctas {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .nav-drawer__ctas .btn {
    text-align: center;
    justify-content: center;
  }

  /* ── Hero ─────────────────────────────────────────────────────────── */

  .hero {
    margin-top: 0;
    padding: 16px 16px 20px;
  }

  .hero__line {
    font-size: 1.8rem;
    padding: 14px 14px 15px;
  }

  /* Product hero: the desktop 120px staggered H1 must shrink on phones — its
     `.hero__heading--product .hero__line` rule (font-size:120px) outranks the
     `.hero__line` above by specificity, so it needs an equally-specific reset.
     The demo button is absolutely positioned for the 120px layout on desktop;
     drop it back into normal flow under the heading. */
  /* Centre the staggered product H1 in a column so its left/right lines don't
     spread to the screen edges on wide phones/tablets (≈530–1300px). Below that
     width the column is full-width (margin-inline:auto collapses to 0), so small
     phones are unaffected. */
  .hero__heading--product {
    max-width: 560px;
    margin-inline: auto;
  }

  .hero__heading--product .hero__line {
    font-size: 2rem;
    padding: 6px 0;
  }

  /* Demo button drops into normal flow under the heading, with a left inset that
     matches the centred column's left edge so it lines up with "Accelerate". */
  .hero__demo-btn {
    /* `relative` (not `static`) so it stays in normal flow but remains the
       positioning context for its own ::before corner brackets — otherwise they
       escape to .hero__content--product and frame the whole hero. */
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 22px;
    margin-left: max(0px, (100% - 560px) / 2);
  }

  /* Product page only: drop the hero corner brackets on mobile. The bottom
     BL/BR brackets live in the product hero markup; the top TL/TR
     (.nav__hero-corner) are already hidden globally above — so this clears all
     four. Scoped via :has(.hero__demo-btn) because blog shares .hero--product
     but has no demo button. */
  .hero--product:has(.hero__demo-btn) .hero__corner--bl,
  .hero--product:has(.hero__demo-btn) .hero__corner--br {
    display: none;
  }

  /* Industry hero: shrink the 72px H1 and reflow the 3-up stat strip so the
     numbers fit (the desktop 95px values + 36px cell padding overflow a phone). */
  .hero__heading--industry {
    font-size: 40px;
  }

  .hero__stats {
    height: auto;
  }

  .hero__stat {
    padding: 18px 10px;
    gap: 6px;
  }

  .hero__stat-value {
    font-size: 38px;
  }

  .hero__stat-label {
    font-size: 10px;
  }

  /* ── Chat card ────────────────────────────────────────────────────── */

  .card-section {
    padding: 16px;
    height: auto;
    min-height: 0;
  }

  .feature-card {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 203px;
  }

  /* Override the 1919px max-width rule in card.css that sets a negative transform */
  .feature-card.is-expanded {
    position: fixed;
    top: 64px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    height: auto;
    transform: none;
    z-index: 150;
    overflow: visible;
  }

  .feature-card.is-expanded .feature-card__close-btn {
    display: flex;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: var(--white);
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    flex-shrink: 0;
  }

  /* ── Benefits ─────────────────────────────────────────────────────── */

  .benefits {
    height: auto;
    padding: 64px 0;
  }

  .benefits__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 16px;
    height: auto;
    max-width: 100%;
  }

  .benefits__left {
    position: static;
    padding-top: 48px;
  }

  .benefits h2 {
    font-size: 32px;
    margin-bottom: 16px;
  }

  /* Collapse the diagonal staircase into a plain full-width column */
  .benefits__stack {
    gap: 16px;
  }

  .benefits__stack .benefit-card,
  .benefits__stack .benefit-card:nth-child(n) {
    width: 100%;
    margin-left: 0;
    min-height: 0;
  }

  .benefit-card {
    height: auto;
    padding: 24px 24px 24px;
  }

  .benefit-card__headline {
    font-size: 28px;
  }

  /* Reset the inline-style divider margin/transform in #benefitsNext */
  #benefitsNext > div:first-child {
    margin-top: 0 !important;
    transform: translateY(50%) !important;
    height: 60px !important;
  }

  /* ── Tech features section ────────────────────────────────────────── */

  .tech-features-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 40px !important;
  }

  .tech-features-section > div {
    margin-top: 0 !important;
  }

  .tech-features__heading {
    padding: 0;
    font-size: 32px;
  }

  .tf-list {
    padding-left: 0;
    padding-right: 0;
  }

  .tf-list::before,
  .tf-list::after {
    display: none;
  }

  .tf-item {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tf-item::before {
    display: none;
  }

  .tf-item__title {
    font-size: 30px;
  }

  .tech-features__subheading {
    font-size: 28px;
    padding: 0;
    margin-top: 32px;
  }

  .case-scroll {
    padding-left: 16px;
    padding-right: 16px;
  }

  .case-card {
    flex: 0 0 calc(80vw);
  }

  .case-card__img {
    width: 100%;
    height: 200px;
  }

  /* ── Product page: platform intro ─────────────────────────────────── */

  .platform-intro {
    padding: 56px 20px;
  }

  .platform-intro__heading {
    font-size: 30px;
  }

  /* ── Product page: scroll-expand media ────────────────────────────── */
  /* Drop the 30px text indent (eats a narrow column) and shrink the title so
     it wraps comfortably instead of filling the column edge-to-edge. */

  .scroll-media {
    padding: 0 16px 80px;
  }

  .scroll-media__item + .scroll-media__item {
    margin-top: 80px;
  }

  .scroll-media__num {
    padding-left: 0;
  }

  .scroll-media__title {
    font-size: 23px;
    padding-left: 0;
    margin-bottom: 16px;
  }

  .scroll-media__link {
    margin-left: 0;
    margin-bottom: 40px;
  }

  /* ── Product page: Quix AI feature (two-up → stacked) ─────────────── */
  /* The desktop 1fr 1fr grid overflows a phone — stack to a single column. */

  .product-feature {
    padding: 32px 16px 80px;
  }

  .product-feature__inner {
    padding: 0;
  }

  .product-feature__heading {
    font-size: 32px;
    margin-bottom: 32px;
  }

  .product-feature__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .product-feature__title {
    font-size: 24px;
  }

  /* ── Product page: Why Quix heading ───────────────────────────────── */
  /* (the grid itself already stacks via why-quix.css @980px) */

  .why-quix {
    padding: 56px 20px 80px;
  }

  .why-quix__inner {
    padding: 0;
  }

  .why-quix__heading {
    font-size: 32px;
    margin-bottom: 32px;
  }

  /* ── Book a demo CTA ──────────────────────────────────────────────── */

  .book-demo {
    min-height: 480px;
  }

  .book-demo__heading {
    font-size: 28px;
  }

  .book-demo__subheading {
    font-size: 16px;
  }

  .book-demo__content {
    gap: 32px;
    padding: 60px 24px;
  }

  /* ── Footer ───────────────────────────────────────────────────────── */

  .footer::before {
    max-width: 100%;
    background:
      radial-gradient(ellipse 140% 120% at 48% 120%, #FF9020 0%, rgba(255, 144, 32, 0.4) 38%, rgba(255, 144, 32, 0) 69%),
      radial-gradient(ellipse 160% 160% at 48% 115%, #E07818 15%, rgba(210, 108, 18, 0.5) 31%, rgba(180, 85, 10, 0.15) 60%, rgba(160, 75, 0, 0) 80%);
  }

  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    padding: 40px 20px 32px;
  }

  .footer__bottom {
    padding: 32px 20px 32px;
  }

  .footer__bottom-row--main {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer__bottom-row--legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer__logo img {
    height: 60px;
  }

  .footer__social {
    align-items: flex-start;
  }

}