/* ============================================================
   CF-THEME.CSS — CouponFollow-style skin.
   Loaded LAST in header.php so it wins the cascade.

   What this file does:
   1. Re-tints the token layer: green brand (#1bbc9b), white/gray
      flat surfaces, #333/#505050 ink, #e4e4e4 hairlines.
   2. Flattens the existing components (cards, buttons, header,
      footer) so every page reads CouponFollow without new markup.
   3. Adds the CouponFollow-specific components: offer tabs, list
      coupon rows, mini coupon cards, trending-search cloud,
      popular-store tiles, FAQ accordion, article rows.

   Dark mode keeps working: the same overrides are repeated under
   [data-theme="dark"] with a dark-gray flat palette.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
    /* Surfaces, ink, borders (CouponFollow flat palette). The accent
       ramp is intentionally NOT set here so the per-accent presets in
       theme.css (and the green override below) can take effect. */

    /* Secondary: link blue used by CouponFollow for text links */
    --accent-2: #009bff;
    --accent-2-light: #4db8ff;
    --accent-2-glow-soft: rgba(0, 155, 255, 0.10);

    /* Ink */
    --text: #333333;
    --text-secondary: #505050;
    --text-muted: #767677;

    /* Flat surfaces */
    --bg: #ffffff;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f5f6f7;
    --bg-input: #f8f8f8;
    --bg-surface-t: rgba(255, 255, 255, 0.92);

    --border: #e4e4e4;
    --border-subtle: #efefef;
    --border-accent: rgba(27, 188, 155, 0.35);

    /* Flat, small shadows only */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.09);
    --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);

    --header-bg: rgba(255, 255, 255, 0.97);
    --header-border: #e4e4e4;

    /* Hero banner: soft green wash */
    --hero-bg: linear-gradient(135deg, #e9f8f4 0%, #f2fbf9 55%, #ffffff 100%);

    --card-hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);

    --ok: #1bbc9b;
    --heart: #e10031;
    --heart-soft: rgba(225, 0, 49, 0.07);
    --heart-border: rgba(225, 0, 49, 0.25);

    --scrollbar-track: #f5f6f7;
    --scrollbar-thumb: #d9d9d9;
}

/* Dark mode: flat dark-gray CouponFollow variant */
[data-theme="dark"] {
    --accent-2: #4db8ff;
    --accent-2-glow-soft: rgba(77, 184, 255, 0.10);

    --text: #f2f2f2;
    --text-secondary: #b9b9b9;
    --text-muted: #7f7f80;

    --bg: #17191d;
    --bg-surface: #1c1f24;
    --bg-card: #1f2227;
    --bg-elevated: #26292f;
    --bg-input: #26292f;
    --bg-surface-t: rgba(28, 31, 36, 0.94);

    --border: #33363c;
    --border-subtle: #2b2e33;
    --border-accent: rgba(27, 188, 155, 0.4);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.45);

    --header-bg: rgba(23, 25, 29, 0.97);
    --header-border: #33363c;

    --hero-bg: linear-gradient(135deg, rgba(27, 188, 155, 0.14) 0%, rgba(23, 25, 29, 0.4) 60%, var(--bg) 100%);

    --card-hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   2. GLOBAL RHYTHM
   ------------------------------------------------------------ */
.container { max-width: 1200px; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.ch-section { padding: 48px 0; }
.ch-section.ch-alt { background: #f8f8f8; }
[data-theme="dark"] .ch-section.ch-alt { background: var(--bg-surface); }

.ch-section-head { margin-bottom: 22px; }
.ch-section-head h1,
.ch-section-head h2 { letter-spacing: -0.01em; }
.ch-section-head p { color: var(--text-muted); margin-top: 4px; }

/* Ambient WebGL field stays but far subtler on the flat theme */
.ch-bg-scene { opacity: 0.3; }
[data-theme="dark"] .ch-bg-scene { opacity: 0.5; }

/* ------------------------------------------------------------
   3. BUTTONS — flat green, no gradient sheen
   ------------------------------------------------------------ */
.ch-btn,
.ch-btn-ghost {
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}
.ch-btn {
    background: var(--accent);
    color: #fff !important;
}
.ch-btn:hover {
    background: var(--accent-dark);
    color: #fff !important;
    transform: none;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.ch-btn-ghost {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary) !important;
}
.ch-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
    background: var(--accent-glow-soft);
    transform: none;
}
.ch-btn i.ch-btn-arrow,
.ch-btn-ghost i.ch-btn-arrow { display: none; }

/* Header pill buttons follow the flat look too */
.ch-addstore-btn {
    background: var(--accent) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
}
.ch-addstore-btn:hover { background: var(--accent-dark) !important; }
.ch-header .ch-addstore-btn[style*="background"] { background: var(--accent) !important; }

/* ------------------------------------------------------------
   4. HEADER — plain white bar, hairline border
   ------------------------------------------------------------ */
.ch-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--header-border);
}
.ch-header.shrunk { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); }

.ch-logo { font-weight: 800; color: var(--text); }
.ch-logo:hover { transform: none; }
.ch-logo span { color: var(--text); }
.ch-logo img { max-height: 38px; }

.ch-nav a {
    color: var(--text-secondary);
    border-radius: 6px;
}
.ch-nav a::after { height: 2px; border-radius: 2px; }
.ch-nav a:hover,
.ch-nav a.active { color: var(--accent); }

