/* Pay + receipt pages — black & white brand, sea-green accent (#2dd4bf).
   Logos/CTAs are brand (white on dark, black on light). Sea green is the only
   chromatic accent: price, paid/success, sparse interactive highlights.
   Functional error red is not a brand colour. Space Grotesk + Inter (OFL). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: optional; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700;
  font-display: optional; src: url("/static/fonts/space-grotesk-latin-var.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #0a0a0b;
  --surface: #101012;
  --surface-2: #16161a;
  --border: #262630;
  --border-strong: #36363f;
  --text: #ffffff;
  --text-secondary: #8e9ba0;
  /* Brand = B&W fill for CTAs + wordmark */
  --brand: #ffffff;
  --brand-hover: #e8e8ea;
  --on-brand: #0a0a0b;
  /* Sole accent — Sea green (same family in both themes) */
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-bg: rgba(45, 212, 191, 0.12);
  --success: #2dd4bf;
  --success-bg: rgba(45, 212, 191, 0.12);
  --warning: #a1a1aa;
  --warning-bg: rgba(161, 161, 170, 0.14);
  --error: #ff5d6c;
  --error-bg: rgba(255, 93, 108, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  /* Back-compat aliases used in a few rules */
  --primary: var(--brand);
  --primary-hover: var(--brand-hover);
  --on-primary: var(--on-brand);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f1f3f6;
    --border: #e2e5ea;
    --border-strong: #cbd0d8;
    --text: #0b0b0f;
    --text-secondary: #5d6670;
    --brand: #0a0a0b;
    --brand-hover: #262630;
    --on-brand: #ffffff;
    /* Same Sea green accent as dark */
    --accent: #2dd4bf;
    --accent-hover: #14b8a6;
    --accent-bg: rgba(45, 212, 191, 0.14);
    --success: #2dd4bf;
    --success-bg: rgba(45, 212, 191, 0.12);
    --warning: #71717a;
    --warning-bg: rgba(113, 113, 122, 0.12);
    --error: #dc2626;
    --error-bg: rgba(239, 68, 68, 0.1);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08);
  }
}


/* Host-declared themes (embed.js data-c402-theme -> ?theme=). A merchant
   designed their page around ONE background; the frame must match the page,
   not the visitor's OS. Each block mirrors its media-query twin verbatim. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --border: #e2e5ea;
  --border-strong: #cbd0d8;
  --text: #0b0b0f;
  --text-secondary: #5d6670;
  --brand: #0a0a0b;
  --brand-hover: #262630;
  --on-brand: #ffffff;
  --accent: #2dd4bf;
  --accent-hover: #14b8a6;
  --accent-bg: rgba(45, 212, 191, 0.14);
  --success: #2dd4bf;
  --success-bg: rgba(45, 212, 191, 0.12);
  --warning: #71717a;
  --warning-bg: rgba(113, 113, 122, 0.12);
  --error: #dc2626;
  --error-bg: rgba(239, 68, 68, 0.1);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --surface: #101012;
  --surface-2: #16161a;
  --border: #262630;
  --border-strong: #36363f;
  --text: #ffffff;
  --text-secondary: #8e9ba0;
  --brand: #ffffff;
  --brand-hover: #e8e8ea;
  --on-brand: #0a0a0b;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-bg: rgba(45, 212, 191, 0.12);
  --success: #2dd4bf;
  --success-bg: rgba(45, 212, 191, 0.12);
  --warning: #a1a1aa;
  --warning-bg: rgba(161, 161, 170, 0.14);
  --error: #ff5d6c;
  --error-bg: rgba(255, 93, 108, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Framed extras: the slim test chip row and the footer signature. */
