/* UK Car History: an editorial, calm look. Paper and ink, an oxblood accent, slate for quiet text; Fraunces for
   headings, IBM Plex Sans for reading, IBM Plex Mono for registrations. Thin rules instead of heavy cards.
   Loaded after /assets/style.css: the variables below restyle the shared pages, the rules after them finish the job. */

:root {
  --ink: #1c1917;
  --ink-2: #2a2522;
  --plate: #f1e7d6;
  --gb: #7f1d1d;
  --paper: #faf8f4;
  --line: #e2dbcf;
  --muted: #55606e;
  --good: #2f6b4f;
  --bad: #b3261e;
  --warn: #9a6416;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --accent: #7f1d1d;
  --accent-dark: #5e1515;
  --accent-soft: #f6ecea;
  --slate: #475569;
  --rule: #d8cfc1;
  --card: #fffdf9;
}

body.uch { background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.6; }
.uch ::selection { background: #ecd3cf; }
.uch a:focus-visible, .uch button:focus-visible, .uch summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.u-wrap { max-width: 70rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .u-wrap { padding: 0 1.5rem; } }

/* ---- Header: a masthead line, then the sections as a thin-ruled row */
.u-head { background: var(--paper); border-bottom: 1px solid var(--ink); }
.u-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: .8rem; }
.uch .logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-family: var(--serif); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.uch .logo .mark { display: block; height: 1.9rem; width: auto; }
.uch .logo .word em { font-style: italic; font-weight: 500; color: var(--accent); }
.u-head-orders { font-size: .9rem; font-weight: 500; color: var(--ink); border: 1px solid var(--ink); padding: .35rem .8rem; border-radius: 2px; white-space: nowrap; }
.u-head-orders:hover { background: var(--ink); color: var(--paper); }
.u-nav { border-top: 1px solid var(--line); }
.u-nav-row { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; font-size: .9rem; }
.u-nav-row::-webkit-scrollbar { display: none; }
.u-nav a { padding: .6rem 0 .55rem; white-space: nowrap; color: var(--slate); border-bottom: 2px solid transparent; }
.u-nav a:hover { color: var(--ink); }
.u-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 640px) {
  .uch .logo { font-size: 1.2rem; gap: .5rem; }
  .uch .logo .mark { height: 1.6rem; }
  .u-nav-row { gap: 1.15rem; font-size: .85rem; }
}

