/* ============================================================
   helm — responsive overrides

   The site is authored at 1440px and JS-scaled to fit for tablet/
   desktop. Below 800px (phone) we abandon scaling and let CSS take
   over with a native fluid layout.

   Important: every override is inside an @media query, so these
   rules only apply at narrow widths regardless of JS state. We
   don't depend on the body[data-responsive] attribute because that
   has bitten us before (specificity + race conditions).
   ============================================================ */


/* ------------------------------------------------------------ */
/* TABLET — 800–1180px                                           */
/* Mostly cosmetic: tighter padding, slightly smaller display.    */
/* ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .helm-section { padding: 72px 56px; }
  .page-section { padding: 64px 56px; }
  .page-hero    { padding: 56px 56px 40px; }
  .h-display.lg { font-size: 60px; }
  .h-display.md { font-size: 44px; }
  .h-display.sm { font-size: 34px; }
  .page-hero h1.page-title { font-size: 48px; }
}


/* ------------------------------------------------------------ */
/* MOBILE — under 800px                                          */
/* Abandon the 1440 scale. Go fluid.                              */
/* ------------------------------------------------------------ */
@media (max-width: 800px) {

  /* --- 1. Kill the 1440 fixed width ---------------------------------- */

  /* page.css has `#page-fit > .helm-art { width: 1440px; min-width: 1440px; flex-shrink: 0; }`
     which beats a plain class selector even with !important. We match
     the same specificity (1 id + 1 class) to override. */
  #page-fit > .helm-art {
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    transform: none !important;
    transform-origin: top left !important;
  }
  #page-fit {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Some pages set .helm-art width directly from shared.css — also kill */
  .helm-art {
    width: 100% !important;
    min-width: 0 !important;
  }


  /* --- 2. Section padding & display type ----------------------------- */

  .helm-section { padding: 56px 20px !important; }
  .page-section { padding: 48px 20px !important; }
  .page-section.tight { padding: 32px 20px !important; }
  .page-hero    { padding: 40px 20px 32px !important; }

  .h-display.lg { font-size: 40px !important; line-height: 1.05 !important; }
  .h-display.md { font-size: 34px !important; line-height: 1.1 !important; }
  .h-display.sm { font-size: 28px !important; line-height: 1.15 !important; }
  .page-hero h1.page-title { font-size: 36px !important; line-height: 1.1 !important; }
  .page-hero p.page-lede   { font-size: 16px !important; }
  .page-section h2 { font-size: 28px !important; line-height: 1.15 !important; }
  .lede { font-size: 16px !important; }


  /* --- 3. Collapse every multi-column grid into a single column ------ */

  /* React renders inline styles in kebab-case, so [style*="grid-template-columns"]
     matches anything with an inline column definition. */
  .helm-art [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* And flip RTL trick rows back to LTR so reverse pairs read top-to-bottom */
  .helm-art [style*="direction: rtl"] {
    direction: ltr !important;
  }


  /* --- 4. Top nav: keep logo + CTA, hide the link row ---------------- */

  /* nav element has padding: 20px 80px from inline style; tighten + hide centre links */
  .helm-art nav {
    padding: 14px 16px !important;
    flex-wrap: wrap;
  }
  /* The middle group of nav links is `nav > div:first-child > div:last-child` */
  .helm-art nav > div:first-child > div:last-child {
    display: none !important;
  }
  .helm-art nav img { height: 24px !important; }


  /* --- 5. Buttons --------------------------------------------------- */

  .helm-art .btn {
    padding: 12px 16px;
    font-size: 14px;
  }


  /* --- 6. Floating hero callouts — they overlap badly on mobile ------ */

  .v1-callout { display: none !important; }


  /* --- 7. Dashboard mockups — hide entirely on mobile.
     They're dense, multi-column UI that doesn't read at phone widths.
     The surrounding copy + bullets still tell the story. */

  .ui-window { display: none !important; }


  /* --- 8. Auth split screen → stack ---------------------------------- */

  .auth-shell {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .auth-form  { padding: 40px 20px 32px !important; }
  .auth-aside { padding: 40px 20px 48px !important; }


  /* --- 9. Footer — single column ------------------------------------- */

  footer > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 28px !important;
  }
  footer > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }


  /* --- 10. Legal pages — drop the sticky TOC sidebar ----------------- */

  .legal-prose { font-size: 15px !important; }
  .cl-title { font-size: 22px !important; }


  /* --- 11. Big rounded gradient bands shrink ------------------------- */

  .helm-art [style*="border-radius: 24px"],
  .helm-art [style*="border-radius: 22px"] {
    border-radius: 16px !important;
  }
  .helm-art [style*="padding: 72px 64px"],
  .helm-art [style*="padding: 60px 56px"],
  .helm-art [style*="padding: 56px 56px"],
  .helm-art [style*="padding: 56px"]:not([style*="56px 0"]) {
    padding: 32px 20px !important;
  }


  /* --- 12. Hide the tweaks toolbar on phone -------------------------- */

  [class*="twk-"], [data-tweaks-fab], #twk-fab, .twk-fab {
    display: none !important;
  }
}


/* ------------------------------------------------------------ */
/* SMALL MOBILE — under 480px                                    */
/* ------------------------------------------------------------ */
@media (max-width: 480px) {
  .h-display.lg            { font-size: 32px !important; }
  .page-hero h1.page-title { font-size: 30px !important; }

  /* Hide the textual "Sign in" link, keep just the CTA button */
  .helm-art nav > div:last-child > a {
    display: none !important;
  }

  /* Stack buttons full-width when they're in a row */
  .helm-art [style*="display: flex"][style*="gap: 12px"] > .btn {
    width: 100%;
    justify-content: center;
  }
}