.brand-slim { justify-content: flex-end; margin-bottom: 12px; }
.secured {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}
.secured a { color: inherit; text-decoration: none; }
.secured a:hover { color: var(--text); }
.wordmark-sm { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .display { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }

.card {
  max-width: 440px;
  margin: 32px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 16px);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

/* Parts: a host page composing its own product layout takes only the
   module it needs. Display parts (part=price) may sit anywhere; the pay
   part keeps a one-line identity (.part-line) and the fees-included total
   INSIDE the frame, because the thing that moves money must carry its own
   truth -- a hidden name would let a host seat our real button beside a
   description of something else. Hiding is done by keep-list: everything
   off, then the module's pieces back on, so a template section added
   later is absent from a part until someone decides it belongs. */
/* Common to every part: the card's narrative belongs to the host page. */
[class*="part-"] .brand, [class*="part-"] .face-note, [class*="part-"] h1,
[class*="part-"] .seller, [class*="part-"] .seller-bio,
[class*="part-"] .desc, [class*="part-"] .gets, [class*="part-"] .offer-card,
[class*="part-"] .escrow-upsell, [class*="part-"] .split,
[class*="part-"] .escrow, [class*="part-"] section {
  display: none;
}
/* price: the display tag alone. */
.part-price .fold, .part-price .wallet-pay, .part-price .buy,
.part-price .status, .part-price .secured, .part-price .buy-foot,
.part-price .cta {
  display: none;
}
/* pay: the full action module — every surface, folds intact. */
.part-pay .fold:not(.qr-handoff) { display: none; }
/* wallet: the till alone; the QR is its own part now. */
.part-wallet .fold, .part-wallet .buy { display: none; }
/* qr: the code IS the surface — fold pre-opened, its question removed,
   the till's buttons gone. walletStatus and walletGoods stay: the paid
   flip lands there whichever surface settled. */
.part-qr .wallet-title, .part-qr .wallet-btn, .part-qr .buy,
.part-qr .fold:not(.qr-handoff) { display: none; }
.part-qr .qr-handoff > summary { display: none; }
.part-qr .qr-handoff { border: 0; padding: 0; margin: 0; }
/* agent: the link block alone — its wrapper fold arrives open with the
   question removed, the same shape as the qr part. */
.part-agent .fold:not(.agent-fold), .part-agent .wallet-pay { display: none; }
.part-agent .agent-fold > summary { display: none; }
.part-agent .agent-fold { border: 0; padding: 0; margin: 0; }
[class*="part-"] .part-line {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}
[class*="part-"] .part-line[hidden] {
  display: block; /* the hidden attr is for the FULL page; parts unhide it */
}
[class*="part-"] .part-seller {
  color: var(--text-secondary);
  font-weight: 400;
}
[class*="part-"] .card { margin: 0 auto; }
.part-price .price { margin-top: 0; }

/* format=flat: no box of our own — the checkout sits directly on the host
   page's surface, like content it wrote itself. The host's background shows
   through the transparent body; inner boxes keep their fills so totals and
   notices still read as elements. */
.fmt-flat { background: transparent; }
.fmt-flat .card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 auto;
}

/* font=system: drop the brand faces for the host's native rendering. */
.font-system, .font-system h1, .font-system h2, .font-system .display {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
    Roboto, sans-serif;
}

.brand a { color: inherit; text-decoration: none; }
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.brand strong { color: var(--text); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-test { background: var(--warning-bg); color: var(--warning); }
.badge-live { background: var(--accent-bg); color: var(--accent); }
.badge-paid { background: var(--success-bg); color: var(--success); }

/* The which-version-is-this note. overflow-wrap because it can carry a link
   to the other version — nothing in this box may ever widen a phone screen. */
.face-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--warning-bg);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.face-note strong { color: var(--text); }
.face-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.face-note a:hover { text-decoration: underline; }

h1 { font-size: 20px; margin: 0 0 4px; font-weight: 600; }
.desc { color: var(--text-secondary); font-size: 14px; margin: 0 0 20px; }

.price { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin: 0;
  font-family: "Space Grotesk", sans-serif; color: var(--accent); }
.price .asset { font-size: 15px; font-weight: 500; color: var(--text-secondary); }

