/*
  Cardjar's palette, from the same brand sheet the app and the share page use. The one
  rule that carries over from the apps: a barcode plate is pure white with pure black
  bars in light mode and dark alike, so the theming stops at the plate's edge. On this
  site the plates only appear inside screenshots, which is why the screens are never
  filtered, inverted or tinted.

  The page alternates between three grounds rather than running one colour top to
  bottom: the cream page, a white raised panel, and a deep pine band. A single flat
  ground is what makes a long page read as a document instead of a product.
*/

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/font/poppins-400.woff2) format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/font/poppins-600.woff2) format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/font/poppins-700.woff2) format('woff2');
}

:root {
  --pine: #145C4A;
  --pine-deep: #0D3529;
  --cream: #F7F1E3;
  --cream-dim: #EDE7D8;
  --mint: #7FC9AC;

  --ground: var(--cream-dim);
  --raised: #FFFFFF;
  --sunken: rgba(13, 53, 41, 0.045);
  --text: var(--pine-deep);
  --text-soft: rgba(13, 53, 41, 0.68);
  --text-faint: rgba(13, 53, 41, 0.5);
  --accent: var(--pine);
  --on-accent: var(--cream);
  --hairline: rgba(13, 53, 41, 0.1);
  --hairline-firm: rgba(13, 53, 41, 0.16);

  /* The pine band, and the tokens that flip inside it. */
  --band: var(--pine-deep);
  --band-text: var(--cream);
  --band-soft: rgba(247, 241, 227, 0.72);
  --band-faint: rgba(247, 241, 227, 0.5);
  --band-line: rgba(247, 241, 227, 0.16);
  --band-accent: var(--mint);

  --bezel: #101A17;
  --bezel-edge: rgba(247, 241, 227, 0.14);

  --lift: 0 1px 2px rgba(13, 53, 41, 0.05), 0 8px 18px -12px rgba(13, 53, 41, 0.28);
  --lift-high: 0 2px 4px rgba(13, 53, 41, 0.05), 0 30px 50px -28px rgba(13, 53, 41, 0.42);
  --lift-phone: 0 2px 5px rgba(13, 53, 41, 0.16), 0 36px 60px -32px rgba(13, 53, 41, 0.55);

  --measure: 34rem;
  --wide: 70rem;
  --radius: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #08120F;
    --raised: #101C18;
    --sunken: rgba(247, 241, 227, 0.05);
    --text: var(--cream);
    --text-soft: rgba(247, 241, 227, 0.72);
    --text-faint: rgba(247, 241, 227, 0.52);
    --accent: var(--mint);
    --on-accent: var(--pine-deep);
    --hairline: rgba(247, 241, 227, 0.13);
    --hairline-firm: rgba(247, 241, 227, 0.2);

    /* Pine on near-black has too little separation, so the band lifts instead. */
    --band: #12211C;
    --band-line: rgba(247, 241, 227, 0.13);

    --bezel: #1D2A26;

    --lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 18px -12px rgba(0, 0, 0, 0.7);
    --lift-high: 0 2px 4px rgba(0, 0, 0, 0.5), 0 30px 50px -28px rgba(0, 0, 0, 0.9);
    --lift-phone: 0 2px 5px rgba(0, 0, 0, 0.6), 0 36px 60px -32px rgba(0, 0, 0, 0.95);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 16px/1.62 Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

a { color: var(--accent); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- shell */

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-inline: 24px; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 8;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  flex-wrap: wrap;
  padding-block: 11px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19.5px;
  letter-spacing: -0.5px;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.brand .mark {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 22.4%;
  box-shadow: var(--lift);
}
.brand em { font-style: normal; color: var(--accent); }

/* ---------------------------------------------------------------- the menu */

/*
  No JavaScript anywhere on this site, and the Content-Security-Policy would not run
  any, so the menu is a checkbox and a label. The input is moved out of sight rather
  than removed from the layout, because `display: none` would take its keyboard focus
  with it and the menu would only open for a mouse.
*/
.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.menu-button { display: none; }

.menu-bars {
  position: relative;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.menu-bars::before,
.menu-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.menu-bars::before { top: -5px; }
.menu-bars::after { top: 5px; }

.nav { display: flex; align-items: center; gap: 2px 6px; flex-wrap: wrap; }
.nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 9px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav a:hover { color: var(--text); background: var(--sunken); }
.nav a[aria-current='page'] { color: var(--text); font-weight: 600; background: var(--sunken); }

main { display: block; }

section { padding: 76px 0; }
section + section { padding-top: 0; }

/* ---------------------------------------------------------------- the band */

/*
  Full bleed, and it brings its own foreground tokens with it so everything nested
  inside recolours without needing a modifier of its own.
*/
.band {
  background: var(--band);
  color: var(--band-text);
  padding: 84px 0;

  --text: var(--band-text);
  --text-soft: var(--band-soft);
  --text-faint: var(--band-faint);
  --accent: var(--band-accent);
  --on-accent: var(--pine-deep);
  --hairline: var(--band-line);
  --hairline-firm: rgba(247, 241, 227, 0.26);
  --sunken: rgba(247, 241, 227, 0.07);
  --raised: rgba(247, 241, 227, 0.06);
}
section + .band { padding-top: 84px; }

/* The page's last word, centred, running straight into the footer. */
.band.centre { text-align: center; }
.band.centre .measure,
.band.centre .footnote { margin-inline: auto; }
.band.centre .actions { justify-content: center; }
.band.centre .eyebrow { justify-content: center; }
.band + section { padding-top: 76px; }

/* ---------------------------------------------------------------- type */

h1, h2, h3 {
  letter-spacing: -0.032em;
  line-height: 1.1;
  margin: 0 0 18px;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.6vw, 56px); font-weight: 700; letter-spacing: -0.04em; }
h2 { font-size: clamp(26px, 3.8vw, 38px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.28; letter-spacing: -0.02em; }

p, ul, ol { margin: 0 0 18px; text-wrap: pretty; }
li { margin-bottom: 8px; }

.lede { font-size: clamp(17px, 2.1vw, 20.5px); color: var(--text-soft); line-height: 1.52; }
.measure { max-width: var(--measure); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}
.eyebrow a { color: inherit; }

/* ---------------------------------------------------------------- hero */

.hero {
  padding-top: 64px;
  position: relative;
  overflow: hidden;
}
/* A soft light behind the phones, so they sit in the page rather than on it. */
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -140px;
  width: min(820px, 86vw);
  height: min(820px, 86vw);
  background: radial-gradient(circle closest-side, rgba(20, 92, 74, 0.17), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  .hero::before { background: radial-gradient(circle, rgba(127, 201, 172, 0.13), transparent 66%); }
}
.hero > * { position: relative; z-index: 1; }

/*
  Three parts rather than two, so a phone screen can sit between the opening line and
  the detail underneath it. On a narrow screen the old two-column hero put the whole
  argument before any picture, which is a lot of prose to read on trust.
*/
.hero-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas:
      'copy phones'
      'tail phones';
    align-items: start;
    gap: 8px 60px;
  }
  .hero-copy { grid-area: copy; }
  .hero-tail { grid-area: tail; }
  .hero .phone-duo { grid-area: phones; align-self: center; }
}

.hero h1 em { font-style: normal; color: var(--accent); display: block; }

.hero-points { list-style: none; padding: 0; margin: 0; }
.hero-points li {
  position: relative;
  padding-left: 32px;
  color: var(--text-soft);
  margin-bottom: 14px;
}
.hero-points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent);
}
.hero-points strong { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.stat-figure {
  display: block;
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-soft);
}
.stats li { margin: 0; padding: 22px 0 0; border-top: 1px solid var(--hairline); }
.stats { margin-block: 6px 30px; }

