/* Mobile layer.
 *
 * Every page is authored as a 1025px canvas with inline styles. Rather than
 * restructure eleven files, the recurring layout patterns carry a small class
 * each (stamped once, m-*) and this sheet responds to them. Nothing here
 * changes desktop; every rule is inside a max-width query.
 *
 * Inline styles beat class rules on specificity, so the overrides need
 * !important. Classes rather than [style*=] matching is deliberate: templates
 * compile inline styles into React style objects, and the browser re-serializes
 * them differently across engines — a sheet matched on style text works in one
 * browser and silently fails in another.
 */

/* The hamburger is only ever shown by the query below. */
.nav-burger { display: none; }

@media (max-width: 760px) {

  /* Swap the wrapped link rows for the sheet trigger. */
  .nav-desk { display: none !important; }
  .nav-burger { display: inline-flex !important; align-items: center; }

  /* The page wrapper clips instead of scrolling, which is why text was being
     cut mid-word rather than reflowing. */
  .m-page {
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Section gutters. 34px each side of a 390px screen leaves 322px of measure;
     20px reads better without feeling edge-to-edge. */
  .m-page > section,
  .m-page > div > section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* The eyebrow left-rail: a 158px column for a short label eats 40% of a
     phone. Stack it, and let the label sit tight above its paragraph. */
  .m-rail {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .m-rail > :first-child { padding-top: 0 !important; }

  /* Card and stat grids. Three columns become one; four become two, which
     keeps image grids reading as a grid rather than a long stack. */
  .m-cards3 { grid-template-columns: 1fr !important; }
  .m-cards4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Two-up blocks: form fields, footer columns, comparison panels. */
  .m-twoup { grid-template-columns: 1fr !important; }

  /* The pathway rail: four stages on one line, labels shrunk to fit rather
     than wrapped onto a second row inside a fixed-height box. */
  .m-stage { height: auto !important; min-height: 76px !important; }
  .m-rail4 { grid-template-columns: repeat(4, 1fr) !important; }
  .m-rail4 button span:last-child {
    font-size: 8.5px !important;
    letter-spacing: 0.06em !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Staggered columns only read as stagger side by side. Stacked, the offset
     is a hole. */
  .m-stagger { padding-top: 0 !important; }

  /* Decorative artwork that becomes the whole screen once columns stack. */
  .m-decor { display: none !important; }

  /* A fixed 327px first row leaves a gap when the column is full width. */
  .m-rowsauto { grid-template-rows: auto auto !important; row-gap: 22px !important; }

  /* Desktop indents that push text off a phone. */
  .m-indent { margin-left: 0 !important; }

  /* Portrait crops framed for a narrow column run 600px tall at full width. */
  .m-portrait { aspect-ratio: 4 / 5 !important; }

  /* Square card images become a screenful each once the columns stack. */
  .m-cardimg { aspect-ratio: 16 / 9 !important; }

  /* Desktop column offsets read as blank screens when stacked. */
  .m-offset { padding-top: 0 !important; }

  /* minmax() column sets on Confluence — same story, different notation. */
  .m-flex1 { grid-template-columns: 1fr !important; gap: 26px !important; }

  /* The five-across audience picker: full-width tiles, since each carries a
     headline and a chip beneath it. */
  .m-cards5 { grid-template-columns: 1fr !important; }

  /* The day chips stay a grid — they are small and read better across. */
  .m-chips5 { grid-template-columns: repeat(3, 1fr) !important; }

  /* Interactive tools put a fixed control panel beside its results. Stack the
     panel on top and turn the vertical divider horizontal. */
  .m-split { grid-template-columns: 1fr !important; }
  .m-split > :first-child,
  .m-twoup > :first-child {
    border-right: 0 !important;
  }
  .m-split > :first-child {
    border-bottom: 1px solid #ddd6cc !important;
  }

  /* The Home hero. Two absolutely positioned cards — the solar readout on the
     right, the mission statement on the left — overlap on a phone and the
     readout runs off the edge. Lay them out in flow instead, stacked against
     the bottom of a shorter hero. */
  .m-hero {
    height: auto !important;
    min-height: 78vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 16px 26px !important;
    gap: 12px !important;
  }
  .m-herocard {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  /* The Home hero clips its own artwork with overflow:hidden. On iOS that
     clip also catches position:fixed descendants, which is why the menu
     opened as a stub inside the hero instead of covering the page. The
     hero's children are all inset:0, so nothing spills without it. */
  .m-hero { overflow: visible !important; }

  /* dvh accounts for the iOS address bar; the fallback above it covers
     engines that do not support it. */
  .m-sheet { height: 100dvh !important; }

  /* On Home the nav is mounted inside the hero, in a z-index:10 wrapper. That
     wrapper is a stacking context, so the sheet's z-index:200 only competed
     inside it — and the hero cards, later siblings at the same level, painted
     straight over the menu. Lift the wrapper, and drop the cards behind it. */
  .m-navtop { z-index: 300 !important; }
  .m-herocard { z-index: 1 !important; }

  /* The Welcome scroll sequence: six full-screen lines set at 45px, which on a
     390px screen wraps the longer ones four or five deep. */
  [data-anim="line"] {
    font-size: 34px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.6px !important;
  }

  /* The newsletter signup is an input beside a button; together they exceed a
     phone. Stack them and let each take the full width. */
  .m-signup {
    flex-direction: column !important;
    width: 100% !important;
  }
  .m-signup input[type="email"],
  .m-signup button { width: 100% !important; }

  /* The social row was pinned right inside a cell that no longer has a
     neighbour to sit beside. */
  .m-social { justify-content: center !important; }

  /* Anything still wider than the viewport scrolls rather than clips. */
  svg[viewBox], table { max-width: 100%; }
}

@media (max-width: 480px) {

  .m-page > section,
  .m-page > div > section {
    padding-top: 48px !important;
    padding-bottom: 42px !important;
  }

  [data-anim="line"] {
    font-size: 28px !important;
    letter-spacing: -0.4px !important;
  }
}