/*
 * Makes the fixed 1440px design work on smaller screens.
 *
 * The pages come from the Design canvas with every style inline, so these
 * rules match on those inline styles and need !important to win. Hand-written:
 * scripts/build-site.js links this file but never overwrites it.
 */

/* Laptops and tablets: the desktop layout, scaled down to fit. */
@media (max-width: 1439px) { body > div { zoom: 0.9; } }
@media (max-width: 1295px) { body > div { zoom: 0.8; } }
@media (max-width: 1151px) { body > div { zoom: 0.7; } }

/* Phones and small tablets: one column. */
@media (max-width: 1007px) {
  body > div {
    zoom: 1;
    width: 100% !important;
    height: auto !important;
    overflow-x: clip !important;
  }

  /* Header: logo, Log in, Get started. The page links move to the footer. */
  header {
    height: 64px !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }
  header img { width: 150px !important; height: auto !important; }
  header nav { display: none !important; }
  header > div { gap: 14px !important; }
  header a[style*="height: 44px"] { height: 40px !important; padding: 0 16px !important; }
  header a svg { display: none; }

  section, footer {
    padding: 44px 16px !important;
    gap: 28px !important;
  }
  header + section { padding-top: 20px !important; }
  /* Sign-up has no header; its opening panels run edge to edge. */
  body > div > section:first-child { padding: 0 !important; }
  body > div > section:first-child img { width: 180px !important; height: auto !important; }

  /* Side-by-side layouts stack. Layout rows have gaps of 14px or more; small
     rows (an icon beside its label, an avatar beside a name) have less or
     none, and stay on one line. */
  :is(section, footer)[style*="display: flex"],
  :is(section, footer) [style*="display: flex"]:not([style*="inline-flex"]):is(
    [style*="gap: 14px"], [style*="gap: 16px"], [style*="gap: 18px"], [style*="gap: 20px"],
    [style*="gap: 22px"], [style*="gap: 24px"], [style*="gap: 26px"], [style*="gap: 30px"],
    [style*="gap: 34px"], [style*="gap: 40px"], [style*="gap: 44px"], [style*="gap: 48px"],
    [style*="gap: 60px"], [style*="gap: 64px"], [style*="gap: 80px"]) { flex-wrap: wrap !important; }

  /* Product screenshots built from markup: drop the app's sidebar so the
     main panel has room; the rest crops at the frame like a screenshot. */
  [style*="width: 148px"][style*="flex-shrink: 0"] { display: none !important; }
  /* The inbox shot has three panes; a phone shows the queue, like the app would. */
  [style*="display: flex; height: 452px"] > :not(:first-child) { display: none !important; }

  /* Arrows between steps point down once the steps stack. */
  section svg[style*="align-self: center"] { transform: rotate(90deg); margin: 0 auto; }
  section[style*="display: flex"]:not([style*="flex-direction: column"]) { align-items: stretch !important; }
  [style*="flex: 1 1 0"] { flex: 1 1 100% !important; min-width: 0 !important; }
  [style*="flex-grow: 1"] { min-width: 0 !important; }
  [style*="gap: 60px"], [style*="gap: 64px"], [style*="gap: 48px"] { gap: 28px !important; }
  [style*="gap: 20px"] { gap: 14px !important; }

  /* Fixed-width columns and panels fill the screen instead. */
  [style*="width: 1440px"], [style*="width: 900px"], [style*="width: 736px"],
  [style*="width: 660px"], [style*="width: 620px"], [style*="width: 540px"],
  [style*="width: 520px"], [style*="width: 500px"], [style*="width: 460px"],
  [style*="width: 430px"], [style*="width: 420px"], [style*="width: 360px"],
  [style*="width: 320px"], [style*="width: 300px"] {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
  [style*="height: 880px"], [style*="height: 452px"] { height: auto !important; }

  /* Grids: four across becomes two, three or two becomes one. */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Floating cards around the product shots sit underneath them instead. */
  [style*="position: absolute"] {
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    margin-top: 12px;
    width: auto !important;
  }

  /* Dividers between items that now wrap onto several lines. */
  span[style*="width: 1px"] { display: none !important; }

  /* Type. */
  h1[style*="font-size: 96px"] { font-size: 58px !important; }
  h1 { font-size: 32px !important; }
  h2[style*="font-size: 5"], h2[style*="font-size: 4"] { font-size: 34px !important; }
  h2[style*="font-size: 3"] { font-size: 30px !important; }
  h3 { font-size: 22px !important; }
  p[style*="font-size: 20px"] { font-size: 17px !important; }

  /* Big inner padding on cards and panels. */
  [style*="padding: 58px"] { padding: 32px 16px !important; }
  [style*="padding: 32px"] { padding: 22px !important; }
  [style*="padding: 64px"], [style*="padding: 60px"] { padding: 36px 22px !important; }
  footer [style*="flex-grow: 1"] { flex: 1 1 100% !important; }
}