/* ════════════════════════════════════════════════════════════════════════
   zoesim — the catalogue
   Values are lifted from the approved artboards, not re-derived. Anything
   that looks like an odd number (13.5px, 0.006 chroma) is deliberate.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* paper and ink */
  --paper:        oklch(0.975 0.004 95);
  --paper-alt:    oklch(0.958 0.006 95);
  --paper-hover:  oklch(0.945 0.006 95);
  --ink:          oklch(0.19 0.008 60);
  --ink-80:       oklch(0.30 0.008 60);
  --ink-70:       oklch(0.34 0.008 60);
  --ink-65:       oklch(0.42 0.008 60);
  --ink-55:       oklch(0.48 0.008 60);
  --ink-50:       oklch(0.50 0.008 60);
  --ink-45:       oklch(0.55 0.008 60);
  --ink-40:       oklch(0.60 0.008 60);

  /* rules */
  --rule-hair:    oklch(0.90 0.006 95);
  --rule-col:     oklch(0.86 0.006 95);
  --rule-box:     oklch(0.78 0.008 95);
  --rule-field:   oklch(0.72 0.008 95);
  --rule-light:   oklch(0.62 0.008 95);

  --red:          oklch(0.50 0.19 28);
  --red-dark:     oklch(0.38 0.19 28);

  --sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: 40px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Nothing may scroll the page sideways. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.m { font-family: var(--mono); font-feature-settings: "tnum" 1; }

img { max-width: 100%; height: auto; }

/* ── icons and flags ─────────────────────────────────────────────────
   Icons take the colour of the text beside them and sit on the text
   baseline rather than floating in the middle of the line box. */

.ico { display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
.ico--muted { color: var(--ink-45); }

.flag {
  display: block; border-radius: 50%; object-fit: cover;
  /* Square source, cropped to a disc. The hairline keeps mostly-white flags
     (JP, PL) from dissolving into the paper. */
  box-shadow: 0 0 0 1px oklch(0.19 0.008 60 / 0.14) inset,
              0 0 0 1px oklch(0.19 0.008 60 / 0.10);
}
.flag--none {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-40); border-radius: 50%;
  box-shadow: 0 0 0 1px oklch(0.19 0.008 60 / 0.12);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 0; color: var(--paper); }

/* ── page frame ─────────────────────────────────────────────────────── */

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ── masthead ───────────────────────────────────────────────────────── */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px var(--pad) 12px var(--pad);
}
.masthead__brand { display: flex; align-items: baseline; gap: 16px; }
.wordmark {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1;
}
.wordmark:hover { color: var(--ink); }
.masthead__edition { font-size: 11px; color: var(--ink-50); }
.masthead__tools { display: flex; align-items: center; gap: 26px; }

.search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule-field); padding: 7px 12px;
  width: 250px; background: transparent;
}
.search input {
  border: 0; background: transparent; outline: none; width: 100%;
  font-family: var(--mono); font-size: 12px; color: var(--ink); padding: 0;
}
.search input::placeholder { color: oklch(0.58 0.008 60); }

.langswitch { position: relative; }
.langswitch summary {
  list-style: none; cursor: pointer; font-family: var(--mono);
  font-size: 12px; color: var(--ink-50);
  display: flex; align-items: center; gap: 3px;
}
.langswitch summary::-webkit-details-marker { display: none; }
.langswitch[open] summary { color: var(--ink); }
.langswitch__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  background: var(--paper); border: 1px solid var(--ink);
  min-width: 168px; padding: 6px 0;
}
.langswitch__menu a {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 13px; font-size: 13.5px; color: var(--ink);
}
.langswitch__menu a:hover { background: var(--paper-hover); color: var(--ink); }
.langswitch__menu a[aria-current] { font-weight: 600; }
.langswitch__menu .m { font-size: 11px; color: var(--ink-45); }

/* ── running head ───────────────────────────────────────────────────── */

