/* ============================================================
   Fantasy Road brand styles
   ------------------------------------------------------------
   Single source of truth for the gold/black brand system used
   by the homepage sidebar, the SEO blocks (How-It-Works, FAQ),
   the contact form block and the blog grid (CMS block + index).

   These rules previously lived as inline @once <style> blocks
   inside each partial. Moving them here means:
     - they are no longer trapped in compiled-view cache when
       partials change (compiled views in storage/framework/views
       can otherwise serve stale CSS until `php artisan view:clear`)
     - they benefit from normal browser caching
     - cache-busting is handled by the ?v=... query string in
       resources/views/site/layouts/default.blade.php

   Bump the ?v= query string in default.blade.php whenever you
   change this file so visitors pick up the new version on their
   next page load.

   Brand tokens:
     gold        #FFBF00
     gold glow   rgba(255,191,0,.18)
     orange rule #F97316  (hover/secondary accent)
     amber date  #A16207  (eyebrow date on light cards)
     ink         #111
     muted ink   #374151
     hairline    #e5e7eb
   ============================================================ */


/* ── Homepage sidebar (Latest Pickup Tales / Latest Reviews) ── */
.home-side__heading {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.4rem; font-weight: 800; line-height: 1.1;
  margin: 2.5rem 0 1rem; padding-bottom: .6rem;
  border-bottom: 2px solid #FFBF00; color: #111;
}
.home-side__heading::before {
  content: ''; display: inline-block; width: 8px; height: 18px;
  background: #FFBF00; border-radius: 2px;
}
.home-side__list { list-style: none; margin: 0; padding: 0; }
.home-side__item { margin-bottom: 1rem; }
/* Cards now mirror the supplies _card.blade.php product card:
   white body, thin gray border, 3px gold top border, bold uppercase
   title + optional summary, and a black CTA footer bar. Image area
   uses aspect 4/3 with object-fit cover for editorial thumbs. */
