/* ── 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) {

  /* (Horizontal-overflow guard from 100vw full-bleed elements is now global —
     see `html { overflow-x: clip }` in reset.css.) */

  /* Column edge lines (fixed pseudo-element on .page-wrapper) — plus the orange
     hero corner brackets that sit ON those lines (--rail-edge, see hero.css).
     With the rail hidden below 1300px there's nothing for them to anchor to, so
     drop them on every page. Top TL/TR (.nav__hero-corner) hidden globally. */
  .page-wrapper::after,
  .hero__corner--bl,
  .hero__corner--br { 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;
  }

  /* The label and the marquee travel together at the section foot. On the home
     page logos-pin.js stretches this section down to the fold, so the auto
     margin has real slack to eat — it goes on the LABEL, not the marquee, or
     the slack opens up between the two and the label strands itself at the top
     of the section with the logos a screen-height below it. The gap between
     them is then just the label margin-bottom. Elsewhere (the industry hero
     pages) the section is its natural height, there is no slack, and the auto
     margin resolves to 0 — same layout as before. */
  .logos-section__label {
    margin-top: auto;
    margin-bottom: 20px;
    padding: 0 24px;
  }

  .logos-section__marquee {
    padding-bottom: 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; }

  /* Below 1300px the rail (tram lines + corner brackets) is hidden, so the nav
     box has nothing left to align to — drop the rail width and its
     --rail-min-margin gutter, which together pushed the logo and hamburger ~59px
     in from the edges. The nav now uses the same 16px gutter as the mobile hero. */
  .nav__inner {
    width: 100%;
    max-width: none;
    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;
    /* The 22px bars sit 7px inside the 36px tap target, so pull the button
       out by that much: the bars then line up on the same 16px gutter as the
       logo, while the tap target still reaches the screen edge. */
    margin-right: -7px;
    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;
  }

  /* Product hero: the centred H1 shrinks via --h1-size like every other H1 and
     the button sits centred below it in .hero__ctas, so nothing here needs a
     phone-specific override. */

  /* ── Hero stat strip: stack it, pinned to the hero foot ─────────────
     Desktop pins this as a 200px absolute band across the tram lines, split
     into thirds by vertical rules with orange squares at every crossing
     (hero.css). None of that survives a phone: three cells inside the rail
     inset leave ~76px of text width each, so the labels shred into 5-line
     ribbons and the use-case values (48px, `white-space: nowrap` — "10s of TB",
     "30,000+") run past the cell and get cut off by `html { overflow-x: clip }`.

     So on mobile it becomes a plain vertical list, matching the case-study
     metrics strip (.cs-metrics, case-studies.css): one inset top rule, then
     value/label pairs — no interior dividers, no nodes, no full-bleed rule.

     `position: static` is load-bearing: stacked, the strip is ~3x taller, and
     absolute + `bottom: 0` reserves no space, so it would land on top of the H1
     and CTA. In flow it also picks up the hero's 16px gutter, lining up with the
     heading rather than sitting at the 43px rail inset.

     Bottom alignment is the flex column below: hero-fill.js sizes the hero to
     the fold, the H1/subhead/CTA don't fill it, and `margin-top: auto` hands the
     stat strip all the slack — so it sits on the hero's bottom edge with the
     logo strip directly beneath, which is the desktop composition, stacked. On a
     viewport too short for slack the auto margin collapses to 0 and the strip's
     own padding-top keeps it off the CTA. */
  .hero--industry {
    display: flex;
    flex-direction: column;
  }

  .hero__stats {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: auto;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* The desktop full-bleed top rule (replaced by the inset border-top above)
     and the four orange crossing squares. */
  .hero__stats::before,
  .hero__stats-node {
    display: none;
  }

  .hero__stat {
    padding: 0;
    gap: 8px;
  }

  /* Matching specificity: the desktop divider is `.hero__stat + .hero__stat`
     (0,2,0), so a plain `.hero__stat` reset would lose to it. */
  .hero__stat + .hero__stat {
    border-left: none;
  }

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

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

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

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

  /* The card is a fixed, viewport-centred overlay at every breakpoint (card.css).
     Mobile just swaps its fixed 600px for the screen gutters. The right gutter is
     wider than the left on purpose — measured on device, 16/16 read as too wide. */
  .feature-card {
    left: 16px;
    right: 30px;
    width: auto;
    box-sizing: border-box;
    transform: translateY(-50%);
    height: auto;
    min-height: 203px;
  }

  /* Expanded: fill the screen inside the gutters instead of the centred box. The
     50px foot is deeper than the 30px side for the same reason the logo strip
     needed clearance — a fixed `bottom` is measured against the LARGE viewport,
     so 16px put the input group behind the browser/OS bar. */
  .feature-card.is-expanded {
    top: 64px;
    left: 16px;
    right: 30px;
    bottom: 50px;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    overflow: visible;
  }

  /* Close button styling/position is shared with desktop — see card.css.
     The expanded mobile card keeps overflow: visible, so the absolutely
     positioned button sits inside the top-right corner just like desktop. */

  /* ── 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: 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;
  }

  /* Match the 20px pad above — the desktop -38px pokes 18px past the viewport,
     and mobile browsers widen the layout viewport to fit it despite
     `html { overflow-x: clip }` (site-wide sideways scroll + dark band). */
  .footer__rule:not(.footer__rule--top) {
    margin: 0 -20px;
  }

  .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;
  }

}