/**
 * LAOUTS · Responsive polish layer.
 *
 * Loaded AFTER each page's inline <style> so it can override page-level
 * sizing for small/touch devices. Applies fluid typography, grid-collapse
 * cascades, touch targets ≥44px, and mobile-friendly padding across:
 *   • landing.html
 *   • pricing.html
 *   • how-it-works.html
 *   • compare.html
 *   • my-books.html
 *   • upload.html
 *   • cleanse.html
 *   • the engine brand topbar
 *
 * Breakpoints (desktop-down cascade):
 *   1440px   · large desktops scale down from "max"
 *   1280px   · standard laptops
 *   1024px   · small laptops / iPad Pro landscape
 *    900px   · iPad portrait / iPad landscape
 *    768px   · iPad mini portrait / large phone landscape
 *    640px   · large phones / small tablets
 *    480px   · standard phones
 *    360px   · narrow phones (older devices)
 *
 * Specificity: most rules use body.laouts ... so they beat the inline
 * <style> blocks in each page (which have lower or equal specificity).
 */

/* ──────────────── Universal base ─────────────────────────────── */

/** Prevent unwanted horizontal scroll on any page. */
body.laouts {
  overflow-x: hidden;
}

/** Treat all media as block + responsive by default. */
body.laouts img,
body.laouts video {
  max-width: 100%;
  height: auto;
}