.home-side__card {
  display: flex; flex-direction: column;
  background: #fff; color: #111;
  border: 1px solid #e5e7eb;
  border-top: 3px solid #FFBF00;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-side__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(255,191,0,.35);
  border-color: #FFBF00;
}
.home-side__media {
  aspect-ratio: 4/3;
  background: #f7f7f7;
  overflow: hidden;
  flex-shrink: 0;
}
.home-side__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-side__media--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #111 0%, #1f2937 100%);
  color: #FFBF00; font-weight: 900; font-size: 1.75rem; letter-spacing: .08em;
}
.home-side__body {
  padding: .9rem 1rem 1rem;
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.home-side__eyebrow {
  font-size: 10px; letter-spacing: .12em; font-weight: 700;
  text-transform: uppercase; color: #6b7280;
  margin: 0 0 .35rem;
}
.home-side__title {
  display: block; font-weight: 800; color: #111;
  text-transform: uppercase;
  line-height: 1.25; font-size: 14px; letter-spacing: .01em;
}
.home-side__card:hover .home-side__title { color: #A16207; }
.home-side__summary {
  display: none;
  font-size: 12px; line-height: 1.5;
  color: #4b5563; margin-top: .5rem;
}
@media (min-width: 1280px) { .home-side__summary { display: block; } }
.home-side__cta {
  display: flex; align-items: center; justify-content: space-between;
  background: #000; color: #fff;
  padding: .55rem .9rem;
  font-size: 11px; letter-spacing: .15em; font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.home-side__cta::after { content: '\203A'; font-size: 14px; letter-spacing: 0; font-weight: 900; }


/* ── CMS `blocks` template — mid-page block system ────────────────
   Used by pages that render via blocks.blade.php (e.g. /sell-to-us).
   Matches the professional white-card / 3px-gold-accent language
   established on /cgc-submission, /services and /account. Scoped
   with a `.blk-*` prefix so it never collides with the legacy
   Tailwind-utility-soup markup in older partials. */

/* ── Section heading used for mid-page _title blocks (NOT the hero;
     the hero is hoisted out by blocks.blade.php). Thin black rule +
     gold accent + modern H2, no shouting. Matches the svc-card-header
     bar motif from /services. */
.blk-sec {
    margin: 2.5rem 0 1rem;
}
.blk-sec__h {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 0 .5rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em;
    line-height: 1.2; color: #000;
}
.blk-sec__h::before {
    content: "";
    display: block; width: 4px; height: 22px;
    background: #FFBF00; flex-shrink: 0;
}
.blk-sec__copy {
    margin: 0;
    max-width: 64ch;
    font-size: 1rem; line-height: 1.6; color: #374151;
}
.blk-sec__copy p:last-child { margin-bottom: 0; }

/* ── Subtitle (_subtitle block) — restrained uppercase divider with
     a small gold accent pip and a thin hairline. Replaces the heavy
     black-bar 2022 treatment. */
.blk-sub {
    display: flex; align-items: center; gap: .75rem;
    margin: 2.5rem 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #f3f4f6;
    /* Impact condensed display stack — web-safe (ships with
       Windows/macOS), no webfont loading needed. Sized up and
       tracking reduced because Impact is a condensed face. */
    font-family: Impact, "Haettenschweiler", "Franchise", "Arial Narrow Bold", "Oswald", sans-serif;
    font-size: 1.35rem; font-weight: 400;
    text-transform: uppercase; letter-spacing: .04em;
    line-height: 1.15;
    color: #000;
}
@media (min-width: 768px) {
    .blk-sub { font-size: 1.65rem; }
}
.blk-sub::before {
    content: "";
    display: block; width: 3px; height: 18px;
    background: #FFBF00; flex-shrink: 0;
}
.blk-sub-wrap {
    margin: 2.5rem 0 1.5rem;
    /* Indent the subtitle strip so its gold pip-bar lines up
       visually with the card title's gold pip-bar sitting inside
       each blob card below it. The left padding here mirrors the
       .blk-blob__head left padding (1.5rem mobile, 2rem desktop). */
    padding: 0 1.5rem;
}
@media (min-width: 768px) {
    .blk-sub-wrap { padding: 0 2rem; }
}
.blk-sub-wrap .blk-sub { margin-top: 0; margin-bottom: .75rem; }
.blk-sub-wrap__copy {
    margin: 0;
    max-width: 64ch;
    font-size: .95rem; line-height: 1.6; color: #4b5563;
}
.blk-sub-wrap__copy p:last-child { margin-bottom: 0; }

/* ── Divider strip (_blob-divider block) — subtle off-white strip
     with a 3px gold left rule. Replaces the black bar with the
     absolute-positioned overflowing image from 2022. */
.blk-divider {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #FFBF00;
    padding: 1.5rem;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
}
@media (min-width: 768px) {
    .blk-divider {
        grid-template-columns: 1fr auto 1fr;
        padding: 1.75rem 2rem;
        gap: 1.75rem;
    }
}
.blk-divider__img { justify-self: center; max-width: 140px; }
.blk-divider__img img { width: 100%; height: auto; display: block; }
.blk-divider__text { font-size: .95rem; line-height: 1.6; color: #374151; }
@media (min-width: 768px) { .blk-divider__text { text-align: center; } }
.blk-divider__text p:last-child { margin-bottom: 0; }

/* ── Primary inline button (_skip-button block). Same size and style
     as .svc-btn on /services — black pill with uppercase label that
     inverts to gold on hover. Used standalone in the CMS partials. */
.blk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .95rem 1.5rem;
    background: #000; color: #fff;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    border: 2px solid #000;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.blk-btn:hover, .blk-btn:focus { background: #FFBF00; color: #000; text-decoration: none; }
.blk-btn__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border: 1.5px solid currentColor;
    font-size: .65rem; line-height: 1; font-weight: 900;
}

/* ── Sticky bottom CTA (_sticky-link block). Single dark bar across
     every viewport with a 3px gold top rule and a matching outlined
     arrow. Replaces the split mobile orange/black widget floating
     above the footer. */
.blk-sticky {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; gap: .65rem;
    padding: 1rem 1.25rem;
    background: #000; color: #fff;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .22em;
    border-top: 3px solid #FFBF00;
    box-shadow: 0 -4px 18px rgba(0,0,0,.2);
    z-index: 40;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.blk-sticky:hover, .blk-sticky:focus { background: #FFBF00; color: #000; text-decoration: none; }
.blk-sticky__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border: 1.5px solid currentColor;
    font-size: .65rem; line-height: 1; font-weight: 900;
}

/* ── Quotation form (_quotation-form block) — the conversion card
     on /sell-to-us. Built as a twin of the cgc-submission book-row:
     white surface, 1px #e5e7eb border, soft shadow, fafafa header
     strip with a 4x22 gold bar, and cgc-style labels and inputs. */
.blk-qform {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
    margin: 3rem 0;
    overflow: hidden;
}
.blk-qform__head {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.5rem;
    background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
}
.blk-qform__head::before {
    content: "";
    display: block; width: 4px; height: 22px;
    background: #FFBF00; flex-shrink: 0;
}
.blk-qform__head h3 {
    margin: 0;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; color: #000;
}
.blk-qform__body { padding: 1.5rem; }
@media (min-width: 768px) { .blk-qform__body { padding: 2rem; } }
.blk-qform__intro {
    margin: 0 0 1.75rem;
    font-size: .95rem; line-height: 1.6; color: #4b5563;
    max-width: 60ch;
}
.blk-qform__intro mark {
    background: #FFBF00; color: #000; font-weight: 600;
    padding: 1px 6px;
}
.blk-qform__grid {
    display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 768px) {
    .blk-qform__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.blk-qform__col-eyebrow {
    display: block;
    margin: 0 0 1.25rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em;
    color: #6b7280;
}
.blk-qform__field { margin-bottom: 1.1rem; }
.blk-qform__lbl {
    display: block;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: #000; margin-bottom: .4rem;
}
.blk-qform__input,
.blk-qform__select,
.blk-qform__textarea {
    width: 100%;
    padding: .5rem .75rem;
    font-size: .95rem; color: #111;
    background: #fff;
    border: 1px solid #d1d5db;
    transition: border-color .15s;
    box-sizing: border-box;
    font-family: inherit;
    accent-color: #FFBF00;
}
.blk-qform__input:focus,
.blk-qform__select:focus,
.blk-qform__textarea:focus {
    outline: none; border-color: #000;
}
.blk-qform__textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.blk-qform__err {
    display: block;
    font-size: .8rem; color: #dc2626;
    margin-top: .35rem; font-weight: 500;
}
/* ── Multi-image uploader inside the quotation form ────────────── */
.blk-qform__uploader {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}
.blk-qform__uploader__help {
    margin: 0 0 1rem;
    font-size: .85rem; line-height: 1.5; color: #6b7280;
}
.blk-qform__file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.blk-qform__file-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem;
    background: #000; color: #FFBF00;
    border: 1px solid #000; border-radius: 4px;
    font-size: .85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.blk-qform__file-btn:hover,
.blk-qform__file-btn:focus-within { background: #FFBF00; color: #000; }
.blk-qform__file-btn__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem;
    background: #FFBF00; color: #000;
    border-radius: 2px;
    font-weight: 900; font-size: 1rem; line-height: 1;
}
.blk-qform__file-btn:hover .blk-qform__file-btn__icon,
.blk-qform__file-btn:focus-within .blk-qform__file-btn__icon { background: #000; color: #FFBF00; }
.blk-qform__file-list {
    list-style: none; margin: 1rem 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: .5rem;
}
@media (min-width: 640px) {
    .blk-qform__file-list { grid-template-columns: 1fr 1fr; }
}
.blk-qform__file-list:empty { display: none; }
.blk-qform__file-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
}
.blk-qform__file-thumb {
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: #f3f4f6;
    border-radius: 2px;
    overflow: hidden;
}
.blk-qform__file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blk-qform__file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.blk-qform__file-name {
    font-size: .85rem; font-weight: 600; color: #111;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blk-qform__file-size { font-size: .75rem; color: #6b7280; margin-top: 1px; }
.blk-qform__file-remove {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #6b7280;
    border: 1px solid #e5e7eb; border-radius: 50%;
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.blk-qform__file-remove:hover,
.blk-qform__file-remove:focus { background: #F97316; color: #fff; border-color: #F97316; }
.blk-qform__file-error {
    margin: .75rem 0 0; padding: .6rem .85rem;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 3px;
    font-size: .85rem; color: #b91c1c;
}
/* Green confirmation line above the thumbnail grid once photos are
   attached. Gives the user unambiguous feedback that the add
   worked -- earlier version had no such affordance. */
.blk-qform__file-status {
    margin: 1rem 0 0; padding: .55rem .85rem;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 3px;
    font-size: .85rem; font-weight: 600; color: #065f46;
}
.blk-qform__file-status::before {
    content: "\2713\00a0";
    display: inline-block; font-weight: 900; color: #059669;
}

.blk-qform__submit-row {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}
.blk-qform__submit {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: 1rem 2rem;
    background: #000; color: #fff;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    border: 2px solid #000;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    width: 100%;
}
@media (min-width: 640px) {
    .blk-qform__submit { width: auto; min-width: 14rem; }
}
.blk-qform__submit:hover,
.blk-qform__submit:focus { background: #FFBF00; color: #000; }
.blk-qform__submit__arrow { font-weight: 900; }
.blk-qform__legal {
    margin: 1.25rem 0 0;
    max-width: 62ch;
    font-size: .7rem; line-height: 1.55; color: #9ca3af;
}
.blk-qform__legal a {
    color: #4b5563;
    text-decoration: underline;
    text-decoration-color: #FFBF00;
    text-underline-offset: 2px;
}
.blk-qform__thankyou { text-align: center; padding: 2rem 1rem; }
.blk-qform__thankyou__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    margin: 0 auto 1rem;
    background: #FFBF00; color: #000;
    border-radius: 50%;
    font-size: 1.35rem; font-weight: 700;
}
.blk-qform__thankyou h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    font-weight: 700; letter-spacing: -.01em; color: #000;
}
.blk-qform__thankyou p {
    margin: 0 auto; max-width: 42ch;
    font-size: .95rem; line-height: 1.55; color: #4b5563;
}


/* ── Big-blob cards (_big-blob / _big-blob-reverse) — white surface,
     soft shadow, 3px gold top accent, black H3 with a 4x22 gold bar
     prefix and a hairline rule beneath it, and a floating image that
     sits naturally inside the prose. Replaces the 2022 dashed-black-
     border + yellow-banner-title-pill treatment. */
.blk-blob {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.035);
    /* Tight top margin so the card reads as connected to the section
       heading or subtitle above it (instead of floating in a 3.5rem
       void with just the 3px gold accent stripe dangling). Bottom
       margin keeps consecutive cards from touching. */
    margin: 1rem 0 1.75rem;
}
.blk-blob::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: #FFBF00;
}
.blk-blob__head {
    /* Tight top padding keeps the card header sitting close to the
       3px gold accent stripe so the two read as a single unit. */
    padding: 1rem 1.5rem .85rem;
    border-bottom: 1px solid #f3f4f6;
}
@media (min-width: 768px) {
    .blk-blob__head { padding: 1.2rem 2rem 1rem; }
}
.blk-blob__head h3 {
    display: flex; align-items: center; gap: .75rem;
    margin: 0;
    /* Container title — the LARGEST heading in this card, outranking
       anything the CMS author puts inside the body. Impact condensed
       display stack matches the section subtitles above. */
    font-family: Impact, "Haettenschweiler", "Franchise", "Arial Narrow Bold", "Oswald", sans-serif;
    font-size: 1.75rem; font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em; line-height: 1.15; color: #000;
}
@media (min-width: 768px) {
    .blk-blob__head h3 { font-size: 2.1rem; }
}
.blk-blob__head h3::before {
    content: "";
    flex-shrink: 0;
    display: block; width: 4px; height: 22px;
    background: #FFBF00;
}
.blk-blob__body { padding: 1.25rem 1.5rem 1.5rem; font-size: .95rem; line-height: 1.55; color: #1f2937; }
@media (min-width: 768px) {
    .blk-blob__body { padding: 1.35rem 2rem 1.75rem; font-size: 1rem; line-height: 1.6; }
}
.blk-blob__body::after { content: ""; display: table; clear: both; }

/* Scoped cms-copy typography INSIDE a blob card — inner headings
   must rank SMALLER than the container title, and inner paragraphs
   need tighter vertical rhythm (CMS authors were double-pressing
   <enter> which blew the line-spacing apart). */
.blk-blob__body h1,
.blk-blob__body h2 { font-size: 1.35rem; font-weight: 700; text-transform: none;
                     letter-spacing: 0; line-height: 1.25; color: #111;
                     margin: 1.25rem 0 .55rem; }
.blk-blob__body h3 { font-size: 1.2rem; font-weight: 700; text-transform: none;
                     letter-spacing: 0; line-height: 1.25; color: #111;
                     margin: 1.15rem 0 .5rem; }
.blk-blob__body h4 { font-size: 1.05rem; font-weight: 700; text-transform: none;
                     letter-spacing: .01em; line-height: 1.3; color: #111;
                     margin: 1rem 0 .4rem; }
.blk-blob__body h1:first-child,
.blk-blob__body h2:first-child,
.blk-blob__body h3:first-child,
.blk-blob__body h4:first-child { margin-top: 0; }
@media (min-width: 768px) {
    .blk-blob__body h1,
    .blk-blob__body h2 { font-size: 1.55rem; }
    .blk-blob__body h3 { font-size: 1.35rem; }
    .blk-blob__body h4 { font-size: 1.15rem; }
}
.blk-blob__body p { margin: 0 0 .65rem; }
.blk-blob__body p:last-child { margin-bottom: 0; }
.blk-blob__body p:empty { display: none; }
.blk-blob__body br + br { display: none; }
.blk-blob__body ul,
.blk-blob__body ol { margin: .4rem 0 .8rem 1.25rem; }
.blk-blob__body li { margin-bottom: .25rem; line-height: 1.55; }
.blk-blob__body strong { font-weight: 700; color: #111; }
.blk-blob__media { margin: 0 0 1rem; }
.blk-blob__media img {
    display: block; width: 100%; height: auto;
    border: 1px solid #f3f4f6;
}
@media (min-width: 768px) {
    .blk-blob__media {
        float: right;
        width: 460px;
        margin: 0 0 1rem 2rem;
    }
    .blk-blob--reverse .blk-blob__media {
        float: left;
        margin: 0 2rem 1rem 0;
    }
}
@media (min-width: 1024px) {
    .blk-blob__media { width: 560px; }
}
@media (min-width: 1280px) {
    .blk-blob__media { width: 620px; }
}

/* ── Info-blob-centre (_info-blob-center-standard) — numbered-step
     grid. Rebuilt as a clean responsive card grid. */
.blk-steps { margin: 2rem 0 2.5rem; }
.blk-steps__title {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 0 1.25rem;
    font-size: 1.2rem; font-weight: 700; color: #000;
}
.blk-steps__title::before {
    content: "";
    display: block; width: 4px; height: 22px;
    background: #FFBF00; flex-shrink: 0;
}
.blk-steps__grid {
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .blk-steps__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blk-steps__grid { grid-template-columns: repeat(3, 1fr); } }
.blk-step {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.blk-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: #000; color: #FFBF00;
    font-size: .85rem; font-weight: 700;
}
.blk-step__h {
    margin: 0;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: #000;
}
.blk-step__copy {
    margin: 0;
    font-size: .9rem; line-height: 1.55; color: #4b5563;
}
.blk-step__copy p:last-child { margin-bottom: 0; }

/* ── Generic prose block (_general) — clean white card containing
     CMS-authored prose. */
.blk-prose {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
}
@media (min-width: 768px) { .blk-prose { padding: 2rem 2.25rem; } }
.blk-prose::before {
    content: "";
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 3px; background: #FFBF00;
}
.blk-prose__h {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 0 1rem;
    font-size: 1.2rem; font-weight: 700; color: #000;
}
.blk-prose__pre {
    margin: 0 0 .85rem;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em; color: #6b7280;
}
.blk-prose__body { font-size: 1rem; line-height: 1.6; color: #111827; }
.blk-prose__body p:last-child { margin-bottom: 0; }
.blk-prose__cta {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: 1.25rem;
    padding: .9rem 1.5rem;
    background: #000; color: #fff;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    border: 2px solid #000;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.blk-prose__cta:hover, .blk-prose__cta:focus {
    background: #FFBF00; color: #000; text-decoration: none;
}


/* ── How-It-Works block (white cards on white surface) ── */
.hiw-section { padding: 3.5rem 1.5rem; }
@media (min-width: 768px) { .hiw-section { padding-top: 1.5rem; padding-bottom: 1.5rem; } }
.hiw-container { max-width: 1200px; margin: 0 auto; }
.hiw-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #000;
  background: #FFBF00; padding: .4rem .75rem; border-radius: 999px;
  margin-bottom: 1rem;
}
.hiw-h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800; line-height: 1.1; margin: 0 0 .65rem;
}
.hiw-lede { font-size: 1.05rem; line-height: 1.55; max-width: 60ch; opacity: .9; margin: 0 0 1.25rem; color: #374151; }
.hiw-steps { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .hiw-steps { grid-template-columns: repeat(3, 1fr); } }
.hiw-step {
  position: relative; background: #fff; color: #111;
  border: 1px solid #e5e7eb; border-radius: 14px;
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.hiw-step__num {
  position: absolute; top: -14px; left: 1.25rem;
  width: 32px; height: 32px; border-radius: 999px;
  background: #FFBF00; color: #000;
  font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.hiw-step h3 { font-size: 1.1rem; font-weight: 800; margin: .4rem 0 .35rem; }
.hiw-step p { font-size: .95rem; line-height: 1.5; color: #374151; margin: 0; }
.hiw-cta {
  display: inline-block; margin-top: 1.5rem;
  background: #000; color: #fff; text-transform: uppercase; font-weight: 800;
  padding: .85rem 1.4rem; border-radius: 10px; font-size: .9rem; letter-spacing: .06em;
  border: 2px solid #000; transition: all .15s ease;
}
.hiw-cta:hover { background: #FFBF00; color: #000; border-color: #FFBF00; }


/* ── FAQ accordion block (black surface, white cards) ── */
.faq-section { padding: 3.5rem 1.5rem; background: #000; color: #fff; }
.faq-container { max-width: 1100px; margin: 0 auto; }
.faq-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #000;
  background: #FFBF00; padding: .4rem .75rem; border-radius: 999px;
  margin-bottom: 1rem;
}
.faq-h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800; line-height: 1.1; margin: 0 0 1.25rem;
}
.faq-list { display: flex; flex-direction: column; gap: .65rem; }
.faq-list details {
  background: #fff; color: #111;
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .9rem 1.1rem;
  transition: border-color .15s ease;
}
.faq-list details[open] { border-color: #FFBF00; }
.faq-list summary {
  cursor: pointer; font-weight: 700; font-size: 1rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; font-size: 1.4rem; line-height: 1;
  color: #FFBF00; font-weight: 800;
}
.faq-list details[open] summary::after { content: '–'; }
.faq-list p { margin: .7rem 0 0; line-height: 1.55; color: #374151; font-size: .95rem; }


/* ── Contact form block ── */
.fr-contact { max-width: 1100px; margin: 0 auto; }
.fr-contact__panel {
  background: #fff; color: #111;
  border: 1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 4px 18px rgba(255,191,0,.12);
  padding: 1.75rem;
  border-top: 4px solid #FFBF00;
}
@media (min-width: 768px) { .fr-contact__panel { padding: 2.25rem; } }
.fr-contact__row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .fr-contact__row { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.fr-contact label.fr-label {
  display: block; font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #374151;
  margin-bottom: .5rem;
}
.fr-contact input[type="text"],
.fr-contact input[type="email"],
.fr-contact textarea {
  width: 100%; background: #fff; color: #111;
  border: 1px solid #d1d5db; border-radius: 8px;
  padding: .75rem .9rem; font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fr-contact input[type="text"]:focus,
.fr-contact input[type="email"]:focus,
.fr-contact textarea:focus {
  outline: none; border-color: #FFBF00;
  box-shadow: 0 0 0 3px rgba(255,191,0,.25);
}
.fr-contact textarea { min-height: 140px; resize: vertical; }
.fr-contact__error { color: #dc2626; font-size: .85rem; margin-top: .4rem; display: block; }
.fr-contact__newsletter {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem; background: #f9fafb; border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.fr-contact__newsletter input[type="checkbox"] {
  flex-shrink: 0; width: 20px; height: 20px;
  accent-color: #FFBF00; margin-top: 2px;
}
.fr-contact__newsletter label {
  font-size: .85rem; line-height: 1.45; color: #374151; cursor: pointer;
}
.fr-contact__submit {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #000; color: #fff;
  font-weight: 800; text-transform: uppercase;
  font-size: .9rem; letter-spacing: .08em;
  padding: .85rem 1.6rem; border-radius: 10px;
  border: 2px solid #000;
  transition: all .15s ease; cursor: pointer;
}
.fr-contact__submit:hover { background: #FFBF00; color: #000; border-color: #FFBF00; }
.fr-contact__legal { font-size: .75rem; color: #6b7280; margin-top: 1rem; line-height: 1.5; }
.fr-contact__legal a { color: #374151; text-decoration: underline; }
.fr-contact__success { text-align: center; padding: 2rem 1rem; }
.fr-contact__success h3 { font-size: 1.6rem; font-weight: 800; color: #111; margin: 0 0 .5rem; }
.fr-contact__success p { color: #374151; font-size: 1rem; }
.fr-contact__success::before {
  content: ''; display: block; width: 48px; height: 48px; margin: 0 auto 1rem;
  background: #FFBF00; border-radius: 999px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/60% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/60% no-repeat;
}


/* ── Blog grid (shared by /blog index AND blog-posts CMS block) ── */
.frbp-section { padding: 3rem 0; }
.frbp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: 0 0 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid #FFBF00;
}
.frbp-head__title {
  display: flex; align-items: center; gap: .6rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #111; margin: 0;
}
.frbp-head__title::before {
  content: ''; display: inline-block; width: 8px; height: 22px;
  background: #FFBF00; border-radius: 2px;
}
.frbp-head__link {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #111;
  border-bottom: 2px solid #FFBF00;
  padding-bottom: .15rem; transition: color .15s ease;
}
.frbp-head__link:hover { color: #F97316; }

.frbp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .frbp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .frbp-grid { grid-template-columns: repeat(5, 1fr); } }

.frbp-card {
  display: flex; flex-direction: column;
  background: #fff; color: #111;
  border: 1px solid #e5e7eb; border-radius: 12px;
  overflow: hidden; text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.frbp-card:hover {
  transform: translateY(-3px);
  border-color: #FFBF00;
  box-shadow: 0 8px 22px rgba(255,191,0,.18);
}
.frbp-card__media { aspect-ratio: 4 / 3; background: #1f2937; overflow: hidden; position: relative; }
.frbp-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.frbp-card:hover .frbp-card__media img { transform: scale(1.04); }
.frbp-card__media--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: #FFBF00; font-weight: 800; font-size: 1.4rem; letter-spacing: .1em;
}
.frbp-card__body { padding: .85rem .9rem 1rem; flex: 1; display: flex; flex-direction: column; }
.frbp-card__date {
  font-size: .65rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #A16207;
  margin: 0 0 .35rem;
}
.frbp-card__title {
  font-size: .9rem; font-weight: 700; line-height: 1.3;
  color: #111; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.frbp-card:hover .frbp-card__title { color: #000; }


/* ── Socials block (CMS-placeable) ── */
.fr-socials { padding: 2rem 0 1rem; }
.fr-socials__panel {
  position: relative;
  background: #fff; color: #111;
  border: 2px dashed #FFBF00; border-radius: 18px;
  padding: 2.25rem 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.fr-socials__eyebrow {
  position: absolute; top: -16px; left: 1.25rem;
  display: inline-flex; align-items: center; gap: .45rem;
  background: #FFBF00; color: #000;
  font-size: .8rem; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.fr-socials__grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .fr-socials__grid { grid-template-columns: repeat(4, 1fr); } }
.fr-socials__link {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1rem .5rem;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px;
  color: #111; text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fr-socials__link:hover {
  transform: translateY(-3px);
  border-color: #FFBF00;
  box-shadow: 0 8px 22px rgba(255,191,0,.18);
}
.fr-socials__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
}
.fr-socials__icon svg { width: 100%; height: 100%; display: block; }
.fr-socials__label {
  font-size: .85rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #111; margin: 0;
}

/* Mobile compact strip — same brand language, tighter density. */
.fr-socials__strip {
  display: none;
  align-items: center; justify-content: space-between;
  gap: .75rem; padding: .85rem 1rem;
  background: #fff;
  border-top: 2px dashed #FFBF00;
  border-bottom: 2px dashed #FFBF00;
  margin: 1.25rem 0;
}
.fr-socials__strip-label {
  font-size: .8rem; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: #111;
  padding: .25rem .55rem; background: #FFBF00; border-radius: 999px;
  flex-shrink: 0;
}
.fr-socials__strip-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  transition: transform .15s ease;
}
.fr-socials__strip-link:hover { transform: translateY(-2px); }
.fr-socials__strip-link svg { width: 100%; height: 100%; display: block; }
@media (max-width: 767px) {
  .fr-socials__panel { display: none; }
  .fr-socials__strip { display: flex; }
}


/* ── Big-blob blocks (image + bodytext inside a dashed bordered box) ── */
.fr-blob {
  position: relative;
  margin: 4rem auto 2rem;
  /* Mobile padding-top must clear the absolutely-positioned yellow
     .fr-blob__title pill, which wraps to two lines on narrow
     viewports. 4.75rem = enough for a two-line Impact title + its
     -1.4rem negative offset + breathing room before card content. */
  padding: 4.75rem 1.5rem 2rem;
  border: 3px dashed #111;
  border-radius: 4px;
  background: #fff;
}
@media (min-width: 768px) {
  .fr-blob { padding: 3rem 2.5rem 2.5rem; margin: 5rem auto 2.5rem; }
}
/* On mobile, when a dashed .fr-blob card is immediately followed by
   a subtitle strip (which paints a horizontal gold line across the
   top of its container), drop the card's bottom dashed border and
   bottom margin so the left/right dashed sides visually flow into
   the gold line below -- makes the sequence read as one unified
   structural element rather than two stacked boxes. Each CMS block
   is wrapped in its own .site-container, so we match on the sibling
   relationship between the two wrapping containers. */
@media (max-width: 767px) {
  /* On mobile, when a dashed fr-blob sits directly above a block
     whose top edge carries a gold line (the 3px gold ::before
     stripe on a clean .blk-blob, or the gold pip-bar of a
     subtitle strip), drop the card's bottom dashed border so the
     left and right dashed sides extend straight down and merge
     into the gold rule below. Reads as one unified structural
     element instead of two stacked boxes.

     The .blk-wrap--above-gold class is set conditionally by
     __include-blocks.blade.php using a one-step lookahead, so
     dashed cards that are NOT above a gold-line block keep their
     full dashed border (otherwise the trailing card would just
     fade into a void with text running off the page). */
  .blk-wrap--above-gold > .fr-blob {
    border-bottom-style: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Drop the next gold-line block's top margin so its gold rule
     sits flush against where the dashed sides terminate.
     !important defeats any per-element margin-top declared in the
     base .blk-blob / .blk-sub-wrap rules above this section. */
  .blk-wrap--above-gold + .blk-wrap--clean > .blk-blob,
  .blk-wrap--above-gold + .site-container > .blk-sub-wrap {
    margin-top: 0 !important;
  }
  /* Belt-and-braces: kill any vertical spacing on the surrounding
     wrappers so the two cards touch precisely at the gold line. */
  .blk-wrap--above-gold,
  .blk-wrap--above-gold + .site-container {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.fr-blob__title {
  position: absolute;
  top: -1.4rem; left: 1.5rem;
  display: inline-block;
  background: #FFBF00; color: #000;
  /* Yellow-banner container title — largest heading in this card,
     outranking anything in the CMS prose below. Impact condensed
     display stack matches the other container titles. */
  font-family: Impact, "Haettenschweiler", "Franchise", "Arial Narrow Bold", "Oswald", sans-serif;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 400; letter-spacing: .03em;
  text-transform: uppercase; line-height: 1.15;
  padding: .7rem 1.2rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  margin: 0;
  max-width: calc(100% - 3rem);
}
@media (min-width: 768px) {
  .fr-blob__title { top: -1.7rem; left: 2.5rem; padding: .8rem 1.5rem; }
}
.fr-blob__media { margin: 0 0 1.5rem; }
.fr-blob__media img { width: 100%; height: auto; display: block; border-radius: 2px; }
@media (min-width: 768px) {
  .fr-blob__media { float: right; width: 460px; max-width: 100%; margin: 0 0 1rem 2rem; }
  .fr-blob--reverse .fr-blob__media { float: left; margin: 0 2rem 1rem 0; }
}
@media (min-width: 1024px) {
  .fr-blob__media { width: 560px; }
}
@media (min-width: 1280px) {
  .fr-blob__media { width: 620px; }
}
.fr-blob__body { font-size: .95rem; line-height: 1.55; color: #1f2937; }
@media (min-width: 768px) {
  .fr-blob__body { font-size: 1rem; line-height: 1.6; }
}
.fr-blob__body::after { content: ''; display: table; clear: both; }
.fr-blob__body p { margin: 0 0 .65rem; }
.fr-blob__body p:last-child { margin-bottom: 0; }
.fr-blob__body p:empty { display: none; }
.fr-blob__body br + br { display: none; }
.fr-blob__body strong { color: #111; font-weight: 700; }
.fr-blob__body a { color: #111; text-decoration: underline; text-decoration-color: #FFBF00; text-underline-offset: 3px; }
.fr-blob__body a:hover { color: #F97316; text-decoration-color: #F97316; }
/* Inner headings rank SMALLER than the yellow-banner container title.
   Also dropping the uppercase so the CMS prose reads naturally. */
.fr-blob__body h1,
.fr-blob__body h2,
.fr-blob__body h3,
.fr-blob__body h4 {
  font-weight: 700; color: #111;
  margin: 1rem 0 .4rem; line-height: 1.3;
  text-transform: none; letter-spacing: 0;
}
.fr-blob__body h1,
.fr-blob__body h2 { font-size: 1.35rem; }
.fr-blob__body h3 { font-size: 1.2rem; }
.fr-blob__body h4 { font-size: 1.05rem; }
@media (min-width: 768px) {
  .fr-blob__body h1,
  .fr-blob__body h2 { font-size: 1.55rem; }
  .fr-blob__body h3 { font-size: 1.35rem; }
  .fr-blob__body h4 { font-size: 1.15rem; }
}
.fr-blob__body h1:first-child,
.fr-blob__body h2:first-child,
.fr-blob__body h3:first-child,
.fr-blob__body h4:first-child { margin-top: 0; }
.fr-blob__body ul, .fr-blob__body ol { margin: .4rem 0 .8rem 1.25rem; }
.fr-blob__body li { margin-bottom: .25rem; line-height: 1.55; }


/* ── Community / Discord block ── */
.fr-community {
  background: #000; color: #fff;
  padding: 2rem 0 3rem;
}
.fr-community__inner {
  width: 100%; max-width: 1200px;
  margin: 0 auto; padding: 0 1.25rem;
}
@media (min-width: 768px) { .fr-community { padding: 3rem 0 4rem; } .fr-community__inner { padding: 0 2rem; } }
.fr-community__intro { margin: 0 0 1.5rem; }
.fr-community__intro p {
  color: #fff; font-weight: 700;
  font-size: 1rem; line-height: 1.45;
  margin: 0 0 .5rem;
}
@media (min-width: 768px) {
  .fr-community__intro { margin: 0 0 2rem; }
  .fr-community__intro p { font-size: 1.15rem; }
}
.fr-community__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .fr-community__grid {
    grid-template-columns: minmax(0, 22rem) 1fr;
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .fr-community__grid {
    grid-template-columns: minmax(0, 26rem) 1fr;
    gap: 2.5rem;
  }
}
.fr-community__widget {
  width: 100%;
  height: 460px;
  background: #2f3136;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #FFBF00;
}
.fr-community__widget iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
@media (max-width: 767.98px) { .fr-community__widget { display: none; } }
.fr-community__widget--mobile { display: block; height: 380px; }
@media (min-width: 768px) { .fr-community__widget--mobile { display: none; } }

.fr-community__copy { color: #fff; }
.fr-community__copy p,
.fr-community__copy li {
  color: #f3f4f6; font-weight: 600;
  font-size: .95rem; line-height: 1.55;
  margin: 0 0 .9rem;
}
.fr-community__copy ul {
  list-style: disc; padding-left: 1.25rem;
  margin: 0 0 .9rem;
}
.fr-community__copy a {
  color: #FFBF00; text-decoration: underline;
  text-underline-offset: 3px; font-weight: 700;
}
.fr-community__copy a:hover { color: #fff; }

.fr-community__cta {
  display: block; width: 100%;
  margin-top: 1.5rem;
  background: #FFBF00; color: #000;
  text-align: center;
  font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.1rem;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: background .15s ease, transform .15s ease;
}
.fr-community__cta:hover { background: #fff; color: #000; transform: translateY(-1px); }

.fr-community__heading {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.25rem; padding: 0 0 1rem;
  border-bottom: 1px dashed rgba(255,191,0,.35);
}
.fr-community__heading h2 {
  color: #fff; font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: .03em; margin: 0;
}
.fr-community__heading img { width: 3.5rem; height: auto; }
@media (min-width: 768px) { .fr-community__heading img { width: 4.5rem; } }

/* ═══════════════════════════════════════════════════════════════
   COMIC BOOK RESOURCES DIRECTORY — /comic-book-resources
═══════════════════════════════════════════════════════════════ */

/* Collectible-type tab bar — sits between hero band and orange rule */
.res-tabs-bar {
  background: #111;
  border-top: 1px solid rgba(255,255,255,.06);
}
.res-tabs {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.res-tabs > li { margin: 0; }
.res-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.1rem;
  color: #d1d5db;
  text-decoration: none;
  font-size: .85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.res-tab:hover { color: #fff; background: rgba(255,255,255,.04); text-decoration: none; }
.res-tab.is-active {
  color: #FFBF00;
  border-bottom-color: #FFBF00;
  background: rgba(255,191,0,.06);
}
.res-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.2rem; padding: 0 .4rem;
  background: rgba(255,255,255,.10); color: #fff;
  border-radius: 999px;
  font-size: .7rem; font-weight: 800; line-height: 1;
}
.res-tab.is-active .res-tab-count { background: #FFBF00; color: #000; }

/* Empty state when an active tab has no resources */
.res-empty {
  margin: 2rem auto;
  padding: 3rem 1.5rem;
  max-width: 36rem;
  text-align: center;
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: 8px;
  background: #fafafa;
}
.res-empty-title {
  margin: 0 0 .5rem;
  font-size: 1.1rem; font-weight: 800;
  color: #000;
}
.res-empty-body {
  margin: 0; color: #4b5563;
  font-size: .9rem; line-height: 1.5;
}
.res-empty-body a { color: #000; font-weight: 700; }
.res-empty-body a:hover { color: #c97a00; }

/* Quick-nav chips beneath the hero band */
.res-chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 2rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.res-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem .45rem .9rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  color: #111;
  text-decoration: none;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.res-chip:hover {
  background: #000; color: #fff; border-color: #000; transform: translateY(-1px);
  text-decoration: none;
}
.res-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.25rem; padding: 0 .4rem;
  background: #FFBF00; color: #000;
  border-radius: 999px;
  font-size: .7rem; font-weight: 800; line-height: 1;
}
.res-chip:hover .res-chip-count { background: #fff; color: #000; }

/* Category section */
.res-cat-section { margin: 0 0 3rem; scroll-margin-top: 6rem; }
.res-cat-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 0 0 .75rem;
  border-bottom: 2px solid #000;
}
.res-cat-title {
  margin: 0; color: #000;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.1;
}
.res-cat-count {
  font-size: .75rem; font-weight: 700; color: #555;
  text-transform: uppercase; letter-spacing: .08em;
}

/* Card grid */
.res-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px)  { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .res-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .res-grid { grid-template-columns: repeat(4, 1fr); } }

/* Card */
.res-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.res-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  border-color: #000;
  text-decoration: none;
}

.res-card-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.res-card-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .25s ease;
}
.res-card:hover .res-card-shot img { transform: scale(1.03); }
.res-card-shot-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #111 0%, #333 100%);
}
.res-card-shot-placeholder span {
  color: #FFBF00;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900; letter-spacing: .05em;
}

/* Affiliate pip on card thumbnail */
.res-aff-pip {
  position: absolute; top: .5rem; right: .5rem;
  display: inline-block;
  padding: .2rem .5rem;
  background: #FFBF00; color: #000;
  border-radius: 4px;
  font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Show-page sidebar pip is inline (not absolute) */
.res-meta .res-aff-pip { position: static; }

.res-card-body {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .9rem 1rem 1rem;
  flex: 1;
}
.res-card-name {
  margin: 0; color: #000;
  font-size: 1rem; font-weight: 800; line-height: 1.2;
}
.res-card-host {
  margin: 0; color: #6b7280;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .02em;
}
.res-card-blurb {
  margin: .15rem 0 0; color: #374151;
  font-size: .825rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-card-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .35rem;
  padding-top: .65rem;
  color: #000; font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.res-card:hover .res-card-cta { color: #c97a00; }

/* Footnote line */
.res-footnote {
  margin: 2.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px dashed rgba(0,0,0,.12);
  text-align: center;
  font-size: .85rem; color: #6b7280;
}
.res-footnote a { color: #000; font-weight: 700; }
.res-footnote a:hover { color: #c97a00; }

/* ─── SHOW PAGE ──────────────────────────────────────────────── */

.res-show-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .res-show-grid { grid-template-columns: minmax(280px, 360px) 1fr; gap: 3rem; }
}

.res-show-aside { display: flex; flex-direction: column; gap: 1rem; }

.res-show-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  overflow: hidden;
}
.res-show-shot img,
.res-show-shot a {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.res-show-shot-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #111 0%, #333 100%);
}
.res-show-shot-placeholder span {
  color: #FFBF00;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 900; letter-spacing: .05em;
}

.res-meta {
  margin: 0;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 1rem; row-gap: .5rem;
  font-size: .85rem;
  padding: 1rem 1.1rem;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
}
.res-meta dt {
  margin: 0; color: #6b7280;
  font-weight: 700; text-transform: uppercase;
  font-size: .7rem; letter-spacing: .06em;
}
.res-meta dd {
  margin: 0; color: #111; font-weight: 600; word-break: break-word;
}
.res-meta dd a { color: #000; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); }
.res-meta dd a:hover { color: #c97a00; text-decoration-color: #c97a00; }
.res-meta-note { font-size: .8rem; color: #4b5563; font-weight: 500; }

.res-visit-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.25rem;
  background: #000; color: #FFBF00;
  border: 2px solid #000;
  border-radius: 6px;
  font-size: .9rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.res-visit-cta:hover {
  background: #FFBF00; color: #000;
  transform: translateY(-1px);
  text-decoration: none;
}

.res-aff-disclosure {
  margin: 0; padding: .75rem .9rem;
  background: #fffaf0;
  border: 1px solid rgba(255,191,0,.45);
  border-left: 3px solid #FFBF00;
  border-radius: 4px;
  font-size: .75rem; color: #4b5563; line-height: 1.5;
}

/* Right column long-form */
.res-show-main { min-width: 0; }
.res-show-h2 {
  margin: 0 0 1rem;
  color: #000;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: .02em;
  padding-bottom: .65rem;
  border-bottom: 2px solid #000;
}
.res-show-body {
  color: #1f2937; font-size: 1rem; line-height: 1.7;
}
.res-show-body p,
.res-show-body br + br { margin-bottom: 1rem; }

.res-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,.10);
}
.res-related .res-cat-title { margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid #000; }