/* ---------------------------------------------------------------- phones */

/*
  A bezel rather than a border. The screenshots are edge to edge with no device
  around them, so without one they read as flat pictures pasted onto the page.
*/
/*
  The same phone is drawn at about 150px wide in the hero pair on a narrow screen and
  at 300px in the split sections, so the corner radius has to be a proportion of the
  width rather than a fixed number. At 29px it was a fifth of the small one and cut
  real interface out of every corner: these are full-bleed captures with the jar's
  title and its cards hard against the edge, so there is nothing there to spare.

  Percentages, and the two axes given separately, because a single percentage draws an
  elliptical corner on a tall box. Every screenshot is 720x1561, so one ratio holds for
  all of them: the vertical figure is the horizontal one times that aspect. This is
  also why `container-type` is not used here. It collapsed the hero pair to nothing,
  since containment tells the grid to size these boxes without looking at what is in
  them.
*/
.phone { display: block; margin: 0; }
/* The bezel wraps the picture, not the figure: a caption inside the device body
   reads as part of the screenshot. */
.phone picture {
  display: block;
  padding: 2.4%;
  border-radius: 9.1% / 4.3%;
  background: var(--bezel);
  box-shadow: var(--lift-phone), inset 0 0 0 1px var(--bezel-edge);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7% / 3.2%;
  background: var(--cream-dim);
}
.phone figcaption {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-faint);
  padding: 16px 4px 0;
  text-align: center;
  text-wrap: pretty;
}

