/* 99p paywall UI — the pay sheet; on /value the unlock card, the masks a
   locked report prints in place of its numbers, the chips over the
   evidence cards, the paid-feature markers and the mobile bar; on /search
   extended AI search's pass chip, free-tier line, find-more price tag and
   chat card (Deep read: deep_read.css). Loaded only in payment mode on the
   main host. Design tokens come from content_base.css (so Stripe's
   Elements, which read the same tokens in pay.js, match the page). No
   inline styles anywhere in the markup. */

[data-pay-body] [hidden], .pay-sheet [hidden], .pay-unlock [hidden] {
  display: none !important;
}

/* ── Shared pieces ─────────────────────────────────────────────── */
/* Inside the sheet each text rule is restated under .pay-sheet: the pages'
   own `.modal-card p` / `.modal-card h3` (value.html, search.html) outrank
   a single class, and left every line in the sheet 14px muted grey with a
   20px gap (an error line included). */
.pay-price-line, .pay-sheet .pay-price-line {
  font-family: var(--font-body); font-size: 13px; line-height: 1.45;
  color: var(--text-secondary); margin: 0 0 14px; text-wrap: pretty;
}
.pay-price-line b { color: var(--text); font-weight: 700; font-size: 15px; }
.pay-express { min-height: 48px; margin: 0 0 10px; }
.pay-express.hidden { display: none; min-height: 0; }
.pay-status, .pay-sheet .pay-status {
  font-family: var(--font-body); font-size: 13px; color: var(--text-secondary);
  margin: 6px 0 10px; display: flex; gap: 8px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.pay-status .pay-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--hairline-2); border-top-color: var(--accent);
  animation: paySpin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes paySpin { to { transform: rotate(360deg); } }
.pay-retry {
  appearance: none; cursor: pointer; background: none; border: none; padding: 0;
  font: 600 13px var(--font-body); color: var(--accent); text-decoration: underline;
}
/* Visually hidden text for screen readers (e.g. "(in the full report)"
   beside a locked action's padlock). */
.pay-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pay-fine, .pay-sheet .pay-fine {
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.5;
  color: var(--muted); margin: 12px 0 0; text-align: left;
}
.pay-fine a { color: inherit; text-decoration: underline; }
/* Padded to a 31px-tall tap target; the margin shrinks to match so the
   link sits where it always did. */
.pay-restore-link {
  appearance: none; cursor: pointer; background: none; border: none; padding: 8px 0;
  margin: 2px 0 0; font: 600 12.5px var(--font-body); color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
/* The digital-content waiver. By default a sentence above the pay buttons,
   agreed to by paying: set as the tick box's label was, so it is no less
   prominent than the box it replaced, just nothing to tick. */
.pay-sheet .pay-waiver-line .pay-fine {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary);
}
/* With PAYMENTS_WAIVER_CHECKBOX=1, a required tick box instead. A pay tap
   without it gets content_base.css's missing-field treatment via
   form_feedback.js — the row shakes and a .field-error line drops in under
   the text. */