.ch-icon-btn,
.ch-theme-toggle {
    border-radius: 8px;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.ch-icon-btn:hover,
.ch-theme-toggle:hover {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: transparent;
    transform: none;
}

/* ------------------------------------------------------------
   5. HERO — flat banner, no 3D stage
   ------------------------------------------------------------ */
.ch-hero { background: var(--hero-bg); border-bottom: 1px solid var(--border-subtle); }
.ch-hero > .container { padding-top: 40px; padding-bottom: 40px; }
.ch-hero-eyebrow {
    color: var(--accent-dark);
    background: var(--accent-glow-soft);
    border: 1px solid var(--border-accent);
    border-radius: 999px;
    display: inline-flex;
    padding: 5px 14px;
    font-weight: 600;
}
.ch-hero-eyebrow-dot { background: var(--accent); }
/* CouponFollow keeps its hero heading readable, not poster-scale */
.ch-hero-heading {
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    letter-spacing: -0.02em;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    color: var(--text) !important;
}
.ch-hero-sub { color: var(--text-secondary); }

.ch-hero-search-field {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .ch-hero-search-field { background: var(--bg-input); }
.ch-hero-search-field > i.fa-search { color: var(--text-muted); }
.ch-hero-search-field input { background: transparent; }
.ch-hero-search-field button[type="submit"] {
    background: var(--accent);
    border-radius: 8px;
}
.ch-hero-search-field button[type="submit"]:hover { background: var(--accent-dark); }

.ch-hero-tag {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--accent-2);
    border-radius: 999px;
    font-weight: 600;
}
[data-theme="dark"] .ch-hero-tag { background: var(--bg-input); }
.ch-hero-tag:hover { border-color: var(--accent-2); }

/* No 3D stage / floating deal card / badges on the flat theme */
.ch-hero-stage { min-height: 0; }
.ch-hero-canvas, .ch-hero-badge { display: none !important; }
.ch-hero-deal {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transform: none !important;
    animation: none !important;
    padding: 22px;
}
[data-theme="dark"] .ch-hero-deal { background: var(--bg-card); }
/* Kill the decorative gradient blobs the old stage card carried */
.ch-hero-deal::before, .ch-hero-deal::after { display: none !important; }

/* ------------------------------------------------------------
   6. COUPON LIST ROW — the CouponFollow signature card.
   Markup:  <article class="ch-card ch-cf-row" data-tilt="0">
              <div class="ch-cf-offer">…big % + masked code…</div>
              <div class="ch-cf-main">…store, title, desc, meta…</div>
              <div class="ch-cf-action">…CTA + save…</div>
            </article>
   Keeps the .ch-card contract (data-coupon-id, .ch-unlock-btn,
   .ch-save-btn, .ch-card-reveal flip) so interactions.js works.
   ------------------------------------------------------------ */
.ch-card.ch-cf-row {
    flex-direction: row;
    align-items: stretch;
    height: auto;
    padding: 0;
    border-radius: 10px;
    gap: 0;
    overflow: hidden;
    /* Flat cards never 3D-rotate: the flip's rotateY would mirror the
       reveal face (overflow:hidden + flat transform-style break the
       preserve-3d chain). Rows and offer cards reveal by crossfade
       instead: front content fades, the face shows in place. */
    transform: none !important;
}
.ch-card.ch-cf-row.is-flipped { transform: none !important; }
.ch-card.ch-cf-row::before { display: none; }
.ch-card.ch-cf-row:hover {
    border-color: #d3d3d3;
    box-shadow: var(--card-hover-shadow);
    transform: none !important;
}
[data-theme="dark"] .ch-card.ch-cf-row:hover { border-color: #4a4d53; }

/* Rows reveal flat: no rotateY, just fade the face in over the row */
.ch-card.ch-cf-row .ch-card-reveal { transform: none !important; }
.ch-card.ch-cf-row .ch-card-reveal .ch-reveal-burst { display: none; }

.ch-cf-offer {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 14px;
    background: #f8f8f8;
    border-right: 1px solid var(--border);
    text-align: center;
}
[data-theme="dark"] .ch-cf-offer { background: var(--bg-elevated); }
.ch-cf-offer-pct {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.ch-cf-offer-pct small {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-top: 3px;
}
.ch-cf-offer-code {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    letter-spacing: 0.08em;
}
[data-theme="dark"] .ch-cf-offer-code { background: var(--bg-card); }
.ch-cf-offer-type {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.ch-cf-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ch-cf-main-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ch-cf-store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}
.ch-cf-store img {
    width: 28px; height: 28px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px;
}
[data-theme="dark"] .ch-cf-store img { background: var(--bg-input); }
.ch-cf-store .ch-verified { margin-left: 2px; }
.ch-cf-exclusive {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b45309;
    background: #fef3c7;
    border-radius: 4px;
    padding: 2px 8px;
}
[data-theme="dark"] .ch-cf-exclusive { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.ch-cf-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
}
a.ch-cf-title-link:hover .ch-cf-title { color: var(--accent-dark); }
.ch-cf-desc {
    font-size: 0.86rem;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-cf-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.ch-cf-meta i { font-size: 0.72rem; margin-right: 4px; }
.ch-cf-meta .ch-expiry.is-soon { color: #dc2626; }
.ch-cf-proof {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-dark);
    margin: 0;
}
[data-theme="dark"] .ch-cf-proof { color: var(--accent-light); }

.ch-cf-action {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px 18px;
    border-left: 1px solid var(--border-subtle);
}
/* The locked code row is not part of the row layout; the reveal
   happens on the flip face that interactions.js builds instead. */
.ch-cf-action .ch-code-row { display: none; }
.ch-cf-action .ch-unlock-btn,
.ch-cf-action .ch-cf-deal-btn {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
/* Keep the CF btn-reveal (code + deal) at one fixed height so a code
   button and a deal button never mismatch on the same card row. */
.ch-cf-action .ch-btn-reveal {
    height: 50px;
    padding: 0 14px 0 0;
    background: none;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.95rem;
}
.ch-cf-action .ch-btn-reveal.is-deal {
    padding: 0;
    background: var(--accent);
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.95rem;
}
.ch-cf-action .ch-btn-reveal.is-deal .ch-btn-cover {
    width: 100%;
    border-radius: 4px;
}
.ch-cf-action .ch-unlock-btn:hover,
.ch-cf-action .ch-cf-deal-btn:hover {
    background: var(--accent-dark);
    box-shadow: 0 2px 8px var(--accent-glow);
}
.ch-cf-action .ch-save-btn {
    align-self: flex-end;
    margin: 0;
    position: static;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
}
.ch-cf-action .ch-save-btn:hover {
    color: var(--heart);
    border-color: var(--heart-border);
    background: var(--heart-soft);
}
.ch-cf-action .ch-save-btn.ch-saved { color: var(--heart); border-color: var(--heart-border); }

/* Reveal face on a row: white panel over the row */
.ch-card.ch-cf-row .ch-card-reveal {
    border-radius: 10px;
    background: var(--bg-card);
}

/* ------------------------------------------------------------
   7b. OFFER CARD — CouponFollow store-page design
     (article.offer-card on couponfollow.com/site/<store>)
   Markup: <article class="ch-card ch-cf-offer" id="C<id>">
             .ch-cf-offer-box
               .ch-cf-discount      big value + OFF + code chip
               .ch-cf-offer-details logo/store, title, desc,
                                    insights, See Details
               .ch-cf-offer-right   save + green reveal CTA with
                                    peeking code strip
   ------------------------------------------------------------ */
.ch-card.ch-cf-offer {
    flex-direction: column;
    /* The base .ch-card centers its flex children; an offer card spans
       the full column so the discount / details / CTA columns line up
       on every row instead of each card shrink-wrapping to its text. */
    align-items: stretch;
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    transform: none !important;
    scroll-margin-top: 90px;
}
.ch-card.ch-cf-offer.is-flipped { transform: none !important; }
.ch-card.ch-cf-offer::before { display: none; }
.ch-card.ch-cf-offer:hover {
    border-color: #d3d3d3;
    box-shadow: var(--card-hover-shadow);
    transform: none !important;
}
[data-theme="dark"] .ch-card.ch-cf-offer:hover { border-color: #4a4d53; }

.ch-cf-offer-box {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 12px 14px;
    min-height: 104px;
    position: relative;
    z-index: 3;
}
/* Discount sits INLINE with its suffix, like CF's "<b>$10</b><span>OFF</span>" */
.ch-cf-discount {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    text-align: center;
}
.ch-cf-discount-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.ch-cf-discount-suffix {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 2px;
}
/* Legacy heading/paragraph margins leak into the offer card — kill them */
.ch-card.ch-cf-offer h3,
.ch-card.ch-cf-offer p,
.ch-card.ch-cf-offer .ch-cf-offer-title,
.ch-card.ch-cf-offer .ch-cf-offer-desc {
    margin: 0 !important;
}
/* Tight compact card layout - prevent overflow */
.ch-cf-offer-box {
    align-items: stretch !important;
}
.ch-cf-offer-details {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ch-cf-offer-store {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}
.ch-cf-offer-store .ch-verified,
.ch-cf-offer-store .ch-cf-exclusive { flex: 0 0 auto; }
.ch-cf-offer-store-name {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch-cf-offer-store img {
    width: 18px; height: 18px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 1px;
}
[data-theme="dark"] .ch-cf-offer-store img { background: var(--bg-input); }
.ch-cf-offer-store i { color: var(--text-muted); font-size: 0.75rem; }
.ch-cf-offer-store-name {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.ch-cf-offer-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    /* Two-line reservation keeps every row in a list the same height,
       even when one offer has a short one-line title. */
    min-height: 2.7em;
    margin: 2px 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-cf-offer-desc {
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-cf-insights {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: left;
    line-height: 1.4;
    margin-top: 2px;
}
.ch-cf-insights b { color: var(--text-secondary); font-weight: 600; }
.ch-cf-insights .is-ok { color: var(--accent-dark); font-weight: 500; white-space: nowrap; }
[data-theme="dark"] .ch-cf-insights .is-ok { color: var(--accent-light); }
.ch-cf-insights .is-bullet { color: var(--border); font-weight: 400; padding: 0 2px; }
.ch-cf-offer-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    width: 100%;
}
.ch-cf-details-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--accent-2) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ch-cf-details-toggle:hover { text-decoration: underline; }
.ch-cf-offer-expiry {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ch-cf-offer-expiry.is-soon { color: #dc2626; }

/* ---- Inline "See Details" drawer --------------------------------
   CF keeps shoppers on the listing by answering the follow-up
   questions in place instead of bouncing them to another page. The
   grid-row trick animates real content height without measuring it. */
.ch-cf-details-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--accent-2) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ch-cf-details-toggle:hover { text-decoration: underline; }
.ch-cf-dt-open { display: none; }
.ch-cf-dt-chev {
    font-size: 0.62rem;
    transition: transform .22s ease;
}
.ch-cf-offer.is-details-open .ch-cf-dt-closed { display: none; }
.ch-cf-offer.is-details-open .ch-cf-dt-open { display: inline; }
.ch-cf-offer.is-details-open .ch-cf-dt-chev { transform: rotate(180deg); }

.ch-cf-offer-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
    border-top: 0 solid var(--border);
    background: var(--bg-subtle, #f8fafc);
}
.ch-cf-offer.is-details-open .ch-cf-offer-more {
    grid-template-rows: 1fr;
    border-top-width: 1px;
}
.ch-cf-more-inner { overflow: hidden; min-height: 0; }
.ch-cf-more-body { padding: 16px 16px 18px; text-align: left; }
[data-theme="dark"] .ch-cf-offer-more { background: var(--bg-input); }

.ch-cf-more-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 14px;
}
.ch-cf-more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 14px;
}
.ch-cf-more-block h4,
.ch-cf-facts-wrap h4 {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ch-cf-more-block h4 i { color: var(--accent); font-size: 0.78rem; }
.ch-cf-more-block ol,
.ch-cf-more-block ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.ch-cf-more-block ol li,
.ch-cf-more-block ul li { margin-bottom: 4px; }
.ch-cf-reasons { list-style: none; padding-left: 0 !important; }
.ch-cf-reasons li {
    display: flex;
    gap: 7px;
    align-items: flex-start;
}
.ch-cf-reasons li i {
    color: var(--accent);
    font-size: 0.7rem;
    margin-top: 4px;
    flex: 0 0 auto;
}
.ch-cf-facts-wrap { margin-bottom: 12px; }
.ch-cf-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}
.ch-cf-facts > div {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 7px 9px;
    min-width: 0;
}
.ch-cf-facts dt {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.ch-cf-facts dd {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}
.ch-cf-more-terms {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.ch-cf-more-terms i { margin-top: 3px; flex: 0 0 auto; }
.ch-cf-more-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ch-cf-more-store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 6px;
    transition: background .16s ease;
}
.ch-cf-more-store:hover { background: var(--accent-dark); }
.ch-cf-more-page {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-2) !important;
    text-decoration: none;
}
.ch-cf-more-page:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .ch-cf-more-grid { grid-template-columns: 1fr; gap: 12px; }
    .ch-cf-facts { grid-template-columns: 1fr 1fr; }
    .ch-cf-more-actions { flex-direction: column; align-items: stretch; }
    .ch-cf-more-store { justify-content: center; }
    .ch-cf-more-page { text-align: center; }
}

.ch-cf-offer-right {
    flex: 0 0 168px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    padding-left: 12px;
}
/* Save heart sits top-right of the card instead of in the CTA column */
.ch-cf-offer .ch-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 4;
}
.ch-cf-offer .ch-save-btn:hover {
    color: var(--heart);
    border-color: var(--heart-border);
    background: var(--heart-soft);
}
.ch-cf-offer .ch-save-btn.ch-saved { color: var(--heart); border-color: var(--heart-border); }

/* The signature CouponFollow reveal button (btn-reveal):
   a dashed code chip full-width behind a solid cover. The code is
   revealed on click, while the offer-card CTA keeps a consistent size. */
.ch-cf-cta-wrap {
    width: 100%;
}
.ch-cf-offer .ch-cf-offer-right,
.ch-cf-offer .ch-cf-cta-wrap {
    min-width: 0;
}
.ch-cf-offer .ch-btn-reveal {
    display: block;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
}
.ch-cf-offer .ch-btn-reveal.is-deal {
    padding: 0;
    background: none;
}
.ch-cf-offer .ch-btn-reveal.is-deal .ch-btn-cover {
    width: 100%;
    height: 46px;
    border-radius: 4px;
}
.ch-btn-reveal {
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0 14px 0 0;      /* room for the code tail peeking right */
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    overflow: visible;
    transition: padding 0.1s;
    font: inherit;
}
.ch-btn-reveal .ch-btn-code {
    position: absolute;
    inset: 0 0 0 auto;         /* waits behind the cover, right-aligned */
    top: 0; left: auto; right: 0; bottom: 0;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    background: rgba(27, 188, 155, 0.10);
    border: 2px dashed var(--accent);
    border-radius: 4px;
    color: var(--text);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
[data-theme="dark"] .ch-btn-reveal .ch-btn-code {
    background: rgba(27, 188, 155, 0.18);
}
.ch-btn-reveal .ch-btn-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    height: 50px;
    width: calc(100% - 16px);  /* the tail pokes out on the right */
    padding: 0 8px;
    background: var(--accent);
    border: 2px solid transparent;
    border-radius: 4px 0 0 4px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    color: #fff !important;
    font-family: var(--font-display, inherit);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.1s, background 0.1s, padding 0.1s;
}
.ch-btn-reveal:hover { padding-right: 26px; }
.ch-btn-reveal:hover .ch-btn-cover {
    width: calc(100% - 28px);
    background: var(--accent-light);
}
[data-theme="dark"] .ch-btn-reveal .ch-btn-cover { background: var(--accent); }
[data-theme="dark"] .ch-btn-reveal:hover .ch-btn-cover { background: var(--accent-light); color: #06251f !important; }
/* Deals keep the same cover look without a code chip behind */
.ch-btn-reveal.is-deal .ch-btn-code { display: none; }
.ch-btn-reveal.is-deal { padding: 0; }
.ch-btn-reveal.is-deal .ch-btn-cover {
    width: 100%;
    border-radius: 4px;
}
/* ------------------------------------------------------------
   REVEALED STATE — CF's .btn-reveal.revealed: cover gone, the chip
   is static full-width with the code centered; a small tooltip below
   says "Click to copy code" (hover shows it, like CF's ::after).
   ------------------------------------------------------------ */
.ch-btn-reveal.is-revealed { padding: 0; }
.ch-btn-reveal.is-revealed .ch-btn-cover { display: none; }
.ch-btn-reveal.is-revealed .ch-btn-code {
    position: static;
    inset: auto;
    width: 100%;
    height: 50px;
    justify-content: center;
    padding: 0 12px;
    font-size: 1.05rem;        /* smaller than the peek so long codes fit */
    text-overflow: ellipsis;
    cursor: copy;
}
.ch-btn-reveal.is-revealed::after {
    content: "Click to copy code";
    position: absolute;
    left: 50%;
    bottom: -2.4rem;
    transform: translateX(-50%);
    z-index: 6;
    padding: 5px 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s;
    pointer-events: none;
}
.ch-btn-reveal.is-revealed::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.55rem;
    transform: translateX(-50%);
    z-index: 6;
    border-bottom: 7px solid var(--accent);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s;
    pointer-events: none;
}
.ch-btn-reveal.is-revealed:hover::after,
.ch-btn-reveal.is-revealed:hover::before,
.ch-btn-reveal.is-revealed:focus-visible::after,
.ch-btn-reveal.is-revealed:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* Compact reveal CTA inside offer cards only — the card is short
   now, so the 50px button would eat most of the row. */
.ch-cf-offer .ch-btn-reveal,
.ch-cf-offer .ch-btn-reveal .ch-btn-cover,
.ch-cf-offer .ch-btn-reveal .ch-btn-code { height: 46px; }
.ch-cf-offer .ch-btn-reveal .ch-btn-cover { font-size: 0.82rem; }
.ch-cf-offer .ch-btn-reveal .ch-btn-code { font-size: 1rem; }
.ch-cf-offer .ch-btn-reveal.is-revealed .ch-btn-code { font-size: 0.88rem; }

/* ------------------------------------------------------------
   8. NAV CATEGORIES DROPDOWN — header "Categories ▾" expands to a
   live list of top-level categories with store counts.
   ------------------------------------------------------------ */
.ch-nav-drop {
    position: relative;
}
.ch-nav-drop > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ch-nav-drop-caret {
    font-size: 0.6rem !important;
    transition: transform 0.2s;
}
.ch-nav-drop:hover .ch-nav-drop-caret,
.ch-nav-drop.is-open .ch-nav-drop-caret,
.ch-mnav-toggle.is-open .ch-nav-drop-caret {
    transform: rotate(180deg);
}
.ch-nav-drop-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 110;
    min-width: 380px;
    max-height: min(70vh, 460px);
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 2px 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
}
.ch-nav-drop:hover .ch-nav-drop-menu,
.ch-nav-drop.is-open .ch-nav-drop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(4px);
}
.ch-nav-drop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text) !important;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ch-nav-drop-item i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.ch-nav-drop-item:hover {
    background: var(--bg-elevated);
    color: var(--accent-dark) !important;
}
.ch-nav-drop-item:hover i { color: var(--accent); }
.ch-nav-drop-item .cnt {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-radius: 999px;
    padding: 2px 8px;
}
.ch-nav-drop-all {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 10px !important;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-2) !important;
}
.ch-nav-drop-all:hover { color: var(--accent-dark) !important; }

/* Mobile: collapsible category list inside the off-canvas nav */
.ch-mnav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.ch-mnav-toggle .ch-nav-drop-caret { margin-left: auto; font-size: 0.8rem !important; }
.ch-mnav-cats {
    display: none;
    padding: 2px 0 6px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.ch-mnav-cats.open { display: block; }
.ch-mnav-cats a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    color: var(--text) !important;
}
.ch-mnav-cats a i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.ch-mnav-cats a .cnt {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-radius: 999px;
    padding: 2px 8px;
}
.ch-mnav-cats a:hover { color: var(--accent-dark) !important; }

/* ------------------------------------------------------------
   9. STORE DIRECTORY — the couponfollow.com/site page: plain
   3-column text-link lists ("Store Coupons (N)"), an A-Z jump bar,
   and letter groups. CSS multi-columns, CF-style.
   ------------------------------------------------------------ */
.ch-dir-section {
    padding: 26px 0;
}
.ch-dir-section + .ch-dir-section {
    border-top: 1px solid var(--border);
    margin-top: 10px;
}
.ch-dir-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 1;
    column-gap: 36px;
}
@media (min-width: 768px) {
    .ch-dir-list { columns: 3; }
}
.ch-dir-list li {
    margin: 0;
    padding: 0 0 3px;
    break-inside: avoid-column;
}
.ch-dir-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin-left: -4px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text) !important;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.ch-dir-list a:hover {
    color: var(--accent-dark) !important;
    background: var(--bg-elevated);
}
.ch-dir-logo {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-theme="dark"] .ch-dir-logo { background: var(--bg-input); }
.ch-dir-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.ch-dir-logo-init {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-dark);
    background: rgba(27, 188, 155, 0.12);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .ch-dir-logo-init { color: var(--accent-light); background: rgba(27, 188, 155, 0.2); }