.phone-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 460px;
  align-items: start;
}
.hero .phone-duo { margin-inline: auto; }
/* Staggered, because two phones at the same height read as a spec sheet. */
@media (min-width: 620px) {
  .phone-duo > :first-child { margin-top: 34px; }
  .phone-duo > :last-child { margin-bottom: 34px; }
}

.gallery {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
  .gallery { gap: 30px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
}
.gallery .phone { max-width: 320px; }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 26px;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--lift-high);
}
.band .panel { box-shadow: none; }

.cols {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.card-note {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--lift);
}
.card-note h3 { margin-bottom: 10px; }
.card-note p { color: var(--text-soft); margin: 0; }
.card-note p + p { margin-top: 12px; }

.split {
  display: grid;
  gap: 42px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 64px; }
  .split.flip > :first-child { order: 2; }
}
.split .phone { max-width: 296px; margin-inline: auto; }

/* ---------------------------------------------------------------- buttons */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 13px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: var(--lift);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--lift-high); }
.button:active { transform: translateY(0); }

.button.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--hairline-firm);
  box-shadow: none;
}
.button.ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }

.button[aria-disabled='true'] {
  background: var(--sunken);
  border-color: var(--hairline);
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

.status-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline-firm);
  background: var(--sunken);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
}
.status-note::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.footnote {
  color: var(--text-faint);
  font-size: 14px;
  margin: 16px 0 0;
  max-width: 46rem;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- tables */

.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--raised);
  box-shadow: var(--lift);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 15px;
}
caption {
  caption-side: top;
  text-align: left;
  color: var(--text-faint);
  font-size: 14px;
  padding: 0 0 14px;
}
th, td {
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  background: var(--sunken);
  border-bottom-color: var(--hairline-firm);
}
tbody th { font-weight: 600; width: 28%; color: var(--text); }
td.yes { color: var(--accent); font-weight: 600; }

/* Our own column, marked once and read down. */
.table-us {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
thead .table-us { color: var(--accent); }

/* ---------------------------------------------------------------- retailers */

/* Capped at three, because five countries across four columns leaves one on a row
   of its own. Three and two is a shape; four and one is a leftover. */
.countries {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  max-width: 62rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.countries li { margin: 0; }
@media (min-width: 880px) {
  .countries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.country-link {
  display: block;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--raised);
  box-shadow: var(--lift);
  text-decoration: none;
  color: var(--text);
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.country-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-high);
  border-color: var(--accent);
}
.country-link .flag {
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--sunken);
  margin-bottom: 16px;
}
.country-link strong { display: block; font-size: 19px; letter-spacing: -0.025em; }
.country-link span { color: var(--text-faint); font-size: 14.5px; }

