/* ===========================================================================
   Landing pages — the few pieces app.css does not already have.

   Everything that exists in app.css is used from there: .table, .chips,
   .crumbs, .lede, .btn, .tag, .spread-pill and the whole colour system. This
   file adds only what these pages introduce, which is three things: the answer
   box at the top, the three-figure range strip, and the two-colour split bar
   on a chain-against-chain page.

   Same palette, same radius, same shadow, no new variables — a landing page
   that looked like a different site would undo the point of having one.
   =========================================================================== */

/* The answer, before any evidence. A reader who arrived from a search engine
   asked a question; the first thing on the page is the answer to it. */
.seo-answer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 18px 0 26px;
  box-shadow: var(--shadow);
}
.seo-answer h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.seo-answer-line { margin: 0; font-size: 19px; line-height: 1.45; }
.seo-answer-line strong { font-size: 24px; font-weight: 800; color: var(--brand-strong);
  font-variant-numeric: tabular-nums; }
.seo-answer-for { color: var(--muted); }
.seo-answer p.small { margin-top: 8px; }

/* Cheapest / middle / dearest per kilo. A definition list rather than a table:
   three figures with three labels is not tabular data. */
.seo-range { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; padding: 0; }
.seo-range > div {
  flex: 1 1 150px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
}
.seo-range dt { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; }
.seo-range dd { margin: 3px 0 0; font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.seo-range dd.good { color: var(--good); }
.seo-range dd.dear { color: var(--dear); }

.seo-fact { margin: 12px 0 0; font-size: 15px; }
.seo-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0; }

/* Which of two chains priced more of the shared range lower. Deliberately not
   a red/green bar: neither side is the bad one, so both take a brand-family
   colour and "same price" sits between them in the line colour. */
.seo-split {
  display: flex; height: 16px; width: 100%;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--surface-2); margin: 12px 0 8px;
}
.seo-split.small-bar { height: 9px; margin: 2px 0 4px; max-width: 220px; }
.seo-split span { display: block; height: 100%; }
.seo-split-a { background: var(--brand); }
.seo-split-b { background: var(--good); }
.seo-split-same { background: var(--line); }
.seo-split-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 0;
  font-size: 13px; color: var(--muted); }
.seo-split-key .dot { display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.seo-split-key .dot.a { background: var(--brand); }
.seo-split-key .dot.b { background: var(--good); }
.seo-split-key .dot.same { background: var(--line); }

/* The chain a total came out at, under the total. Never a heading of its own:
   the subject of the number is the basket, the chain is where it landed. */
.seo-at { display: block; font-weight: 400; }

.seo-pick a { font-weight: 600; }
.seo-pick .small { display: block; }
/* The per-chain ranking on a phone repeats its column headings as small
   labels inside the cards; on a desktop the headings are there. */
.rank .c-label { display: none; }

/* Method and caveats. Quiet, and never folded away — a comparison that hides
   how it was made is the thing this page exists not to be. */
.seo-method {
  margin: 34px 0 0; padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 72ch;
}
.seo-method h2 { margin: 0 0 8px; font-size: 16px; }
.seo-method h3 { margin: 16px 0 6px; font-size: 14px; }
.seo-method p { margin: 0; font-size: 14.5px; color: var(--ink); }
.seo-method ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.seo-method li { margin-bottom: 5px; }

.seo-callout {
  margin: 30px 0 0; padding: 18px;
  background: var(--brand-tint);
  border-radius: var(--radius);
}
.seo-callout h2 { margin: 0 0 8px; font-size: 18px; }
.seo-callout p { margin: 0; max-width: 68ch; }
.seo-callout .seo-actions { margin-bottom: 0; }

@media (max-width: 560px) {
  .seo-answer-line { font-size: 17px; }
  .seo-answer-line strong { font-size: 21px; }
  /* Three short figures do not need three cards stacked down the screen:
     they sit side by side, and the labels get the same height so the
     figures line up whether a label wraps or not. */
  .seo-range { gap: 8px; }
  .seo-range > div { flex: 1 1 0; min-width: 0; padding: 9px 9px; }
  .seo-range dt { font-size: 10px; letter-spacing: .03em; line-height: 1.25; min-height: 2.5em; }
  .seo-range dd { font-size: 17px; }
}