.ch-dir-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-dir-text .cnt {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}
.ch-dir-azbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.ch-dir-azbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary) !important;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ch-dir-azbar a:hover {
    color: var(--accent-dark) !important;
    border-color: var(--accent);
    background: var(--heart-soft);
}
.ch-dir-letter {
    margin-bottom: 26px;
    scroll-margin-top: 90px;
}
.ch-dir-letter-head {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
/* ------------------------------------------------------------
   10. TRENDING ROW — CouponFollow "Today's Trending Coupons"
   compact card: logo | big discount word | title + STORE NAME |
   one CTA. No description (client feedback #1).
   ------------------------------------------------------------ */
.ch-trend-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    transition: box-shadow 0.18s, border-color 0.18s;
}
.ch-trend-row-saveable { position: relative; }
.ch-trend-row-saveable > .ch-save-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 30px;
    height: 30px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}
.ch-trend-row-saveable > .ch-save-btn:hover,
.ch-trend-row-saveable > .ch-save-btn.ch-saved {
    border-color: var(--heart-border);
    background: var(--heart-soft);
    color: var(--heart);
}
.ch-trend-row:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.ch-trend-logo {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .ch-trend-logo { background: var(--bg-input); }
.ch-trend-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.ch-trend-logo .fas { font-size: 1.6rem; color: var(--text-muted); }
.ch-trend-offer {
    flex: 0 0 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ch-trend-big {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--text);
    letter-spacing: -0.02em;
}
.ch-trend-sub {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ch-trend-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ch-trend-title {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text) !important;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-trend-title:hover { color: var(--accent-dark) !important; }
.ch-trend-store {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent) !important;
    text-decoration: none;
}
.ch-trend-store:hover { text-decoration: underline; }
.ch-trend-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 11px 20px;
    border: 0;
    border-radius: 9px;
    background: #3258B3;
    color: #fff !important;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.ch-trend-cta:hover { background: #274797; transform: translateY(-1px); }
.ch-trend-cta:disabled,
.ch-trend-cta.is-loading { opacity: 0.72; cursor: wait; pointer-events: none; }
/* After the reveal the CTA becomes the dashed code chip, exactly like
   the card CTA: clicking it again copies. */
.ch-trend-cta.is-revealed {
    background: rgba(27, 188, 155, 0.10) !important;
    border: 2px dashed var(--accent);
    color: var(--text) !important;
    cursor: copy;
}
[data-theme="dark"] .ch-trend-cta.is-revealed { background: rgba(27, 188, 155, 0.18) !important; }
.ch-trend-cta.is-revealed:hover { transform: none; }
.ch-trend-cta.is-revealed .ch-chip-code { font-size: 0.8rem; }
.ch-trend-row > .ch-btn-reveal {
    flex: 0 0 190px;
    width: 190px;
    height: 42px;
    border-radius: 4px;
}
.ch-trend-row > .ch-btn-reveal .ch-btn-cover,
.ch-trend-row > .ch-btn-reveal .ch-btn-code { height: 42px; }
.ch-trend-row > .ch-btn-reveal .ch-btn-cover {
    width: calc(100% - 16px);
    border-radius: 4px 0 0 4px;
    font-size: 0.8rem;
}
.ch-trend-row > .ch-btn-reveal:hover { padding-right: 26px; }
.ch-trend-row > .ch-btn-reveal:hover .ch-btn-cover {
    width: calc(100% - 28px);
    background: var(--accent-light);
}
.ch-trend-row > .ch-btn-reveal.is-revealed .ch-btn-code { height: 42px; }
.ch-trend-row > .ch-btn-reveal.is-revealed .ch-btn-code {
    padding: 0 10px;
    font-size: 0.88rem;
    letter-spacing: 0.035em;
}
@media (max-width: 767px) {
    .ch-trend-row { flex-wrap: wrap; gap: 12px; }
    .ch-trend-logo { flex: 0 0 64px; width: 64px; height: 64px; }
    .ch-trend-offer { flex: 0 0 84px; }
    .ch-trend-big { font-size: 1.4rem; }
    .ch-trend-row > .ch-btn-reveal { flex: 1 0 100%; width: 100%; }
    .ch-trend-cta { width: 100%; }
    .ch-trend-row-saveable .ch-trend-info { padding-right: 36px; }
}

/* Store knowledge panel (client feedback #13) — CF-style sticky
   sidebar: Savings Snapshot, How to Redeem, Savings Hacks, FAQs. */
.ch-knowledge {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 84px;
}
.ch-kp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}
.ch-kp-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}
.ch-kp-title .fas { color: var(--accent); font-size: 0.95rem; }
.ch-kp-stats {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ch-kp-stats li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.ch-kp-stats li:last-child { border-bottom: none; }
.ch-kp-stats strong { color: var(--text); font-weight: 800; white-space: nowrap; }
.ch-kp-steps {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.ch-kp-steps b { color: var(--text); }
.ch-kp-hacks {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.ch-kp-faq details { margin-bottom: 10px; }
.ch-kp-faq summary { padding: 10px 12px; font-size: 0.88rem; }
.ch-kp-faq .ch-cf-faq-body { padding: 0 12px 10px; font-size: 0.85rem; }
@media (max-width: 991px) {
    .ch-knowledge { position: static; }
}

/* FAQ — CF-style: centered heading, full-width white cards,
   chevron that flips when open (client feedback #7). */
.ch-faq-wrap {
    width: 100%;
    max-width: 100%;
}
.ch-faq-wrap .ch-cf-faq {
    max-width: 100%;
}
.ch-cf-faq details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(20, 32, 54, 0.035);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ch-cf-faq details:hover {
    border-color: var(--border-accent);
    box-shadow: 0 9px 24px rgba(20, 32, 54, 0.07);
}
.ch-cf-faq details[open] {
    border-color: var(--accent);
    box-shadow: 0 10px 28px rgba(27, 188, 155, 0.10);
}
.ch-cf-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}
.ch-cf-faq details[open] summary { color: var(--accent-dark); }
.ch-cf-faq summary::-webkit-details-marker { display: none; }
.ch-cf-faq summary .fa-chevron-down {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(27, 188, 155, 0.10);
    font-size: 0.72rem;
    color: var(--accent-dark);
    transition: transform 0.2s, background 0.2s, color 0.2s;
}
.ch-cf-faq details[open] summary .fa-chevron-down {
    transform: rotate(180deg);
    background: var(--accent);
    color: #fff;
}
.ch-cf-faq-body {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-secondary);
}
@media (max-width: 575.98px) {
    .ch-cf-faq summary { padding: 14px; font-size: 0.96rem; }
    .ch-cf-faq-body { padding: 12px 14px 15px; font-size: 0.9rem; }
}

/* Reveal face on the offer card: flat white panel */
.ch-card.ch-cf-offer .ch-card-reveal {
    border-radius: 10px;
    background: var(--bg-card);
    transform: none !important;
}
.ch-card.ch-cf-offer .ch-card-reveal .ch-reveal-burst { display: none; }

/* ------------------------------------------------------------
   POPUP MODAL — CF's deal popup: dim backdrop, white panel, ticket
   badge, dashed code chip, Copy + Continue-to-store buttons.
   ------------------------------------------------------------ */
.ch-cf-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s;
}
.ch-cf-modal.is-open { opacity: 1; }
.ch-cf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 27, 29, 0.6);
    cursor: pointer;
}
.ch-cf-modal-panel {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    padding: 30px 28px 24px;
    text-align: center;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s;
}
.ch-cf-modal.is-open .ch-cf-modal-panel { transform: none; }
.ch-cf-modal-panel:focus { outline: none; }
.ch-cf-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}
.ch-cf-modal-x:hover { color: var(--text); background: var(--border-subtle); }
.ch-cf-modal-badge {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: rgba(27, 188, 155, 0.12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.ch-cf-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 4px;
}
.ch-cf-modal-store {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 18px;
}
.ch-cf-modal-code {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 188, 155, 0.10);
    border: 2px dashed var(--accent);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
[data-theme="dark"] .ch-cf-modal-code { background: rgba(27, 188, 155, 0.18); }
.ch-cf-modal-code-text {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ch-cf-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ch-cf-modal-copy {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.ch-cf-modal-copy:hover { background: var(--accent-dark); }
.ch-cf-modal-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--bg-elevated);
    color: var(--accent-2) !important;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 13px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.ch-cf-modal-go:hover { border-color: var(--accent); background: var(--heart-soft); }
.ch-cf-modal-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 14px 0 0;
}
body.is-modal-open { overflow: hidden; }

/* ------------------------------------------------------------
   ROW CHIPS — coupons.php/category/list rows: after reveal the green
   button becomes the same dashed CF chip; clicking copies the code.
   ------------------------------------------------------------ */
.ch-unlock-btn.is-code-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 188, 155, 0.10) !important;
    border: 2px dashed var(--accent);
    color: var(--text) !important;
    box-shadow: none;
    padding: 0 8px;
    cursor: copy;
}
[data-theme="dark"] .ch-unlock-btn.is-code-btn { background: rgba(27, 188, 155, 0.18) !important; }
.ch-chip-code {
    display: block;
    width: 100%;
    text-align: center;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   7c. STORE PAGE — CouponFollow "site/<store>" page furniture
   ------------------------------------------------------------ */
.ch-cf-storehead {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px;
}
.ch-cf-storehead-logo {
    flex: 0 0 110px;
    width: 110px; height: 110px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ch-cf-storehead-logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.ch-cf-storehead-logo i { color: var(--text-muted); font-size: 2rem; }
.ch-cf-storehead h1 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.ch-cf-storehead-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ch-cf-rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}
.ch-cf-rating .rate-box {
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    padding: 3px 9px;
    font-weight: 800;
}
.ch-cf-anchorlinks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ch-cf-anchorlinks a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-2);
}
.ch-cf-anchorlinks a:hover { text-decoration: underline; }