/** Honor user's zoom preference; don't force a min font-size. */
body.laouts {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/** Touch target floor — 44px minimum on touch devices for any button. */
@media (hover: none) and (pointer: coarse) {
  body.laouts button,
  body.laouts .btn,
  body.laouts .filter-btn,
  body.laouts .controls__filter,
  body.laouts .laoutsBrandTopbar__link,
  body.laouts .vs-card a,
  body.laouts .product__cta,
  body.laouts .dropzone__cta,
  body.laouts .head__cta,
  body.laouts .cta-button {
    min-height: 44px;
  }
}

/* ──────────────── 1280px and below — laptops ─────────────────── */

@media (max-width: 1280px) {
  body.laouts main {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  body.laouts .hero h1 {
    font-size: clamp(48px, 6vw, 72px) !important;
  }
}

/* ──────────────── 1024px and below — iPad Pro landscape ──────── */

@media (max-width: 1024px) {
  body.laouts main {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.laouts .hero h1 {
    font-size: clamp(44px, 6vw, 64px) !important;
    line-height: 1.04 !important;
  }
  body.laouts .hero__sub {
    font-size: 16.5px !important;
  }
  body.laouts .s__head h2 {
    font-size: clamp(36px, 5vw, 48px) !important;
  }
  body.laouts section.s {
    padding: 64px 0 !important;
  }
  /** Three-up grids stay 3-up on iPad landscape but with tighter gaps. */
  body.laouts .promise,
  body.laouts .principles,
  body.laouts .strip {
    gap: 16px !important;
  }
  body.laouts .formats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
  body.laouts .stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  body.laouts .versus {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /** Compare table — start scaling text down. */
  body.laouts table.compare {
    font-size: 12.5px !important;
  }
  body.laouts table.compare thead th,
  body.laouts table.compare tbody td {
    padding: 12px 14px !important;
  }
}

/* ──────────────── 900px and below — iPad portrait / sm laptop ─ */

@media (max-width: 900px) {
  body.laouts main {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-bottom: 64px !important;
  }
  body.laouts .hero {
    padding: 56px 0 24px !important;
  }
  body.laouts .hero h1 {
    font-size: clamp(40px, 6vw, 56px) !important;
  }
  body.laouts .hero__sub {
    font-size: 16px !important;
    max-width: 580px !important;
  }
  body.laouts section.s {
    padding: 56px 0 !important;
  }
  body.laouts .s__head {
    margin-bottom: 32px !important;
  }
  body.laouts .s__head h2 {
    font-size: clamp(32px, 5vw, 42px) !important;
  }

  /** Two-product / two-philosophy grids collapse to single column. */
  body.laouts .products,
  body.laouts .lines,
  body.laouts .philosophy {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /** Three-up promise / principles cards become single column on iPad portrait. */
  body.laouts .promise,
  body.laouts .principles,
  body.laouts .strip {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /** Versus card grid keeps 2-up. */
  body.laouts .versus {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.laouts .formats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.laouts .stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /** Pricing line size grids collapse. */
  body.laouts .line__sizes {
    grid-template-columns: 1fr !important;
  }
  body.laouts .line {
    padding: 28px 24px !important;
  }
  body.laouts .digital {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 16px !important;
    padding: 28px 28px !important;
  }
  body.laouts .digital__price {
    font-size: 56px !important;
    text-align: left !important;
  }
  /** Phone Cleanse summary collapses to 2x2. */
  body.laouts .summary__row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  body.laouts .summary__cell {
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--laouts-hairline) !important;
  }
  body.laouts .summary__cell:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  /** Compare table — make horizontally scrollable, keep readable. */
  body.laouts .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.laouts table.compare {
    min-width: 720px !important;
  }
  /** My books grid — 2-up. */
  body.laouts .shelf {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 16px !important;
  }
}

/* ──────────────── 768px and below — small tablet / lg phone landscape ─ */

@media (max-width: 768px) {
  body.laouts {
    padding-top: 52px !important;
  }
  body.laouts main {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body.laouts .hero h1 {
    font-size: clamp(36px, 7vw, 48px) !important;
  }
  body.laouts .s__head h2 {
    font-size: clamp(28px, 5vw, 36px) !important;
  }

  /** Topbar tightening — already covered by theme.css for 720px, this layer
   *  is a smoother step at 768px. */
  body.laouts .laoutsBrandTopbar {
    height: 52px !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }
  body.laouts .laoutsBrandTopbar__crumbs,
  body.laouts .laoutsBrandTopbar__divider {
    display: none !important;
  }
  body.laouts .laoutsBrandTopbar__right {
    gap: 12px !important;
  }
  body.laouts .laoutsBrandTopbar__version {
    display: none !important;
  }

  /** Versus card grid — single column at this point. */
  body.laouts .versus {
    grid-template-columns: 1fr !important;
  }
  body.laouts .vs-card {
    padding: 24px 22px !important;
  }
  body.laouts .vs-card__row {
    grid-template-columns: 76px 1fr !important;
  }

  /** Stats — 2x2 stays. */
  body.laouts .stats {
    gap: 12px !important;
  }
  body.laouts .stat {
    padding: 22px 18px !important;
  }
  body.laouts .stat__num {
    font-size: 36px !important;
  }

  /** Drop zones — tighter padding, smaller titles. */
  body.laouts .dropzone {
    padding: 40px 22px !important;
    border-radius: 18px !important;
  }
  body.laouts .dropzone__title {
    font-size: clamp(22px, 5vw, 28px) !important;
  }
  body.laouts .dropzone__icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 28px !important;
    margin-bottom: 14px !important;
  }
  body.laouts .dropzone__sub {
    font-size: 13.5px !important;
  }

  /** Stash / gallery cells — tighter, more per row on tablet. */
  body.laouts .gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  body.laouts .stash__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /** CTA rows become column-stacked. */
  body.laouts .cta-row,
  body.laouts .cta-row.is-active {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  body.laouts .cta-button {
    justify-content: center !important;
  }

  /** Hero CTAs stack on tablet/phone. */
  body.laouts .hero__ctas,
  body.laouts .ctas {
    gap: 10px !important;
  }
  body.laouts .btn,
  body.laouts .cta-button {
    padding: 16px 22px !important;
  }

  /** My-books grid — fluid auto-fill. */
  body.laouts .shelf {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
  body.laouts .head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 32px 0 24px !important;
  }
  body.laouts .head__title h1 {
    font-size: clamp(36px, 7vw, 44px) !important;
  }

  /** Pipeline diagram — keep readable at this size. */
  body.laouts .pipeline {
    font-size: 11.5px !important;
    padding: 22px 18px !important;
  }

  /** Phone Cleanse controls bar — wraps. */
  body.laouts .controls {
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  body.laouts .controls__group {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ──────────────── 640px and below — large phones ─────────────── */

@media (max-width: 640px) {
  body.laouts main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 56px !important;
  }

  /** Stats — single row of 2 at this point. */
  body.laouts .stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /** Brand topbar — wordmark + start CTA only on small phones. */
  body.laouts .laoutsBrandTopbar {
    padding: 0 12px !important;
    gap: 10px !important;
  }
  body.laouts .laoutsBrandTopbar__wordmark {
    font-size: 11px !important;
  }
  body.laouts .laoutsBrandTopbar__glyph {
    width: 16px !important;
    height: 16px !important;
  }
  body.laouts .laoutsBrandTopbar__link {
    font-size: 10.5px !important;
    letter-spacing: 0.10em !important;
  }

  /** Hero — tighter. */
  body.laouts .hero {
    padding: 36px 0 12px !important;
  }
  body.laouts .hero h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.06 !important;
  }
  body.laouts .hero__sub {
    font-size: 14.5px !important;
  }

  /** Section heads. */
  body.laouts section.s {
    padding: 48px 0 !important;
  }
  body.laouts .s__head h2 {
    font-size: clamp(26px, 6vw, 34px) !important;
  }

  /** Drop zones tighter still. */
  body.laouts .dropzone {
    padding: 32px 18px !important;
  }
  body.laouts .dropzone__title {
    font-size: clamp(20px, 6vw, 24px) !important;
  }

  /** Phone cleanse cells smaller. */
  body.laouts .gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 8px !important;
  }

  /** Pricing line cards. */
  body.laouts .line {
    padding: 24px 20px !important;
  }
  body.laouts .line__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  body.laouts .line__title {
    font-size: 26px !important;
  }
  body.laouts .digital__price {
    font-size: 44px !important;
  }
  body.laouts .strip__cell {
    padding: 20px 18px !important;
  }
  body.laouts .strip__cell h3 {
    font-size: 20px !important;
  }

  /** Promise / principle cards tighter. */
  body.laouts .promise__card,
  body.laouts .principle {
    padding: 24px 22px !important;
  }
  body.laouts .promise__card h3 {
    font-size: 24px !important;
  }
  body.laouts .principle h3 {
    font-size: 19px !important;
  }

  /** My books — single column on phone. */
  body.laouts .shelf {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.laouts .book__cover__title {
    font-size: 26px !important;
  }
  body.laouts .head__title h1 {
    font-size: 32px !important;
  }
  body.laouts .head__cta {
    width: 100% !important;
    justify-content: center !important;
  }
  body.laouts .filters {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  body.laouts .filter-btn {
    padding: 10px 12px !important;
    font-size: 10px !important;
  }

  /** Versus cards tighter. */
  body.laouts .vs-card__name {
    font-size: 20px !important;
  }
  body.laouts .vs-card__row {
    grid-template-columns: 70px 1fr !important;
    font-size: 12px !important;
  }

  /** Buttons full-width on phone. */
  body.laouts .hero__ctas .btn,
  body.laouts .ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /** Footers stack. */
  body.laouts footer.foot {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ──────────────── 480px and below — standard phones ──────────── */

@media (max-width: 480px) {
  body.laouts main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  body.laouts .hero h1 {
    font-size: clamp(26px, 8vw, 32px) !important;
  }
  body.laouts .s__head h2 {
    font-size: clamp(24px, 6vw, 30px) !important;
  }
  body.laouts .stats {
    grid-template-columns: 1fr !important;
  }
  body.laouts .dropzone__title {
    font-size: 20px !important;
  }
  body.laouts .product h3,
  body.laouts .ph h3 {
    font-size: 22px !important;
  }
  body.laouts .promise__card h3 {
    font-size: 22px !important;
  }
  body.laouts .formats {
    grid-template-columns: 1fr !important;
  }
  body.laouts .laoutsBrandTopbar__right {
    gap: 8px !important;
  }
  /** Drop hover state — touch-friendly. */
  body.laouts .dropzone {
    padding: 28px 16px !important;
  }
  body.laouts .dropzone__icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  /** Tighter list/inline elements. */
  body.laouts .gallery__cell__filename {
    font-size: 9px !important;
  }
  body.laouts .pipeline {
    font-size: 10.5px !important;
    padding: 18px 14px !important;
  }
  /** Long horizontal table needs to be scrollable on small phones. */
  body.laouts table.compare {
    font-size: 11.5px !important;
  }
  body.laouts table.compare thead th,
  body.laouts table.compare tbody td {
    padding: 10px 10px !important;
  }
}

/* ──────────────── 520px and below — iPhone width — collapse topbar ──── */

@media (max-width: 520px) {
  body.laouts .laoutsBrandTopbar {
    padding: 0 12px !important;
    height: 48px !important;
  }
  body.laouts .laoutsBrandTopbar__tagline {
    display: none !important;
  }
  /** Phone topbar = brand mark + wordmark + Start your book CTA only.
   *  All other nav links collapse — keep the row from wrapping. */
  body.laouts .laoutsBrandTopbar__right .laoutsBrandTopbar__link:not(.laoutsBrandTopbar__link--accent) {
    display: none !important;
  }
  body.laouts .laoutsBrandTopbar__link--accent {
    padding: 8px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
}

/* ──────────────── 360px and below — narrow phones ────────────── */

@media (max-width: 360px) {
  body.laouts main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.laouts .laoutsBrandTopbar {
    padding: 0 10px !important;
  }
  body.laouts .hero h1 {
    font-size: 24px !important;
  }
  body.laouts .s__head h2 {
    font-size: 22px !important;
  }
}

/* ──────────────── Landscape phone — short viewport adjustments ─ */

@media (max-height: 480px) and (orientation: landscape) {
  body.laouts .hero {
    padding: 24px 0 12px !important;
  }
  body.laouts section.s {
    padding: 36px 0 !important;
  }
}

/* ──────────────── Reduced motion ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.laouts *,
  body.laouts *::before,
  body.laouts *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ──────────────── Print ──────────────────────────────────────── */

@media print {
  body.laouts {
    background: #fff !important;
    color: #000 !important;
    padding-top: 0 !important;
  }
  body.laouts main {
    padding: 0 !important;
    max-width: none !important;
  }
  body.laouts .laoutsBrandTopbar,
  body.laouts .filters,
  body.laouts .controls,
  body.laouts .hero__ctas,
  body.laouts .ctas,
  body.laouts .cta-row,
  body.laouts .head__cta {
    display: none !important;
  }
  body.laouts .hero h1,
  body.laouts .s__head h2 {
    color: #000 !important;
  }
}