/* ---- Footer */
.u-foot { margin-top: 5rem; border-top: 1px solid var(--ink); background: #f3efe7; color: var(--ink); }
.u-foot-grid { display: grid; gap: 2.25rem; padding-top: 2.75rem; padding-bottom: 2.25rem; }
@media (min-width: 720px) { .u-foot-grid { grid-template-columns: 1.4fr 1fr .8fr; gap: 3rem; } }
.u-foot-brand > p { margin-top: .8rem; max-width: 26rem; font-size: .92rem; color: var(--muted); }
.u-foot .u-foot-label { margin: 1.4rem 0 .6rem; font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.u-foot-grid > div > .u-foot-label:first-child { margin-top: .2rem; }
.u-foot-links { display: grid; gap: .5rem; font-size: .92rem; }
.u-foot-links a:hover { color: var(--accent); text-decoration: underline; }
.u-foot-legal { border-top: 1px solid var(--rule); padding-top: 1rem; padding-bottom: 1.5rem; display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); }

/* ---- Registration field (ours and the shared pages'): a white field with a small oxblood tab, no flag */
.uch .plate-box { background: #fff; border: 1.5px solid var(--ink); border-radius: 2px; }
.uch .plate-box .gb { width: auto; min-width: 2.6rem; padding: 0 .55rem; justify-content: center; background: var(--accent); color: #fff; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.uch .plate-box .gb .flag { display: none; }
.uch .plate-box input { font-family: var(--mono); font-weight: 600; color: var(--ink); letter-spacing: .08em; }
.uch .plate-box input::placeholder { color: #b5aca0; }
.uch .plate-form.lg .plate-box .gb { width: auto; font-size: .75rem; padding: 0 .75rem; }
.uch .plate-form.lg .plate-box input { font-size: 1.6rem; padding: .6rem .75rem; text-align: left; }
@media (min-width: 640px) { .uch .plate-form.lg .plate-box input { font-size: 1.85rem; } }
.uch .input.plate { background: #fff; border: 1.5px solid var(--ink); border-radius: 2px; font-family: var(--mono); }
.uch .tag-plate { background: var(--plate); border-radius: 2px; font-family: var(--mono); }
.u-lookup { display: flex; gap: .5rem; max-width: 24rem; }
.u-lookup .plate-box { flex: 1; }
.u-lookup .plate-box input { font-size: 1rem; padding: .45rem .6rem; text-align: left; }
.u-lookup .btn { flex: none; }

/* ---- Buttons, fields, notices */
.uch .btn { border-radius: 2px; font-weight: 600; letter-spacing: .01em; }
.uch .btn:hover { filter: none; }
.uch .btn-good { background: var(--accent); color: #fff; }
.uch .btn-good:hover { background: var(--accent-dark); }
.uch .btn-ink, .uch .btn-dark { background: var(--ink); color: #fff; }
.uch .btn-ink:hover, .uch .btn-dark:hover { background: #000; }
.uch .btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.uch .btn-more { background: var(--accent); color: #fff; }
.uch .btn-lg { padding: .9rem 1.6rem; font-size: 1.05rem; }
.uch .input { border: 1px solid #cdc4b6; border-radius: 2px; background: #fff; }
.uch .input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.uch .notice { border-radius: 2px; }
.uch .link, .uch .link.u, .uch .prose a { color: var(--accent); }
.u-link { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; margin-left: 1rem; }
.uch .email-fix { border-radius: 2px; background: var(--plate); color: var(--ink); }
.uch .error { color: var(--bad); }

/* ---- Headings everywhere in the serif */
.uch h1, .uch h2, .uch h3, .uch .h1, .uch .pay-title, .uch .offer-title { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
.uch .h1 { font-size: 2.1rem; line-height: 1.15; color: var(--ink); }
.uch .narrow { padding-top: 3.5rem; }
.uch .muted { color: var(--muted); }

/* ---- Crumbs and heroes of our own pages */
.u-crumbs { padding-top: 1.1rem; font-size: .82rem; color: var(--muted); }
.u-crumbs a { text-decoration: underline; text-underline-offset: 2px; }
.u-crumbs a:hover { color: var(--accent); }
.u-hero { padding: 1.75rem 0 2.5rem; border-bottom: 1px solid var(--rule); }
.u-hero-home { padding-top: 2.75rem; }
.u-hero-grid { display: grid; gap: 1.75rem; }
@media (min-width: 940px) {
  .u-hero { padding: 3rem 0 3.5rem; }
  .u-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; align-items: start; }
}
.u-kicker { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.u-hero h1 { margin-top: .6rem; font-size: 2.35rem; line-height: 1.08; font-weight: 600; font-variation-settings: "opsz" 144; color: var(--ink); }
@media (min-width: 640px) { .u-hero h1 { font-size: 3.4rem; } }
.u-dek { margin-top: 1rem; max-width: 34rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; font-weight: 400; color: var(--slate); }
.u-hero-list { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.4rem; font-size: .9rem; color: var(--muted); }
.u-hero-list li::before { content: ""; display: inline-block; width: .9rem; height: 1px; margin-right: .5rem; vertical-align: middle; background: var(--accent); }
.u-hero-plain { padding-bottom: 2rem; }

/* The form panel: a sheet of paper with a ruled top */
.u-panel { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 1.35rem 1.2rem 1.25rem; }
@media (min-width: 640px) { .u-panel { padding: 1.75rem 1.75rem 1.5rem; } }
.u-form { max-width: none; gap: .5rem; }
.u-form .u-field-label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.u-form .u-field-label:not(:first-of-type) { margin-top: .5rem; }
.u-form .plate-box input { font-size: 1.6rem; padding: .55rem .75rem; text-align: left; }
.uch .order-form .input { border: 1.5px solid var(--ink); border-radius: 2px; padding: .8rem .85rem; font-size: 1.05rem; }
.u-form .btn { margin-top: .6rem; }
.uch .u-form .sold { color: var(--ink); font-weight: 500; font-size: .92rem; }
.uch .u-form .xs { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.uch .u-form .error { background: var(--accent-soft); border-left: 3px solid var(--bad); border-radius: 0; color: var(--bad); }

/* ---- The article column */
.u-article { max-width: 44rem; margin: 0 auto; padding: 2.25rem 1rem 0; }
@media (min-width: 640px) { .u-article { padding-top: 3rem; } }
.u-article p, .u-article li { color: #2c2825; }
.u-article a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.u-article > .meta, .u-article .meta { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }
.u-answer { position: relative; padding: .25rem 0 .25rem 1.4rem; border-left: 3px solid var(--accent); }
.u-answer-label { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.uch .u-answer .check-answer { margin: .45rem 0 0; border: 0; padding: 0; font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; font-weight: 400; color: var(--ink); }
@media (min-width: 640px) { .uch .u-answer .check-answer { font-size: 1.42rem; } }

.u-sec { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.u-num { font-family: var(--serif); font-size: .95rem; font-weight: 600; color: var(--accent); letter-spacing: .06em; }
.u-sec h2 { margin: .2rem 0 .9rem; font-size: 1.65rem; line-height: 1.2; color: var(--ink); }
@media (min-width: 640px) { .u-sec h2 { font-size: 1.95rem; } }
.u-sec p { margin-bottom: 1rem; }
.u-sec ul, .u-sec ol { margin: 0 0 1.1rem; padding: 0; display: grid; gap: .55rem; }
.u-sec > ul > li { position: relative; padding-left: 1.4rem; }
.u-sec > ul > li::before { content: ""; position: absolute; left: 0; top: .8em; width: .7rem; height: 1px; background: var(--accent); }
.u-sec > ol { counter-reset: step; }
.u-sec > ol > li { counter-increment: step; position: relative; padding-left: 2.4rem; }
.u-sec > ol > li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; border: 1px solid var(--accent); border-radius: 50%; font-family: var(--serif); font-size: .85rem; font-weight: 600; line-height: 1.5rem; text-align: center; color: var(--accent); }
.u-figure { margin: .5rem 0 1.5rem; }
.u-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #fff; }
.u-figure figcaption { margin-top: .5rem; font-size: .82rem; font-style: italic; color: var(--muted); }

/* Home: the index of records, the two reports, the steps */
.u-index { list-style: none; border-top: 1px solid var(--ink); gap: 0 !important; }
.u-index > li { padding: 1rem 0 .95rem; border-bottom: 1px solid var(--rule); }
.u-index h3 { font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.u-index p { margin: .25rem 0 0; font-size: .97rem; }
.u-index .u-index-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .45rem; font-size: .85rem; }
.u-level { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--rule); padding: .1rem .45rem; }
.u-level.premium { color: var(--accent); border-color: #d9b9b4; }
.u-level.free { color: var(--good); border-color: #bcd2c5; }
@media (min-width: 720px) {
  .u-wide { margin-left: -6rem; margin-right: -6rem; }
  .u-index { grid-template-columns: 1fr 1fr 1fr; column-gap: 2rem !important; border-top: 0; }
  .u-index > li { border-top: 1px solid var(--ink); border-bottom: 0; padding-bottom: 1.4rem; }
}
@media (min-width: 720px) and (max-width: 1060px) { .u-wide { margin-left: 0; margin-right: 0; } .u-index { grid-template-columns: 1fr 1fr; } }
.u-plans { display: grid; gap: 1.5rem; margin: .5rem 0 1.25rem; }
@media (min-width: 720px) { .u-plans { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.u-plan { border-top: 1px solid var(--ink); padding-top: 1rem; }
.u-plan.best { border-top: 3px solid var(--accent); }
.u-plan h3 { font-size: 1.45rem; color: var(--ink); }
.u-plan h3 span { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.u-price { margin: .4rem 0 .8rem !important; font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--ink) !important; }
.u-price small { font-family: var(--sans); font-size: .85rem; font-weight: 400; color: var(--muted); }
.u-plan ul { display: grid; gap: .45rem; font-size: .95rem; }
.u-plan li { padding-left: 1.4rem; position: relative; }
.u-plan li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .55rem; height: .3rem; border-left: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good); transform: rotate(-45deg); }
.u-plan li.no { color: var(--muted); }
.u-plan li.no::before { border: 0; height: 1.5px; width: .6rem; top: .8em; background: var(--muted); transform: none; }
.u-note { font-size: .92rem; color: var(--muted) !important; font-style: italic; }
.u-steps b { color: var(--ink); }

/* Questions, the closing note, the other pages */
.u-faq { margin-top: 3rem; border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.u-faq h2 { margin-bottom: .6rem; font-size: 1.65rem; color: var(--ink); }
.u-faq details { border-bottom: 1px solid var(--rule); padding: .95rem 0; }
.u-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--ink); }
.u-faq summary::-webkit-details-marker { display: none; }
.u-faq summary::after { content: "+"; flex: none; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--accent); }
.u-faq details[open] summary::after { content: "\2212"; }
.u-faq details p { margin-top: .55rem; color: #3b3632; font-size: .97rem; }
.u-endnote { margin-top: 3rem; padding: 1.5rem 1.4rem; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--accent); }
.u-endnote-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink) !important; }
.u-endnote p { margin: .4rem 0 1rem; }
.u-endnote .u-link { display: inline-block; margin-top: .6rem; }
.u-more { margin-top: 3rem; border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.u-more h2 { font-size: 1.45rem; margin-bottom: .5rem; color: var(--ink); }
.u-more ul { display: grid; }
.u-more li a { display: grid; gap: .1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); text-decoration: none !important; }
.u-more li b { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.u-more li span { font-size: .9rem; color: var(--muted); }
.u-more li a:hover b { color: var(--accent); }

/* ---- Shared pages: cards, the car page, the report */
.uch .card { background: var(--card); border: 1px solid var(--rule); border-radius: 2px; box-shadow: none; }
.uch .card-head { border-bottom: 1px solid var(--ink); }
.uch .card-head h2 { background: none; color: var(--ink); padding: 0 0 .45rem; border-radius: 0; font-size: 1.3rem; font-weight: 600; }
.uch .field:nth-child(odd), .uch .regs li:nth-child(odd), .uch .mot-test .field:nth-child(even) { background: #f5f0e8; }
.uch .field { border-bottom-color: var(--line); }
.uch .badge { border-radius: 2px; }
.uch .stat, .uch .note, .uch .chart-box { background: #f5f0e8; border-radius: 2px; }
.uch .summary { background: var(--ink); border-radius: 2px; }
.uch .summary .reg, .uch .packs-head .reg { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 2px; font-family: var(--mono); }
.uch .summary .premium-tag { background: var(--accent); color: #fff; border-radius: 2px; }
.uch .summary .tool { border-radius: 2px; }
.uch .status div { border-radius: 2px; }
.uch .cta { border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 2px; background: var(--card); }
.uch .cta-dark { background: var(--ink); border-radius: 2px; }
.uch .offer { background: var(--accent-soft); border: 1px solid #e3c6c1; border-left: 3px solid var(--accent); border-radius: 2px; }
.uch .bigstatus > div { border-radius: 2px; }
.uch .bigstatus .neutral { background: var(--slate); }
.uch .mot-test .bar { background: var(--slate); border-radius: 2px 2px 0 0; }
.uch .bars i { background: rgba(127,29,29,.6); }
.uch .banner { background: var(--plate); }
.uch .list { background: var(--card); border-color: var(--rule); border-radius: 2px; }
.uch .faq { background: var(--card); border-color: var(--rule); border-radius: 2px; }
.uch .checks li, .uch .notice, .uch .anomalies, .uch .rate { border-radius: 2px; }
.uch .ticklist li::before { color: var(--good); }
.uch .dtype { border-radius: 2px; }

/* ---- Price page: paper instead of a dark band */
.uch .packs-page { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
.uch .packs-page .back { background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; }
.uch .packs-head h1 { font-size: 1.9rem; }
.uch .packs-head p, .uch .send-to { color: var(--muted); }
.uch .send-to b { color: var(--ink); }
.uch .pack { background: var(--card); border: 1px solid var(--ink); border-radius: 2px; box-shadow: none; }
.uch .pack.popular { border: 2px solid var(--accent); }
.uch .pack .ribbon { background: var(--accent); color: #fff; font-weight: 600; letter-spacing: .04em; }
.uch .pack h2 { font-size: 1.6rem; }
.uch .pack .amount b { font-family: var(--serif); font-weight: 600; }
.uch .pack .discount { border-radius: 2px; background: #f1ebe1; }
.uch .pack .discount.on { background: #d7eadf; }
.uch .pack .label { border-bottom-color: var(--slate); }
.uch .pack .label span { background: var(--slate); }
.uch .assure { background: var(--card); border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); }
.uch .assure b { color: var(--accent); }
.uch .packs-offer, .uch .pay-offer { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 2px; }
.uch main:has(.packs-page) + .u-foot { margin-top: 0; }

/* ---- Email step, payment page, popups */
.uch .popup { border-radius: 2px; background: var(--card); }
.uch .popup::backdrop { background: rgba(28,25,23,.6); }
.uch .email-form h2 { font-size: 1.55rem; }
.uch .email-form .chosen { background: var(--plate); border-radius: 2px; }
.uch .email-form .input { border: 1.5px solid var(--ink); border-radius: 2px; }
.uch .method { border-radius: 2px; border-width: 1.5px; }
.uch .method.by-card.on { border-color: var(--ink); box-shadow: none; }
.uch .card-field { border-radius: 2px; border-width: 1.5px; }
.uch .promise li::before { background: var(--good); }
.uch .pay-summary .total b { font-family: var(--serif); font-weight: 600; }
.uch .buyer-note { border: 1px solid var(--good); border-radius: 2px; }

/* ---- The "before you go" box, the sample report's way back */
.uch .exit-offer { background: rgba(28,25,23,.55); }
.uch .exit-card { border-radius: 2px; background: var(--card); border-top: 3px solid var(--accent); }
.uch .exit-tag { background: var(--accent-soft); color: var(--accent) !important; border-radius: 2px; }
.uch .back-to-pay { background: var(--ink); }

/* ---- Legal pages (terms, privacy) use .prose */
.uch .prose { max-width: 44rem; color: #3b3632; }
.uch .prose h2 { font-size: 1.35rem; }

/* ---- Check pages: "On this page", beside the form on wide screens */
.u-hero h1 { letter-spacing: -.005em; }
.u-toc { display: none; }
@media (min-width: 940px) {
  .u-toc { display: block; margin-top: 2.25rem; max-width: 30rem; border-top: 1px solid var(--ink); padding-top: .8rem; }
  .u-toc p { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
  .u-toc ol { counter-reset: toc; margin-top: .4rem; }
  .u-toc li { counter-increment: toc; display: flex; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
  .u-toc li::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--serif); font-weight: 600; color: var(--accent); }
  .u-toc a:hover { color: var(--accent); text-decoration: underline; }
}
.u-sec, .u-faq { scroll-margin-top: 1rem; }

/* The shared pages' column lines up with the header's */
.uch .wrap { max-width: 70rem; }
@media (min-width: 640px) { .uch .wrap { padding: 0 1.5rem; } }
@media (max-width: 480px) { .uch .u-answer .check-answer { font-size: 1.15rem; } .u-answer { padding-left: 1rem; } }

/* ---- Guides (/blog and /blog/<slug>): the check pages' column, plus tables, warnings, contents and sources */
.u-post-head { max-width: 44rem; margin: 0 auto; padding: 1.75rem 1rem 0; }
.u-post-head h1 { margin-top: .6rem; font-size: 2.2rem; line-height: 1.1; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.u-post-head .meta { margin-top: .9rem; font-size: .85rem; color: var(--muted); }
@media (min-width: 640px) { .u-post-head h1 { font-size: 2.6rem; } }
.u-post { padding-top: 1.5rem; }
.u-post-hero { margin: 1.75rem 0 1.25rem; }
.u-post-hero img { border: 1px solid var(--rule); }
.u-post-intro { font-size: 1.02rem; }
.u-post-toc { margin: 2rem 0 0; border-top: 1px solid var(--ink); padding-top: .8rem; }
.u-post-toc p { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin: 0; }
.u-post-toc ol { counter-reset: toc; margin-top: .4rem; padding: 0; list-style: none; }
.u-post-toc li { counter-increment: toc; display: flex; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.u-post-toc li::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--serif); font-weight: 600; color: var(--accent); }
.u-post-toc li:last-child::before { content: "?"; }
.u-article .u-post-toc a { color: var(--ink); text-decoration: none; }
.u-article .u-post-toc a:hover { color: var(--accent); text-decoration: underline; }
.u-sec strong { color: var(--ink); font-weight: 600; }
.u-table { margin: 0 0 1.25rem; overflow-x: auto; border-top: 1px solid var(--ink); }
.u-table table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.45; }
.u-table th, .u-table td { padding: .6rem .7rem .6rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.u-table thead th { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.u-table tbody th { font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .u-table table { min-width: 34rem; } }
.u-warn { margin: 0 0 1.25rem; padding: .9rem 1.1rem; background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--ink) !important; font-weight: 500; }
.u-post-cta { margin: 2.75rem 0 0; padding: 1.4rem 1.3rem 1.3rem; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--accent); }
.u-post-cta > p { margin: .35rem 0 .9rem; }
.u-post-cta .u-lookup { max-width: 26rem; }
.u-post-cta .u-post-alt { margin: .9rem 0 0; font-size: .9rem; }
.u-sources { margin-top: 3rem; border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.u-sources h2 { font-size: 1.45rem; margin-bottom: .5rem; color: var(--ink); }
.u-sources ul { display: grid; gap: .45rem; padding: 0; list-style: none; font-size: .92rem; }
.u-sources li { padding-left: 1.2rem; position: relative; }
.u-sources li::before { content: "\2197"; position: absolute; left: 0; color: var(--accent); font-size: .85rem; }
.u-post-legal { margin-top: 2.25rem; font-size: .82rem; color: var(--muted) !important; }
.u-more-all { margin-top: .9rem; }

/* The index: groups of cards, a picture above each guide's question */
.u-guides { padding-top: 1rem; }
.u-guide-group { margin-top: 2.5rem; }
.u-guide-group h2 { font-size: 1.55rem; color: var(--ink); padding-bottom: .5rem; border-bottom: 1px solid var(--ink); }
.u-guide-list { display: grid; gap: 1.75rem; margin-top: 1.25rem; padding: 0; list-style: none; }
@media (min-width: 760px) { .u-guide-list { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.u-guide-list a { display: grid; gap: .8rem; color: var(--ink); }
.u-guide-list img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--rule); background: #fff; }
.u-guide-text { display: grid; gap: .35rem; }
.u-guide-text b { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; font-weight: 600; }
.u-guide-text span { font-size: .95rem; color: #3b3632; }
.u-guide-text small { font-size: .8rem; color: var(--muted); }
.u-guide-list a:hover b { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.u-blog-cta { max-width: 44rem; margin-top: 3.5rem; }
.u-post-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }