/* checkout.css (magazine) — the sheet of the CHECKOUT package (design package S4:
   docs/design-kickoff/S4.md, the measures in S4_MASSE.md): the two steps of a checkout — the head
   with the title and the steps, the two columns, the cards with their fields, the tiles of a
   choice, the summary as a box and as a bar, and what stands above the button of step 2.
   Built first for the subscription (subscribe/checkout.html, subscribe/payment.html); the print
   shop's checkout stands on the same parts (shop/checkout.html, shop/payment.html — its summary
   lists the lines of the order, each with a small cover), and so does the SMALL PAGE, a narrow
   column with one card (decision S4-14; first the pay page of an invoice, pay/invoice.html and
   pay/checkout.html). The account's subscription page takes its card's inner order from here —
   the rows word and value, the small cover — and "cancel" there stands on the card of a small page.
   The page of an ORDER (shop/order.html, step 4) is the checkout's page read the other way round:
   the head with the progress in place of the steps, the cards at the left, the box "What happens
   next" at the right — and the bank details of an awaited transfer in a card over both columns.
   The account's list of print orders takes the small cover of the summary's bar from here.
   The OFFER of the subscription (subscribe/offer.html, step 6) is the page that leads into the
   checkout and has a family of names of its own, `mag-offer…`: its head, the two cards of the
   plans, and the blocks under them.

   Load order in the magazine's layout: tailwind.css → the platform's components.css and shell.css →
   the magazine's components.css (the blocks its pages share) → article.css, issue.css, shows.css,
   THIS file → app.css. The admin has its own layout and loads none of them.

   ⚠️ Loaded on EVERY page of the magazine, like the sheets beside it. So:
   - every block is named `mag-checkout…` — or `mag-offer…`, the offer page's —, and a name belongs
     to ONE sheet;
   - a block of components.css — and an atom of the platform — is restyled only under a class of
     this package, never by its bare name. The card here is a block of its own (`mag-checkout__card`),
     NOT the platform's `.form-card` in another dress: that one stays white, with a bare icon, on
     the account's pages;
   - colours only as var(--mn-…).

   The fields, the tick, the radio and the button are the platform's atoms (48 and 44 high) and
   keep their sizes; what this sheet adds is where they stand.

   How LARGE the blocks are built stands in ONE place: the block "The scale" right below, in the
   form of components.css — the phone's values on the root, what differs from 1024 in one media
   query, in whole pixels, each under a name `--mag-checkout-…`. Type is a step of the text scale
   and stands as a class in the markup; no rule here writes a size of type.

   Held by magazine/tests/test_checkout_sheet.py (its table SIZES says what stands here) through
   magazine/tests/sheet_rules.py, and with the other sheets by test_package_sheets.py. */

/* ---------- The scale ---------- */
/* Built is "Stufe C" — about three quarters of what the frames draw (Figma 5445:9050, 5446:9049,
   on a phone 5455:9099 and 5455:9312); every line says what the frame draws.
   Not named, because a change of scale leaves it alone: hairlines, radii, and a gap of up to 12
   between two small things. */
