/* ============================================================ */
    /* EN checkout. Light theme, overriding funnel.css dark default. */
    /* Shares the mc-* language with /offer-mail/checkout.           */
    /* ============================================================ */
    body.mc-page {
      background: #ffffff !important;
      color: #202223;
      font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
      min-height: 100vh;
      color-scheme: light;
    }
    body.mc-page input,
    body.mc-page select,
    body.mc-page textarea,
    body.mc-page button {
      color-scheme: light;
    }
    body.mc-page input:-webkit-autofill,
    body.mc-page input:-webkit-autofill:hover,
    body.mc-page input:-webkit-autofill:focus {
      -webkit-text-fill-color: #202223;
      -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
      caret-color: #202223;
    }
    body.mc-page .page-glow,
    body.mc-page .page-glow-a,
    body.mc-page .page-glow-b { display: none !important; }
    .mc-page::before,
    .mc-page::after { display: none !important; }

    .mc { max-width: 1200px; margin: 0 auto; padding: 0; }
    .mc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
    }
    @media (max-width: 880px) {
      .mc-grid { grid-template-columns: 1fr; }
    }

    .mc-preview-flag {
      margin: 0;
      padding: 0.7rem 1rem;
      background: #fff4e0;
      border-bottom: 1px solid #f5b66e;
      color: #7a4100;
      font-size: 0.82rem;
      line-height: 1.5;
      text-align: center;
    }

    .mc-form-side {
      padding: 2.4rem clamp(1.2rem, 4vw, 3rem);
      max-width: 560px;
      width: 100%;
      justify-self: end;
    }
    @media (max-width: 880px) {
      .mc-form-side { justify-self: stretch; max-width: none; }
    }
    .mc-brand {
      margin-bottom: 2.4rem;
      padding-bottom: 1.4rem;
      border-bottom: 1px solid #e1e3e5;
    }
    .mc-brand-name {
      /* Czysto informacyjny nagłówek — nie jest linkiem i nie ma nim być.
         Bez tego kupujący próbuje go kliknąć w trakcie płacenia i zamiast
         reakcji dostaje zaznaczony tekst, co wygląda na zepsute. */
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      cursor: default;
      font-size: 1.1rem;
      font-weight: 700;
      color: #202223;
      letter-spacing: -0.01em;
    }
    .mc-form { display: flex; flex-direction: column; gap: 2rem; }
    .mc-rest { display: flex; flex-direction: column; gap: 2rem; }
    /* No gap: the wallet and PayPal blocks carry their own margins, so a gap
       here stacked a second space on top and pushed the pay button away from
       the thing it belongs to. */
    .mc-payblock { display: flex; flex-direction: column; }
    /* The gap is gone so the wallet and PayPal buttons sit tight against the
       pay button they are alternatives to. What follows the button is not an
       alternative, so it gets its space back explicitly rather than sharing
       one rule with the things above. */
    .mc-payblock > .mc-guarantee { margin-top: 1rem; }
    .mc-payblock > .mc-microtrust { margin-top: 0.85rem; }

    /* Mobile running order: brand → pick a product → summary → everything else.
       The summary used to lead, so the page asserted "E-book, $29, total $29"
       before the buyer had chosen between the two tiers — it presented the
       decision as already made.
       `display: contents` dissolves the form-side and the form so their
       children become grid items of .mc-grid directly, which is what lets the
       summary sit between two halves of one form. Their padding and row gap
       vanish along with their boxes, so both are restored on the children.

       PLACEMENT MATTERS: this block must stay AFTER the base .mc-form and
       .mc-rest rules. Same specificity means source order decides, and sitting
       above them silently lost `display: contents` to `display: flex`. */
    @media (max-width: 880px) {
      .mc-form-side,
      .mc-form { display: contents; }

      .mc-brand,
      .mc-pick,
      .mc-rest,
      .mc-payblock,
      .mc-foot {
        padding-left: clamp(1.2rem, 4vw, 3rem);
        padding-right: clamp(1.2rem, 4vw, 3rem);
      }
      .mc-brand { order: 0; padding-top: 2rem; margin-bottom: 0; }
      .mc-pick { order: 1; padding-top: 1.8rem; padding-bottom: 1.8rem; }
      .mc-rest { order: 2; padding-bottom: 1.8rem; }
      /* Summary sits between the form and the pay button: everything chosen is
         above it, the commitment is below it. */
      .mc-summary-side { order: 3; }
      .mc-payblock { order: 4; padding-top: 1.8rem; }
      .mc-foot { order: 5; padding-bottom: 2.4rem; }
    }

    .mc-section { display: flex; flex-direction: column; gap: 0.85rem; }
    .mc-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.6rem;
    }
    .mc-section-title {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 600;
      color: #202223;
      letter-spacing: -0.005em;
    }
    .mc-section-meta { font-size: 0.78rem; color: #6d7175; }

    /* ---- product tier selector ---------------------------------- */
    /* The one decision on this page that changes the order by 3.3x, so it gets
       the only saturated colour in the checkout. Blue, not the green used for
       the guarantee and the bump: green already means "done / covered" here,
       and selection is a different idea. The hue is the landing page's brand
       blue, which ties the two surfaces together. */
    .mc-tiers {
      /* Amber, per Alex's reference checkouts. Replaces the brand blue: on this
         page yellow now means "this is the option you picked", grey means the
         payment rail, and green stays reserved for the guarantee. */
      --pick: #e0a800;
      --pick-bg: #fffbeb;
      --pick-ink: #8a6a00;
      display: flex;
      flex-direction: column;
      border: 1px solid #c9cccf;
      border-radius: 10px;
      background: #ffffff;
      overflow: hidden;
    }
    .mc-tier {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 0.9rem;
      align-items: start;
      padding: 1.15rem 1.2rem;
      cursor: pointer;
      background: #ffffff;
      transition: background 0.15s, box-shadow 0.15s;
    }
    .mc-tier + .mc-tier { border-top: 1px solid #e1e3e5; }
    .mc-tier:hover { background: #fbfbfc; }
    /* :has keeps the checked state on the row without a JS class toggle.
       The rail is an inset shadow so selecting never shifts the layout. */
    .mc-tier:has(.mc-tier-radio:checked) {
      background: var(--pick-bg);
      box-shadow: inset 3px 0 0 var(--pick);
    }
    .mc-tier:has(.mc-tier-radio:focus-visible) {
      outline: 2px solid var(--pick);
      outline-offset: -2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .mc-tier { transition: none; }
    }
    .mc-tier-radio {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .mc-tier-mark {
      width: 18px;
      height: 18px;
      margin-top: 0.2rem;
      border-radius: 50%;
      border: 1px solid #8c9196;
      background: #ffffff;
      display: block;
      flex: none;
    }
    .mc-tier:has(.mc-tier-radio:checked) .mc-tier-mark {
      border-color: var(--pick);
      background: var(--pick);
      box-shadow: inset 0 0 0 3.5px #ffffff;
    }
    .mc-tier-body { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
    .mc-tier-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.5rem;
    }
    .mc-tier-label {
      font-size: 1rem;
      font-weight: 600;
      color: #202223;
      line-height: 1.3;
      letter-spacing: -0.005em;
    }
    /* Deliberately not a coloured pill. The claim stays (it is in the spec),
       but a green badge shouting BEST SELLER next to a price is the exact
       register this brand is trying to get away from. Set as a quiet label,
       it informs without selling. */
    .mc-tier-badge {
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: var(--pick-ink);
      white-space: nowrap;
    }
    .mc-tier-summary {
      font-size: 0.83rem;
      color: #6d7175;
      line-height: 1.5;
    }
    /* Names the containment outright, so nobody has to diff two bullet lists
       to work out that the second tier includes the first. */
    .mc-tier-delta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.15rem;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #8c9196;
    }
    .mc-tier-delta::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #e1e3e5;
    }
    /* Green, because on this page green already means "covered / guaranteed" —
       the same meaning the bump's added state and the page guarantee carry.
       Blue stays the selection colour. */
    .mc-tier-note {
      margin-top: 0.35rem;
      font-size: 0.79rem;
      font-weight: 600;
      line-height: 1.5;
      color: #008060;
    }
    .mc-tier-bullets { display: flex; flex-direction: column; gap: 0.25rem; }
    .mc-tier-bullet {
      font-size: 0.85rem;
      color: #202223;
      line-height: 1.45;
      padding-left: 1.1rem;
      position: relative;
    }
    .mc-tier-bullet::before {
      content: "";
      position: absolute;
      left: 0.15rem;
      top: 0.52em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--pick);
      opacity: 0.35;
    }
    .mc-tier:has(.mc-tier-radio:checked) .mc-tier-bullet::before { opacity: 1; }
    .mc-tier-price {
      font-size: 1.3rem;
      font-weight: 700;
      color: #202223;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
    .mc-tiers-note {
      margin: 0.65rem 0 0;
      font-size: 0.78rem;
      color: #6d7175;
      text-align: center;
    }

    /* ---- payment method rows ------------------------------------ */
    /* One row per method the buyer can CHOOSE. Wallet rows are prepended at
       runtime in step 8; the row only selects a method, it never pays. */
    .mc-methods {
      display: flex;
      flex-direction: column;
      border: 1px solid #c9cccf;
      border-radius: 8px;
      overflow: hidden;
    }
    .mc-method {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.7rem;
      padding: 0.85rem 1rem;
      background: #ffffff;
      cursor: pointer;
      transition: background 0.15s;
    }
    .mc-method + .mc-method { border-top: 1px solid #e1e3e5; }
    .mc-method:hover { background: #f6f7f8; }
    /* Grey, not the selection amber: picking a payment rail is plumbing, not
       the commercial decision the page is actually asking for. */
    .mc-method:has(input:checked) { background: #f1f2f4; }
    .mc-method input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .mc-method-mark {
      width: 17px;
      height: 17px;
      flex: none;
      border-radius: 50%;
      border: 1px solid #8c9196;
      background: #ffffff;
    }
    .mc-method:has(input:checked) .mc-method-mark {
      border-color: #5c5f62;
      background: #5c5f62;
      box-shadow: inset 0 0 0 3.5px #ffffff;
    }
    .mc-method:has(input:focus-visible) { outline: 2px solid #5c5f62; outline-offset: -2px; }
    .mc-method-label { font-size: 0.92rem; font-weight: 600; color: #202223; }
    .mc-method-meta { font-size: 0.78rem; color: #6d7175; white-space: nowrap; }
    @media (max-width: 400px) {
      .mc-method-meta { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .mc-method { transition: none; }
    }

    .mc-field { display: flex; flex-direction: column; gap: 0.35rem; }
    .mc-label { font-size: 0.85rem; font-weight: 500; color: #202223; }
    .mc-input {
      width: 100%;
      padding: 0.85rem 0.95rem;
      font-family: inherit;
      font-size: 1rem;
      color: #202223;
      background: #ffffff;
      border: 1px solid #c9cccf;
      border-radius: 6px;
      transition: border-color 0.15s, box-shadow 0.15s;
      box-sizing: border-box;
    }
    .mc-input:hover { border-color: #8c9196; }
    .mc-input:focus {
      outline: 0;
      border-color: #1a1a1a;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
    }
    .mc-input::placeholder { color: #8c9196; }
    .mc-express { margin-bottom: 12px; }
    .mc-paypal { margin-bottom: 12px; }
    .mc-paypal-or { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
      font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8c9196; }
    .mc-paypal-or::before, .mc-paypal-or::after { content: ""; flex: 1; height: 1px; background: #e1e3e5; }
    .mc-paypal-btn { display: flex; align-items: center; justify-content: center; gap: 9px;
      width: 100%; box-sizing: border-box; min-height: 52px; padding: 14px 20px;
      border: 1px solid #0b2b5b; border-radius: 0; background: #ffc439; color: #0b2b5b;
      font: 700 15px/1 inherit; cursor: pointer; }
    .mc-paypal-btn:disabled { opacity: .6; cursor: progress; }
    .mc-paypal-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #6d7175; }
    .mc-help { margin: 0; font-size: 0.78rem; color: #6d7175; }

    .mc-pe-host { min-height: 60px; }
    .mc-pe-skeleton {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 1rem 1.1rem;
      border: 1px dashed #c9cccf;
      border-radius: 6px;
      font-size: 0.88rem;
      color: #6d7175;
    }
    .mc-pe-skeleton-spinner {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #e1e3e5;
      border-top-color: #1a1a1a;
      animation: mc-spin 0.8s linear infinite;
    }
    @keyframes mc-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .mc-pe-skeleton-spinner { animation: none; }
    }

    .mc-status { padding: 0.7rem 0.9rem; border-radius: 6px; font-size: 0.88rem; }
    .mc-status[data-kind="error"] {
      background: #fff5f5;
      color: #b80020;
      border: 1px solid #f5c0c0;
    }
    .mc-status[data-kind="info"] {
      background: #f5f5f5;
      color: #202223;
      border: 1px solid #e1e3e5;
    }

    /* ---- order bump --------------------------------------------- */
    .mc-bump {
      border: 1px dashed #c9cccf;
      border-radius: 8px;
      padding: 1rem 1.1rem;
      background: #fcfcfd;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      transition: border-color 0.15s, background 0.15s;
    }
    .mc-bump:has(input:checked) {
      border-style: solid;
      border-color: #e0a800;
      background: #fffbeb;
    }
    .mc-bump-check {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      cursor: pointer;
    }
    .mc-bump-check input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .mc-bump-box {
      width: 20px;
      height: 20px;
      flex: none;
      border: 1px solid #8c9196;
      border-radius: 4px;
      background: #ffffff;
      position: relative;
    }
    .mc-bump:has(input:checked) .mc-bump-box {
      background: #e0a800;
      border-color: #e0a800;
    }
    .mc-bump-box::after {
      content: "";
      position: absolute;
      inset: 0;
      background: no-repeat center / 12px 12px
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 8.5l3.5 3.5 7.5-8'/></svg>");
      opacity: 0;
      transition: opacity 0.12s;
    }
    .mc-bump:has(input:checked) .mc-bump-box::after { opacity: 1; }
    .mc-bump-check input:focus-visible + .mc-bump-box {
      outline: 2px solid #1a1a1a;
      outline-offset: 2px;
    }
    .mc-bump-headline {
      font-size: 0.95rem;
      font-weight: 600;
      color: #202223;
      line-height: 1.35;
    }
    .mc-bump-body { display: block; }
    .mc-bump-copy { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
    .mc-bump-badge {
      margin: 0;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #c75100;
    }
    .mc-bump-desc { margin: 0; font-size: 0.83rem; color: #6d7175; line-height: 1.5; }
    .mc-bump-list {
      margin: 0.15rem 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .mc-bump-list li { font-size: 0.83rem; line-height: 1.45; color: #202223; }
    .mc-bump-closer {
      margin: 0.15rem 0 0;
      font-size: 0.8rem;
      line-height: 1.5;
      color: #6d7175;
    }
    .mc-bump-price {
      margin: 0;
      display: flex;
      align-items: baseline;
      gap: 0.45rem;
      font-variant-numeric: tabular-nums;
    }
    .mc-bump-price s { color: #8c9196; font-size: 0.82rem; }
    .mc-bump-price strong { font-size: 1rem; color: #202223; }

    /* ---- CTA ---------------------------------------------------- */
    .mc-pay {
      width: 100%;
      padding: 1rem 1.2rem;
      background: #1a1a1a;
      color: #ffffff;
      border: 0;
      border-radius: 6px;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 0.15s, opacity 0.15s;
      font-variant-numeric: tabular-nums;
    }
    .mc-pay:hover:not([disabled]) { background: #000000; }
    .mc-pay[disabled] { background: #c9cccf; cursor: not-allowed; }

    .mc-microtrust {
      margin: 0;
      font-size: 0.78rem;
      color: #6d7175;
      text-align: center;
      line-height: 1.5;
    }
    .mc-microtrust a { color: #202223; text-decoration: underline; }

    .mc-foot {
      margin-top: 3rem;
      padding-top: 1.6rem;
      border-top: 1px solid #e1e3e5;
      font-size: 0.78rem;
      color: #6d7175;
    }
    .mc-foot nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 0.55rem; }
    .mc-foot nav a { color: #202223; text-decoration: none; }
    .mc-foot nav a:hover { text-decoration: underline; }
    .mc-foot p { margin: 0; }

    /* ---- summary ------------------------------------------------ */
    .mc-summary-side {
      padding: 2.4rem clamp(1.2rem, 4vw, 3rem);
      background: #f6f6f7;
      border-left: 1px solid #e1e3e5;
      min-height: 100vh;
    }
    @media (max-width: 880px) {
      .mc-summary-side {
        min-height: 0;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
        border-left: 0;
        /* Rules top and bottom: on mobile this is a band wedged between the
           choice and the rest of the form, not a column edge. */
        border-top: 1px solid #e1e3e5;
        border-bottom: 1px solid #e1e3e5;
      }
      /* Sticky is pointless once it is a band in the flow, and it makes the
         summary jitter against the sections above and below it. */
      .mc-summary-sticky { position: static; max-width: none; }
    }
    .mc-summary-sticky {
      position: sticky;
      top: 2rem;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
    }
    .mc-summary-title {
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6d7175;
    }

    /* ---- collapsible summary ------------------------------------ */
    .mc-summary-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 0.6rem;
      cursor: pointer;
      /* Kills the default disclosure triangle in every engine — we draw our
         own chevron so it can sit on the right, next to the total. */
      list-style: none;
      padding: 0.2rem 0;
    }
    .mc-summary-head::-webkit-details-marker { display: none; }
    .mc-summary-head:focus-visible {
      outline: 2px solid #1a1a1a;
      outline-offset: 3px;
      border-radius: 4px;
    }
    .mc-summary-head-total {
      font-size: 0.95rem;
      font-weight: 700;
      color: #202223;
      font-variant-numeric: tabular-nums;
    }
    /* Only meaningful while collapsed: open, the panel shows the real total
       row below, so the header copy would just be a duplicate. `display: none`
       rather than `opacity: 0` so the grid column collapses with it instead of
       leaving a hole next to the chevron. */
    .mc-summary[open] .mc-summary-head-total { display: none; }

    /* <details> must not be a flex container — several engines stop honouring
       the closed state when it is, and the panel stays visible. Keep it block
       and let an inner wrapper do the layout. */
    .mc-summary { display: block; }
    .mc-summary-body {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      padding-top: 1.4rem;
    }
    .mc-summary-chev {
      width: 18px;
      height: 18px;
      color: #6d7175;
      transition: transform 0.18s ease;
    }
    .mc-summary[open] .mc-summary-chev { transform: rotate(180deg); }
    @media (prefers-reduced-motion: reduce) {
      .mc-summary-chev { transition: none; }
    }

    .mc-line {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      gap: 0.95rem;
      align-items: start;
    }
    .mc-line[hidden] { display: none; }
    .mc-line-thumb {
      width: 64px;
      height: 64px;
      border-radius: 8px;
      border: 1px solid #d2d5d8;
      background: #ffffff;
      overflow: hidden;
    }
    .mc-line-thumb--cover {
      background: linear-gradient(180deg, #f4f6f8, #e5e9ee);
      padding: 3px;
    }
    .mc-line-thumb--cover img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .mc-line-info { min-width: 0; }
    .mc-line-title {
      margin: 0 0 0.25rem;
      font-size: 0.92rem;
      font-weight: 600;
      color: #202223;
      line-height: 1.3;
    }
    .mc-line-desc { margin: 0; font-size: 0.8rem; color: #6d7175; line-height: 1.5; }
    .mc-line-price {
      font-size: 0.92rem;
      font-weight: 600;
      color: #202223;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .mc-totals { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.2rem; }
    .mc-total-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.6rem;
      font-size: 0.88rem;
      color: #6d7175;
      font-variant-numeric: tabular-nums;
    }
    .mc-total-row strong { color: #202223; font-weight: 600; }
    .mc-total-row--final {
      padding-top: 0.9rem;
      margin-top: 0.4rem;
      border-top: 1px solid #d2d5d8;
      font-size: 1.05rem;
      color: #202223;
    }
    .mc-total-row--final strong { font-size: 1.5rem; font-weight: 700; }
    .mc-total-currency {
      font-size: 0.78rem;
      color: #6d7175;
      font-weight: 500;
      margin-right: 0.3rem;
    }

    /* Seal on the left, claim on the right, per Alex's mockup.
       The accent is the same brand blue the tier selector uses. That is a
       deliberate reuse, not a collision: blue is this page's "our brand"
       colour, green stays reserved for the bump's added-to-order state. */
    .mc-guarantee {
      --seal: #0308d1;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 1rem;
      align-items: center;
      padding: 1rem 1.15rem;
      background: #ffffff;
      border: 1px solid var(--seal);
      border-radius: 10px;
    }
    .mc-guarantee-seal {
      width: 62px;
      height: 62px;
      flex: none;
      color: var(--seal);
    }
    .mc-guarantee-seal svg,
    .mc-guarantee-seal img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }
    .mc-guarantee-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
    .mc-guarantee-title {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 700;
      color: #202223;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }
    .mc-guarantee-point {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.88rem;
      color: #202223;
    }
    .mc-guarantee-tick { width: 17px; height: 17px; flex: none; color: var(--seal); }
    .mc-guarantee-how { margin: 0; font-size: 0.78rem; color: #6d7175; line-height: 1.5; }

    @media (max-width: 400px) {
      /* The seal is reassurance, not information — it yields first when the
         claim itself would otherwise start wrapping mid-phrase. */
      .mc-guarantee { gap: 0.8rem; padding: 0.9rem 1rem; }
      .mc-guarantee-seal { width: 48px; height: 48px; }
      .mc-guarantee-title { font-size: 0.95rem; }
    }


    /* ── selection + bump, per Alex's references (2026-08-16) ──────────────
       Appended rather than edited in place: the rules above are re-stated in a
       reduced-motion block further up, and editing one copy leaves the other
       winning on some conditions. Last-in-source is the only reliable override
       in this stylesheet. */

    /* Selected tier: a full ring, not a left bar. The reference frames the
       chosen product on all four sides, which reads as "this one" much faster
       than an edge marker does. */
    .mc-tier:has(.mc-tier-radio:checked) {
      background: var(--pick-bg);
      box-shadow: inset 0 0 0 2px var(--pick);
    }
    /* The hairline divider would otherwise cut straight through that ring. */
    .mc-tier:has(.mc-tier-radio:checked) + .mc-tier { border-top-color: transparent; }

    /* Order bump: loud BEFORE it is ticked. The old styling only lit up once
       checked, which is backwards — the point of a bump is to be noticed by
       someone who has not yet decided. */
    .mc-bump {
      border: 2px dashed #e0a800;
      background: #fffbeb;
    }
    .mc-bump:has(input:checked) {
      border-style: solid;
      background: #fff6d9;
    }
    /* Pointer at the checkbox, from the reference. Decorative, so it is a
       pseudo-element and never reaches a screen reader. */
    .mc-bump-check::before {
      content: "\27A4";
      color: #d7263d;
      font-size: 1.05rem;
      line-height: 1;
      flex: none;
      /* Krótki dryf w stronę pola wyboru — strzałka wskazuje miejsce kliknięcia,
         więc ruch idzie tam, gdzie ma trafić palec. Pauza między cyklami jest
         dłuższa niż sam ruch: strzałka szturcha, a nie miga bez przerwy obok
         pola z kwotą, którą kupujący właśnie czyta. */
      animation: mc-bump-nudge 2.4s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes mc-bump-nudge {
      0%, 62%, 100% { transform: translateX(0); }
      72%           { transform: translateX(5px); }
      82%           { transform: translateX(0); }
      90%           { transform: translateX(4px); }
      98%           { transform: translateX(0); }
    }
    /* Po zaznaczeniu strzałka nie ma już czego wskazywać. */
    .mc-bump:has(input:checked) .mc-bump-check::before {
      animation: none;
      opacity: .45;
    }
    @media (prefers-reduced-motion: reduce) {
      .mc-bump-check::before { animation: none; }
    }
    .mc-bump-headline { color: #1a7f37; font-weight: 700; }


    /* Order summary without the product thumbnail: the row loses its artwork
       column too, otherwise every line keeps a 64px empty gutter where the
       image used to be. */
    .mc-line { grid-template-columns: minmax(0, 1fr) auto; }