:root { color-scheme: light; }
  body { margin: 0; font: 17px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color: #1a1a1a; background: #fff; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { text-wrap: balance; }
  a { color: #0E8A6D; }
  header.top { border-bottom: 1px solid #e6e4df; }
  /* One container for the whole page, wide enough that a large screen does not
     read as a narrow column adrift in white space. The header rule and the
     footer already span the full window; before this their CONTENTS stopped at
     760px, so on a wide monitor a full-width line sat under a squeezed bar. */
  .wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 28px; box-sizing: border-box; }
  /* An ARTICLE is one column, header and footer included.
     Running text is read rather than scanned, so the body keeps a reading
     measure - a line much past ~75 characters makes the eye lose its place on
     the way back. But narrowing ONLY the body left the business name sitting
     at the far edge of a 1400px bar while the article began 450px further in,
     lining up with nothing. The page read as unanchored, which is what the
     operator meant by it looking bare. Everything on an article now shares the
     same column, so the name, the headline and the text all begin on one line. */
  body.read .wrap { max-width: 820px; }
  body.read article, body.read .cta, body.read .subscribe { max-width: 760px; }
  /* A piece should end, not stop. Before this the last paragraph ran into the
     footer rule with nothing between them. */
  body.read main { padding-bottom: 56px; }
  header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
  /* min-width:0 is the whole fix. A flex item will not shrink below the width
     of its own content unless told it may, so a long business name beside a
     "Visit <name>" button pushed the bar wider than a phone screen, and the
     whole page scrolled sideways with it. Every hosted blog did this on a
     phone, from the beginning; it was never caused by any layout change. */
  header.top a.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: #1a1a1a; text-decoration: none; font-weight: 700; }
  header.top a.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header.top img { height: 32px; width: auto; flex: 0 0 auto; }
  header.top a.visit { flex: 0 0 auto; white-space: nowrap; font-size: 14px; background: #0E8A6D; color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 8px; }
  /* A long word in a title - a URL, a product code - is the other way a page
     grows past the screen it is on. */
  body { overflow-wrap: break-word; }
  @media (max-width: 420px) {
    header.top a.visit { font-size: 13px; padding: 7px 10px; }
  }
  main { padding: 28px 0 40px; }
  h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; text-wrap: balance; }
  .lede { color: #555; font-size: 18px; margin: 0 0 20px; }
  .meta { color: #777; font-size: 14px; margin: 0 0 24px; }
  .facts { color: #555; font-size: 15px; margin: -8px 0 20px; }
  .offers { margin: 0 0 28px; padding: 18px 20px; border: 1px solid #e6e4df; border-radius: 12px; background: #faf9f6; }
  .offers h2 { font-size: 20px; margin: 0 0 8px; }
  .offers ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .offers li { background: #fff; border: 1px solid #e6e4df; border-radius: 999px; padding: 4px 12px; font-size: 15px; }
  .offers p { margin: 12px 0 0; font-size: 15px; }
  h2.section { font-size: 22px; margin: 8px 0 4px; }
  .hero { width: 100%; height: auto; border-radius: 12px; margin: 0 0 28px; display: block; }
  article h2 { font-size: 24px; margin: 34px 0 10px; }
  article h3 { font-size: 19px; margin: 26px 0 8px; }
  article img { max-width: 100%; height: auto; border-radius: 10px; }
  article table { border-collapse: collapse; width: 100%; font-size: 15px; }
  article th, article td { border: 1px solid #e6e4df; padding: 8px 10px; text-align: left; }
  article blockquote { border-left: 3px solid #0E8A6D; margin: 16px 0; padding: 4px 16px; color: #444; }
  .cta { margin: 36px 0 0; padding: 20px; border: 1px solid #e6e4df; border-radius: 12px; background: #faf9f6; }
  .cta a { display: inline-block; margin-top: 8px; background: #0E8A6D; color: #fff; text-decoration: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
  ul.list { list-style: none; padding: 0; margin: 0; }
  ul.list li { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid #eee; }
  ul.list a.thumb { flex: 0 0 148px; }
  ul.list a.thumb img { width: 148px; height: 100px; object-fit: cover; border-radius: 10px; display: block; }
  ul.list a.t { font-size: 20px; font-weight: 650; color: #1a1a1a; text-decoration: none; line-height: 1.3; }
  ul.list a.t:hover { color: #0E8A6D; }
  ul.list p { margin: 6px 0 0; color: #555; }
  ul.list .when { display: block; margin-top: 6px; color: #888; font-size: 13px; }
  /* Two columns only when there is genuinely room, so the cards never become
     too narrow to read a title in. Below this it stays a single list, which is
     the right shape on a phone and on a tablet held upright. */
  @media (min-width: 900px) {
    ul.list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
    ul.list li { border-bottom: 1px solid #eee; }
  }
  /* A third column only on a genuinely large monitor. The breakpoint is set by
     the card, not the device: below about this width three columns leave each
     title too narrow to read in two lines, which is worse than white space. */
  @media (min-width: 1500px) {
    ul.list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* Stacking point is about the thumbnail plus a readable title, not a device:
     a 148px image beside text needs roughly this much room whatever it is on. */
  @media (max-width: 560px) {
    ul.list li { flex-direction: column; gap: 10px; }
    ul.list a.thumb { flex: 0 0 auto; width: 100%; }
    ul.list a.thumb img { width: 100%; height: 160px; }
  }
  .subscribe { margin: 36px 0 0; padding: 18px 20px; border: 1px solid #e6e4df; border-radius: 12px; background: #faf9f6; }
  .subscribe .row { display: flex; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
  .subscribe input[type=email] { flex: 1 1 220px; font: inherit; padding: 10px 12px; border: 1px solid #d9d6cf; border-radius: 8px; }
  .subscribe .hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
  .subscribe button { font: inherit; font-weight: 600; background: #0E8A6D; color: #fff; border: 0; padding: 10px 16px; border-radius: 8px; cursor: pointer; }
  .subscribe small { color: #777; }
  footer { border-top: 1px solid #e6e4df; color: #666; font-size: 13px; }
  footer .wrap { padding: 20px; }