.pay-waiver-tick {
  display: flex; flex-wrap: wrap; gap: 6px 9px; align-items: flex-start; text-align: left;
  margin: 0 0 12px;
}
.pay-waiver-tick input {
  width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
.pay-waiver-tick label {
  flex: 1; min-width: 0; cursor: pointer;
  font: 12.5px/1.45 var(--font-body); color: var(--text-secondary);
}
/* Under the text (checkbox 16px + 9px gap), not squashed beside it. Two
   classes deep so the pages' `.modal-card p` can't restyle it in the
   sheet. */
.pay-waiver-tick .field-error {
  flex-basis: 100%; margin: 0 0 0 25px;
  font-size: 12.5px; line-height: 1.4; color: var(--error);
}

/* ── /value unlock card (floats over the locked result card) ─────
   The broker gate's card, selling the report: pinned to the bottom of
   the result card, so the price line with its sharp first digit stays in
   view, over a scrim that fades the masked figures beneath it. Its button
   opens the pay sheet. Absolutely positioned: the layout is the same
   locked and unlocked. */
.pay-unlock {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px 18px; pointer-events: none;
}
/* The card is narrower than the result card at tablet widths, so without
   the scrim the rows it sits on peek out either side and read as
   accidentally covered rather than gated. Clear over the price. */
.pay-unlock::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 34%, var(--card) 66%);
}
.pay-unlock.hidden { display: none; }
.pay-unlock-card {
  pointer-events: auto; position: relative;
  width: 100%; max-width: 400px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--hairline-2);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(16,24,40,0.18);
  padding: 22px 24px 12px; text-align: center;
  animation: payCardIn 0.45s var(--ease);
}
@keyframes payCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pay-unlock-badge {
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: var(--accent-light); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.pay-unlock-badge svg { width: 18px; height: 18px; }
.pay-unlock-title {
  font-family: var(--font-display); font-size: 23px; font-weight: 400; line-height: 1.2;
  letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text);
}
.pay-unlock-sub {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary); margin: 0 0 14px; text-wrap: pretty;
}
.pay-unlock-cta {
  appearance: none; cursor: pointer; width: 100%;
  border: 1px solid var(--accent); background: var(--accent); color: #FAF7F0;
  border-radius: 12px; min-height: 50px; padding: 13px 20px;
  font: 700 15px var(--font-body);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pay-unlock-cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.pay-unlock-hint {
  font: 11.5px/1.4 var(--font-body); color: var(--muted); margin: 8px 0 0;
}
.pay-unlock .pay-restore-link { display: block; margin: 4px auto 0; }

/* ── Masks: where a locked report withholds a number ──────────────
   render.js and leads.js print an X per hidden digit, grouped like the
   real number; blurred here so it reads as the broker gate's blurred
   figure did. aria-hidden, with words for screen readers beside it. */
.val-mask {
  display: inline-block; filter: blur(9px);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
/* The headline: "£4" sharp, the rest blurred (value/paywall_pay.js). */
#val-price .vp-rest {
  display: inline-block; filter: blur(13px);
  user-select: none; -webkit-user-select: none;
}
/* Paint the sharp digit above the blurred remainder's smear. */
#val-price .vp-head { position: relative; z-index: 1; }
/* A locked comparable's link: the arrow, opening the pay sheet. */
.val-comparables-table button.vc-link { appearance: none; cursor: pointer; padding: 0; font: inherit; }
.vc-row[data-paywall-open] { cursor: pointer; }
/* The closest listings' location is in the report: a small lock beside
   the postcode district, in place of the pin the map no longer draws. */
.vc-loc-lock {
  display: inline-flex; align-items: center; margin-left: 6px;
  color: var(--muted); vertical-align: -1px;
}
.vc-row-l1 .vc-loc-lock { margin-left: -2px; }
.vc-loc-lock svg { width: 11px; height: 11px; }

/* ── Paid-feature markers on a locked page (shown only under .val-locked) ── */
.val-act-lock, .val-act-note, .pay-tag { display: none; }
.val-locked .val-act-lock {
  display: inline-flex; margin-left: 1px; opacity: 0.7;
}
.val-locked .val-act-lock svg { width: 11px; height: 11px; }
/* Save is part of the full report, so "register to keep this valuation"
   has nothing to offer a locked page. */
.val-locked #val-save-hint { display: none; }
.val-locked .val-act-note {
  display: block; margin: 8px 0 0; text-align: center;
  font: 12px/1.4 var(--font-body); color: var(--muted);
}
.val-locked .pay-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--accent-light); color: var(--accent-ink);
  font: 700 10px var(--font-body); letter-spacing: 0.08em; vertical-align: middle;
}
.pay-tag svg { width: 10px; height: 10px; }

/* Ink chips over the locked evidence cards — "Unlock the comparable
   prices · 99p". `left: 50%` alone would leave a chip only half the card
   to shrink into (three lines on a phone) — hence the explicit width. */
.pay-chip {
  position: absolute; left: 50%; top: clamp(180px, 52%, 380px);
  transform: translate(-50%, -50%); z-index: 6;
  width: max-content; max-width: calc(100% - 32px);
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--text); color: var(--bg); border: none;
  border-radius: var(--radius-pill); padding: 12px 20px; min-height: 44px;
  font: 700 13px var(--font-body); text-align: center;
  box-shadow: 0 10px 30px rgba(16,24,40,0.25);
}
.pay-chip.hidden { display: none; }
.pay-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.pay-chip:hover { background: var(--accent-ink); color: #FAF7F0; }

/* Report link chip (after paying) + re-run note. */
.val-report-link {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-light); border: 1px solid var(--accent-glow);
  font: 13px/1.4 var(--font-body); color: var(--accent-ink);
}
.val-report-link.hidden { display: none; }
.val-report-link a { color: inherit; font-weight: 700; word-break: break-all; }
.val-report-link-copy {
  appearance: none; cursor: pointer; margin-left: auto;
  border: 1px solid var(--accent); background: var(--surface); color: var(--accent);
  border-radius: var(--radius-pill); padding: 5px 12px; font: 600 12px var(--font-body);
}
.val-report-rerun, .val-report-free { width: 100%; margin: 0; font-size: 12px; color: var(--text-secondary); }
.val-report-rerun[hidden], .val-report-free[hidden] { display: none; }