.runhead {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 7px var(--pad);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
}
.runhead__mid, .runhead__right { color: var(--ink-50); }
/* The catalogue's page title is its column head — a real h1, styled as the rule it sits in. */
.runhead__h1 { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: inherit; color: var(--ink); }
.runhead a { color: var(--ink-50); }
.runhead a:hover { color: var(--ink); }
.runhead strong { font-weight: 400; color: var(--ink); }

/* ── language banner ────────────────────────────────────────────────── */

.langbanner {
  display: flex; align-items: center; gap: 14px;
  padding: 9px var(--pad); background: var(--paper-alt);
  border-bottom: 1px solid var(--rule-hair);
  font-size: 13px;
}
.langbanner a { border-bottom: 1px solid var(--red); }
.langbanner form { margin: 0 0 0 auto; }
.langbanner button {
  border: 0; background: none; cursor: pointer; padding: 4px;
  color: var(--ink-45); display: flex; align-items: center;
}
.langbanner button:hover { color: var(--ink); }

/* ── three-column body ──────────────────────────────────────────────── */

.sheet { display: grid; grid-template-columns: 172px 1fr 216px; align-items: start; }

.rail {
  border-right: 1px solid var(--rule-col);
  padding: 18px 20px 40px var(--pad);
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0;
}
.margin {
  border-left: 1px solid var(--rule-col);
  padding: 18px var(--pad) 40px 22px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0;
}

.rail__group { display: flex; flex-direction: column; gap: 7px; }
.rail__label { font-family: var(--mono); font-size: 10px; color: var(--ink-45); padding-bottom: 4px; }
.rail__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; color: var(--ink);
}
.rail__row:hover { color: var(--red); }
.rail__row .m { font-size: 11px; color: var(--ink-45); }
.rail__row--all {
  border-bottom: 1px solid var(--ink); padding-bottom: 5px; font-weight: 600;
}
.rail__row--all .m { color: var(--ink); }
.rail__row[aria-current] { font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-family: var(--mono); font-size: 11.5px;
  border: 1px solid var(--rule-box); padding: 4px 7px; color: var(--ink);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.chip--on:hover { color: var(--paper); }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.check__box { width: 11px; height: 11px; border: 1px solid var(--rule-light); flex-shrink: 0; }
.check__box--on { border-color: var(--ink); background: var(--ink); }

.rail__key { border-top: 1px solid var(--rule-col); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.keyline {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-65);
}

.margin__block { display: flex; flex-direction: column; gap: 9px; }
.margin__block + .margin__block { border-top: 1px solid var(--rule-col); padding-top: 14px; }
.margin__label { font-family: var(--mono); font-size: 10px; color: var(--ink-45); }
.margin__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-80); text-wrap: pretty; }
.margin__small { font-size: 13px; line-height: 1.5; color: var(--ink-80); }
.margin__link {
  font-family: var(--mono); font-size: 12px; color: var(--red);
  border-bottom: 1px solid var(--red); align-self: flex-start; padding-bottom: 1px;
}
.steps { display: flex; flex-direction: column; gap: 9px; }
.step { display: flex; gap: 10px; align-items: flex-start; }
.step__n { font-family: var(--mono); font-size: 11px; color: var(--ink-40); width: 12px; flex-shrink: 0; }
.step__i { color: var(--ink-45); width: 15px; flex-shrink: 0; padding-top: 1px; }
.step__t { font-size: 13px; line-height: 1.45; }
.footnote { display: flex; gap: 8px; }
.footnote__mark { flex-shrink: 0; color: var(--ink-45); display: flex; padding-top: 1px; }
.footnote__mark--red { color: var(--red); }
.footnote__text { font-size: 12.5px; line-height: 1.45; color: var(--ink-65); }

.margin__kv {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--rule-hair); padding-bottom: 6px;
}
.margin__kv dt { font-size: 13px; color: var(--ink-65); margin: 0; }
.margin__kv dd { font-family: var(--mono); font-size: 12px; margin: 0; text-align: right; }

/* ── the list ───────────────────────────────────────────────────────── */