/* Coupon Highlights table */
.ch-cf-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 34px;
}
.ch-cf-hl-item {
    padding: 16px 18px;
    border-right: 1px solid var(--border-subtle);
    text-align: center;
}
.ch-cf-hl-item:last-child { border-right: none; }
.ch-cf-hl-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ch-cf-hl-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.ch-cf-hl-value em { font-style: normal; color: var(--accent); }

/* Type filter pills */
.ch-cf-typefilters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ch-cf-typefilters a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 18px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ch-cf-typefilters a:hover { border-color: var(--border-accent); color: var(--accent-dark); }
.ch-cf-typefilters a.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
}
[data-theme="dark"] .ch-cf-typefilters a { background: var(--bg-input); }
[data-theme="dark"] .ch-cf-typefilters a.is-active { background: var(--accent); }

@media (max-width: 767px) {
    /* CouponFollow's phone layout: the discount stays inline on the
       LEFT (never a full-width band), the offer details sit beside it,
       and the green CTA drops to a full-width row underneath. */
    .ch-cf-offer-box {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
        padding: 12px;
        min-height: 0;
    }
    .ch-cf-discount {
        flex: 0 0 64px;
        width: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        border-right: 1px solid var(--border-subtle);
        border-bottom: none;
        padding: 2px 8px 0 0;
        margin: 0 8px 0 0;
        text-align: left;
        overflow: hidden;
    }
    .ch-cf-discount-text {
        font-size: clamp(1.1rem, 5vw, 1.35rem);
        line-height: 1.1;
        max-width: 100%;
        white-space: nowrap;
    }
    .ch-cf-discount-suffix { font-size: 0.64rem; }
    .ch-cf-offer-details { flex: 1 1 0; min-width: 0; padding: 0 34px 0 0; gap: 3px; }
    .ch-cf-offer-store { gap: 5px; }
    .ch-cf-offer-store img { width: 22px; height: 22px; border-radius: 5px; }
    .ch-cf-offer-store-name { font-size: 0.75rem; }
    /* The word "Verified" costs more width than it adds on a phone —
       the insight line already says "Verified working …". Keep the tick. */
    .ch-cf-offer-store .ch-verified-text { display: none; }
    .ch-cf-offer-store .ch-verified { font-size: 0.8rem; }
    .ch-cf-offer-store .ch-cf-exclusive {
        font-size: 0.6rem;
        letter-spacing: 0.05em;
        padding: 1px 6px;
    }
    .ch-cf-offer-title { font-size: 0.95rem; }
    .ch-cf-insights {
        font-size: 0.7rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.7em;
    }
    .ch-cf-offer-right {
        flex: 0 0 100%;
        width: 100%;
        padding: 10px 0 0;
        margin-top: 10px;
        border-top: 1px solid var(--border-subtle);
    }
    .ch-cf-offer .ch-save-btn { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 0.76rem; }
    .ch-cf-highlights { grid-template-columns: repeat(2, 1fr); }
    .ch-cf-hl-item { border-bottom: 1px solid var(--border-subtle); }
    .ch-cf-hl-item:nth-child(2n) { border-right: none; }
    .ch-cf-hl-item:nth-last-child(-n+2) { border-bottom: none; }
    .ch-cf-storehead-logo { flex: 0 0 84px; width: 84px; height: 84px; }
}