/* Mobile bottom bar (payment mode). */
.pay-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--surface); border-top: 1px solid var(--hairline-2);
  box-shadow: 0 -10px 30px rgba(16,24,40,0.10);
  padding: 10px var(--page-gutter, 16px) calc(10px + env(safe-area-inset-bottom));
  animation: payBarIn 0.35s var(--ease);
}
.pay-bar.hidden { display: none; }
@keyframes payBarIn { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 720px) { .pay-bar { display: none !important; } }
body.pay-sheet-open .pay-bar { display: none; }
/* Room at the foot of the page for the bar, so the last lines (the
   footer's disclaimer) can scroll clear of it. */
@media (max-width: 719px) {
  body.val-locked { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
.pay-bar-cta {
  appearance: none; cursor: pointer; width: 100%;
  border: 1px solid var(--accent); background: var(--accent); color: #FAF7F0;
  border-radius: 14px; min-height: 52px; padding: 14px 20px;
  font: 700 15px var(--font-body);
}
.pay-bar-note {
  text-align: center; font: 11.5px/1.35 var(--font-body); color: var(--muted); margin: 7px 0 0;
}

/* ── The pay sheet ─────────────────────────────────────────────── */
/* Two classes deep throughout: the pages' own `.modal-card` rules (value.html,
   search.html) come later in the source with the same specificity, so a bare
   `.pay-sheet-card` loses to them — which is how the phone bottom sheet
   below used to float 14px off each edge with all-round corners — and their
   `.modal-card p` / `h3` outrank any single class, so the text inside is
   scoped under .pay-sheet too. */
.pay-sheet .pay-sheet-card {
  max-width: 440px; width: calc(100% - 32px); box-sizing: border-box;
  text-align: left; padding: 26px 24px 20px;
}
/* A 44px close target (the shared one is 32px). */
.pay-sheet .pay-sheet-card .modal-close-x { width: 44px; height: 44px; top: 6px; right: 6px; }
/* Why the sheet opened, when a gated action opened it (pay.js setReason). */
.pay-sheet .pay-reason {
  display: flex; align-items: center; gap: 8px; margin: 0 40px 14px 0;
  padding: 8px 12px; border-radius: 10px;
  background: var(--accent-light); color: var(--accent-ink);
  font: 600 13px/1.4 var(--font-body);
}
.pay-sheet .pay-reason svg { width: 14px; height: 14px; flex-shrink: 0; }
.pay-sheet .pay-reason.hidden { display: none; }
/* The Pay button stays in reach while the form scrolls beneath it: pay.js
   wraps it in .pay-submit-bar, a sticky bar with its own background that
   sits flush on the sheet's bottom edge. The card's bottom padding moves
   into the bar and the restore panel (sticky offsets are measured inside
   the scroller's padding, so with padding there content would peek out
   below the bar). The bar only ever paints its own box, so at the end of
   the scroll it can't cover the fine print under it. scroll-padding keeps
   anything scrolled or focused into view (an error line, a field Stripe
   flags) clear of the bar. */
.pay-sheet .pay-sheet-card { padding-bottom: 0 !important; scroll-padding-bottom: 96px; }
.pay-sheet .pay-submit-bar {
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 -24px; padding: 12px 24px max(12px, env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--hairline);
}
.pay-sheet .pay-restore { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
/* Skeleton fields while Stripe's iframes load (pay.js toggles .is-loading
   until each Element is ready). The iframe renders off-flow and invisible
   meanwhile, so no tall blank gap. */
.pay-element-slot { position: relative; }
.pay-element-slot.is-loading > * {
  position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none;
}
.pay-element-slot.is-loading::before, .pay-element-slot.is-loading::after {
  content: ""; position: absolute; left: 0; right: 0; height: 46px; box-sizing: border-box;
  border-radius: 10px; background: var(--sunken); border: 1px solid var(--hairline);
  animation: payPulse 1.4s ease-in-out infinite;
}
#pay-sheet-email.is-loading { min-height: 46px; }
#pay-sheet-email.is-loading::before { top: 0; }
#pay-sheet-email.is-loading::after { display: none; }
#pay-sheet-payment.is-loading { min-height: 104px; }
#pay-sheet-payment.is-loading::before {
  top: 0; content: "Loading the secure card form…";
  display: flex; align-items: center; padding: 0 14px;
  font: 13px var(--font-body); color: var(--muted);
}
#pay-sheet-payment.is-loading::after { top: 58px; animation-delay: 0.2s; }
@keyframes payPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* Restore mode ("Already paid? Email me my link"): the pitch and the card
   form step aside so the email box leads (pay.js enterRestore). */
.pay-restore-head, .pay-restore-exit { display: none; }
.pay-sheet.is-restore .pay-restore-head { display: block; }
.pay-sheet.is-restore .pay-summary,
.pay-sheet.is-restore [data-pay-body],
.pay-sheet.is-restore [data-pay-done],
.pay-sheet.is-restore .pay-reason,
.pay-sheet.is-restore .pay-restore-link { display: none !important; }
.pay-sheet.is-restore .pay-restore {
  margin: 0; padding: 0 0 max(20px, env(safe-area-inset-bottom)); border-top: 0;
}
.pay-sheet.is-restore .pay-restore-exit {
  display: inline-block; appearance: none; cursor: pointer; background: none; border: none;
  padding: 8px 0; margin: 10px 0 0; font: 600 12.5px var(--font-body); color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.pay-sheet .pay-eyebrow {
  font: 700 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 6px;
}
.pay-sheet .pay-title {
  font-family: var(--font-display); font-weight: 400; font-size: 23px;
  letter-spacing: -0.02em; margin: 0 0 10px; color: var(--text); padding-right: 34px;
}
.pay-includes { margin: 0 0 12px; padding: 0 0 0 18px; font: 13px/1.55 var(--font-body); color: var(--text-secondary); }
.pay-includes li { margin: 0 0 3px; }
.pay-sheet .pay-includes-line { font: 13px/1.55 var(--font-body); color: var(--text-secondary); margin: 0 0 10px; }
.pay-sheet .pay-pricing-link { margin: -4px 0 12px; font: 12.5px var(--font-body); }
.pay-pricing-link a {
  display: inline-block; padding: 4px 0; /* a 25px tap target */
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.pay-sheet .pay-divider {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 12px;
  font: 600 11.5px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.pay-divider::before, .pay-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline-2); }
.pay-element-slot { margin: 0 0 12px; min-height: 10px; }
.pay-error, .pay-sheet .pay-error {
  margin: 4px 0 10px; padding: 10px 12px; border-radius: var(--radius-md);
  background: #F6E0DA; color: #8A3B29; font: 13px/1.45 var(--font-body);
}
.pay-submit {
  appearance: none; cursor: pointer; width: 100%;
  border: 1px solid var(--accent); background: var(--accent); color: #FAF7F0;
  border-radius: 12px; min-height: 50px; padding: 13px 20px;
  font: 700 15px var(--font-body);
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.pay-submit:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.pay-submit:disabled { opacity: 0.55; cursor: default; }
.pay-sheet .pay-twa-note {
  margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-light);
  color: var(--accent-ink); font: 13.5px/1.5 var(--font-body);
}
.pay-done { text-align: center; padding: 10px 0 4px; }
.pay-done-check {
  width: 46px; height: 46px; border-radius: 50%; background: var(--accent-light);
  color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.pay-done-check svg { width: 22px; height: 22px; }
.pay-sheet .pay-done-title { font-family: var(--font-display); font-size: 21px; margin: 0 0 4px; color: var(--text); }
.pay-sheet .pay-done-sub { font: 13.5px/1.5 var(--font-body); color: var(--text-secondary); margin: 0; }
.pay-restore { margin: 12px 0 0; border-top: 1px solid var(--hairline-2); padding-top: 10px; }
.pay-restore-label { display: block; font: 600 12px var(--font-body); color: var(--muted); margin: 8px 0 5px; }
.pay-restore-row { display: flex; gap: 8px; }
.pay-restore-row input {
  flex: 1; min-width: 0; box-sizing: border-box; background: var(--surface);
  border: 1px solid var(--hairline-2); border-radius: var(--radius-md);
  padding: 10px 12px; font: 15px var(--font-body); color: var(--text);
}
.pay-restore-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pay-restore-send {
  appearance: none; cursor: pointer; border: 1px solid var(--accent); background: var(--accent);
  color: #FAF7F0; border-radius: var(--radius-md); padding: 0 16px; font: 700 14px var(--font-body);
}
.pay-sheet .pay-restore-msg { font: 12.5px/1.45 var(--font-body); color: var(--text-secondary); margin: 6px 0 0; min-height: 1em; }

@media (max-width: 560px) {
  /* A real bottom sheet: full width, flush to the bottom edge, rising from
     it rather than popping in the middle. */
  .pay-sheet.modal-backdrop { align-items: flex-end; }
  .pay-sheet .pay-sheet-card {
    width: 100%; max-width: none; border-radius: 22px 22px 0 0;
    padding: 18px 18px 0;
    animation: paySheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pay-sheet .pay-submit-bar { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
  /* The report's list runs on as one compact paragraph here (the unlock
     card above already spelled it out), so the form starts sooner. */
  .pay-sheet .pay-includes { list-style: none; padding: 0; font-size: 12.5px; line-height: 1.5; }
  .pay-sheet .pay-includes li { display: inline; margin: 0; }
  .pay-sheet .pay-includes li + li::before { content: " · "; color: var(--muted); }
}
@keyframes paySheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pay-sheet .pay-sheet-card, .pay-sheet.modal-backdrop { animation: none; }
  .pay-element-slot.is-loading::before, .pay-element-slot.is-loading::after { animation: none; }
}

/* ── /search: extended AI search — the free tier, the gates, the pass ──
   Every match is free; these say what the 99p pass adds (search/daypass.js).
   Deep read's own pieces are in deep_read.css. */
.pass-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--accent-light); color: var(--accent-ink);
  border: 1px solid var(--accent-glow);
  font: 600 12.5px var(--font-body);
}
.pass-chip.hidden { display: none; }
.pass-chip .pass-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* The free tier: quieter than a running pass. */
.pass-chip.is-free { background: var(--surface); color: var(--text-secondary); border-color: var(--hairline-2); }
.pass-chip.is-free .pass-dot { background: var(--muted); }
.pass-banner {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--accent-light); border: 1px solid var(--accent-glow);
  color: var(--accent-ink); font: 13.5px/1.5 var(--font-body);
}
.pass-banner.hidden { display: none; }
/* Up-front line under the search button: the free tier, or the pass. */
.sx-price-line {
  margin: 10px 2px 0; text-align: right;
  font: 12.5px/1.45 var(--font-body); color: var(--text-secondary);
}
.sx-price-line.is-out { color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .sx-price-line { text-align: center; } }
/* The pass chip sits under the results title; "Extend" shows near expiry,
   "Get more" on the free tier. */
.results-header .pass-chip { margin-top: 8px; }
.pass-extend {
  appearance: none; cursor: pointer; border: none; background: none; padding: 0 0 0 4px;
  font: 700 12.5px var(--font-body); color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.pass-extend[hidden] { display: none; }
/* "Find more" on the free tier carries its price. */
.xs-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 2px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(250,247,240,0.18); color: #FAF7F0;
  font: 700 11.5px var(--font-body); letter-spacing: 0.01em;
}
.xs-tag[hidden] { display: none; }
.dream-find-more-btn:disabled .xs-tag { background: var(--surface); color: var(--muted); }
.chat-chip.xs-gated::after {
  content: attr(data-xs-tag); margin-left: 2px;
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--accent-light); color: var(--accent-ink);
  font: 700 10.5px var(--font-body);
}
.chat-chip.xs-gated:hover::after { background: rgba(250,247,240,0.2); color: #FAF7F0; }
/* The chat's answer to a gate: what extended AI search adds + the way on. */
.sx-chat-pass { display: block; }
.sx-chat-pass .sx-chat-offer-line { color: var(--text); }
.sx-chat-pass-list {
  display: block; margin-top: 8px; font: 600 12px/1.5 var(--font-body); color: var(--accent-ink);
}
/* The restart dialog's line about the free searches left. Two classes
   deep, like search.html's own .restart-card rules, so `.modal-card p`
   doesn't turn it into 14px grey text with a 20px gap. */
.restart-card .restart-allowance {
  margin: -6px 0 16px; padding: 9px 12px; border-radius: 10px;
  background: var(--ochre-light); color: #6b4a1d;
  font: 600 12.5px/1.45 var(--font-body);
}
/* The pass's list in the sheet: on phones it runs on as one line, with
   Deep read keeping its description and the rest their names only. */
@media (max-width: 560px) {
  .pay-sheet .pay-includes--pass .pay-inc-more { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pay-unlock-card, .pay-bar { animation: none; }
  .pay-status .pay-spinner { animation: none; }
}