:root {
  /* The page. */
  --mag-checkout-head: 12px;                                 /* title with steps · the summary's bar; from 1024 · the columns — drawn 16 and 32 */
  --mag-checkout-aside: 376px;                               /* the summary's column, from 1024 — drawn 376, built as drawn */
  --mag-checkout-gap: 24px;                                  /* form · summary, from 1024 — drawn 24, built as drawn */
  --mag-checkout-apart: 16px;                                /* card · card, the last card · the button, the bar · the first card — drawn 16 */

  /* A card, and the summary's box. */
  --mag-checkout-pad: 12px;                                  /* inside — drawn 16, from 1024 drawn 24 */
  --mag-checkout-rows: 12px;                                 /* head · content, row · row — drawn 16, from 1024 drawn 20 */
  --mag-checkout-disc: 24px;                                 /* the disc in a card's head — drawn 32 */
  --mag-checkout-disc-glyph: 14px;                           /* the icon in it — drawn 16 */
  --mag-checkout-term: 144px;                                /* the column of the words in "Your details", from 1024 — drawn 132;
                                                                wider, for the German word for a billing address */

  /* The steps. */
  --mag-checkout-step: 22px;                                 /* a step's disc — drawn 28 */
  --mag-checkout-step-glyph: 12px;                           /* the tick of a step that is done — drawn 16 */
  --mag-checkout-step-line: 24px;                            /* the line between two steps — drawn 28, from 1024 drawn 40 */

  /* The summary. */
  --mag-checkout-cover: 60px;                                /* how HIGH the cover stands in the box — drawn 80 */
  --mag-checkout-bar-cover: 30px;                            /* … and in the bar — drawn 40 */
  --mag-checkout-line-cover: 40px;                           /* … and at a line of an order, the print shop's — drawn 52 */
  --mag-checkout-glyph: 16px;                                /* the icon at the box's note, the bar's chevron — drawn 20 */

  /* A small page. */
  --mag-checkout-small: 576px;                               /* its one column — not drawn; as wide as the pages
                                                                "cancel" and "withdraw", the site's other small pages */

  /* A subscription in the account. */
  --mag-checkout-plan-term: 176px;                           /* the column of the words on its card, from 1024 — drawn 184;
                                                                nearly as drawn, for the German words for "renews on" */

  /* An order's page. */
  --mag-checkout-code: 192px;                                /* the code a banking app scans, beside the bank details of a
                                                                transfer — not drawn; as wide as it stood before the design */

  /* The offer of the subscription (Figma 5425:7378, on a phone 5429:7451). */
  --mag-offer-apart: 20px;                                   /* head · cards · the lines under them; in a block heading ·
                                                                content · closing — drawn 24, from 1024 drawn 40 */
  --mag-offer-band: 40px;                                    /* above and below each block under the cards — not drawn
                                                                on a phone, from 1024 drawn 72 to 80 */
  --mag-offer-picture: 188px;                                /* how HIGH the picture area of a card stands — drawn 250,
                                                                from 1024 drawn 340 */
  --mag-offer-pad: 16px;                                     /* inside a card, and the least room above its button —
                                                                drawn 20, from 1024 drawn 24 */
  --mag-offer-rows: 16px;                                    /* part · part of a card — drawn 20 */
  --mag-offer-cols: 24px;                                    /* column · column of the tiles and of the steps — drawn 32 */
  --mag-offer-glyph: 16px;                                   /* the icon of what a plan brings — drawn 20 */
  --mag-offer-tile-glyph: 20px;                              /* the icon of a tile — drawn 24 */
  --mag-offer-step: 32px;                                    /* the disc of a step — drawn 40 */
}
@media (min-width: 1024px) {
  :root {
    --mag-checkout-head: 24px;
    --mag-checkout-pad: 20px;
    --mag-checkout-rows: 16px;
    --mag-checkout-step-line: 32px;
    --mag-offer-apart: 28px;
    --mag-offer-band: 56px;
    --mag-offer-picture: 256px;
    --mag-offer-pad: 20px;
  }
}

/* ---------- The page ---------- */
/* <main> brings 24 above and below; from 1024 the title stands 12 lower (drawn 48, built 36), and
   below the button the page keeps the distance of every other page's last section — the frames
   end over a foot without its card, the foot stays as it is (decision S4-15). */
.mag-checkout { padding-bottom: var(--mag-section-end); }
@media (min-width: 1024px) {
  .mag-checkout { padding-top: 12px; }
}

/* ---------- A small page ---------- */
/* A page that is a title, a notice, ONE card and its buttons (decision S4-14; the macro
   `small_page` of checkout/_parts.html): the same page in one narrow column, in the middle. Its
   parts stand as far apart as the cards of a checkout (`mag-checkout__main`, below). No frame
   draws it — the pay page of an invoice is where it is accepted. */
.mag-checkout--small { max-width: var(--mag-checkout-small); margin-left: auto; margin-right: auto; }

/* ---------- Head: the title and the steps ---------- */
/* The title "Checkout" and beside it the two steps (decision S4-1): below 1024 the steps stand
   under the title, 12 apart; from 1024 in the title's line, at its right, on its lower edge.
   A step is a disc and a word, the line between two steps a hairline of the SECOND step (so the
   list holds nothing but its two entries). The current step (`aria-current`) is semibold with a
   green disc and its number in white; a step that is done carries a tick in the same disc and its
   word in the weight of every other; a step to come is the tinted disc with a green number and
   its word in gray. */