/* ------------------------------------------------------------
   PHONE SEARCH + FILTER BAR — CouponFollow keeps both on ONE line
   (field + round icon button), so the coupon list starts higher.
   responsive.css stacks them; cf-theme.css loads after it, so these
   overrides win.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .ch-searchbox {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 4px 4px 4px 14px;
        border-radius: 14px;
    }
    .ch-searchbox > i.fa-search { display: inline-block; font-size: 0.9rem; }
    .ch-searchbox input { flex: 1 1 auto; padding: 10px 0; font-size: 0.95rem; }
    .ch-searchbox button[type="submit"] {
        flex: 0 0 auto;
        width: 46px;
        height: 44px;
        padding: 0;
        border-radius: 10px;
        font-size: 0;
    }
    .ch-searchbox button[type="submit"]::before {
        content: "\f002";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.95rem;
    }

    .ch-filterbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
        margin: 16px 0 20px;
    }
    .ch-filterbar-label { display: none; }
    .ch-filter-select { width: 100%; min-width: 0; }
    #chFilterSort { grid-column: 1 / -1; }
    .ch-filterbar .ch-btn { grid-column: 1 / -1; justify-content: center; }
    .ch-filter-clear {
        grid-column: 1 / -1;
        margin: 0;
        display: flex;
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   7. OFFER TABS (Best Deals / Staff Picks)
   ------------------------------------------------------------ */
.ch-cf-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.ch-cf-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.ch-cf-tab:hover { color: var(--text); }
.ch-cf-tab.is-active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
}
[data-theme="dark"] .ch-cf-tab.is-active { color: var(--accent-light); }
.ch-cf-tabpanel { display: none; }
.ch-cf-tabpanel.is-active { display: block; }

/* ------------------------------------------------------------
   8. MINI COUPON CARD (Staff Picks / small grids)
   ------------------------------------------------------------ */
.ch-cf-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ch-cf-mini:hover {
    border-color: var(--border-accent);
    box-shadow: var(--card-hover-shadow);
}
.ch-cf-mini-logo {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-theme="dark"] .ch-cf-mini-logo { background: var(--bg-input); }
.ch-cf-mini-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ch-cf-mini-logo i { color: var(--text-muted); }
.ch-cf-mini-body { min-width: 0; }
.ch-cf-mini-store {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.ch-cf-mini-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-cf-mini:hover .ch-cf-mini-title { color: var(--accent-dark); }
[data-theme="dark"] .ch-cf-mini:hover .ch-cf-mini-title { color: var(--accent-light); }
.ch-cf-mini-pct {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   STAFF PICKS — editorial "desk" cards (homepage only)
   ------------------------------------------------------------ */
.ch-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ch-staff-pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 16px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(27, 188, 155, 0.09), rgba(27, 188, 155, 0) 55%),
        var(--bg-card);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ch-staff-pick::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}
.ch-staff-pick:hover {
    transform: translateY(-2px);
    border-color: rgba(27, 188, 155, 0.5);
    box-shadow: 0 16px 30px -22px rgba(16, 23, 40, 0.55);
}
.ch-staff-rank {
    flex: 0 0 46px;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(27, 188, 155, 0.32);
    font-variant-numeric: tabular-nums;
}
.ch-staff-logo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
[data-theme="dark"] .ch-staff-logo { background: var(--bg-input); }
.ch-staff-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.ch-staff-logo i { color: var(--text-muted); }
.ch-staff-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ch-staff-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ch-staff-store {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
}
.ch-staff-stamp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(27, 188, 155, 0.14);
    color: var(--accent-dark);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
[data-theme="dark"] .ch-staff-stamp { color: var(--accent-light); }
.ch-staff-title {
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.ch-staff-pick:hover .ch-staff-title { color: var(--accent-dark); }
[data-theme="dark"] .ch-staff-pick:hover .ch-staff-title { color: var(--accent-light); }
.ch-staff-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.ch-staff-saving {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent-dark);
}
[data-theme="dark"] .ch-staff-saving { color: var(--accent-light); }
.ch-staff-expiry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.69rem;
    color: var(--text-muted);
}
.ch-staff-expiry.is-soon { color: #d97706; }
.ch-staff-arrow {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}
.ch-staff-pick:hover .ch-staff-arrow {
    color: var(--accent-dark);
    transform: translateX(3px);
}
[data-theme="dark"] .ch-staff-pick:hover .ch-staff-arrow { color: var(--accent-light); }
@media (max-width: 1199.98px) {
    /* The badge would sit over the label once the stat grid narrows. */
    .ch-wb-fresh-tag { display: none; }
}
@media (max-width: 860px) {
    .ch-staff-grid { grid-template-columns: 1fr; gap: 11px; }
    .ch-staff-pick { padding: 13px 14px 13px 13px; gap: 11px; }
    .ch-staff-rank { flex-basis: 34px; font-size: 1.55rem; }
    .ch-staff-logo { flex-basis: 42px; width: 42px; height: 42px; }
}

/* ------------------------------------------------------------
   9. TRENDING SEARCHES CLOUD
   ------------------------------------------------------------ */
.ch-cf-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ch-cf-cloud a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-2);
    background: var(--bg-elevated);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 16px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
[data-theme="dark"] .ch-cf-cloud a { background: var(--bg-input); }
.ch-cf-cloud a:hover {
    background: var(--accent-glow-soft);
    border-color: var(--border-accent);
    color: var(--accent-dark);
}
[data-theme="dark"] .ch-cf-cloud a:hover { color: var(--accent-light); }

/* ------------------------------------------------------------
   10. POPULAR STORES TILES
   ------------------------------------------------------------ */
.ch-cf-store-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
/* CouponFollow-style vertical store card: centered logo on top,
   name, coupon count, and a "View Coupons" CTA that lights up on
   hover (client request: Popular Stores same as couponfollow). */