.list { display: flex; flex-direction: column; }

.list__head, .list__row {
  display: grid; grid-template-columns: 44px 30px 1fr 150px 92px 104px;
  gap: 14px; padding: 15px 26px 14px 26px;
}
.list__head {
  padding: 8px 26px; border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 10px; color: var(--ink-45);
}
.list__head span:last-child { text-align: right; }

.list__row {
  border-bottom: 1px solid var(--rule-hair);
  align-items: start; color: var(--ink);
}
.list__row:hover { background: var(--paper-hover); color: var(--ink); }
.list__row--tinted { background: var(--paper-alt); }
.list__no { font-family: var(--mono); font-size: 11px; color: var(--ink-40); padding-top: 3px; }
.list__flag { padding-top: 4px; }
.list__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.list__title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.list__country { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; }
.list__meta {
  font-size: 12.5px; color: var(--ink-55);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list__gb, .list__valid { font-family: var(--mono); font-size: 12px; padding-top: 3px; }
.list__valid { color: var(--ink-65); }
.list__price {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  text-align: right; padding-top: 2px; color: var(--red);
}
/* Shown only where the plan is not the 10 GB the column head promises. */
.list__price-size { color: var(--ink-45); font-weight: 400; margin-inline-end: 6px; }

.mark { display: inline-flex; align-items: center; line-height: 1; }
.mark--5g { color: var(--ink); }
.mark--lte { color: oklch(0.60 0.008 60); }
.mark--reg { color: var(--red); }

.pager {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 26px 40px 26px; font-family: var(--mono); font-size: 12px;
}
.pager a { border: 1px solid var(--ink); padding: 8px 14px; color: var(--ink); }
.pager a:hover { background: var(--ink); color: var(--paper); }
.pager span { color: var(--ink-45); }

/* ── destination page ───────────────────────────────────────────────── */

.entry {
  display: grid; grid-template-columns: 1fr 380px; gap: 40px;
  padding: 24px var(--pad) 22px var(--pad);
  border-bottom: 1px solid var(--ink); align-items: end;
}
.entry__head { display: flex; flex-direction: column; gap: 8px; }
.entry__title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.entry__flag { align-self: center; display: flex; }
.entry__flag .flag { border-width: 1px; }
.entry__no { font-family: var(--mono); font-size: 12px; color: var(--ink-40); }
h1.entry__h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.024em; line-height: 1; }
.entry__codes { font-family: var(--mono); font-size: 12px; color: var(--ink-50); }
.entry__nets { font-family: var(--mono); font-size: 11.5px; color: var(--ink-65); }
.entry__intro {
  margin: 0; max-width: 68ch; font-size: 14.5px; line-height: 1.55;
  color: var(--ink-70); text-wrap: pretty;
}

.buybox {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--ink); padding: 13px 15px;
}
.buybox__top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10.5px; color: var(--ink-50); }
.buybox__main { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.buybox__name { font-size: 17px; font-weight: 600; }
.buybox__price { font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--red); }
.buybox__cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-align: center; margin-top: 6px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12.5px; padding: 11px 0;
  border: 0; width: 100%; cursor: pointer;
}
.buybox__cta:hover { background: var(--red); color: var(--paper); }
.buybox__note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-45); text-align: center; }

.body { display: grid; grid-template-columns: 1fr 380px; gap: 40px; padding: 0 var(--pad); }
.body__main { display: flex; flex-direction: column; }
.body__margin {
  border-left: 1px solid var(--rule-col); padding: 20px 0 40px 22px;
  display: flex; flex-direction: column; gap: 20px;
}

.section { padding: 26px 0 0 0; }
.section__label {
  font-family: var(--mono); font-size: 10px; color: var(--ink-45);
  border-bottom: 1px solid var(--ink); padding-bottom: 7px;
  display: flex; justify-content: space-between; gap: 20px;
}