.mag-checkout__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--mag-checkout-head); }
.mag-checkout__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.mag-checkout__step { display: flex; align-items: center; gap: 10px; color: var(--mn-gray-700); }
.mag-checkout__step + .mag-checkout__step::before {
  content: ""; flex: none; width: var(--mag-checkout-step-line); height: 1px; background: var(--mn-gray-300);
}
.mag-checkout__num {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: var(--mag-checkout-step); height: var(--mag-checkout-step); border-radius: 9999px;
  background: var(--mn-green-100); color: var(--mn-green-700);
}
.mag-checkout__num .icon { width: var(--mag-checkout-step-glyph); height: var(--mag-checkout-step-glyph); }
.mag-checkout__step[aria-current] { color: var(--mn-gray-900); font-weight: 600; }
.mag-checkout__step--done { color: var(--mn-gray-900); }
.mag-checkout__step[aria-current] .mag-checkout__num { background: var(--mn-green-600); color: var(--mn-white); }
.mag-checkout__step--done .mag-checkout__num { background: var(--mn-green-600); color: var(--mn-white); }
/* On a page of step 2 the step that is done leads back to step 1 (`back` of the macro
   `checkout_head`): a link around disc and word — ONE target —, laid out like the step it fills
   and in the step's own colour. No line stands under its word until a pointer rests on it; the
   keyboard shows the frame of this sheet. Its line is 24 high: a target for a finger at the
   element itself, 36, by a padding that a margin takes back — the head is no higher for it. */
.mag-checkout__step-link {
  display: flex; align-items: center; gap: 10px; padding: 6px 0; margin: -6px 0; border-radius: 4px;
  color: inherit; text-decoration: none;
}
.mag-checkout__step-link:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (hover: hover) {
  .mag-checkout__step-link:hover { text-decoration: underline; }
}
@media (min-width: 1024px) {
  .mag-checkout__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ---------- The two columns ---------- */
/* Below 1024 ONE column in the order of the markup: the summary (a bar, shut), then the form.
   From 1024 the form at the left and the summary's column of 376 at the right, 24 apart — the
   page's grid is 1120, so from a window of 1216 the form is the drawn 720; at 1024 it keeps 528
   and its pairs of fields still fit. The summary does not stick (decision S4-3) and ends with
   its content: the columns are not stretched.
   ⚠️ The summary stands FIRST in the markup (that is where a phone shows it) and is put into the
   second column by its place in the grid, not by a reversed order. */
.mag-checkout__cols { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--mag-checkout-apart); }
.mag-checkout__main { display: flex; flex-direction: column; gap: var(--mag-checkout-apart); min-width: 0; }
.mag-checkout__aside { min-width: 0; }
@media (min-width: 1024px) {
  .mag-checkout__cols {
    grid-template-columns: minmax(0, 1fr) var(--mag-checkout-aside); column-gap: var(--mag-checkout-gap);
    align-items: start;
  }
  .mag-checkout__main { grid-column: 1; grid-row: 1; }
  .mag-checkout__aside { grid-column: 2; grid-row: 1; }
}

/* ---------- Card ---------- */
/* A group of the form (Figma 5445:9116): the tinted ground of the page's bands with a hairline
   around it, and in its head an icon in a tinted disc before the title — 16 bold, in the text
   face (the markup says so). Its rows stand 12 apart, from 1024 16.
   A long address of an account wraps anywhere: it has no blank to break at. */
.mag-checkout__card {
  display: flex; flex-direction: column; gap: var(--mag-checkout-rows); min-width: 0; padding: var(--mag-checkout-pad);
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
  overflow-wrap: anywhere;
}
.mag-checkout__card-head { display: flex; align-items: center; gap: 8px; color: var(--mn-gray-900); }
.mag-checkout__disc {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: var(--mag-checkout-disc); height: var(--mag-checkout-disc); border-radius: 9999px;
  background: var(--mn-green-100); color: var(--mn-green-700);
}
.mag-checkout__disc .icon { width: var(--mag-checkout-disc-glyph); height: var(--mag-checkout-disc-glyph); }

/* ---------- Fields ---------- */
/* The fields of an address (_address_fields.html), each the platform's atom under its label, 12
   apart. A PAIR stands side by side and never stacks — postal code and city on a phone too
   (Figma 5455:9187); a pair marked `--stack` (name and company, state and country) stands side by
   side from 640 only. Two fields of a pair stand on one line also where one label needs two:
   they are aligned at their lower edge. */