.ch-cf-store-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 22px 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
/* Accent line slides in across the top edge on hover. */
.ch-cf-store-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #3258b3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.ch-cf-store-tile:hover::before { transform: scaleX(1); }
.ch-cf-store-tile:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 26px -14px rgba(27, 188, 155, 0.65);
    transform: translateY(-3px);
}
.ch-cf-store-tile-logo {
    width: 72px; height: 72px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
}
[data-theme="dark"] .ch-cf-store-tile-logo { background: var(--bg-input); }
.ch-cf-store-tile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.ch-cf-store-tile-logo i { color: var(--text-muted); font-size: 1.5rem; }
.ch-cf-store-tile-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    line-height: 1.25;
}
.ch-cf-store-tile-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ch-cf-store-tile-cta {
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
}
.ch-cf-store-tile-cta .fas { font-size: 0.7rem; transition: transform 0.2s; }
.ch-cf-store-tile:hover .ch-cf-store-tile-cta .fas { transform: translateX(3px); }
.ch-cf-store-tile:hover .ch-cf-store-tile-name { color: var(--accent-dark); }
[data-theme="dark"] .ch-cf-store-tile:hover .ch-cf-store-tile-name { color: var(--accent-light); }

/* ------------------------------------------------------------
   11. FAQ ACCORDION (native <details>)
   ------------------------------------------------------------ */
.ch-cf-faq { max-width: 100%; }
.ch-cf-faq details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.ch-cf-faq details[open] { border-color: var(--border-accent); }
.ch-cf-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    cursor: pointer;
}
.ch-cf-faq summary::-webkit-details-marker { display: none; }
.ch-cf-faq summary i {
    color: var(--accent);
    font-size: 0.8rem;
    transition: transform 0.25s;
}
.ch-cf-faq details[open] summary i { transform: rotate(45deg); }
.ch-cf-faq .ch-cf-faq-body {
    padding: 0 20px 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
}
#faq .ch-cf-faq details { margin-bottom: 16px; }
#faq .ch-cf-faq .ch-cf-faq-body {
    padding: 14px 18px 18px;
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ------------------------------------------------------------
   12. ARTICLE ROWS (Popular articles)
   ------------------------------------------------------------ */
.ch-cf-article-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.ch-cf-article-row:last-child { border-bottom: none; }
.ch-cf-article-thumb {
    flex: 0 0 58px;
    width: 58px; height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #1bbc9b, #3258b3);
}
.ch-cf-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-cf-article-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 8px;
    background: var(--accent-glow-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ch-cf-article-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.35;
}
.ch-cf-article-row:hover .ch-cf-article-title { color: var(--accent-dark); }
[data-theme="dark"] .ch-cf-article-row:hover .ch-cf-article-title { color: var(--accent-light); }
.ch-cf-article-date { font-size: 0.76rem; color: var(--text-muted); }
.ch-cf-article-row i.fa-arrow-right {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: transform 0.2s, color 0.2s;
}
.ch-cf-article-row:hover i.fa-arrow-right { color: var(--accent); transform: translateX(3px); }

/* ------------------------------------------------------------
   13. GRID CARDS (used on saved-coupons, 404, etc.)
     flatten to the CouponFollow look
   ------------------------------------------------------------ */
.ch-card {
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.ch-card:hover { box-shadow: var(--card-hover-shadow); }
.ch-card .ch-card-cta { border-radius: 8px; }
.ch-card-logo { border-radius: 8px; }

/* ------------------------------------------------------------
   14. MISC FLATTENING
   ------------------------------------------------------------ */
/* Category panels */
.ch-cat-panel { border-radius: 10px; box-shadow: var(--shadow-sm); }
/* Newsletter box */
.ch-newsletter {
    background: var(--hero-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 40px 24px;
}
.ch-sub-btn { background: var(--accent); border-radius: 8px; }
.ch-sub-btn:hover { background: var(--accent-dark); }
/* Blog cards */
.ch-blog-card { border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); }
.ch-blog-card:hover { box-shadow: var(--card-hover-shadow); }
/* Pagination */
.ch-pagination a,
.ch-pagination span { border-radius: 8px; }
.ch-pagination a:hover { border-color: var(--accent); color: var(--accent); }
/* Footer: light gray, flat */
.ch-footer { background: #f8f8f8; border-top: 1px solid var(--border); }
[data-theme="dark"] .ch-footer { background: var(--bg-surface); }

/* Footer links horizontal, CF-style (client feedback #6): plain
   columns side by side — no card boxes, no vertical stacking. */
.ch-footer-menu { gap: 48px; padding: 26px 0; }
.ch-footer-section {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    min-width: 150px;
}
[data-theme="dark"] .ch-footer-section { background: transparent; border: none; }
.ch-footer-section h6 { margin-bottom: 8px; }
/* Toasts */
.ch-toast { border-radius: 8px; }
/* Cursor glow layer off — the flat theme doesn't want it */
.ch-card-glow, .ch-card-shine { display: none; }
/* Hover hairline on grid cards: keep, already accent-tinted via tokens */

/* ------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .ch-cf-store-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .ch-cf-row { flex-direction: column; }
    .ch-cf-offer {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 12px;
    }
    .ch-cf-offer-pct { font-size: 1.4rem; }
    .ch-cf-offer-pct small { display: inline; margin: 0 0 0 4px; }
    .ch-cf-action {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        padding: 12px 16px;
    }
    .ch-cf-action .ch-unlock-btn,
    .ch-cf-action .ch-cf-deal-btn { flex: 1; }
    .ch-cf-action .ch-save-btn { align-self: center; }
    .ch-cf-store-grid { grid-template-columns: repeat(2, 1fr); }
    .ch-cf-tabs { overflow-x: auto; }
    .ch-cf-tab { white-space: nowrap; }
}
@media (max-width: 420px) {
    .ch-cf-store-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   BEST DEALS — CouponFollow's 3-up dc-card row (logo, store name,
   offer title, one CTA). Sits right under the hero.
   ------------------------------------------------------------ */
.ch-deal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.ch-deal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ch-deal-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 16px 32px -20px rgba(27, 188, 155, 0.75);
}
.ch-deal-card-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
}
[data-theme="dark"] .ch-deal-card-logo { background: var(--bg-input); }
.ch-deal-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ch-deal-card-logo i { color: var(--text-muted); font-size: 1.3rem; }
.ch-deal-card-store {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
}
.ch-deal-card-store:hover { color: var(--accent-dark); }
.ch-deal-card-title {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.ch-deal-card-title:hover { color: var(--accent-dark); }
[data-theme="dark"] .ch-deal-card-title:hover,
[data-theme="dark"] .ch-deal-card-store:hover { color: var(--accent-light); }
.ch-deal-card-cta {
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
button.ch-deal-card-cta {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ch-deal-card-cta .fas { font-size: 0.7rem; transition: transform 0.2s; }
.ch-deal-card-cta:hover .fas { transform: translateX(3px); }
.ch-deal-card-cta.is-revealed { color: var(--accent-dark) !important; }
.ch-deal-card-cta.is-revealed .ch-chip-code {
    padding: 4px 9px;
    border: 1px dashed var(--accent);
    border-radius: 6px;
    background: rgba(27, 188, 155, 0.09);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}
.ch-trend-list { display: flex; flex-direction: column; }
@media (max-width: 991.98px) {
    .ch-deal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .ch-deal-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   14. OFFER GRID (homepage Exclusive + coupons.php) — 2-up on
   desktop. Cards are intentionally compact so more coupons fit per
   screen without losing the CouponFollow proportions.
   ------------------------------------------------------------ */
.ch-offer-col { display: flex; }
.ch-offer-col .ch-card { flex: 1 1 auto; width: 100%; }
/* These basis values only make sense when the card lays out as a ROW.
   Below 768px the card stacks (flex-direction: column), where a
   flex-basis would turn into a fixed HEIGHT and waste vertical
   space — so they are gated behind the row layout. */
@media (min-width: 768px) {
    .ch-offer-col .ch-cf-offer-box { padding: 10px 12px; min-height: 96px; }
    .ch-offer-col .ch-cf-discount { flex: 0 0 88px; }
    .ch-offer-col .ch-cf-discount-text { font-size: 1.55rem; }
    .ch-offer-col .ch-cf-discount-suffix { font-size: 0.72rem; }
    .ch-offer-col .ch-cf-offer-details { padding: 0 12px; }
    .ch-offer-col .ch-cf-offer-title { font-size: 0.98rem; }
    .ch-offer-col .ch-cf-offer-right { flex: 0 0 168px; padding-left: 10px; }
    .ch-offer-col .ch-cf-offer-right .ch-btn-reveal { font-size: 0.82rem; }
}
/* At tablet width the cards go full-width (Bootstrap lg breakpoint),
   so a little extra room is fine again. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ch-offer-col .ch-cf-discount { flex: 0 0 110px; }
    .ch-offer-col .ch-cf-discount-text { font-size: 1.9rem; }
    .ch-offer-col .ch-cf-offer-right { flex: 0 0 180px; }
}

/* ============================================================
   12. WELCOME BAND (replaces the old text hero) — now a proper
   visual hero: soft accent gradient, floating orbs, headline,
   icon stat cards and quick category chips.
   ============================================================ */
.ch-welcome {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 320px at 12% -10%, rgba(27, 188, 155, 0.16), transparent 70%),
        radial-gradient(700px 300px at 92% 0%, rgba(50, 88, 179, 0.10), transparent 70%),
        linear-gradient(180deg, rgba(27, 188, 155, 0.05), transparent);
    border-bottom: 1px solid var(--border);
    padding: 40px 0 30px;
}
.ch-welcome-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
    animation: chOrbFloat 12s ease-in-out infinite alternate;
}
.ch-welcome-orb-a {
    width: 240px; height: 240px;
    background: rgba(27, 188, 155, 0.45);
    top: -120px; left: -60px;
}
.ch-welcome-orb-b {
    width: 200px; height: 200px;
    background: rgba(50, 88, 179, 0.30);
    top: -90px; right: 4%;
    animation-delay: -5s;
}
@keyframes chOrbFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(18px, 22px, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .ch-welcome-orb { animation: none; }
}
.ch-welcome .container { position: relative; z-index: 1; }
.ch-welcome-top { max-width: 760px; margin-bottom: 26px; }
.ch-welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(27, 188, 155, 0.12);
    border: 1px solid rgba(27, 188, 155, 0.28);
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
[data-theme="dark"] .ch-welcome-eyebrow { color: var(--accent-light); }
.ch-welcome-title {
    font-size: clamp(1.65rem, 3.1vw, 2.55rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
    color: var(--text);
}
.ch-welcome-title::after { display: none; }
.ch-welcome-sub {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 620px;
}
.ch-welcome-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.ch-wb-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: 0 1px 2px rgba(16, 23, 40, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ch-wb-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(27, 188, 155, 0.45);
    box-shadow: 0 10px 22px -12px rgba(27, 188, 155, 0.55);
}
.ch-wb-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(27, 188, 155, 0.18), rgba(27, 188, 155, 0.06));
    color: var(--accent-dark);
    font-size: 1rem;
}
[data-theme="dark"] .ch-wb-icon { color: var(--accent-light); }
.ch-wb-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ch-wb-num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.1;
}
.ch-wb-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* "Added Today" is the one live counter, so it gets its own accent
   treatment instead of looking like the three static stats. */