/* plan table */
.plans__head, .plans__row {
  display: grid; grid-template-columns: 96px 96px 1fr 110px 118px;
  gap: 12px; align-items: baseline;
}
.plans__head {
  padding: 10px 0 8px 0; border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 10px; color: var(--ink-45);
}
.plans__head span:last-child { text-align: right; }
.plans__row {
  padding: 12px 0; border-bottom: 1px solid var(--rule-hair); color: var(--ink);
}
.plans__row[role="button"] { cursor: pointer; }
.plans__row[role="button"]:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.plans__row:hover { background: var(--paper-hover); color: var(--ink); }
.plans__row--on {
  background: var(--ink); color: var(--paper);
  padding: 14px 12px; margin: 0 -12px;
}
.plans__row--on:hover { background: var(--ink); color: var(--paper); }
.plans__row--last { border-bottom: 1px solid var(--ink); }
.plans__gb { font-family: var(--mono); font-size: 14px; }
.plans__row--on .plans__gb { font-weight: 500; }
.plans__valid { font-family: var(--mono); font-size: 13px; color: var(--ink-65); }
.plans__row--on .plans__valid { color: inherit; opacity: 0.75; }
.plans__note { font-size: 13px; color: var(--ink-55); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plans__row--on .plans__note { color: inherit; opacity: 0.8; }
.plans__pergb { font-family: var(--mono); font-size: 12px; color: var(--ink-45); }
.plans__row--on .plans__pergb { color: inherit; opacity: 0.7; }
.plans__price { font-family: var(--mono); font-size: 14px; text-align: right; }
.plans__row--on .plans__price { font-weight: 500; }

/* carriers */
.carrier {
  display: grid; grid-template-columns: 150px 1fr 190px 60px;
  gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--rule-hair);
}
.carrier__name { font-size: 15px; font-weight: 500; }
.carrier__desc { font-size: 13px; color: var(--ink-55); min-width: 0; }
.carrier__bar { height: 7px; background: oklch(0.88 0.006 95); position: relative; }
.carrier__bar i { position: absolute; inset: 0; background: var(--ink); display: block; }
.carrier__bar--lte i { background: var(--rule-light); }
.carrier__gen { font-family: var(--mono); font-size: 12px; text-align: right; }
.carrier__gen--lte { color: var(--ink-50); }

/* facts grid */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.fact { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-hair); }
.fact__k { font-family: var(--mono); font-size: 11px; color: var(--ink-40); width: 78px; flex-shrink: 0; }
.fact__v { font-size: 13px; line-height: 1.45; color: var(--ink-70); }

/* questions */
.qa { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-hair); }
.qa__n { font-family: var(--mono); font-size: 11px; color: var(--ink-40); width: 20px; flex-shrink: 0; }
.qa__body { display: flex; flex-direction: column; gap: 4px; }
.qa__q { font-size: 15px; font-weight: 600; margin: 0; }
.qa__a { font-size: 13.5px; line-height: 1.5; color: var(--ink-65); margin: 0; }

/* ── prose (static pages) ───────────────────────────────────────────── */

.prose { padding: 26px var(--pad) 48px var(--pad); max-width: 74ch; }
.prose h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.022em; margin: 0 0 18px 0; line-height: 1.08; }
.prose h2 { font-size: 20px; font-weight: 600; margin: 30px 0 10px 0; }
.prose p { font-size: 15px; line-height: 1.62; color: var(--ink-70); margin: 0 0 14px 0; text-wrap: pretty; }
.prose ol, .prose ul { font-size: 15px; line-height: 1.62; color: var(--ink-70); padding-left: 20px; }
.prose li { margin-bottom: 7px; }

/* ── colophon ───────────────────────────────────────────────────────── */