.mag-checkout__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mag-checkout__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
@media (max-width: 639px) {
  .mag-checkout__pair--stack { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tiles of a choice ---------- */
/* A choice of two as tiles (decisions S4-2 and S4-5; Figma 5445:9187): a radio of the platform
   and a line of words in a white box, the two side by side at every width (a pair, see above —
   but stretched to one height). The chosen tile carries the green border twice as thick WITHOUT
   growing: the second pixel is a shadow drawn inside the box. The second line of a tile is shown
   from 1024 only, as drawn. The frame of the keyboard stands around the tile whose radio has it. */
.mag-checkout__tiles { align-items: stretch; }
.mag-checkout__tile {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px;
  background: var(--mn-surface); border: 1px solid var(--mn-gray-300); border-radius: var(--rounded-box);
  cursor: pointer;
}
.mag-checkout__tile:has(input:checked) {
  border-color: var(--mn-green-600); box-shadow: inset 0 0 0 1px var(--mn-green-600);
}
.mag-checkout__tile:has(input:focus-visible) { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
.mag-checkout__tile-sub { display: none; color: var(--mn-gray-700); }
@media (min-width: 1024px) {
  .mag-checkout__tile-sub { display: block; }
}
@media (hover: hover) {
  .mag-checkout__tile:hover { border-color: var(--mn-green-600); }
}

/* ---------- A tick with its sentence ---------- */
/* The ticks above the button of step 2: the platform's checkbox at the first line of a sentence
   in 16/24 (18 in a line of 24 — 3 from its top), 10 apart. A link in the sentence, and in the
   notes under the card, is the green of every link on these pages, medium, underlined by the
   class it brings. */
.mag-checkout__tick { display: flex; align-items: flex-start; gap: 10px; color: var(--mn-gray-800); cursor: pointer; }
.mag-checkout__tick input { flex: none; margin-top: 3px; }
.mag-checkout__tick a { color: var(--mn-green-600); font-weight: 500; }
.mag-checkout__notes a { color: var(--mn-green-600); font-weight: 500; }
.mag-checkout__notes summary { color: var(--mn-green-600); font-weight: 500; }

/* ---------- Word and value ---------- */
/* "Your details" in step 2 (Figma 5446:9124): a word in small capitals and what it stands for —
   below 1024 the word above its value, from 1024 in a column of its own at the left, on the
   first line of the value. */
.mag-checkout__facts { display: flex; flex-direction: column; gap: var(--mag-checkout-rows); }
.mag-checkout__fact { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
@media (min-width: 1024px) {
  .mag-checkout__fact {
    grid-template-columns: var(--mag-checkout-term) minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  }
}
/* The amount to pay, the last row of "Legal notes": its words at the left, the amount at the
   right, under a hairline. */
.mag-checkout__due {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px;
  padding-top: var(--mag-checkout-rows); border-top: 1px solid var(--mn-gray-200);
}

/* ---------- Summary ---------- */
/* What is being bought (checkout/_summary.html; Figma 5445:9208, on a phone 5455:9141; decisions
   S4-3, S4-N1, S4-N4). ONE markup, a <details> that is SHUT in the source:

   Below 1024 a bar above the form — a small cover, the name over "Show details", the amount, a
   chevron — which the reader opens (also without a script); under it then a box with the lines,
   the total and the note, 12 below the bar. Name and cover stand in the bar already, so the box
   begins with the lines there.
   From 1024 the box in the right column: checkout.js opens the <details>, and the bar is then
   for a screen reader only (clipped, not removed: it names what the box holds). The box begins
   with its title and the product then. Without a script the bar stands in the column and opens
   the box as on a phone.

   The parts of the box are 12 apart with a hairline between two of them; the head (title and
   product) carries its own hairline below, so that no line stands first where the head is not
   shown. A cover is never boxed: a cut-out has no ground, and gets none here — the picture is
   fitted into an area of 17 : 20 by its height. */
.mag-checkout__sum { min-width: 0; }
.mag-checkout__bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px;
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
  color: var(--mn-gray-900); cursor: pointer; list-style: none;
}
.mag-checkout__bar::-webkit-details-marker { display: none; }
.mag-checkout__bar:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
.mag-checkout__bar-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mag-checkout__bar-cover { flex: none; width: auto; height: var(--mag-checkout-bar-cover); aspect-ratio: 17 / 20; object-fit: contain; }
.mag-checkout__chevron { flex: none; width: var(--mag-checkout-glyph); height: var(--mag-checkout-glyph); color: var(--mn-gray-700); }
.mag-checkout__sum[open] .mag-checkout__chevron { transform: rotate(180deg); }
.mag-checkout__box {
  display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: var(--mag-checkout-pad);
  background: var(--mn-gray-50); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
  color: var(--mn-gray-900);
}
.mag-checkout__box-head { display: none; }
.mag-checkout__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mag-checkout__cover { flex: none; width: auto; height: var(--mag-checkout-cover); aspect-ratio: 17 / 20; object-fit: contain; }
.mag-checkout__part + .mag-checkout__part { padding-top: 12px; border-top: 1px solid var(--mn-gray-200); }
/* A part that goes on where the one above ends — the sentence under the subtotal in step 1 of the
   print shop, where there is no total yet: no hairline between the two. */
.mag-checkout__part + .mag-checkout__part--joined { padding-top: 0; border-top: 0; }
/* The lines of an order (the print shop's summary; Figma 5447:9062, decision S4-N4): a small
   cover, the quantity and the title over the edition, the amount at the right. They are the
   first part of the box at EVERY width — the bar names only how many copies there are —, and the
   box's head is then its title alone, without a hairline below (`--bare`, from 1024). A line
   without a picture keeps no place for one. A cover is not boxed here either. */
.mag-checkout__items { display: flex; flex-direction: column; gap: 12px; }
.mag-checkout__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mag-checkout__item-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mag-checkout__line-cover { flex: none; width: auto; height: var(--mag-checkout-line-cover); aspect-ratio: 17 / 20; object-fit: contain; }
.mag-checkout__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mag-checkout__line--total { align-items: flex-start; }
.mag-checkout__hint { display: flex; align-items: flex-start; gap: 10px; color: var(--mn-gray-800); }
.mag-checkout__hint .icon {
  flex: none; width: var(--mag-checkout-glyph); height: var(--mag-checkout-glyph); margin-top: 2px;
  color: var(--mn-green-600);
}
@media (min-width: 1024px) {
  /* Open, the bar is heard and not seen. ⚠️ A <summary> stays in the order of the Tab key even
     so: checkout.js takes it out while it holds the box open, and gives it back below 1024. */
  .mag-checkout__sum[open] > .mag-checkout__bar {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .mag-checkout__box { margin-top: 0; }
  .mag-checkout__box-head {
    display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px;
    border-bottom: 1px solid var(--mn-gray-200);
  }
  .mag-checkout__box-head--bare { padding-bottom: 0; border-bottom: 0; }
}

/* ---------- An order's page ---------- */
/* The status page of a print order (shop/order.html; Figma 5450:9118, the other states 5451:9080;
   decisions S4-12, S4-N2). Its head is the checkout's — the title, and beside it the progress
   "Ordered · Paid · Shipped" in the dress of the steps (the macro `order_head`): a step that is
   reached carries the tick, the last one reached is the current one as well, and the rules of the
   steps above give both to one entry.
   Under the head ONE column of parts, as far apart as the head and the columns of a checkout: the
   notice (the platform's banner), the bank details of an awaited transfer, the two columns, the
   contact line.
   The columns are the checkout's, with the cards at the left. The box at the right — "What
   happens next" (shop/_order_next.html) — is the summary's box standing ALONE: no bar above it,
   so nothing to keep away from. It follows the cards in the markup, and below 1024 it stands
   under them (a summary stands first: that one is a bar there). */
.mag-checkout__stack { display: flex; flex-direction: column; gap: var(--mag-checkout-head); min-width: 0; }
.mag-checkout__box--alone { margin-top: 0; }
/* The bank details of an awaited transfer (decision S4-N2: as built — our own account, with the
   code a banking app scans): a card over both columns. In it the sentence, the details as rows
   word · value, what has arrived; and the code with its sentence under them — from 1024 in a
   column of its own at the right, where the card carries one (`--code`: a transfer through Stripe
   and one in dollars have none, and keep no place for it). The code is inline SVG and fills its
   box; nothing is drawn around it. The column of the words is the wider one of a subscription's
   card: the German word for the reference of a transfer needs it. */
.mag-checkout__bank { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--mag-checkout-rows); }
.mag-checkout__bank-text { display: flex; flex-direction: column; gap: var(--mag-checkout-rows); min-width: 0; }
.mag-checkout__code { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mag-checkout__code-pic { width: var(--mag-checkout-code); }
@media (min-width: 1024px) {
  .mag-checkout__bank--code {
    grid-template-columns: minmax(0, 1fr) var(--mag-checkout-code); column-gap: var(--mag-checkout-gap);
    align-items: start;
  }
  .mag-checkout__bank .mag-checkout__fact { grid-template-columns: var(--mag-checkout-plan-term) minmax(0, 1fr); }
}

/* ---------- A subscription in the account ---------- */
/* The card of a subscription on the account's page (account/_subscription_cards.html; Figma
   5449:9187 — drawn 20 between two parts, a hairline between them): the platform's white card,
   which keeps its ground, its border and its padding. Under THIS class its parts — the head with
   cover, name and status mark, the facts, the actions — stand as far apart as the rows of a
   checkout's card, and from the second on each carries a hairline above. The small cover in the
   head is the one of a line of an order (`mag-checkout__line-cover`, above), the facts are the
   rows of "Word and value" — with a wider column for the words from 1024: the card has more of
   them, and longer ones, than "Your details" of a checkout. */
.mag-checkout__plan { gap: var(--mag-checkout-rows); }
.mag-checkout__plan-part + .mag-checkout__plan-part {
  padding-top: var(--mag-checkout-rows); border-top: 1px solid var(--mn-gray-200);
}
@media (min-width: 1024px) {
  .mag-checkout__plan .mag-checkout__fact { grid-template-columns: var(--mag-checkout-plan-term) minmax(0, 1fr); }
}

/* ---------- The offer of the subscription ---------- */
/* The page that sells the subscription (subscribe/offer.html, its parts subscribe/_offer_parts.html;
   Figma 5425:7378, a reader who subscribes already 5428:7605, on a phone 5429:7451; decisions
   S4-7, S4-8, S4-9, S4-N3). A page with bands. Its first part — the head, the notice of a running
   subscription, the two cards, the two lines under them — stands on white on the page's grid, as
   far above and below as a section (the shared class of a section in the markup). Under it up to
   three blocks, each with the same room above and below: the current issue and "How it works" on
   the tinted ground from edge to edge of the window, "Good to know" between them on white.
   Everything stands in the order of the markup; nothing is moved by a rule and nothing is hidden
   at one width.

   The head is the head of the issue overview WITHOUT its band (the shared classes of that head in
   the markup: mark, line, lead) — on white. The question to a guest follows the lead, 12 under
   it; from 1024 it stands at the right, on the lower edge of the words.
   A link in a sentence of the page is the green of the checkout's links, medium, underlined by
   the class it brings. */
.mag-offer__top { display: flex; flex-direction: column; gap: var(--mag-offer-apart); min-width: 0; }
.mag-offer__head { display: flex; flex-direction: column; min-width: 0; }
.mag-offer__ask { margin-top: 12px; color: var(--mn-gray-700); }
.mag-offer__said a { color: var(--mn-green-600); font-weight: 500; }
@media (min-width: 1024px) {
  .mag-offer__head { flex-direction: row; align-items: flex-end; justify-content: space-between; column-gap: var(--mag-head-cta); }
  .mag-offer__ask { flex: none; margin-top: 0; }
}

/* --- the two cards (Figma 5425:7461) --- */
/* One under the other, from 768 side by side and equally high: the upper part of a card fills its
   height, button and sentence stand at its foot. A card is the surface of the teasers — white, the
   radius of a box, no border, the soft shadow that reaches up (the hairline first, for a browser
   that drops the mixed colour) — and is no link: its one way on is its button.
   The picture area lies at the card's upper edge in the tint of the plan, as high at every card;
   the picture is fitted into it and never cropped (its width and height are utilities in the
   markup: this sheet writes no length in per cent). ⚠️ No box around the picture — the issue
   lying open is a cut-out, and where it brings no shadow of its own the markup adds the shared
   filter of a cut-out. An area without a picture stays as it is, tinted.
   The words: name over a sentence, the price — the amount large, "per year" on its baseline —
   over a small line, a hairline, the three things the plan brings, each behind a green icon at
   its first line. */
.mag-offer__cards {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mag-offer-apart);
  scroll-margin-top: var(--mag-offer-apart);
}
@media (min-width: 768px) {
  .mag-offer__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mag-gap); }
}
.mag-offer__card {
  display: flex; flex-direction: column; min-width: 0; background: var(--mn-surface); border-radius: var(--rounded-box);
  box-shadow: 0 0 0 1px var(--mn-gray-200);
  box-shadow: 0 -6px 32px color-mix(in srgb, var(--mn-gray-900) 8%, transparent);
}
.mag-offer__picture {
  display: flex; flex: none; align-items: center; justify-content: center;
  height: var(--mag-offer-picture); padding: var(--mag-card-pad);
  border-radius: var(--rounded-box) var(--rounded-box) 0 0;
}
.mag-offer__picture--print { background: var(--mn-green-100); }
.mag-offer__picture--digital { background: var(--mn-show-week-surface); }
.mag-offer__body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; padding: var(--mag-offer-pad); }
.mag-offer__parts { display: flex; flex-direction: column; flex-grow: 1; gap: var(--mag-offer-rows); min-width: 0; }
.mag-offer__title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mag-offer__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; color: var(--mn-gray-900); }
.mag-offer__rule { margin: 0; border: 0; border-top: 1px solid var(--mn-gray-200); }
.mag-offer__points { display: flex; flex-direction: column; gap: 10px; color: var(--mn-gray-900); }
.mag-offer__point { display: flex; align-items: flex-start; gap: 10px; }
.mag-offer__point .icon {
  flex: none; width: var(--mag-offer-glyph); height: var(--mag-offer-glyph); margin-top: 4px;
  color: var(--mn-green-600);
}
.mag-offer__foot { display: flex; flex-direction: column; gap: 12px; padding-top: var(--mag-offer-pad); }
/* Under the cards: where we deliver and how one can pay (the line the law wants before an order
   begins), and the rule of the currency — small, and no wider than the words of a head. */
