/* ==========================================================================
   ANVIXA.ai, phone layout

   Loaded last. The desktop scale is set with clamp() minimums that are still
   too large below ~640px, and the section rhythm built for a 1440px canvas
   makes the page enormous on a phone. This tightens both.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- Rhythm ----------------------------------------------------------- */

  :root {
    --ax-section-y: 44px;
    --ax-section-y-sm: 30px;
    --ax-gutter: 18px;
  }

  .ax-section-head { margin-bottom: 26px; }
  .ax-grid { gap: 14px; }
  .ax-split, .ax-split--text-first { gap: 28px; }

  /* --- Type scale ------------------------------------------------------- */

  h1 { font-size: 1.75rem; line-height: 1.18; letter-spacing: -.025em; }
  h2 { font-size: 1.375rem; line-height: 1.24; letter-spacing: -.02em; }
  h3 { font-size: 1.0625rem; line-height: 1.3; }
  h4 { font-size: 1rem; }

  .ax-hero h1 { font-size: 1.9375rem; line-height: 1.16; }

  .ax-lede,
  .ax-hero__lede,
  .ax-page-hero p { font-size: 1rem; line-height: 1.62; }
  .ax-lede--lg { font-size: 1.0625rem; }

  .ax-card__text,
  .ax-checks li,
  .ax-row__text,
  .ax-scenario__summary { font-size: .875rem; line-height: 1.6; }

  .ax-eyebrow { font-size: .6875rem; letter-spacing: .13em; margin-bottom: 12px; }

  /* --- Buttons ---------------------------------------------------------- */

  .ax-btn { padding: 12px 20px; font-size: .875rem; }
  .ax-btn-row { gap: 10px; }
  /* A single call to action reads better full width than floated left */
  .ax-btn-row > .ax-btn:only-child { width: 100%; }

  /* --- Cards ------------------------------------------------------------ */

  .ax-card { padding: 20px; border-radius: var(--ax-r-md); }
  .ax-card__title { margin-bottom: 6px; }
  .ax-icon { width: 34px; height: 34px; margin-bottom: 10px; }
  .ax-icon .ax-i { width: 18px; height: 18px; }

  /* The arrow sits inline rather than absolutely, so the card keeps even
     padding instead of reserving 52px on the right. */
  .ax-card--link { padding-right: 20px; }
  .ax-card__go {
    position: static;
    margin-top: 14px;
    width: 28px;
    height: 28px;
  }

  /* --- Hero ------------------------------------------------------------- */

  .ax-hero { padding-block: 48px; }
  .ax-hero__grid { gap: 30px; }
  .ax-hero__lede { margin-bottom: 24px; }
  .ax-hero__meta { gap: 8px 18px; margin-top: 26px; padding-top: 20px; }
  .ax-hero__meta span { font-size: .6875rem; letter-spacing: .1em; }

  /* The hero panel lists the same platform pillars the section below repeats
     in full, so on a phone it is ~800px of duplicate scrolling. The "Explore
     the platform" button already covers its call to action. */
  .ax-hero__panel { display: none; }

  .ax-page-hero { padding-block: 40px; }
  .ax-page-hero .ax-btn-row { margin-top: 24px; }
  .ax-crumb { margin-bottom: 14px; font-size: .6875rem; }

  /* --- Steps, stats, values -------------------------------------------- */

  .ax-step { padding: 18px; gap: 4px; }
  .ax-step h3 { font-size: 1rem; }
  .ax-step p { font-size: .875rem; }
  .ax-step__marker { font-size: .6875rem; }

  .ax-stat { padding: 18px 14px; }
  .ax-stat__num { font-size: 1.625rem; margin-bottom: 6px; }
  .ax-stat__label { font-size: .6875rem; letter-spacing: .1em; }

  .ax-value { padding: 20px; }
  .ax-office { padding: 20px; }

  /* --- Tables ----------------------------------------------------------- */

  .ax-table { min-width: 560px; font-size: .875rem; }
  .ax-table th, .ax-table td { padding: 14px 14px; }
  .ax-table thead th { font-size: .6875rem; }
  .ax-table__detail { font-size: .75rem; }
  .ax-table-note { font-size: .75rem; }

  /* --- Pricing, scenarios, layers -------------------------------------- */

  .ax-tier { padding: 22px 20px; }
  .ax-tier h3 { font-size: 1.0625rem; }
  .ax-tier__for { font-size: .8125rem; margin-bottom: 16px; }
  .ax-tier__meta { gap: 10px; padding: 14px 0; margin-bottom: 16px; }
  .ax-tier__meta dd { font-size: .8125rem; }

  .ax-scenario { padding: 20px; }
  .ax-scenario__head { gap: 12px; margin-bottom: 16px; }
  .ax-flowrow__cell { padding: 16px; }
  .ax-flowrow__cell p { font-size: .8125rem; }

  .ax-layer { padding: 20px; gap: 12px; }
  .ax-layer h3 { font-size: 1.0625rem; }

  .ax-rows .ax-row { padding: 16px 18px; }
  .ax-row__name { font-size: .875rem; }

  /* --- CTA and footer --------------------------------------------------- */

  .ax-cta { padding: 30px 20px; border-radius: var(--ax-r-xl); }
  .ax-cta h2 { font-size: 1.3125rem; }
  .ax-cta p { font-size: .9375rem; margin-bottom: 22px; }

  .ax-footer { padding-top: 36px; font-size: .8125rem; }

  /* Link groups sit two-up instead of stacking, which took the footer past
     1,500px on a phone. The brand block keeps the full width above them. */
  .ax-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
    padding-bottom: 26px;
  }
  .ax-footer__brand { grid-column: 1 / -1; }
  .ax-footer__about { font-size: .8125rem; line-height: 1.6; margin-top: 12px; }
  .ax-footer__brand .ax-footer__contact { margin-top: 12px; }

  /* Company is the odd third group, so it spans the row and splits its own
     links two-up rather than leaving half the row empty. */
  .ax-footer__grid > div:last-child { grid-column: 1 / -1; }
  .ax-footer__grid > div:last-child ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  .ax-footer h4 { margin-bottom: 9px; font-size: .6875rem; letter-spacing: .12em; }
  /* Footer links were 17px tall, well under a comfortable thumb. The padding
     buys the tap area without changing where the text sits. */
  .ax-footer li { margin-bottom: 0; }
  .ax-footer__grid a,
  .ax-footer__legal a {
    display: inline-block;
    padding-block: 7px;
    font-size: .8125rem;
    line-height: 1.5;
  }

  .ax-footer__offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 20px 0;
    gap: 16px 18px;
  }
  .ax-footer__office-label { margin-bottom: 6px; }
  .ax-footer__office address { font-size: .75rem; line-height: 1.55; }

  .ax-footer__bar { padding-block: 16px; font-size: .6875rem; gap: 8px 16px; }
  .ax-footer__legal ul { gap: 6px 14px; }

  /* --- Forms ------------------------------------------------------------ */

  .ax-form-card { padding: 22px 20px; }
  .ax-form { gap: 14px; }
  .ax-form__row { gap: 14px; }
  .ax-field label { font-size: .75rem; }
  .ax-field input,
  .ax-field select,
  .ax-field textarea { padding: 11px 12px; font-size: 1rem; }
  .ax-field textarea { min-height: 108px; }
  .ax-contact-panel { padding: 22px 20px; }
  .ax-contact-grid { gap: 32px; }

  /* --- Editorial -------------------------------------------------------- */

  .ax-post-card__body { padding: 18px; }
  .ax-post-card h3 { font-size: 1rem; }
  .ax-post-card__excerpt { font-size: .875rem; }
  .ax-prose { font-size: 1rem; }
  .ax-legal h2 { font-size: 1.1875rem; }
  .ax-page-privacy-policy .ax-legal h3 ~ p,
  .ax-page-privacy-policy .ax-legal h3 ~ ul,
  .ax-page-privacy-policy .ax-legal h3 ~ ol,
  .ax-page-terms-of-service .ax-legal h3 ~ p,
  .ax-page-terms-of-service .ax-legal h3 ~ ul,
  .ax-page-terms-of-service .ax-legal h3 ~ ol,
  .ax-page-refund-policy .ax-legal h3 ~ p,
  .ax-page-refund-policy .ax-legal h3 ~ ul,
  .ax-page-refund-policy .ax-legal h3 ~ ol {
    margin-left: 1.8rem;
  }

  .ax-logos { gap: 12px 26px; }
  .ax-logo-word { font-size: .9375rem; }

  .ax-faq__q { font-size: 1rem; padding: 18px 0; gap: 16px; }
  .ax-faq__a { font-size: .875rem; padding-bottom: 18px; }
}

