/* Responsive layer for the landing page.
 *
 * The page is a Claude Design canvas rendered to static HTML: 937 inline style
 * attributes, 421 absolutely positioned elements, every size in pixels, laid
 * out for a 1280px artboard. Inline styles beat stylesheets, so every rule
 * here is an attribute selector on the inline style itself, with !important.
 * Ugly, and the correct trade: it leaves the desktop design byte-identical and
 * changes only what actually breaks.
 *
 * The decoration survives on its own. Sun, clouds and hills are anchored to
 * left:50% with pixel offsets, so they stay centred and simply run off the
 * edges, which is what a horizon is supposed to do. What needs help is the
 * text: fixed blocks, fixed type sizes, and flex rows that never learned to
 * wrap.
 */

/* ---- Tablet and below ------------------------------------------------- */
@media (max-width: 1100px) {
  [style*="max-width: 1180px"] { padding-left: 28px !important; padding-right: 28px !important; }

  /* Two-column splits become one column before the columns get too narrow to
     hold a sentence. */
  [style*="display: flex"][style*="gap: 80px"],
  [style*="display: flex"][style*="gap: 64px"],
  [style*="display: flex"][style*="gap: 48px"] { flex-wrap: wrap !important; }
  [style*="width: 300px"][style*="flex: none"] { width: 100% !important; }

  /* Grids, which the flex rules above cannot reach. Four across is too many
     before a phone, three is too many on one. */
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Phones ----------------------------------------------------------- */
@media (max-width: 820px) {
  [style*="max-width: 1180px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* Type scale. Each step keeps its own rhythm rather than collapsing to one
     size, so the hierarchy still reads. */
  [style*="font: 900 84px"] { font: 900 clamp(34px, 9.2vw, 60px)/1.02 Figtree, sans-serif !important; letter-spacing: -.035em !important; }
  [style*="font: 900 62px"] { font: 900 clamp(30px, 8vw, 50px)/1.04 Figtree, sans-serif !important; letter-spacing: -.032em !important; }
  [style*="font: 900 52px"] { font: 900 clamp(28px, 7.2vw, 44px)/1.06 Figtree, sans-serif !important; letter-spacing: -.03em !important; }
  [style*="font: 900 46px"] { font: 900 clamp(26px, 6.6vw, 40px)/1.08 Figtree, sans-serif !important; letter-spacing: -.03em !important; }
  [style*="font: 900 42px"] { font: 900 clamp(25px, 6.2vw, 36px)/1.1 Figtree, sans-serif !important; letter-spacing: -.028em !important; }
  [style*="font: 900 40px"] { font: 900 clamp(24px, 6vw, 34px)/1.1 Figtree, sans-serif !important; letter-spacing: -.028em !important; }
  [style*="font: 900 38px"] { font: 900 clamp(23px, 5.6vw, 32px)/1.12 Figtree, sans-serif !important; }
  [style*="font: 900 34px"] { font: 900 clamp(22px, 5.2vw, 30px)/1.14 Figtree, sans-serif !important; }
  [style*="font: 900 30px"] { font: 900 clamp(20px, 4.8vw, 27px)/1.16 Figtree, sans-serif !important; }
  [style*="font: 500 21px"], [style*="font: 500 19px"] { font-size: 16.5px !important; line-height: 1.5 !important; }
  [style*="font: 500 17px"] { font-size: 15.5px !important; }

  /* Fixed-width blocks go fluid. */
  [style*="width: 940px"], [style*="width: 400px"], [style*="width: 340px"],
  [style*="width: 330px"], [style*="width: 300px"], [style*="width: 280px"] {
    width: 100% !important; max-width: 100% !important;
  }
  [style*="max-width: 620px"], [style*="max-width: 560px"], [style*="max-width: 640px"] { max-width: 100% !important; }

  /* Every flex row wraps rather than pushing its last child off-screen.
     The sticky header is the exception: it must stay one line, so the section
     anchors step aside instead and the logo, Blog and the CTA remain. */
  [style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="height: 68px"][style*="justify-content: space-between"] {
    flex-wrap: nowrap !important; gap: 12px !important;
    padding-left: 16px !important; padding-right: 16px !important;
  }
  [style*="gap: 30px"] { gap: 18px !important; }
  /* Hide the section anchors. The CTA is an App Store link, so it survives the
     href^="#" test on its own; the border-radius guard stays as a second net,
     in case a hash-linked control is ever added to this row. */
  [style*="gap: 30px"] > a[href^="#"]:not([style*="border-radius"]) { display: none !important; }
  /* Except the ones that are a single control and must stay on one line. */
  [style*="display: flex"][style*="border-radius: 27px"],
  [style*="display: flex"][style*="border-radius: 26px"],
  [style*="display: flex"][style*="border-radius: 25px"],
  [style*="display: flex"][style*="border-radius: 20px"] { flex-wrap: nowrap !important; }

  /* Section rhythm: 104px of air above every heading is a desktop luxury. */
  [style*="padding: 104px 40px 0"] { padding: 56px 20px 0 !important; }
  [style*="padding: 108px 40px 0"] { padding: 56px 20px 0 !important; }
  [style*="padding: 72px 40px 100px"] { padding: 40px 20px 56px !important; }

  /* Big rounded panels lose their desktop padding and radius. */
  [style*="padding: 56px 60px"] { padding: 28px 22px !important; }
  [style*="padding: 52px 56px"] { padding: 26px 22px !important; }
  [style*="padding: 44px 48px"] { padding: 24px 20px !important; }
  [style*="padding: 36px 40px"] { padding: 24px 20px !important; }
  [style*="padding: 40px 44px"] { padding: 24px 20px !important; }
  [style*="padding: 32px 36px"] { padding: 22px 18px !important; }

  /* min-width floors were sized for a desktop column and are wider than a
     phone once the panel padding is taken off. */
  [style*="min-width: 280px"], [style*="min-width: 300px"],
  [style*="min-width: 260px"], [style*="min-width: 320px"] { min-width: 0 !important; }

  /* One column. A pricing card squeezed to 104px is a column of single words. */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Cards in a wrapped row keep sharing the width and squeeze to a column of
     single words. Once a row wraps, its cards want a whole line each. */
  [style*="flex: 1 1 0%"] { flex-basis: 100% !important; }
  [style*="padding: 32px 30px"][style*="border-radius: 26px"],
  [style*="padding: 30px 32px"][style*="border-radius: 26px"],
  [style*="padding: 28px 30px"][style*="border-radius: 22px"] {
    flex: 1 1 100% !important; min-width: 0 !important; padding: 24px 22px !important;
  }
  [style*="border-radius: 32px"] { border-radius: 22px !important; }

  /* Tap targets: nothing interactive smaller than 44px tall. */
  a[style*="height: 40px"] { height: 44px !important; }

  /* The hero is 880px of artboard holding a 220px dog pinned at top:592px.
     Give the scene a height that follows the content and put him back on the
     horizon, where the hills meet the field. */
  [style*="height: 880px"] { height: auto !important; min-height: 640px !important; padding-bottom: 210px !important; }
  [style*="top: 592px"][style*="margin-left: -110px"] {
    top: auto !important; bottom: 0 !important; margin-left: -110px !important;
  }
  /* He is drawn at 220px and scaled 1.34 for a 1280px artboard. At phone width
     that is most of the screen, so bring him back to his own size. */
  [style*="transform: scale(1.34)"] { transform: scale(1) !important; }
  /* The horizon furniture is measured from the top of an 880px box, so it has
     to be re-hung from the bottom of a box that is no longer 880px. */
  [style*="top: 794px"], [style*="top: 801px"] { top: auto !important; bottom: 78px !important; }
  [style*="top: 797px"] { top: auto !important; bottom: 82px !important; }
  [style*="top: 800px"] { top: auto !important; bottom: 0 !important; height: 80px !important; }
}

/* ---- Small phones ----------------------------------------------------- */
@media (max-width: 430px) {
  [style*="max-width: 1180px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 104px 40px 0"], [style*="padding: 108px 40px 0"] { padding: 44px 16px 0 !important; }
  /* Full-width buttons read as buttons; half-width ones read as a mistake. */
  a[style*="border-radius: 27px"] { width: 100% !important; justify-content: center !important; }
}

/* Touch targets on the landing page. Same reasoning as the blog: pad the link,
   do not grow the type. */
@media (pointer: coarse), (max-width: 820px) {
  [style*="max-width: 1180px"] nav a,
  [style*="font: 600 13.5px"], [style*="font: 600 14px"] {
    display: inline-flex !important; align-items: center !important; min-height: 44px !important;
  }

  /* The canvas draws the widget tabs at 39-41px. interactive.js marks each
     pill data-hit as it wires it: they carry inline styles and no classes,
     and the dog portrait is a control too but must not be sized like a pill.
     border-box keeps the inline 11px/17px padding inside the 44px. */
  [data-hit="pill"] {
    box-sizing: border-box !important;
    min-height: 44px !important;
  }
}