.mag-offer__notes { display: flex; flex-direction: column; gap: 6px; max-width: var(--mag-head-text); color: var(--mn-gray-700); }

/* --- the blocks under the cards (Figma 5426:7401, 5426:7474, 5433:7454) --- */
/* A block keeps its room above and below as PADDING (on a page with bands margins add up), and
   its parts — heading, content, what closes it — stand one under the other. Tinted, it is a band
   of the page with the content back on the grid inside; "Good to know" stands on the grid itself.
   Where no tinted block stands above "Good to know" (a reader who subscribes already; no issue is
   published) it follows the first part at that part's own distance (`--joined`); where it is the
   page's last block it ends like the last section of every page (`--end`: <main> adds its 24). */
.mag-offer__band { padding-top: var(--mag-offer-band); padding-bottom: var(--mag-offer-band); }
.mag-offer__band--tint { background: var(--mn-gray-75); }
.mag-offer__band--joined { padding-top: 0; }
.mag-offer__band--end { padding-bottom: var(--mag-section-end); }
.mag-offer__block { display: flex; flex-direction: column; gap: var(--mag-offer-apart); min-width: 0; }
/* "Good to know": six tiles — an icon, a title, a text — in one column, from 640 in two, from 1024
   in three. Their own grid: the rows stand further apart than the columns. */