.colophon {
  margin-top: auto; border-top: 1px solid var(--ink);
  padding: 11px var(--pad);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--ink-50);
}
.colophon a { color: var(--ink-50); }
.colophon a:hover { color: var(--ink); }
.colophon nav { display: flex; gap: 6px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   Responsive. The catalogue keeps its density; the margin column folds
   into the flow as footnotes, the rail becomes a scrolling strip.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  :root { --pad: 28px; }
  .sheet { grid-template-columns: 158px 1fr; }
  .margin, .body__margin {
    grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ink);
    padding: 18px var(--pad) 34px var(--pad); position: static;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px;
  }
  .margin__block + .margin__block { border-top: 0; padding-top: 0; }
  .entry, .body { grid-template-columns: 1fr; gap: 22px; }
  .body__main { order: 1; }
  .body__margin { order: 2; }
  .list__head, .list__row { grid-template-columns: 40px 26px 1fr 110px 70px 88px; gap: 10px; padding-inline: 20px; }
  .plans__head, .plans__row { grid-template-columns: 80px 84px 1fr 96px 104px; }
  .carrier { grid-template-columns: 132px 1fr 130px 48px; }
}

@media (max-width: 860px) {
  :root { --pad: 18px; }

  /* ── masthead becomes a fixed bar: brand, search, language ───────── */
  .masthead {
    position: sticky; top: 0; z-index: 40;
    background: var(--paper); border-bottom: 1px solid var(--ink);
    padding: 11px var(--pad); gap: 12px; flex-wrap: nowrap;
  }
  .masthead__brand { gap: 9px; flex-shrink: 0; }
  .wordmark { font-size: 19px; }
  .masthead__edition { display: none; }
  .masthead__tools { gap: 12px; flex-grow: 1; min-width: 0; justify-content: flex-end; }
  .masthead__tools > a.m { display: none; }
  .search {
    width: auto; flex-grow: 1; max-width: none; min-width: 0;
    border-color: var(--ink); padding: 0 11px; min-height: 40px;
  }
  /* Without min-width:0 a flex item refuses to shrink below its content and
     pushes the row wide enough to cut the price column off the screen. */
  .search input { font-size: 16px; min-width: 0; }
  .langswitch summary { min-height: 40px; padding-inline: 8px; border: 1px solid var(--rule-field); }

  /* The language menu is a sheet, not a dropdown: reachable with a thumb. */
  .langswitch__menu {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 60;
    border: 0; border-top: 1px solid var(--ink);
    padding: 6px 0 max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 -18px 40px oklch(0.19 0.008 60 / 0.12);
    max-height: 62vh; overflow-y: auto;
  }
  .langswitch__menu a { padding: 14px var(--pad); font-size: 16px; min-height: 48px; align-items: center; }

  .runhead { padding: 6px var(--pad); font-size: 10px; }
  .runhead__mid { display: none; }
  .runhead__h1 { font-size: 10px; }

  .langbanner { padding: 10px var(--pad); font-size: 12.5px; gap: 10px; }

  /* ── filter rail: one scrolling strip with a fade that says "more" ─ */
  .sheet { grid-template-columns: 1fr; }
  .rail {
    border-right: 0; border-bottom: 1px solid var(--rule-hair);
    position: sticky; top: 62px; z-index: 30; background: var(--paper);
    padding: 9px var(--pad); flex-direction: row; gap: 7px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__group, .rail__key { display: none; }
  .rail__group--regions { display: flex; flex-direction: row; gap: 7px; }
  .rail__label { display: none; }
  .rail__row {
    border: 1px solid var(--rule-box); padding: 0 13px;
    white-space: nowrap; gap: 7px; font-family: var(--mono); font-size: 12px;
    min-height: 40px; align-items: center; scroll-snap-align: start;
  }
  .rail__row--all { border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .rail__row--all .m { color: var(--paper); }

  /* ── list rows: flag, name, carriers, price. A whole row is the target. */
  .list__head { display: none; }
  .list__row {
    grid-template-columns: 26px 1fr auto; gap: 12px;
    padding: 12px var(--pad); align-items: center; min-height: 62px;
  }
  .list__no { display: none; }
  .list__flag { padding-top: 0; }
  .list__title { gap: 7px; }
  .list__country { font-size: 16.5px; letter-spacing: -0.01em; }
  .list__meta {
    font-size: 12px; color: var(--ink-50);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .list__gb, .list__valid { display: none; }
  .list__price { font-size: 14px; padding-top: 0; white-space: nowrap; }
  .list__price-size { display: block; font-size: 10px; margin: 0 0 1px 0; }
  .list__row:active { background: var(--paper-hover); }

  .pager { padding: 18px var(--pad) 26px var(--pad); flex-wrap: wrap; gap: 12px; }
  .pager a { min-height: 46px; display: flex; align-items: center; }

  /* ── margin column: real sections in the flow, not an afterthought ── */
  .margin, .body__margin {
    grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ink);
    padding: 20px var(--pad) 30px var(--pad); position: static;
    display: flex; flex-direction: column; gap: 20px;
  }
  /* Plans, carriers and questions come first. The margin is reference
     material and belongs after them, not between the title and the prices. */
  .body__main { order: 1; }
  .body__margin { order: 2; }
  .margin__block + .margin__block { border-top: 1px solid var(--rule-hair); padding-top: 16px; }
  .margin__text, .margin__small { font-size: 14.5px; }
  .step__t { font-size: 14px; }
  .margin__link { min-height: 44px; display: flex; align-items: center; }

  /* ── destination page ─────────────────────────────────────────────── */
  .entry, .body { grid-template-columns: 1fr; gap: 0; padding-inline: var(--pad); }
  .entry { padding-block: 16px 18px; }
  .entry__title { gap: 10px; }
  h1.entry__h1 { font-size: 27px; }
  .entry__no, .entry__codes { display: none; }
  .entry__nets { font-size: 11px; }
  .entry__intro { font-size: 14.5px; }

  /* The buy box leaves the flow and becomes a bar pinned to the bottom —
     the one thing a shopper must always be able to reach. */
  .buybox {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    border: 0; border-top: 1px solid var(--ink);
    background: var(--paper); gap: 3px;
    padding: 10px var(--pad) max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 -14px 34px oklch(0.19 0.008 60 / 0.10);
  }
  .buybox__top { font-size: 10px; }
  .buybox__name { font-size: 15px; }
  .buybox__price { font-size: 18px; }
  .buybox__cta { min-height: 50px; font-size: 13.5px; margin-top: 4px; }
  .buybox__note { display: none; }
  /* Room so the last row is never trapped under the bar. */
  .body__margin { padding-bottom: 132px; }

  .plans__head { display: none; }
  .plans__row, .plans__row--on {
    grid-template-columns: 72px 1fr auto; gap: 10px;
    padding: 13px 0; margin: 0; min-height: 58px; align-items: center;
  }
  .plans__row--on { padding: 13px 12px; margin: 0 -12px; }
  .plans__note, .plans__pergb { display: none; }
  .plans__gb { font-size: 15px; }
  .plans__price { font-size: 15px; }

  .carrier { grid-template-columns: 1fr auto; gap: 5px 14px; padding: 14px 0; }
  .carrier__name { font-size: 15px; }
  .carrier__desc { grid-column: 1 / -1; order: 3; font-size: 12.5px; }
  .carrier__bar { grid-column: 1 / -1; order: 4; margin-top: 3px; }
  .facts { grid-template-columns: 1fr; }
  .section { padding-top: 22px; }
  .section__label { flex-direction: column; gap: 2px; }
  .qa { gap: 12px; }
  .qa__q { font-size: 15px; }
  .qa__a { font-size: 14px; }

  .prose { padding: 20px var(--pad) 40px var(--pad); }
  .prose h1 { font-size: 26px; }
  .prose p, .prose li { font-size: 15.5px; }

  .colophon { flex-direction: column; gap: 10px; padding: 16px var(--pad) 26px var(--pad); }
  .colophon nav { gap: 4px 10px; }
  .colophon nav a { min-height: 32px; display: flex; align-items: center; }
}

/* Narrow phones: the carrier line is the first thing to go. */
@media (max-width: 380px) {
  .list__meta { display: none; }
  .list__row { min-height: 56px; }
  h1.entry__h1 { font-size: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .list__row, .plans__row, .rail__row { transition: background-color 90ms linear; }
}

@media print {
  .rail, .search, .langswitch, .langbanner, .pager, .buybox__cta { display: none; }
  .sheet, .entry, .body { grid-template-columns: 1fr; }
  body { font-size: 10pt; }
}

/* ════════════════════════════════════════════════════════════════════
   Shop: checkout, order, account. Same vocabulary as the catalogue —
   rules and labels, no cards with shadows.
   ════════════════════════════════════════════════════════════════════ */

.checkout, .order, .account { padding: 26px var(--pad) 60px var(--pad); }
.checkout__pane, .account__pane { max-width: 520px; }

.checkout__h1, .order__h1 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.022em;
  margin: 0 0 16px 0; line-height: 1.1;
}
.order__lead { font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 0 0 22px 0; max-width: 62ch; }

.checkout__summary { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 12px 0; margin: 0 0 22px 0; }
.checkout__label { font-family: var(--mono); font-size: 10px; color: var(--ink-45); margin-bottom: 8px; }
.checkout__line { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 15px; }
.checkout__line--total { border-top: 1px solid var(--rule-hair); margin-top: 6px; padding-top: 9px; font-weight: 600; }

.checkout__form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-family: var(--mono); font-size: 10px; color: var(--ink-45); }
.field input {
  border: 1px solid var(--rule-field); background: oklch(0.995 0.004 95);
  padding: 11px 12px; font: inherit; font-size: 16px; color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--ink); }
