/* The per-browser promo page (/browser/<slug>). Layout only: the amber pill under
   .promo-cta is styles.css's `a.cta`, the browser marks and the Beta pill are
   _extension.html's, and the FAQ is the site's own .faq. Loaded via {% block head %}
   so no other page carries this CSS.

   Every measurement below was taken at 320px first and then at desktop, because this
   page is mostly headings and one-line claims and both of those are the copy this
   project does not let wrap. */

/* --- hero ------------------------------------------------------------------------
   Copy left, drawing right. One column until there is room for the drawing to be
   worth its space: below that it sits under the copy, which is the reading order
   anyway (what it is, then what it looks like). */
.promo-hero { padding-top: 8px; display: grid; gap: 28px; }
.promo-hero .eyebrow { margin-bottom: 10px; }
/* The h1 is a product name plus a browser name, which makes it the longest title on
   the site, and it is set in a column with a drawing beside it rather than across the
   page like /download's. At the shared hero size (53.76px at desktop) it came out over
   two lines in that column, so it runs a size down: 44px sets "Clever Checker for
   Chrome" in about 570px, inside the ~690px the copy column gets at the width the two
   columns start at.
   `balance` is for the phone, where two lines are unavoidable at any size that is
   still a title: it splits them evenly instead of leaving "for Chrome" under two full
   ones. /download's h1 takes three lines there. */
.promo-hero h1 {
  margin: 0 0 12px; text-wrap: balance;
  font-size: clamp(30px, 4.6vw, 44px);
}
.promo-hero .sub { margin-bottom: 24px; }
/* styles.css turns EVERY .hero into two equal columns at 900px, and a hero with a
   drawing in it does not match the `:has(> .hero-copy:only-child)` escape that keeps
   single-column heroes full width. Two 1fr columns leave the title about 500px, which
   is not enough to set it in, so this hero stays stacked through that whole band and
   only splits when the copy column can be 670px: 1120 (the page's own max width) less
   the drawing's 400 less the 48 gap. Measured, not guessed. The h1 is one line from
   there up, and the drawing sits under the copy below it, which is the reading order
   anyway (what it is, then what it looks like). */
@media (min-width: 900px) {
  .promo-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1180px) {
  .promo-hero { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; }
}

/* Every drawing scales to its column and keeps its own aspect ratio. The width and
   height attributes on the SVG are the RATIO, so this is what actually sizes them,
   and `height: auto` against a viewBox is what keeps CLS at zero. */
.promo-art { display: block; width: 100%; height: auto; max-width: 100%; }
/* The hero drawing is the one that carries a whole browser window, so it is allowed
   to be wider than the feature crops; centred on a phone, where it is under the copy
   rather than beside it. */
.promo-hero-art { justify-self: center; width: 100%; max-width: 420px; }

/* --- the install button ------------------------------------------------------------
   The site's `cta` pill at the size of the page's main action. The mark is sized to
   the button rather than to the label, for the same reason the manual download's is:
   the logo is what the eye lands on and it should be legible at a glance. */
.promo-cta {
  padding: 13px 26px 13px 15px; gap: 11px;
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-sm);
}
.promo-cta .bmark { width: 30px; height: 30px; flex: none; }
/* A Beta pill has to come out of the button's own right padding rather than adding
   to the width: "Add to Safari" plus a pill at 320px is already close to the content
   box, and the label is what the padding is protecting. */
.promo-cta:has(.beta-pill) { padding-right: 13px; }
.promo-cta .beta-pill { font-size: 10px; padding: 2px 7px; letter-spacing: .05em; }
.promo-cta-note { margin-top: 12px; color: var(--ink-3); }

/* --- the four claims ---------------------------------------------------------------
   One glyph and one sentence each, no card: these are the page's contents list, and
   a bordered box around each would give four one-liners the weight of the four
   sections they are pointing at.

   Two up from 520px and four up on desktop. The sentences are written to hold one
   line at each of those widths, so the column count is the only thing that changes. */
.promo-claims ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px 26px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 520px) { .promo-claims ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 1080, not 940: four across at 940 gives each claim about 210px of column against a
   glyph and roughly 175px of text, and two of the four wrapped. The row only goes to
   four once a quarter of the page holds the longest of them. */
@media (min-width: 1080px) { .promo-claims ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.promo-claims li {
  display: flex; gap: 11px; align-items: flex-start;
  color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45;
}
/* The one place amber carries a shape at text size, so it is --accent-ink (the amber
   that passes on paper) and not --amber, which is a fill and is 1.6:1 here. */
.promo-glyph { flex: none; color: var(--accent-ink); margin-top: 1px; }

/* --- the feature bands -------------------------------------------------------------
   Copy and drawing, alternating sides down the page. The alternation is desktop-only:
   stacked, every band reads copy-then-picture, and flipping half of them would put
   three pictures above the paragraph that explains them. */
.promo-feat { display: grid; gap: 22px; align-items: center; }
.promo-feat-copy > h2 { margin-top: 0; }
.promo-feat-copy > p { color: var(--ink-2); max-width: 52ch; margin-bottom: 0; }
.promo-feat-art { justify-self: center; width: 100%; max-width: 340px; }
/* 900px, which is where styles.css settles the band headings at their desktop size.
   Splitting at 820 left the copy a 380px column while the h2 was still on the phone
   scale (34px there), so "Find where it appears" wrapped in a column wide enough to
   hold it at any smaller type. Same lesson as the hero: the column has to be wide
   enough for the heading that is actually set in it. */
@media (min-width: 900px) {
  .promo-feat { grid-template-columns: minmax(0, 1fr) 320px; gap: 52px; }
  .promo-feat-flip .promo-feat-copy { order: 2; }
  .promo-feat-flip .promo-feat-art { order: 1; }
}

/* --- the closing ask ---------------------------------------------------------------
   The same button again, under a line about what it costs. Its prose runs the band's
   full width like the rest of the page rather than sitting in a reading column. */
.promo-close > p { max-width: 62ch; margin-bottom: 20px; }