.mag-offer__tiles {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--mag-offer-cols); row-gap: var(--mag-offer-apart);
}
.mag-offer__tile { min-width: 0; }
.mag-offer__glyph { display: flex; margin-bottom: 10px; color: var(--mn-green-600); }
.mag-offer__glyph .icon { width: var(--mag-offer-tile-glyph); height: var(--mag-offer-tile-glyph); }
/* "How it works": four steps — a number in a tinted disc, a title, a text — in one column, from
   640 in two, from 1024 in four. A line runs from the disc to the end of its column only where
   the four stand side by side, and never behind the last one: there it would lead nowhere. */
.mag-offer__steps {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--mag-offer-cols); row-gap: var(--mag-offer-apart);
}
.mag-offer__step { min-width: 0; }
.mag-offer__rail { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mag-offer__num {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: var(--mag-offer-step); height: var(--mag-offer-step); border-radius: 9999px;
  background: var(--mn-green-100); color: var(--mn-green-700);
}
/* What closes "How it works": the button back up to the cards — as wide as the page on a phone,
   as wide as its words from 640 — and the line with the address to write to. */
.mag-offer__close { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
@media (min-width: 640px) {
  .mag-offer__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-offer__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-offer__close { align-items: flex-start; }
}
@media (min-width: 1024px) {
  .mag-offer__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mag-offer__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mag-offer__step:not(:last-child) .mag-offer__rail::after { content: ""; flex: 1; height: 1px; background: var(--mn-gray-300); }
}

/* ---------- Hidden stays hidden ---------- */
/* This sheet loads after the build: a `display` set here beats the build's hiding class and the
   attribute of the same name (same weight, later file). Every block above that sets one says the
   closed state again. ⚠️ So none of them is hidden by a class with a variant in front — it is
   hidden through an element around it. Alpine's `x-show` writes the style at the element itself
   and needs none of this. */
.mag-checkout__head[hidden], .mag-checkout__head.hidden, .mag-checkout__steps[hidden], .mag-checkout__steps.hidden,
.mag-checkout__step[hidden], .mag-checkout__step.hidden, .mag-checkout__num[hidden], .mag-checkout__num.hidden,
.mag-checkout__step-link[hidden], .mag-checkout__step-link.hidden,
.mag-checkout__cols[hidden], .mag-checkout__cols.hidden, .mag-checkout__main[hidden], .mag-checkout__main.hidden,
.mag-checkout__card[hidden], .mag-checkout__card.hidden, .mag-checkout__card-head[hidden], .mag-checkout__card-head.hidden,
.mag-checkout__disc[hidden], .mag-checkout__disc.hidden, .mag-checkout__fields[hidden], .mag-checkout__fields.hidden,
.mag-checkout__pair[hidden], .mag-checkout__pair.hidden, .mag-checkout__tile[hidden], .mag-checkout__tile.hidden,
.mag-checkout__tile-sub[hidden], .mag-checkout__tile-sub.hidden, .mag-checkout__tick[hidden], .mag-checkout__tick.hidden,
.mag-checkout__facts[hidden], .mag-checkout__facts.hidden, .mag-checkout__fact[hidden], .mag-checkout__fact.hidden,
.mag-checkout__due[hidden], .mag-checkout__due.hidden, .mag-checkout__bar[hidden], .mag-checkout__bar.hidden,
.mag-checkout__box[hidden], .mag-checkout__box.hidden, .mag-checkout__box-head[hidden], .mag-checkout__box-head.hidden,
.mag-checkout__product[hidden], .mag-checkout__product.hidden, .mag-checkout__line[hidden], .mag-checkout__line.hidden,
.mag-checkout__items[hidden], .mag-checkout__items.hidden, .mag-checkout__item[hidden], .mag-checkout__item.hidden,
.mag-checkout__hint[hidden], .mag-checkout__hint.hidden, .mag-checkout__stack[hidden], .mag-checkout__stack.hidden,
.mag-checkout__bank[hidden], .mag-checkout__bank.hidden, .mag-checkout__bank-text[hidden], .mag-checkout__bank-text.hidden,
.mag-checkout__code[hidden], .mag-checkout__code.hidden,
.mag-offer__top[hidden], .mag-offer__top.hidden, .mag-offer__head[hidden], .mag-offer__head.hidden,
.mag-offer__cards[hidden], .mag-offer__cards.hidden, .mag-offer__card[hidden], .mag-offer__card.hidden,
.mag-offer__picture[hidden], .mag-offer__picture.hidden, .mag-offer__body[hidden], .mag-offer__body.hidden,
.mag-offer__parts[hidden], .mag-offer__parts.hidden, .mag-offer__title[hidden], .mag-offer__title.hidden,
.mag-offer__price[hidden], .mag-offer__price.hidden, .mag-offer__points[hidden], .mag-offer__points.hidden,
.mag-offer__point[hidden], .mag-offer__point.hidden, .mag-offer__foot[hidden], .mag-offer__foot.hidden,
.mag-offer__notes[hidden], .mag-offer__notes.hidden, .mag-offer__block[hidden], .mag-offer__block.hidden,
.mag-offer__tiles[hidden], .mag-offer__tiles.hidden, .mag-offer__glyph[hidden], .mag-offer__glyph.hidden,
.mag-offer__steps[hidden], .mag-offer__steps.hidden, .mag-offer__rail[hidden], .mag-offer__rail.hidden,
.mag-offer__num[hidden], .mag-offer__num.hidden, .mag-offer__close[hidden], .mag-offer__close.hidden { display: none; }