.ch-wb-stat-fresh {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #1bbc9b 0%, #109b82 55%, #0b7d6b 100%);
    border-color: transparent;
    box-shadow: 0 12px 26px -16px rgba(17, 155, 130, 0.85);
}
.ch-wb-stat-fresh::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -34px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.ch-wb-stat-fresh:hover {
    border-color: transparent;
    box-shadow: 0 18px 34px -16px rgba(17, 155, 130, 0.95);
}
.ch-wb-stat-fresh .ch-wb-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.ch-wb-stat-fresh .ch-wb-num,
.ch-wb-stat-fresh .ch-wb-label { color: #fff; }
.ch-wb-stat-fresh .ch-wb-label { opacity: 0.88; }
.ch-wb-num-word { font-size: 1.22rem !important; letter-spacing: 0; }
.ch-wb-fresh-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.32);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}
.ch-welcome-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}
.ch-welcome-chips-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}
.ch-welcome-chips-label .fas { color: #e67e22; }
.ch-welcome-chips a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
}
.ch-welcome-chips a:hover {
    border-color: var(--accent);
    color: var(--accent-dark) !important;
    background: rgba(27, 188, 155, 0.06);
    transform: translateY(-1px);
}
@media (max-width: 767px) {
    .ch-welcome { padding: 30px 0 24px; }
    .ch-welcome-stats { grid-template-columns: repeat(2, 1fr); }
    .ch-welcome-top { margin-bottom: 20px; }
}
@media (max-width: 420px) {
    .ch-welcome-stats { grid-template-columns: 1fr; }
}

/* Section headings get a short accent underline so each block
   reads as a distinct, branded section. */
.ch-section-head h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    margin-top: 10px;
    background: var(--accent);
}
.ch-section-head.text-center h2::after { margin-left: auto; margin-right: auto; }
.ch-welcome-title::after, .ch-section-head h1::after { display: none; }

/* Tab count badges */
.ch-cf-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(27, 188, 155, 0.14);
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: 1px;
}
.ch-cf-tab.is-active .ch-cf-tab-count {
    background: var(--accent);
    color: #fff;
}
[data-theme="dark"] .ch-cf-tab-count { color: var(--accent-light); }

/* ============================================================
   13. NEW FOOTER — CouponFollow-style rich footer
   ============================================================ */
.ch-ft {
    background: #101728;
    color: #c7cede;
    border-top: none;
    padding-top: 0;
}
[data-theme="dark"] .ch-ft { background: #0b1120; }
.ch-ft a { color: #c7cede; text-decoration: none; }
.ch-ft-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: rgba(27, 188, 155, 0.08);
    border: 1px solid rgba(27, 188, 155, 0.25);
    border-radius: 14px;
    padding: 20px 26px;
    margin: 30px 0 34px;
}
.ch-ft-news-copy .ch-ft-news-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ch-ft-news-copy .ch-ft-news-title .fas { color: var(--accent); }
.ch-ft-news-copy p { margin: 0; font-size: 0.85rem; color: #93a0b4; }
.ch-ft-news-form { display: flex; gap: 10px; flex: 0 0 auto; }
.ch-ft-news-form input {
    width: 280px;
    max-width: 60vw;
    padding: 11px 16px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.9rem;
}
.ch-ft-news-form input::placeholder { color: #8b97ab; }
.ch-ft-news-form button {
    padding: 11px 22px;
    border-radius: 9px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.15s;
}
.ch-ft-news-form button:hover { background: var(--accent-dark); }
.ch-ft-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 0.9fr 0.9fr;
    gap: 34px;
    padding-bottom: 30px;
}
.ch-ft-col .ch-ft-heading {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
}
.ch-ft-col ul { list-style: none; margin: 0; padding: 0; }
.ch-ft-col li { margin-bottom: 9px; }
.ch-ft-col a {
    font-size: 0.88rem;
    color: #b9c2d0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s;
}
.ch-ft-col a:hover { color: var(--accent); }
.ch-ft-count {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 1px 8px;
    color: #93a0b4;
}
.ch-ft-more { font-weight: 700; color: var(--accent) !important; }
.ch-ft-more .fas { font-size: 0.7rem; }
.ch-ft-about {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #93a0b4;
    margin: 12px 0 16px;
    max-width: 300px;
}
.ch-ft-social { display: flex; gap: 10px; }
.ch-ft-social a,
.ch-ft-social .ch-ft-social-static {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #c7cede !important;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.ch-ft-social .ch-ft-social-static { opacity: .55; }
.ch-ft-social a:hover {
    background: var(--accent);
    color: #fff !important;
    transform: translateY(-2px);
}
.ch-footer-logo { color: #fff; }
.ch-footer-logo span { color: var(--accent); }
.ch-footer-logo img { filter: brightness(1.15); }
.ch-ft .ch-footer-divider { border-color: rgba(255, 255, 255, 0.1); margin: 4px 0 18px; }
.ch-ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 26px;
}
.ch-ft-bottom .ch-copyright { color: #93a0b4; font-size: 0.82rem; margin: 0; }
.ch-ft-disclosure {
    font-size: 0.78rem;
    color: #7d8aa0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ch-ft-disclosure .fas { font-size: 0.75rem; }
@media (max-width: 991px) {
    .ch-ft-columns { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .ch-ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .ch-ft-columns { grid-template-columns: 1fr; }
    .ch-ft-news-form { width: 100%; }
    .ch-ft-news-form input { flex: 1 1 auto; width: auto; max-width: none; }
}

/* ============================================================
   14. BLOG / JOURNAL
   Shared by blog.php (listing) and blog-detail.php (article).
   Kept on the same tokens as the coupon pages so the journal looks
   like CouponFollow's editorial pages, not a separate theme.
   ============================================================ */

/* ---------- listing ---------- */
.ch-blog-hero .ch-welcome-title { max-width: 780px; }
.ch-blog-hero .ch-welcome-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) {
    .ch-blog-hero .ch-welcome-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ch-blog-body { padding: 38px 0 56px; }

.ch-blog-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
}
.ch-blog-cats-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-right: 4px;
}
.ch-blog-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary) !important;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
}
.ch-blog-cat:hover {
    border-color: var(--accent);
    color: var(--accent-dark) !important;
    background: rgba(27, 188, 155, 0.06);
    transform: translateY(-1px);
}
.ch-blog-cat.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
}
.ch-blog-cat.is-active .ch-blog-cat-n { background: rgba(255, 255, 255, 0.25); color: #fff; }
.ch-blog-cat-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(27, 188, 155, 0.12);
    color: var(--accent-dark);
    font-size: 0.72rem;
    font-weight: 800;
}
[data-theme="dark"] .ch-blog-cat-n { color: var(--accent-light); }

/* Featured post */
.ch-blog-featured {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 23, 40, 0.04);
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ch-blog-featured:hover {
    transform: translateY(-3px);
    border-color: rgba(27, 188, 155, 0.45);
    box-shadow: 0 18px 40px -22px rgba(16, 23, 40, 0.4);
}
.ch-blog-featured-media {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    background: linear-gradient(135deg, #1bbc9b, #3258b3);
}
.ch-blog-featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ch-blog-featured:hover .ch-blog-featured-media img { transform: scale(1.04); }
.ch-blog-featured-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ch-blog-featured-body {
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.ch-blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-dark);
}
[data-theme="dark"] .ch-blog-kicker { color: var(--accent-light); }
.ch-blog-featured-title {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--text) !important;
    margin: 0;
}
.ch-blog-featured-ex {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-blog-featured .ch-blog-more { margin-top: auto; }

.ch-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-muted);
}
.ch-blog-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ch-blog-meta .fas, .ch-blog-meta .far { color: var(--accent); font-size: 0.78rem; }
.ch-blog-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--accent-dark) !important;
    text-decoration: none !important;
}
[data-theme="dark"] .ch-blog-more { color: var(--accent-light) !important; }
.ch-blog-more .fas { transition: transform 0.18s ease; }
.ch-blog-featured:hover .ch-blog-more .fas,
.ch-blog-card:hover .ch-blog-more .fas { transform: translateX(4px); }