/* Very narrow phones: one more step down so headings never overflow. */
@media (max-width: 380px) {
  h1 { font-size: 1.625rem; }
  .ax-hero h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  .ax-btn { padding: 11px 16px; font-size: .8125rem; }
  .ax-card { padding: 18px; }
}

@media (max-width: 640px) {
  .ax-brand__mark { width: auto; height: 60px; }
  .ax-brand__parent { font-size: .4375rem; letter-spacing: .12em; }
}

/* Wide comparison tables scroll inside their wrapper. On a phone that is not
   obvious, so the right edge fades to signal there is more to the side. */
@media (max-width: 640px) {
  .ax-table-wrap {
    position: relative;
    background:
      linear-gradient(to right, var(--ax-white) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat,
      linear-gradient(to left, var(--ax-white) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(10, 22, 40, .10), rgba(10, 22, 40, 0)) left center / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(10, 22, 40, .10), rgba(10, 22, 40, 0)) right center / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Tablet: between the phone rules and the four-column desktop grid the brand
   paragraph was being squeezed into a half-width column, which made the footer
   taller at 768px than at 390px. The brand spans, and the three link groups
   sit three-up. */
@media (min-width: 641px) and (max-width: 1040px) {
  .ax-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    padding-bottom: 32px;
  }
  .ax-footer__brand { grid-column: 1 / -1; }
  .ax-footer__about { max-width: 62ch; }
  .ax-footer__offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Phone carousels

   carousel.js flips any group of four or more cards into a snap-scrolling
   track below 700px. The markup does not change: the same element is a grid
   above the breakpoint and a flex track below it, so there is one DOM and no
   duplicated content. Groups of three or fewer keep stacking.
   ========================================================================== */

@media (max-width: 700px) {

  .is-carousel {
    display: flex;
    flex-wrap: nowrap;
    /* The grid template would otherwise keep sizing the flex children. */
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the screen edges so a card can peek in from the next slide,
       which is what tells someone the track scrolls at all. */
    margin-inline: calc(var(--ax-gutter) * -1);
    padding-inline: var(--ax-gutter);
    scroll-padding-inline: var(--ax-gutter);
    padding-block: 4px;
    scrollbar-width: none;
    border-top: 0;
  }
  .is-carousel::-webkit-scrollbar { display: none; }

  .is-carousel > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
    /* Rows that used negative side margins to bleed are now slides. */
    margin-inline: 0;
  }

  /* A hover lift inside a scroller fights the swipe, and there is no hover on
     a touch screen to justify it. */
  .is-carousel > *:hover { transform: none; }

  /* Pillar rows are separated by hairlines on desktop. As slides they need to
     read as discrete cards instead. */
  .is-carousel.ax-pillars { border-top: 0; }
  .is-carousel > .ax-pillar {
    /* As a row the icon, text and arrow sat in columns. Inside an 84%-wide
       slide that left the paragraph about 170px and two words a line, so the
       slide stacks instead. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--ax-border-warm);
    border-radius: var(--ax-r-lg);
    background: var(--ax-white);
    padding: 20px 18px;
  }
  .is-carousel > .ax-pillar .ax-pillar__go { margin-top: auto; }

  .ax-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }
  .ax-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--ax-r-pill);
    background: var(--ax-n-30);
    cursor: pointer;
    transition: width var(--ax-dur) var(--ax-ease), background var(--ax-dur) var(--ax-ease);
  }
  .ax-carousel__dot.is-active { width: 22px; background: var(--ax-accent); }
  /* The dot itself stays small for rhythm; the touch area does not. */
  .ax-carousel__dot::before {
    content: "";
    position: absolute;
    inset: -14px -6px;
  }
  .ax-carousel__dot { position: relative; }
}