.split {
  margin: 20px 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
}
.split-row { display: flex; justify-content: space-between; padding: 3px 0; }
.split-row.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 600;
}
.split-row span:first-child { color: var(--text-secondary); }

button.cta {
  display: block;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 16px;
  font-weight: 600;
  font-family: "Space Grotesk", sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
button.cta:hover:not(:disabled) { background: var(--brand-hover); }
button.cta:disabled { opacity: 0.55; cursor: not-allowed; }

.status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  display: none;
  overflow-wrap: anywhere;
}
.status.show { display: block; }
.status.err { background: var(--error-bg); color: var(--error); }
.status.ok { background: var(--success-bg); color: var(--success); }
.status.info { background: var(--surface-2); color: var(--text-secondary); }

/* The folded spec sheet (till opted in): every fact stays on the page,
   most of it one tap away, so the first screen is what-it-is, what-it-costs,
   one button. */
details.fold {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
details.fold > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
details.fold > summary:hover { color: var(--text); }
details.fold[open] > summary { color: var(--text); margin-bottom: 8px; }
.total-line {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* The wallet till (per-checkout opt-in). Reuses button.cta and .status wholesale;
   only spacing and the goods panel are new. */
.wallet-pay { margin-top: 20px; }
/* `hidden` must win: button.cta and .goods a.cta set display:block, and an
   author display beats the UA's [hidden] { display:none } — without this a
   paid page kept showing pay buttons and a download link for inline goods. */
.wallet-pay [hidden] { display: none !important; }
.wallet-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.wallet-btn + .wallet-btn { margin-top: 10px; }
.goods { margin-top: 16px; }
.goods pre {
  overflow: auto;
  overflow-wrap: anywhere;
  max-height: 320px;
}
.goods-note { font-size: 13px; color: var(--text-secondary); margin: 10px 0 6px; }
.goods a.cta {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 14px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
  margin-top: 10px;
}
.goods a.cta:hover { background: var(--brand-hover); }
#packageKeyBox { margin-top: 12px; }

.agent-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.agent-note code {
  display: block;
  margin-top: 6px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre;
}

.goods {
  margin-top: 20px;
  padding: 16px;
  background: var(--success-bg);
  border-radius: 10px;
}
.goods h2 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.goods pre {
  margin: 0;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

dl.meta { margin: 0; font-size: 13px; }
dl.meta div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
dl.meta div:last-child { border-bottom: 0; }
dl.meta dt { color: var(--text-secondary); }
dl.meta dd { margin: 0; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; overflow-wrap: anywhere; text-align: right; padding-left: 12px; }

dl.offer-card { margin: 0 0 16px; }
dl.offer-card div { display: block; padding: 10px 0; }
dl.offer-card dt { margin-bottom: 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; }
dl.offer-card dd { text-align: left; padding-left: 0; color: var(--text); }
dl.offer-card pre { margin: 0; white-space: pre-wrap; word-break: break-word;
  font-size: 12px; color: var(--text-secondary); }

/* Brand lockup — shared with the landing page. Modern display face; the
   blinking caret is the retro accent that survived. */
.wordmark {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
  text-decoration: none;
}
.wordmark .n { color: var(--brand); }
.caret { color: var(--brand); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

.brand-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-lockup img { display: block; }

/* Rails the browser cannot sign but an agent can. Deliberately quiet — this is
   information, not a second call to action competing with the Pay button. */
.rails { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.rails-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 8px; }
.rail { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 3px 0; }
.rail-chain { color: var(--accent); font-weight: 500; }
.rail-note { color: var(--text-secondary); font-size: 12.5px; }

/* ── how a machine buys this ───────────────────────────────────────────────
   The page used to end in a "Pay with wallet" button. It ends here now: the
   checkout is read by a human and paid by software, so the last thing on the
   page has to be the instructions rather than a control. */
.buy { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.buy-title { font-size: 13px; font-weight: 600; letter-spacing: .02em;
  margin-bottom: 8px; }
.buy-lead { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
  margin: 0 0 16px; }
.buy-lead a { color: var(--accent); }
.buy-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  font-weight: 600; color: var(--text-secondary); margin: 14px 0 6px; }
.buy-step .n { display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent-bg); color: var(--accent);
  font-size: 11px; flex: 0 0 auto; }
/* Commands WRAP rather than scroll. `white-space: pre` was clipping the curl
   line by 30px and the pay402 line by 239px — a command you cannot read is a
   broken instruction, and horizontal scroll inside a box has no affordance
   telling you it is there. Soft wraps are not part of a copied selection, so
   a wrapped command still pastes as one correct line. */
.cmd { margin: 0; padding: 11px 13px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.buy-foot { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
  margin: 14px 0 0; }
.buy-foot code { font-size: 11.5px; }

/* EVERY inline `code` on this page holds a machine string — a checkout URL, a
   header name, an id — and none of those contain a break opportunity. One of
   them (`POST <checkout_url>/prepare`, in the buy-foot) ran off the right edge
   on a phone, and the damage was not the clipped line: a document wider than
   the viewport makes the browser widen its layout viewport and scale the WHOLE
   page down to fit, so every character on the page went tiny at once.
   `.cmd` and `.cmd-url` each got this rule when they were caught doing it; a
   third fix for a third element is the point at which it should stop being
   per-element. The URL is seller-controlled, so its length is not ours to
   assume. */
code { overflow-wrap: anywhere; word-break: break-word; }

/* The link IS the product here — a seller shares it, an agent consumes it. It
   gets the accent and full width so it is the obvious thing to copy. */
/* One click selects the whole URL. The instruction on this page is "give this
   link to your agent", so the link has to be trivially copyable — and
   `user-select: all` does it in CSS, with no script on a payment page. */
.cmd-url { color: var(--accent); white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 13px; user-select: all; -webkit-user-select: all; cursor: pointer; }
.cmd-url:hover { border-color: var(--accent); }
.cmd-hint { font-size: 11.5px; color: var(--text-secondary); margin: 6px 0 0; }
.buy-more { margin-top: 18px; }
/* A real target. This is the only interactive control left on the page and it
   measured 19px tall on a phone — half of what a thumb needs, for the one
   thing a buyer might actually tap here. */
.buy-more summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary);
  list-style: none; display: flex; align-items: center; min-height: 40px;
  margin: -8px 0; }
.buy-more summary::-webkit-details-marker { display: none; }
.buy-more summary::before { content: "▸ "; color: var(--accent); }
.buy-more[open] summary::before { content: "▾ "; }
.buy-more summary:hover { color: var(--text); }

/* Who is selling. Answered before the price, because "whose product is this"
   comes before "how much" — and an agent comparing two similar offers has
   nothing else to weigh. */
.seller { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: -4px 0 10px; font-size: 13px; }
.seller-by { color: var(--text-secondary); }
/* 20px inline before this. Padding rather than font-size: the name should not
   shout, it just has to be hittable. */
.seller-name { color: var(--text); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 38px; }
a.seller-name:hover { color: var(--accent); }
.seller-tick { color: var(--accent); font-size: 12px; }
.seller-since { color: var(--text-secondary); font-size: 12px; }
.seller-bio { color: var(--text-secondary); font-size: 13px; line-height: 1.5;
  margin: 0 0 14px; }

/* What arrives. The page had a price and a title and never said whether the
   buyer would receive bytes, a link, or a promise. */
.gets { margin: 18px 0 4px; padding: 13px 15px; border-radius: 10px;
  background: var(--accent-bg); border: 1px solid rgba(45, 212, 191, 0.22); }
.gets-head { font-size: 13.5px; font-weight: 600; color: var(--accent);
  margin-bottom: 4px; }
.gets-detail { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  margin: 4px 0 0; }

/* --- buyer protection (escrow checkouts only) ---------------------------
   Deliberately quiet rather than loud: a protection notice that shouts reads
   like a warning about the seller. The accent border says "this is different"
   without implying "this is risky". */
.escrow {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
  background: var(--surface-2);
}
.escrow-headline {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.95rem;
  margin: 0 0 6px;
  color: var(--text);
}
.escrow-default { margin: 0 0 10px; color: var(--text); }
.escrow-controls { margin: 0 0 10px; padding-left: 18px; color: var(--text-secondary); }
.escrow-controls li { margin: 3px 0; }
.escrow-guarantee { margin: 0 0 6px; color: var(--text); }
.escrow-unresolved { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }

/* --- escrow control panel on the receipt -------------------------------- */
.badge-held { background: var(--accent); color: var(--on-brand, #0a0a0b); }
.escrow-panel {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
  background: var(--surface-2);
}
.escrow-next { margin: 0 0 10px; color: var(--text); }
.escrow-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.escrow-note { margin: 10px 0 0; font-size: 0.85rem; color: var(--text-secondary); }
/* The clock reads as information, not alarm -- until it is nearly out, and
   even then the page says it in words rather than colour alone. */
.escrow-clock { margin: 6px 0 0; font-size: 0.9rem; color: var(--text); }
.escrow-clock strong { color: var(--accent); }
/* The one line that turns a receipt into a control panel. Bordered because
   a buyer skimming for "what do I do with this" should catch it. */
.escrow-keep {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.escrow-status { margin: 10px 0 0; font-size: 0.9rem; }
.escrow-info { color: var(--text-secondary); }
.escrow-ok { color: var(--accent); }
.escrow-error { color: var(--error); }
.escrow-upsell { margin: 12px 0; font-size: 0.9rem; }
.escrow-upsell a { color: var(--accent); }
.escrow-upsell-why { display: block; color: var(--text-secondary); margin-top: 2px; }

/* Rail guidance: the detected-wallet line under each pay button, and the
   demoted look for a rail no installed wallet can pay. Demoted, not hidden —
   the buyer may have that wallet on another profile, and a vanished option
   reads as a bug. */
.wallet-btn .wallet-sub { display: block; font-size: 12px; font-weight: 400;
  opacity: .7; margin-top: 2px; }
.wallet-btn.rail-secondary { opacity: .55; }
.wallet-btn.rail-secondary:hover { opacity: 1; }

/* The gate wall: what a reader meets where the article body should be.
   Flat by default because it is mounted inside someone else's page --
   see .fmt-flat. The teaser is readable, the lock is unmissable, and the
   two are visually separate so nobody thinks the teaser IS the article. */
.gate-by { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); }
.gate-teaser { margin: 0 0 18px; line-height: 1.6; }
/* A part is a fragment of a checkout dropped into someone else's page.
   For GATED CONTENT that page is the article itself, which already carries
   the headline, the byline and the free opening: repeating them inside the
   till shows the reader the same three lines twice. So the content parts
   are the till and nothing else. Standalone /x/{id} is unaffected: it has
   no `part-` class and keeps the full introduction. */
[class*="part-"] .gate-teaser,
[class*="part-"] .gate-by { display: none; }
[class*="part-"].gated .part-line { display: none; }
/* Inside an article the HOST decides the measure. A till centred at its
   own 440px inside a 680px column reads as a box that missed its mark, so
   a gated part fills whatever width the publisher gave it. */
[class*="part-"].gated .card { max-width: none; width: 100%; margin: 0; }
/* The panel around it already supplies the padding a reader sees, so the
   frame contributes none: two nested insets read as a box in a box. */
body[class*="part-"].gated { padding: 0; }
[class*="part-"].gated .price { margin-top: 0; }
.gate-lock {
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 18px;
  background: var(--surface-2);
}
.gate-price { margin: 0 0 4px; font-size: 17px; }
.gate-pass { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); }
.gate-foot { margin: 14px 0 0; font-size: 12px; color: var(--text-secondary); }