/* Card grid */
.ch-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}
.ch-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ch-blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(27, 188, 155, 0.45);
    box-shadow: 0 16px 32px -20px rgba(16, 23, 40, 0.35);
}
.ch-blog-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #1bbc9b, #3258b3);
}
.ch-blog-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ch-blog-card:hover .ch-blog-card-media img { transform: scale(1.05); }
.ch-blog-card-cat {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ch-blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
    flex: 1;
}
.ch-blog-card-title {
    font-size: 1.01rem;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.01em;
    color: var(--text) !important;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-blog-card-ex {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-blog-card-foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border-subtle);
}

/* Featured strip + newsletter */
.ch-blog-empty {
    text-align: center;
    padding: 64px 20px;
    border: 1px dashed var(--border);
    border-radius: 20px;
    background: var(--bg-card);
}
.ch-blog-empty i { font-size: 2.4rem; color: var(--accent); margin-bottom: 14px; display: block; }
.ch-blog-empty h3 { font-size: 1.2rem; margin-bottom: 6px; }

.ch-blog-cta {
    margin-top: 46px;
    border-radius: 20px;
    padding: 30px 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background:
        radial-gradient(500px 200px at 90% -20%, rgba(27, 188, 155, 0.35), transparent 70%),
        linear-gradient(120deg, #10313a, #16233f);
    color: #e8eef8;
}
.ch-blog-cta h2 { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0 0 4px; }
.ch-blog-cta p { margin: 0; color: #a9b8cf; font-size: 0.92rem; }
.ch-blog-cta .ch-btn { background: #1bbc9b; color: #04231d; }

/* ---------- article ---------- */
.ch-article-wrap { padding: 34px 0 60px; }
.ch-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 22px;
}
.ch-crumbs a { color: var(--text-muted) !important; text-decoration: none; }
.ch-crumbs a:hover { color: var(--accent-dark) !important; }
.ch-crumbs .fas { font-size: 0.62rem; opacity: 0.6; }

.ch-article-head { max-width: 860px; margin: 0 auto 26px; text-align: center; }
.ch-article-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(27, 188, 155, 0.1);
    border: 1px solid rgba(27, 188, 155, 0.25);
    color: var(--accent-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
[data-theme="dark"] .ch-article-cat { color: var(--accent-light); }
.ch-article-title {
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.032em;
    margin: 0 0 14px;
    color: var(--text);
}
.ch-article-deck {
    font-size: 1.03rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 720px;
    margin: 0 auto;
}
.ch-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.ch-article-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ch-article-meta .fas, .ch-article-meta .far { color: var(--accent); }
.ch-article-author {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-secondary) !important;
    font-weight: 700;
}
.ch-article-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1bbc9b, #3258b3);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}
.ch-article-cover {
    max-width: 1000px;
    margin: 0 auto 34px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #1bbc9b, #3258b3);
    aspect-ratio: 21 / 9;
}
.ch-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ch-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
    align-items: start;
}
.ch-article-prose {
    font-size: 1.06rem;
    line-height: 1.85;
    color: var(--text-secondary);
    min-width: 0;
}
.ch-article-prose > *:first-child { margin-top: 0; }
.ch-article-prose h2 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 2.2rem 0 0.75rem;
    line-height: 1.3;
}
.ch-article-prose h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 2.2rem 0 0.75rem;
    line-height: 1.3;
}
.ch-article-prose h3 {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.7rem 0 0.55rem;
}
.ch-article-prose p { margin: 0 0 1.15rem; }
.ch-article-prose strong { color: var(--text); }
.ch-article-prose ul,
.ch-article-prose ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.ch-article-prose li { margin-bottom: 0.5rem; }
.ch-article-prose li::marker { color: var(--accent); font-weight: 700; }
.ch-article-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.4rem 0; }
.ch-article-prose a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .ch-article-prose a { color: var(--accent-light); }
.ch-article-prose blockquote {
    margin: 1.6rem 0;
    padding: 18px 22px;
    border-left: 4px solid var(--accent);
    background: rgba(27, 188, 155, 0.07);
    border-radius: 0 12px 12px 0;
    font-size: 1.06rem;
    font-style: italic;
    color: var(--text-secondary);
}
.ch-article-prose blockquote p:last-child { margin-bottom: 0; }
.ch-article-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.92rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.ch-article-prose th,
.ch-article-prose td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
.ch-article-prose th {
    background: rgba(27, 188, 155, 0.08);
    color: var(--text);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ch-article-prose tr:last-child td { border-bottom: 0; }
.ch-article-prose code {
    background: rgba(15, 23, 42, 0.06);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.9em;
}
[data-theme="dark"] .ch-article-prose code { background: rgba(255, 255, 255, 0.08); }
.ch-callout {
    margin: 1.6rem 0;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(50, 88, 179, 0.07);
    border: 1px solid rgba(50, 88, 179, 0.18);
    font-size: 0.97rem;
    line-height: 1.7;
}
.ch-callout strong { color: var(--text); }
.ch-callout.is-tip { background: rgba(27, 188, 155, 0.08); border-color: rgba(27, 188, 155, 0.22); }
.ch-callout.is-warn { background: rgba(230, 126, 34, 0.09); border-color: rgba(230, 126, 34, 0.25); }

.ch-article-aside {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ch-aside-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}
.ch-aside-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ch-aside-title .fas { color: var(--accent); }
.ch-toc a {
    display: block;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--border);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.ch-toc a:hover, .ch-toc a.is-active {
    border-left-color: var(--accent);
    color: var(--accent-dark) !important;
}
[data-theme="dark"] .ch-toc a:hover, [data-theme="dark"] .ch-toc a.is-active { color: var(--accent-light) !important; }
.ch-toc a.is-sub { padding-left: 24px; font-size: 0.81rem; font-weight: 500; }

.ch-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 188, 155, 0.1);
    color: var(--accent-dark) !important;
    text-decoration: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.ch-share-btn:hover { background: var(--accent); color: #fff !important; transform: translateY(-2px); }
[data-theme="dark"] .ch-share-btn { color: var(--accent-light) !important; }
[data-theme="dark"] .ch-share-btn:hover { color: #04231d !important; }

.ch-aside-cta {
    border-radius: 14px;
    padding: 20px;
    color: #dbe6f5;
    background:
        radial-gradient(300px 160px at 110% -20%, rgba(27, 188, 155, 0.5), transparent 70%),
        linear-gradient(150deg, #10313a, #17233d);
}
.ch-aside-cta h3 { color: #fff; font-size: 1.02rem; font-weight: 800; margin: 0 0 6px; }
.ch-aside-cta p { font-size: 0.84rem; color: #a9b8cf; margin: 0 0 12px; }
.ch-aside-cta .ch-btn { width: 100%; justify-content: center; background: #1bbc9b; color: #04231d; }

/* Author + related */
.ch-author-box {
    margin-top: 40px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
}
.ch-author-avatar {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1bbc9b, #3258b3);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
}
.ch-author-box h3, .ch-author-box h4 { font-size: 1rem; font-weight: 800; margin: 0 0 4px; }
.ch-author-box p { font-size: 0.87rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

.ch-related { margin-top: 46px; }
.ch-related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.ch-related-head h2 { font-size: 1.3rem; font-weight: 800; margin: 0; }
.ch-related-head a { font-size: 0.84rem; font-weight: 700; color: var(--accent-dark) !important; text-decoration: none; }
[data-theme="dark"] .ch-related-head a { color: var(--accent-light) !important; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .ch-blog-featured { grid-template-columns: 1fr; }
    .ch-blog-featured-media { min-height: 240px; }
    .ch-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-article-layout { grid-template-columns: 1fr; gap: 30px; }
    .ch-article-aside { position: static; }
    .ch-aside-cta { display: none; }
}
@media (max-width: 767px) {
    .ch-blog-body { padding: 26px 0 42px; }
    .ch-blog-featured { border-radius: 16px; }
    .ch-blog-featured-body { padding: 22px 20px; }
    .ch-blog-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
    .ch-blog-cta { padding: 24px; }
    .ch-article-cover { aspect-ratio: 16 / 9; border-radius: 14px; }
    .ch-article-prose { font-size: 1rem; line-height: 1.78; }
    .ch-article-prose h2 { font-size: 1.3rem; }
    .ch-article-prose table { display: block; overflow-x: auto; }
    .ch-author-box { flex-direction: column; }
}