.field__code { font-family: var(--mono); font-size: 22px !important; letter-spacing: 0.3em; }
.field__note { font-size: 12.5px; color: var(--ink-55); }

.element { min-height: 60px; }

.checkout__pay {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 13px; padding: 15px 20px; width: 100%;
  min-height: 52px;
}
.checkout__pay:hover { background: var(--red); }
.checkout__pay:disabled { opacity: 0.55; cursor: default; }
.checkout__error { color: var(--red); font-size: 13.5px; margin: 0; }
.checkout__fine { font-size: 12px; color: var(--ink-45); margin: 0; line-height: 1.5; }

/* the delivered eSIM */
.sim {
  display: grid; grid-template-columns: 220px 1fr; gap: 26px;
  border: 1px solid var(--ink); padding: 20px; margin: 0 0 18px 0; align-items: start;
}
.sim__qr img { display: block; border: 1px solid var(--rule-hair); background: #fff; }
.sim__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sim__name { font-size: 19px; font-weight: 600; }
.sim__block { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sim__label { font-family: var(--mono); font-size: 10px; color: var(--ink-45); }
.sim__code {
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-70);
  word-break: break-all; background: var(--paper-alt); padding: 9px 10px;
}
.sim__kv { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--ink-65); border-bottom: 1px solid var(--rule-hair); padding-bottom: 6px; }
.sim__install {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ink); color: var(--ink); padding: 12px 16px;
  font-family: var(--mono); font-size: 12.5px; align-self: flex-start; min-height: 46px;
}
.sim__install:hover { background: var(--ink); color: var(--paper); }
.order__note { font-size: 13.5px; color: var(--ink-55); margin: 18px 0 0 0; }
.order__facts { display: flex; flex-direction: column; gap: 9px; max-width: 460px; margin: 30px 0 0 0; }

.account__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.account__signout { border: 1px solid var(--rule-box); background: none; cursor: pointer; font-family: var(--mono); font-size: 12px; padding: 9px 14px; color: var(--ink-65); min-height: 40px; }
.account__signout:hover { border-color: var(--ink); color: var(--ink); }
.account__sent { font-size: 13.5px; color: var(--ink-65); margin: 0; }

@media (max-width: 860px) {
  .checkout, .order, .account { padding: 20px var(--pad) 40px var(--pad); }
  .checkout__h1, .order__h1 { font-size: 23px; }
  .sim { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .sim__qr img { margin: 0 auto; }
  .account__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}