.retailers {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.retailer {
  position: relative;
  border-radius: 15px;
  padding: 14px 15px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  min-height: 84px;
  margin: 0;
  display: flex;
  align-items: flex-end;
  overflow-wrap: anywhere;
  overflow: hidden;
  box-shadow: var(--lift);
}
/* Flat brand colours look printed without one soft highlight across the top. The
   fade completes at 58% and the name sits at the bottom, so the text is always over
   the untouched colour: the catalogue checks `onColour` at 4.5:1 against `colour`,
   and lightening the ground under the text would quietly spend that margin. */
.retailer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 58%);
  pointer-events: none;
}
.retailer > * { position: relative; }

/* ---------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--hairline); padding-top: 56px; }
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  cursor: pointer;
  padding: 22px 0;
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -0.02em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  transition: color 0.15s ease;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hairline-firm);
  background:
    linear-gradient(var(--accent), var(--accent)) center / 10px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 10px no-repeat;
  transition: transform 0.2s ease, border-color 0.15s ease;
}
.faq details[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--accent), var(--accent)) center / 10px 2px no-repeat;
  border-color: var(--accent);
}
.faq details > :not(summary) { color: var(--text-soft); max-width: var(--measure); }
.faq details > p:last-child { padding-bottom: 12px; }

/* ---------------------------------------------------------------- prose */

.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 32px; }
.prose p, .prose li { color: var(--text-soft); }
.prose strong { color: var(--text); }
.prose code {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  padding: 1px 6px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--sunken);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin: 30px 0;
  color: var(--text-soft);
  max-width: 46rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */

footer.site {
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
  padding: 56px 0 64px;
  color: var(--text-faint);
  font-size: 14.5px;
}
.band + footer.site { border-top: 0; margin-top: 0; }
footer.site .wrap {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}
footer.site h2 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
  font-weight: 600;
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 10px; }
footer.site a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
footer.site a:hover { color: var(--accent); }
footer.site .colophon { color: var(--text-faint); line-height: 1.6; max-width: 20rem; }
footer.site .footer-brand { margin-bottom: 14px; }
footer.site .licence { margin-top: 18px; font-size: 13px; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 820px) {
  /* Five links across take two rows and most of the first screenful, so below this
     width they fold into a menu instead. */
  .masthead .wrap { min-height: 0; gap: 12px; padding-block: 12px; }

  .menu-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px 9px 13px;
    border: 1px solid var(--hairline-firm);
    border-radius: 11px;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .menu-toggle:focus-visible + .menu-button {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  .menu-toggle:checked + .menu-button {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .menu-toggle:checked + .menu-button .menu-bars { background: transparent; }
  .menu-toggle:checked + .menu-button .menu-bars::before { top: 0; transform: rotate(45deg); }
  .menu-toggle:checked + .menu-button .menu-bars::after { top: 0; transform: rotate(-45deg); }

  .nav { display: none; }
  .menu-toggle:checked ~ .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2px;
    padding: 6px 0 10px;
    border-top: 1px solid var(--hairline);
  }
  .nav a { font-size: 16.5px; padding: 13px 12px; border-radius: 11px; }
}

@media (max-width: 640px) {
  section { padding: 56px 0; }
  .band { padding: 64px 0; }
  section + .band { padding-top: 64px; }
  .band + section { padding-top: 56px; }
  .hero { padding-top: 40px; }
  .faq { padding-top: 40px; }

  .callout { padding: 18px 20px; }
  th, td { padding: 13px 14px; }
}

/* Retailer chip colours are in the generated /retailers.css, one class per retailer.
   They cannot be inline `style` attributes: the site's own Content-Security-Policy
   forbids inline styles, and the whole point of a chip is its colour. */