:root {
    --ktt-teal: #1f7f95;
    --ktt-teal-dark: #155f70;
    --ktt-teal-deep: #0f4856;
    --ktt-teal-light: #e8f4f7;
    --ktt-teal-muted: #f0f7f9;
    --ktt-teal-soft: #c5dde3;
    --ktt-teal-pale: #d6edf2;
    --ktt-sand: #faf8f5;
    --ktt-warm: #f5f0eb;
    --ktt-text: #2d3748;
    --ktt-text-light: #64748b;
    --ktt-text-muted: #94a3b8;
    --ktt-border: #e2e8f0;
    --ktt-success: #276749;
    --ktt-success-light: #d4edda;
    --ktt-danger: #c53030;
  }

  .ktt-renderer-root *, .ktt-renderer-root *::before, .ktt-renderer-root *::after { margin: 0; padding: 0; box-sizing: border-box; }


  .ktt-renderer-root {
    font-family: 'DM Sans', sans-serif;
    background: #f1f0ee;
    color: var(--ktt-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Card pages must never be wider than the viewport on mobile. Use
       `overflow-x: hidden` (universally supported — `clip` is ignored on older
       iOS Safari / some Samsung browsers, which is why it had no effect).
       Inner scrollers (the related carousel, the offer-history table) keep
       their own overflow-x:auto and still scroll internally. */
    overflow-x: hidden;
  }

  /* Compliance disclosure badge — non-affiliate / community-referral cards. */
  .ktt-disclosure {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  .ktt-disclosure--nonaffiliate,
  .ktt-disclosure--referral {
    background: var(--ktt-teal-muted);
    color: var(--ktt-teal-dark);
    border: 1px solid var(--ktt-teal-soft);
  }

  /* Anchor target offset — keeps headings clear of any fixed page header */
  [id="welcome-offer"],
  [id="earning-rates"],
  [id="key-benefits"],
  [id="katies-take"],
  [id="calculator"],
  [id="offer-history"] {
    scroll-margin-top: 80px;
  }

  /* All headings use DM Sans bold per KTT brand (matching live site) */
  .ktt-renderer-root h1, .ktt-renderer-root h2, .ktt-renderer-root h3, .ktt-renderer-root h4, .ktt-renderer-root h5, .ktt-renderer-root h6 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
  }

  /* Page Header */

  /* Card image wrappers — used to give the QMP-rendered <img> a nice surrounding container */
  .ktt-img-frame {
    background: var(--ktt-teal-muted);
    border-radius: 10px;
    padding: 14px;
    display: inline-block;
    line-height: 0;
  }
  .ktt-img-frame img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }

  /* ============================================
     FULL VIEW — Card Page (Portfolio Replacement)
     ============================================ */
  .ktt-full-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid var(--ktt-border);
    margin-bottom: 32px;  /* breathing room so the box shadow doesn't butt against the footer */
  }

  .ktt-full-compliance {
    font-size: 11px;
    color: var(--ktt-text-light);
    padding: 14px 30px;
    background: #f8fafc;
    border-bottom: 1px solid var(--ktt-border);
    line-height: 1.45;
  }
  .ktt-full-compliance strong { color: var(--ktt-text); }

  /* PROMO BANNER — KTT teal (replaces previous green gradient) */
  .ktt-promo-banner {
    background: var(--ktt-teal);
    color: white;
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.3px;
  }
  .ktt-promo-banner svg {
    width: 18px;
    height: 18px;
    fill: white;
    flex-shrink: 0;
  }

  .ktt-full-header {
    padding: 30px 30px 0;
  }
  .ktt-full-header h1 {
    font-size: 38px;
    color: var(--ktt-teal);
    margin-bottom: 8px;
    line-height: 1.15;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--ktt-teal-soft);
  }
  .ktt-full-header h1 a {
    color: var(--ktt-teal);
    text-decoration: none;
    transition: color 0.2s;
  }
  .ktt-full-header h1 a:hover { color: var(--ktt-teal-dark); }
  .ktt-full-publication-note {
    font-size: 12px;
    color: var(--ktt-text-light);
    margin-top: 12px;
  }

  .ktt-full-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px;
  }
  @media(min-width: 768px) {
    .ktt-full-grid { grid-template-columns: 320px 1fr; }
  }

  /* Left column wrapper — holds visual box + jump nav, sticky on desktop */
  .ktt-full-side {
    align-self: start;
  }
  @media (min-width: 768px) {
    .ktt-full-side {
      position: sticky;
      top: 20px;
    }
  }

  /* Left Column */
  .ktt-full-visual {
    background: var(--ktt-teal-muted);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    border: 1px solid var(--ktt-teal-soft);
  }

  /* Jump-to navigation */
  .ktt-jump-nav {
    background: white;
    border: 1px solid var(--ktt-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 18px;
  }
  .ktt-jump-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ktt-teal-dark);
    margin-bottom: 8px;
    letter-spacing: 0.2px;
  }
  .ktt-jump-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ktt-jump-list li {
    border-bottom: 1px dashed var(--ktt-border);
  }
  .ktt-jump-list li:last-child { border-bottom: none; }
  .ktt-jump-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--ktt-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s, padding-left 0.15s;
  }
  .ktt-jump-list a:hover {
    color: var(--ktt-teal);
    padding-left: 4px;
  }
  .ktt-jump-list a::after {
    content: '↓';
    color: var(--ktt-teal);
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
  }
  .ktt-jump-list a:hover::after {
    opacity: 1;
    transform: translateY(2px);
  }
  .ktt-full-visual .ktt-card-img-holder {
    margin-bottom: 20px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ktt-full-visual img.sh-quidget-markup {
    max-width: 220px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
  /* Apply link — plain text per Katie's compliance preference (no buttons) */
  .ktt-apply-link {
    display: block;
    color: var(--ktt-teal) !important;
    background: transparent;
    padding: 14px 0 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
    line-height: 1.3;
    text-align: center;
  }
  .ktt-apply-link:hover {
    color: var(--ktt-teal-dark) !important;
  }

  /* Advertiser disclosure inline trigger */
  /* Independent-data disclosure note (renders below the apply link when independent_data_disclosure=true) */
  .ktt-independent-disclosure {
    margin: 10px 0 6px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.5;
    font-style: italic;
    color: var(--ktt-text-light);
    background: var(--ktt-warm);
    border-left: 3px solid var(--ktt-teal-soft);
    border-radius: 4px;
    text-align: left;
  }

  .ktt-disclosure-trigger {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 4px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--ktt-text-light);
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    margin-bottom: 14px;
  }
  .ktt-disclosure-trigger:hover {
    color: var(--ktt-teal);
  }

  /* Disclosure modal */
  .ktt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 72, 86, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .ktt-modal-overlay.is-open {
    display: flex;
    opacity: 1;
  }
  .ktt-modal {
    background: white;
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    transform: scale(0.96);
    transition: transform 0.2s ease;
  }
  .ktt-modal-overlay.is-open .ktt-modal { transform: scale(1); }
  .ktt-modal-header {
    background: var(--ktt-teal);
    color: white;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .ktt-modal-header h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: white;
    margin: 0;
  }
  .ktt-modal-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
  }
  .ktt-modal-close:hover { background: rgba(255,255,255,0.2); }
  .ktt-modal-close svg { width: 18px; height: 18px; fill: white; }
  .ktt-modal-body {
    padding: 22px 24px 26px;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ktt-text);
  }
  .ktt-modal-body p { margin-bottom: 12px; }
  .ktt-modal-body p:last-child { margin-bottom: 0; }
  .ktt-modal-body a { color: var(--ktt-teal); }

  .ktt-schumer {
    text-align: left;
    font-size: 14px;
    border-top: 1px solid var(--ktt-teal-soft);
    padding-top: 15px;
    margin-top: 5px;
  }
  .ktt-schumer-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--ktt-teal-soft);
  }
  .ktt-schumer-row:last-child { border-bottom: none; }
  .ktt-schumer-label { font-weight: 600; color: var(--ktt-text-light); font-size: 13px; }
  .ktt-schumer-val { color: var(--ktt-text); font-size: 13px; font-weight: 600; }

  .ktt-rates-link {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
  }
  .ktt-rates-link a { color: var(--ktt-text-muted); text-decoration: underline; }

  /* Right Column */
  .ktt-full-details { padding-top: 5px; }

  .ktt-offer-highlight {
    font-size: 32px;
    font-weight: 700;
    color: var(--ktt-teal);
    margin-bottom: 14px;
    line-height: 1.1;
    font-family: 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ktt-offer-label {
    font-size: 16px;
    color: var(--ktt-text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 4px;
  }
  .ktt-offer-detail {
    font-size: 14px;
    color: var(--ktt-text);
    line-height: 1.6;
    margin-bottom: 8px;
  }

  /* Card meta tag pills — schema-driven status indicators */
  .ktt-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ktt-border);
  }
  .ktt-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s;
  }
  .ktt-meta-pill svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  .ktt-meta-currency {
    background: var(--ktt-teal);
    color: white;
  }
  .ktt-meta-currency svg { fill: white; }
  .ktt-meta-524 {
    background: white;
    color: var(--ktt-teal-dark);
    border: 1.5px solid var(--ktt-teal);
  }
  .ktt-meta-524 svg { fill: var(--ktt-teal); }
  .ktt-meta-keeper {
    background: var(--ktt-teal-muted);
    color: var(--ktt-teal-dark);
    border: 1px solid var(--ktt-teal-soft);
  }
  .ktt-meta-keeper svg { fill: var(--ktt-teal); }
  .ktt-meta-3year {
    background: var(--ktt-teal-deep);
    color: white;
  }
  .ktt-meta-3year svg { fill: white; }
  .ktt-meta-3year:hover {
    background: var(--ktt-teal);
    color: white;
    transform: translateY(-1px);
  }

  .ktt-section-heading {
    font-size: 16px;
    color: var(--ktt-text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding-bottom: 0;
    border: none;
    margin: 32px 0 16px;
  }

  /* Earning Rates — large teal number on left, description on right (matches live site) */
  .ktt-earn-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .ktt-earn-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 4px 0;
  }
  .ktt-earn-rate {
    font-family: 'DM Sans', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: var(--ktt-teal);
    line-height: 1;
    flex-shrink: 0;
    min-width: 70px;
    text-align: left;
  }
  .ktt-earn-cat {
    font-size: 14px;
    color: var(--ktt-text);
    line-height: 1.5;
    flex: 1;
  }

  /* Benefits — expandable details for short callout + longer description */
  .ktt-benefits-hint {
    font-size: 12px;
    color: var(--ktt-text-light);
    font-style: italic;
    margin-bottom: 12px;
    margin-top: -6px;
  }
  .ktt-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  @media(min-width: 550px) {
    .ktt-benefits-grid { grid-template-columns: 1fr 1fr; }
  }
  .ktt-benefit-item {
    background: white;
    border: 1px solid var(--ktt-border);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
  }
  .ktt-benefit-item:hover {
    border-color: var(--ktt-teal);
  }
  .ktt-benefit-item[open] {
    border-color: var(--ktt-teal);
    box-shadow: 0 2px 10px rgba(31,127,149,0.1);
  }
  .ktt-benefit-item summary {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--ktt-text);
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
  }
  .ktt-benefit-item summary::-webkit-details-marker { display: none; }
  .ktt-benefit-item summary:hover { background: var(--ktt-teal-muted); }
  .ktt-benefit-item summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ktt-teal);
    border-bottom: 2px solid var(--ktt-teal);
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-left: auto;
    margin-right: 4px;
    margin-top: -3px;
    flex-shrink: 0;
  }
  .ktt-benefit-item[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 3px;
  }
  .ktt-benefit-icon {
    width: 36px;
    height: 36px;
    background: var(--ktt-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ktt-benefit-icon svg {
    width: 18px;
    height: 18px;
    fill: white;
  }
  .ktt-benefit-text { line-height: 1.4; flex: 1; min-width: 0; }
  .ktt-benefit-detail {
    padding: 0 14px 14px 62px;
    font-size: 12.5px;
    color: var(--ktt-text-light);
    line-height: 1.55;
  }

  /* Offer History */
  /* The table can't shrink below its columns' content, so on narrow screens
     let it scroll horizontally inside the collapsible body instead of pushing
     the page wide. */
  #offer-history .ktt-collapsible-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ktt-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: white;
    border: 1px solid var(--ktt-border);
    border-radius: 8px;
    overflow: hidden;
  }
  .ktt-history-table th {
    background: #f8fafc;
    color: var(--ktt-text-light);
    font-weight: 600;
    text-align: left;
    padding: 10px 15px;
    border-bottom: 1px solid var(--ktt-border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ktt-history-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
  }
  .ktt-history-table tr:last-child td { border-bottom: none; }
  /* Optional notes paragraph below the table — only renders when the
     per-card `show_offer_history_notes` toggle is on. Parent
     .ktt-collapsible-body uses inline `padding:0` so the table can run
     edge-to-edge; this notes block needs its own padding to breathe. */
  .ktt-history-notes {
    margin: 0;
    padding: 16px 18px 18px;
    background: #fafbfc;
    border-top: 1px solid var(--ktt-border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ktt-text-light);
    font-style: italic;
  }

  /* Custom Offer Note — optional editorial block beneath the Welcome
     Offer. Used for alternative-offer commentary (referral codes,
     in-person offers, etc.). Styled to read as 'Katie speaking', not
     as a continuation of the bonus copy. */
  .ktt-custom-offer-note {
    margin: 12px 0 18px;
    padding: 12px 16px;
    background: var(--ktt-warm);
    border-left: 4px solid var(--ktt-teal);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ktt-text);
  }
  .ktt-custom-offer-note p {
    margin: 0 0 8px;
  }
  .ktt-custom-offer-note p:last-child {
    margin-bottom: 0;
  }
  .ktt-custom-offer-note a {
    color: var(--ktt-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .ktt-custom-offer-note a:hover {
    color: var(--ktt-teal-dark);
  }
  .ktt-custom-offer-note strong { color: var(--ktt-teal-deep); }
  .ktt-custom-offer-note em { font-style: italic; }
  .ktt-current-tag {
    background: var(--ktt-success-light);
    color: var(--ktt-success);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
  }
  .ktt-elevated-tag {
    background: var(--ktt-teal-soft);
    color: var(--ktt-teal-dark);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
  }

  /* ============================================
     INTERACTIVE VALUE CALCULATOR (KTT-styled)
     ============================================ */
  .ktt-vc {
    background: white;
    border: 2px solid var(--ktt-teal);
    border-radius: 12px;
    padding: 25px;
    margin: 15px 0 20px;
  }
  .ktt-vc-title {
    font-size: 18px;
    color: var(--ktt-text);
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    line-height: 1.3;
  }
  .ktt-vc-title .ktt-vc-card-name {
    color: var(--ktt-teal);
  }
  .ktt-vc-intro {
    text-align: center;
    font-size: 13px;
    color: var(--ktt-text-light);
    margin-bottom: 22px;
  }
  .ktt-vc-list { margin-bottom: 5px; }
  .ktt-vc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    transition: background-color 0.2s;
    gap: 12px;
  }
  .ktt-vc-row:hover { background-color: var(--ktt-teal-muted); }
  .ktt-vc-label-wrap {
    flex: 1;
    min-width: 0;
  }
  .ktt-vc-label {
    display: block;
    font-size: 14px;
    color: var(--ktt-text);
    line-height: 1.4;
    font-weight: 600;
  }
  .ktt-vc-description {
    display: block;
    font-size: 12px;
    color: var(--ktt-text-light);
    line-height: 1.45;
    margin-top: 2px;
    font-weight: 400;
  }
  .ktt-vc-input-wrap {
    display: flex;
    align-items: center;
    background: white;
    border: 1.5px solid var(--ktt-border);
    border-radius: 6px;
    transition: border-color 0.2s;
    flex-shrink: 0;
  }
  .ktt-vc-input-wrap:focus-within { border-color: var(--ktt-teal); }
  .ktt-vc-input-wrap span {
    padding: 0 4px 0 10px;
    font-size: 15px;
    color: var(--ktt-text-light);
    font-weight: 600;
  }
  .ktt-vc-input {
    width: 80px;
    padding: 8px 10px 8px 2px;
    font-size: 15px;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: 700;
    color: var(--ktt-text);
    font-family: 'DM Sans', sans-serif;
  }
  .ktt-vc-input:focus { outline: none; }
  .ktt-vc-input::-webkit-inner-spin-button,
  .ktt-vc-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .ktt-vc-input { -moz-appearance: textfield; }

  .ktt-vc-totals {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 2px solid var(--ktt-teal);
    text-align: center;
  }
  .ktt-vc-reset {
    background: transparent;
    color: var(--ktt-text-light);
    border: 1.5px solid var(--ktt-border);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 18px;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ktt-vc-reset:hover {
    border-color: var(--ktt-teal);
    color: var(--ktt-teal);
  }
  .ktt-vc-total-label {
    font-size: 14px;
    color: var(--ktt-text-light);
    margin-bottom: 4px;
    font-weight: 600;
  }
  .ktt-vc-total {
    font-family: 'DM Sans', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--ktt-teal);
    line-height: 1;
    margin-bottom: 14px;
  }
  .ktt-vc-fee {
    font-size: 13px;
    color: var(--ktt-text-light);
    margin-bottom: 12px;
  }
  .ktt-vc-fee strong { color: var(--ktt-text); }
  .ktt-vc-net-wrap {
    background: var(--ktt-teal-muted);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 6px;
  }
  .ktt-vc-net-label {
    font-size: 13px;
    color: var(--ktt-text);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .ktt-vc-net {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
  }
  .ktt-vc-net.positive { color: var(--ktt-teal); }
  .ktt-vc-net.negative { color: var(--ktt-danger); }

  /* Checklist Download */
  .ktt-checklist-cta {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--ktt-teal-muted);
    border: 1px solid var(--ktt-teal-soft);
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 20px;
  }
  .ktt-checklist-cta .icon {
    width: 44px;
    height: 44px;
    background: var(--ktt-teal);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ktt-checklist-cta .icon svg {
    width: 22px;
    height: 22px;
    fill: white;
  }
  .ktt-checklist-cta .text h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ktt-text);
    margin-bottom: 2px;
  }
  .ktt-checklist-cta .text p {
    font-size: 12px;
    color: var(--ktt-text-light);
    margin: 0;
  }
  .ktt-checklist-cta .dl-btn {
    margin-left: auto;
    background: var(--ktt-teal);
    color: white;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ktt-checklist-cta .dl-btn:hover { background: var(--ktt-teal-dark); }

  /* Collapsible CTA — used for Benefits Calculator and Offer History */
  .ktt-collapsible {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ktt-teal-soft);
  }
  .ktt-collapsible[open] {
    background: white;
  }
  .ktt-collapsible > summary {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--ktt-teal-muted);
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.2s;
  }
  .ktt-collapsible > summary::-webkit-details-marker { display: none; }
  .ktt-collapsible > summary:hover { background: var(--ktt-teal-pale); }
  .ktt-collapsible[open] > summary {
    border-bottom: 1px solid var(--ktt-teal-soft);
  }
  .ktt-collapsible-icon {
    width: 44px;
    height: 44px;
    background: var(--ktt-teal);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ktt-collapsible-icon svg {
    width: 22px;
    height: 22px;
    fill: white;
  }
  .ktt-collapsible-text { flex: 1; min-width: 0; }
  .ktt-collapsible-text h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ktt-text);
    margin-bottom: 2px;
  }
  .ktt-collapsible-text p {
    font-size: 12px;
    color: var(--ktt-text-light);
    margin: 0;
  }
  .ktt-collapsible-toggle {
    margin-left: auto;
    background: var(--ktt-teal);
    color: white;
    padding: 8px 18px;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ktt-collapsible-toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.2s;
  }
  .ktt-collapsible[open] .ktt-collapsible-toggle::after {
    transform: rotate(-135deg);
    margin-top: 2px;
  }
  .ktt-collapsible[open] .ktt-collapsible-toggle .label-open { display: none; }
  .ktt-collapsible:not([open]) .ktt-collapsible-toggle .label-close { display: none; }
  .ktt-collapsible-body {
    padding: 24px 22px;
    background: white;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ktt-text);
  }
  .ktt-collapsible-body p {
    margin: 0 0 14px;
  }
  .ktt-collapsible-body p:last-child {
    margin-bottom: 0;
  }
  .ktt-collapsible-body ul {
    margin: 4px 0 14px;
    padding-left: 22px;
  }
  .ktt-collapsible-body ul li {
    margin-bottom: 6px;
    line-height: 1.55;
  }
  .ktt-collapsible-body ul li:last-child {
    margin-bottom: 0;
  }
  .ktt-collapsible-body strong {
    color: var(--ktt-teal-dark);
  }

  /* Lounge Access Details — only renders when has_lounge_access=true */
  .ktt-lounge-section {
    margin: 28px 0;
    padding: 22px 24px 18px;
    background: linear-gradient(135deg, #f0f7f9 0%, #e6f0f3 100%);
    border: 1px solid var(--ktt-teal-soft);
    border-left: 4px solid var(--ktt-teal);
    border-radius: 10px;
  }
  .ktt-lounge-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ktt-teal-soft);
  }
  .ktt-lounge-header-icon {
    width: 36px;
    height: 36px;
    background: var(--ktt-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ktt-lounge-header-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
  }
  .ktt-lounge-section h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--ktt-teal-dark);
    margin: 0;
  }
  .ktt-lounge-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 10px 0;
    align-items: start;
    border-bottom: 1px dashed rgba(31, 127, 149, 0.2);
  }
  .ktt-lounge-row:last-of-type {
    border-bottom: none;
  }
  .ktt-lounge-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding-top: 4px;
  }
  .ktt-lounge-value {
    font-size: 13.5px;
    color: var(--ktt-text);
    line-height: 1.55;
  }
  .ktt-lounge-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ktt-lounge-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    background: white;
    color: var(--ktt-teal-dark);
    border: 1px solid var(--ktt-teal-soft);
  }
  .ktt-lounge-chip-primary {
    background: var(--ktt-teal);
    color: white;
    border-color: var(--ktt-teal);
  }
  .ktt-lounge-au-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
    vertical-align: 2px;
  }
  .ktt-lounge-au-paid {
    background: #fef3c7;
    color: #92400e;
  }
  .ktt-lounge-au-free {
    background: #d1fae5;
    color: #065f46;
  }
  .ktt-lounge-au-no {
    background: #fee2e2;
    color: #991b1b;
  }
  .ktt-lounge-notes {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--ktt-text-light);
    font-style: italic;
    line-height: 1.5;
  }
  .ktt-lounge-notes-icon {
    width: 14px;
    height: 14px;
    fill: var(--ktt-teal);
    flex-shrink: 0;
    margin-top: 2px;
  }
  @media (max-width: 640px) {
    .ktt-lounge-section {
      padding: 18px 16px 14px;
      margin: 22px 0;
    }
    .ktt-lounge-row {
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 12px 0;
    }
    .ktt-lounge-label {
      padding-top: 0;
    }
    .ktt-lounge-header h3 {
      font-size: 16px;
    }
  }

  /* Featured variant — Katie's Take stands out with deep-teal header.
     Doubled-up class selectors win against .ktt-compact-collapsibles overrides. */
  .ktt-collapsible.ktt-collapsible-featured {
    border-color: var(--ktt-teal-deep);
  }
  .ktt-compact-collapsibles .ktt-collapsible.ktt-collapsible-featured,
  .ktt-collapsible.ktt-collapsible-featured {
    background: white;
  }
  .ktt-compact-collapsibles .ktt-collapsible.ktt-collapsible-featured > summary,
  .ktt-collapsible.ktt-collapsible-featured > summary {
    background: var(--ktt-teal-deep);
  }
  .ktt-compact-collapsibles .ktt-collapsible.ktt-collapsible-featured > summary:hover,
  .ktt-collapsible.ktt-collapsible-featured > summary:hover {
    background: #134252;
  }
  .ktt-collapsible.ktt-collapsible-featured[open] > summary {
    border-bottom-color: var(--ktt-teal-deep);
  }
  .ktt-collapsible.ktt-collapsible-featured .ktt-collapsible-icon {
    background: white;
  }
  .ktt-collapsible.ktt-collapsible-featured .ktt-collapsible-icon svg {
    fill: var(--ktt-teal-deep);
  }
  .ktt-collapsible.ktt-collapsible-featured .ktt-collapsible-text h4 {
    color: white;
  }
  .ktt-collapsible.ktt-collapsible-featured .ktt-collapsible-text p {
    color: rgba(255, 255, 255, 0.85);
  }
  .ktt-collapsible.ktt-collapsible-featured .ktt-collapsible-toggle {
    background: white;
    color: var(--ktt-teal-deep);
  }
  .ktt-collapsible.ktt-collapsible-featured .ktt-collapsible-toggle::after {
    border-color: var(--ktt-teal-deep);
  }
  .ktt-collapsible.ktt-collapsible-featured .ktt-collapsible-toggle:hover {
    background: var(--ktt-teal-muted);
  }
  @media (max-width: 600px) {
    .ktt-collapsible > summary {
      flex-wrap: wrap;
      padding: 16px;
      gap: 12px;
    }
    .ktt-collapsible-text { flex: 1 1 calc(100% - 56px); }
    .ktt-collapsible-toggle {
      margin-left: 0;
      flex-basis: 100%;
      justify-content: center;
      padding: 10px 18px;
    }
    .ktt-collapsible-body { padding: 18px 16px; }
  }

  /* Related Articles section — full-width row with vertical dividers between columns */
  .ktt-related {
    margin: 0 30px 30px;
    padding: 28px 0 0;
    border-top: 1px solid var(--ktt-border);
  }
  .ktt-related-heading {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ktt-text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
  }
  /* Horizontal scroller: shows a row of cards; arrows appear (via JS) only when
     there are more than fit. A short list just centers with no arrows. Degrades
     gracefully — without JS the track is still natively scrollable. */
  .ktt-related-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ktt-related-track {
    display: flex;
    gap: 22px;
    flex: 1 1 auto;
    min-width: 0; /* shrink below content so it scrolls internally instead of widening the page */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 4px 2px;
  }
  .ktt-related-track.is-centered { justify-content: center; }
  .ktt-related-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
    max-width: 240px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
  }
  .ktt-related-arrow {
    flex: 0 0 auto;
    display: none; /* shown by JS only when the track overflows */
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--ktt-teal-soft);
    background: white;
    color: var(--ktt-teal-dark);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 72, 86, 0.10);
    transition: background 0.15s, color 0.15s, opacity 0.15s;
  }
  .ktt-related-arrow:hover { background: var(--ktt-teal-muted); }
  .ktt-related-arrow[disabled] { opacity: 0.35; cursor: default; }
  .ktt-related-carousel.has-overflow .ktt-related-arrow { display: inline-flex; }
  .ktt-related-card:hover { transform: translateY(-2px); }
  .ktt-related-thumb {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    background: var(--ktt-teal-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .ktt-related-thumb svg {
    width: 36px;
    height: 36px;
    fill: var(--ktt-teal);
    opacity: 0.55;
    transition: opacity 0.2s;
  }
  .ktt-related-card:hover .ktt-related-thumb svg { opacity: 0.85; }
  .ktt-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .ktt-related-info { padding-top: 2px; }
  .ktt-related-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: var(--ktt-teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
  }
  .ktt-related-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ktt-text);
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .ktt-related-card:hover .ktt-related-title { color: var(--ktt-teal); }
  .ktt-related-excerpt {
    font-size: 12px;
    color: var(--ktt-text-light);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Related Podcast Episodes — sibling section to related articles */
  .ktt-related-podcasts {
    margin-top: 0;
    border-top: 1px solid var(--ktt-border);
    padding-top: 28px;
  }
  .ktt-related-heading-icon {
    width: 16px;
    height: 16px;
    fill: var(--ktt-teal);
    vertical-align: -2px;
    margin-right: 6px;
  }
  .ktt-podcast-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  @media(min-width: 700px) {
    .ktt-podcast-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .ktt-podcast-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--ktt-border);
    transition: background-color 0.2s, transform 0.2s;
  }
  .ktt-podcast-card:last-child { border-bottom: none; }
  @media(min-width: 700px) {
    .ktt-podcast-card {
      border-bottom: none;
      border-right: 1px solid var(--ktt-border);
    }
    .ktt-podcast-card:last-child { border-right: none; padding-right: 0; }
    .ktt-podcast-card:first-child { padding-left: 0; }
  }
  .ktt-podcast-card:hover {
    background-color: var(--ktt-teal-muted);
  }
  .ktt-podcast-thumb {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ktt-teal) 0%, var(--ktt-teal-deep) 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .ktt-podcast-bg-icon {
    width: 36px;
    height: 36px;
    fill: white;
    opacity: 0.18;
  }
  .ktt-podcast-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
  }
  .ktt-podcast-play {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s;
  }
  .ktt-podcast-card:hover .ktt-podcast-play { transform: scale(1.15); }
  .ktt-podcast-play svg {
    width: 12px;
    height: 12px;
    fill: var(--ktt-teal);
    margin-left: 1px;
  }
  .ktt-podcast-info {
    flex: 1;
    min-width: 0;
  }
  .ktt-podcast-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .ktt-podcast-episode {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: var(--ktt-teal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .ktt-podcast-duration {
    font-size: 10px;
    color: var(--ktt-text-muted);
    font-weight: 600;
    padding-left: 8px;
    border-left: 1px solid var(--ktt-border);
  }
  .ktt-podcast-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--ktt-text);
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .ktt-podcast-card:hover .ktt-podcast-title { color: var(--ktt-teal); }
  .ktt-podcast-excerpt {
    font-size: 12px;
    color: var(--ktt-text-light);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }

  @media (max-width: 600px) {
    .ktt-related-podcasts { padding-top: 24px; }
    .ktt-podcast-card { padding: 14px 16px; gap: 12px; }
    .ktt-podcast-card:first-child { padding-top: 14px; }
    .ktt-podcast-thumb { width: 56px; height: 56px; }
    .ktt-podcast-bg-icon { width: 28px; height: 28px; }
    .ktt-podcast-play { width: 22px; height: 22px; bottom: 4px; right: 4px; }
    .ktt-podcast-title { font-size: 13.5px; }
    .ktt-podcast-excerpt { font-size: 11.5px; }
  }

  /* Compact view — collapsible sections wrapper */
  .ktt-compact-collapsibles {
    margin: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ktt-compact-collapsibles .ktt-collapsible {
    margin-top: 0;
    background: white;
  }
  .ktt-compact-collapsibles .ktt-collapsible > summary {
    background: white;
  }
  .ktt-compact-collapsibles .ktt-collapsible > summary:hover {
    background: var(--ktt-teal-muted);
  }
  .ktt-compact-full-review {
    color: var(--ktt-teal);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .ktt-compact-full-review:hover { color: var(--ktt-teal-dark); }
  @media (max-width: 600px) {
    .ktt-compact-collapsibles { margin: 0 18px 20px; }
  }

  /* Highlight rows — used inside Highlights collapsible (compact view) */
  .ktt-highlight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .ktt-highlight-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--ktt-teal-soft);
  }
  .ktt-highlight-row:first-child { padding-top: 4px; }
  .ktt-highlight-row:last-child { border-bottom: none; padding-bottom: 4px; }
  .ktt-highlight-icon {
    width: 32px;
    height: 32px;
    background: var(--ktt-teal-muted);
    border: 1.5px solid var(--ktt-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .ktt-highlight-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--ktt-teal);
  }
  .ktt-highlight-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ktt-highlight-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ktt-text);
    line-height: 1.3;
  }
  .ktt-highlight-detail {
    font-size: 12.5px;
    color: var(--ktt-text-light);
    line-height: 1.45;
  }
  @media (max-width: 600px) {
    .ktt-highlight-row { gap: 12px; padding: 10px 0; }
    .ktt-highlight-icon { width: 28px; height: 28px; }
    .ktt-highlight-icon svg { width: 14px; height: 14px; }
    .ktt-highlight-value { font-size: 13.5px; }
    .ktt-highlight-detail { font-size: 12px; }
  }

  /* ============================================
     COMPACT VIEW — Element (Best Offers / Blog)
     ============================================ */
  .ktt-compact-card {
    background: var(--ktt-teal-muted);
    border-radius: 14px;
    border: 1px solid var(--ktt-teal-soft);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    overflow: hidden;
    margin: 1em 0;
  }
  .ktt-compact-promo {
    background: var(--ktt-teal);
    color: white;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .ktt-compact-promo svg {
    width: 16px;
    height: 16px;
    fill: white;
    flex-shrink: 0;
  }
  .ktt-compact-compliance {
    font-size: 10px;
    color: var(--ktt-text-muted);
    padding: 10px 24px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ktt-border);
    line-height: 1.4;
  }

  .ktt-compact-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px;
  }
  @media(min-width: 650px) {
    .ktt-compact-body { grid-template-columns: 200px 1fr; gap: 24px; }
  }

  .ktt-compact-left {
    text-align: center;
    padding-bottom: 20px;
  }
  @media(min-width: 650px) {
    .ktt-compact-left {
      border-right: 1px solid var(--ktt-border);
      padding-right: 24px;
      padding-bottom: 0;
    }
  }
  .ktt-compact-left .ktt-card-img-holder {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }
  .ktt-compact-left img.sh-quidget-markup {
    max-width: 160px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .ktt-compact-apply {
    display: inline-block;
    color: var(--ktt-teal) !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
  }
  .ktt-compact-apply:hover { color: var(--ktt-teal-dark) !important; }

  /* Prominent annual fee block — sits above Welcome Offer in compact view */
  .ktt-compact-fee-block {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid var(--ktt-teal-soft);
    border-left: 4px solid var(--ktt-teal);
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 18px;
  }
  .ktt-compact-fee-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ktt-text-light);
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .ktt-compact-fee-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    line-height: 1;
  }

  .ktt-compact-right { padding-top: 4px; }
  .ktt-compact-right .ktt-compact-title {
    font-size: 24px;
    color: var(--ktt-text);
    margin-bottom: 3px;
    line-height: 1.2;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
  }
  .ktt-compact-right .ktt-compact-title a { color: var(--ktt-text); text-decoration: none; }
  .ktt-compact-right .ktt-compact-title a:hover { color: var(--ktt-teal); }
  /* Compact meta pills — sit between card name and welcome offer */
  .ktt-card-meta-compact {
    margin: 0 0 18px;
    padding-bottom: 0;
    border-bottom: none;
    gap: 6px;
  }
  .ktt-card-meta-compact .ktt-meta-pill {
    padding: 4px 10px;
    font-size: 11px;
  }
  .ktt-card-meta-compact .ktt-meta-pill svg {
    width: 11px;
    height: 11px;
  }

  .ktt-compact-offer-label {
    font-size: 13px;
    color: var(--ktt-text);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .ktt-compact-offer {
    font-family: 'DM Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--ktt-teal);
    margin-bottom: 6px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .ktt-compact-offer-detail {
    font-size: 13px;
    color: var(--ktt-text);
    margin-bottom: 4px;
    line-height: 1.55;
  }

  .ktt-compact-earn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  .ktt-compact-earn-chip {
    background: var(--ktt-teal-muted);
    border: 1px solid var(--ktt-teal-soft);
    border-radius: 6px;
    padding: 6px 10px;
    text-align: center;
    font-size: 12px;
  }
  .ktt-compact-earn-chip strong {
    color: var(--ktt-teal);
    font-weight: 800;
    margin-right: 3px;
  }

  .ktt-compact-take {
    font-size: 13px;
    color: var(--ktt-text);
    font-style: italic;
    border-left: 3px solid var(--ktt-teal);
    padding-left: 12px;
    margin-top: 14px;
    line-height: 1.55;
  }
  .ktt-compact-take strong {
    font-style: normal;
    color: var(--ktt-teal-dark);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
  }

  .ktt-compact-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
  }
  .ktt-compact-highlights span {
    background: #f8fafc;
    border: 1px solid var(--ktt-border);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    color: var(--ktt-text-light);
  }

  /* ============================================
     MINI VIEW — Inline Reference
     ============================================ */
  /* Wrapper added by [ktt-card-mini] templates/mini-card.php.
     As a plain direct child of `.is-layout-constrained`, WP gives the
     wrapper the standard content-width + auto-margin treatment. Inside it,
     the inner `.ktt-mini-card` (max-width 580px) is pinned to the left so
     it lines up with the content column's left edge instead of centering. */
  .ktt-mini-wrapper {
    margin: 1em 0;
    display: block;
  }
  .ktt-mini-wrapper .ktt-mini-card {
    margin-left: 0;
    margin-right: auto;
  }

  .ktt-mini-card {
    background: white;
    border: 1px solid var(--ktt-border);
    border-radius: 10px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 90px 1fr;
    column-gap: 16px;
    row-gap: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    max-width: 580px;
    transition: box-shadow 0.2s, border-color 0.2s;
    align-items: start;
  }
  .ktt-mini-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: var(--ktt-teal);
  }
  .ktt-mini-card .ktt-card-img-holder {
    width: 90px;
    min-height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    grid-row: 1 / span 2;
    padding-top: 2px;
  }
  .ktt-mini-card img.sh-quidget-markup {
    width: 90px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .ktt-mini-info { min-width: 0; padding-top: 0; }
  .ktt-mini-info h4 {
    font-size: 16px;
    margin: 0 0 3px;
    line-height: 1.2;
  }
  .ktt-mini-info h4 a { color: var(--ktt-text); text-decoration: none; }
  .ktt-mini-info h4 a:hover { color: var(--ktt-teal); }
  .ktt-mini-fee {
    font-size: 12px;
    color: var(--ktt-text-light);
    margin-bottom: 6px;
  }
  .ktt-mini-fee strong { color: var(--ktt-teal); font-weight: 700; }
  .ktt-mini-offer {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--ktt-teal);
    line-height: 1.45;
  }
  .ktt-mini-bonus-full {
    font-size: 12px;
    color: var(--ktt-text);
    line-height: 1.5;
    margin-top: 4px;
  }
  .ktt-independent-disclosure--mini {
    grid-column: 1 / -1;
    margin: 4px 0 0;
  }
  .ktt-mini-actions {
    grid-column: 1 / -1;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--ktt-border);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .ktt-mini-cta {
    color: var(--ktt-teal) !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
  .ktt-mini-cta:hover { color: var(--ktt-teal-dark) !important; }
  .ktt-mini-review {
    color: var(--ktt-text-light) !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
  }
  .ktt-mini-review:hover { color: var(--ktt-teal) !important; }
  .ktt-mini-disclosure {
    background: transparent;
    border: none;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--ktt-text-muted);
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    margin-left: auto;
  }
  .ktt-mini-disclosure:hover { color: var(--ktt-teal); }


  /* ============================================
     MOBILE RESPONSIVE — ≤600px
     ============================================ */
  @media (max-width: 600px) {

    /* Full view — tighten outer padding */
    .ktt-full-compliance { padding: 12px 18px; font-size: 10.5px; }
    .ktt-promo-banner { padding: 12px 18px; font-size: 13px; }
    .ktt-full-header { padding: 22px 18px 0; }
    .ktt-full-grid { padding: 22px 18px; gap: 22px; }

    .ktt-full-visual { padding: 20px 16px; }
    .ktt-full-visual img.sh-quidget-markup { max-width: 200px; }

    .ktt-jump-nav { padding: 14px 18px; margin-top: 16px; }
    .ktt-jump-title { font-size: 15px; }
    .ktt-jump-list a { padding: 10px 0; font-size: 13.5px; }

    .ktt-offer-label { font-size: 13px; letter-spacing: 1.2px; }
    .ktt-offer-highlight { font-size: 24px; }
    .ktt-section-heading { font-size: 14px; margin: 24px 0 12px; letter-spacing: 1.2px; }
    .ktt-full-header h1 { font-size: 28px; padding-bottom: 14px; }

    /* Earning rates — compress for mobile but keep big-number style */
    .ktt-earn-row { gap: 16px; align-items: flex-start; }
    .ktt-earn-rate { font-size: 30px; min-width: 50px; }
    .ktt-earn-cat { font-size: 13px; }

    /* Meta pills */
    .ktt-card-meta { gap: 6px; margin-bottom: 20px; padding-bottom: 18px; }
    .ktt-meta-pill { padding: 5px 10px; font-size: 11px; }
    .ktt-meta-pill svg { width: 11px; height: 11px; }

    /* Related articles — full width on mobile */
    .ktt-related { margin: 0 18px 24px; padding-top: 24px; }
    .ktt-related-heading { font-size: 14px; margin-bottom: 16px; }
    .ktt-related-thumb { height: 150px; }

    /* Calculator — stack input below label on narrow screens */
    .ktt-vc { padding: 18px 14px; }
    .ktt-vc-title { font-size: 19px; }
    .ktt-vc-intro { font-size: 12.5px; }
    .ktt-vc-row {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 12px 10px;
    }
    .ktt-vc-input-wrap {
      align-self: flex-end;
      min-width: 110px;
    }
    .ktt-vc-input { width: 80px; }
    .ktt-vc-total { font-size: 32px; }
    .ktt-vc-net { font-size: 22px; }

    /* Checklist CTA — stack button below on mobile */
    .ktt-checklist-cta {
      flex-wrap: wrap;
      padding: 16px;
      gap: 12px;
    }
    .ktt-checklist-cta .text { flex: 1 1 calc(100% - 56px); min-width: 0; }
    .ktt-checklist-cta .dl-btn {
      margin-left: 0;
      flex-basis: 100%;
      text-align: center;
      padding: 10px 18px;
    }

    /* Offer history — horizontal scroll if needed */
    .ktt-history-table { font-size: 12px; }
    .ktt-history-table th,
    .ktt-history-table td { padding: 8px 10px; }
    .ktt-history-table th { font-size: 10.5px; }

    /* Compact view */
    .ktt-compact-promo { padding: 10px 14px; font-size: 12.5px; }
    .ktt-compact-compliance { padding: 10px 18px; }
    .ktt-compact-body { padding: 20px 18px; }
    .ktt-compact-right h3 { font-size: 22px; }
    .ktt-compact-offer { font-size: 20px; }

    /* Mini view — adjust grid sizing for mobile */
    .ktt-mini-card {
      padding: 14px;
      grid-template-columns: 70px 1fr;
      column-gap: 12px;
    }
    .ktt-mini-card .ktt-card-img-holder { width: 70px; }
    .ktt-mini-card img.sh-quidget-markup { width: 70px; }
    .ktt-mini-info h4 { font-size: 15px; }
    .ktt-mini-fee { font-size: 11.5px; }
    .ktt-mini-bonus-full { font-size: 11.5px; }

    /* Related articles — additional mobile tweaks */
    .ktt-related-title { font-size: 14px; }
    .ktt-related-excerpt { font-size: 11.5px; }

    /* Apply link mobile */
    .ktt-apply-link { font-size: 14px; padding: 12px 0 4px; }

    /* Modal mobile */
    .ktt-modal-header { padding: 14px 18px; }
    .ktt-modal-header h3 { font-size: 17px; }
    .ktt-modal-body { padding: 18px 20px 22px; font-size: 13px; }
  }

  /* Extra-narrow phones (≤380px) */
  @media (max-width: 380px) {
    .ktt-full-header h1 { font-size: 22px; }
    .ktt-offer-highlight { font-size: 22px; }
    .ktt-vc-total { font-size: 28px; }
    .ktt-earn-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ======================================================
     Phase 4c.1 — [ktt-card-list], [ktt-affiliate-button],
     [ktt-card-list-toc] + section-divider auto-apply.
     ====================================================== */

  /* List wrapper — plain block element. As a direct child of
     `.is-layout-constrained`, WP gives it `max-width: content-size` and
     `margin: auto`, so it aligns to the same width as a Paragraph block.
     Nested `.ktt-compact-card.alignfull` is neutralised below so individual
     cards stay inside the wrapper instead of bleeding past it. */
  .ktt-card-list {
    margin: 1em 0;
  }
  .ktt-card-list .ktt-card-anchor {
    scroll-margin-top: 80px;
    margin-bottom: 36px;
  }
  .ktt-card-list .ktt-card-anchor:last-of-type {
    margin-bottom: 8px;
  }
  /* Inside a list the .ktt-card-anchor already provides inter-card spacing,
     so neutralise the standalone .ktt-compact-card top/bottom margin to
     avoid compounding. Also defensively neutralise any explicit align*
     class that might bleed past the wrapper. */
  .ktt-card-list .ktt-compact-card {
    margin: 0;
  }
  .ktt-card-list .ktt-compact-card.alignfull,
  .ktt-card-list .ktt-compact-card.alignleft,
  .ktt-card-list .ktt-compact-card.alignright,
  .ktt-card-list .ktt-compact-card.aligncenter {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    float: none;
  }

  /* Section-divider auto-apply: an h2 (or heading-block) that immediately
     follows a [ktt-card-list] wrapper gets a subtle teal rule and extra
     breathing room. Trigger is the `.ktt-card-list` wrapper itself — the
     previous `.ktt-card-list-end + h2` selector targeted a nested marker
     that is never an actual sibling of the next h2 in the DOM, so the
     rule never matched. */
  .ktt-card-list + h2,
  .ktt-card-list + h2.wp-block-heading,
  .ktt-card-list + .wp-block-heading {
    border-top: 1px solid rgba(31, 127, 149, 0.3);
    padding-top: 60px;
    margin-top: 30px;
  }

  /* Affiliate button — teal CTA used in section intros for "More
     Affiliate Offers" links. Placed manually by Katie. */
  .ktt-affiliate-button-wrap {
    margin: 18px 0;
  }
  .ktt-affiliate-button-wrap.is-align-left   { text-align: left; }
  .ktt-affiliate-button-wrap.is-align-center { text-align: center; }
  .ktt-affiliate-button-wrap.is-align-right  { text-align: right; }

  .ktt-affiliate-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ktt-teal);
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  }
  .ktt-affiliate-button:hover,
  .ktt-affiliate-button:focus {
    background: var(--ktt-teal-dark);
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.14);
  }
  .ktt-affiliate-button:active { transform: translateY(1px); }

  .ktt-affiliate-button.is-size-small  { padding: 8px 16px;  font-size: 13px; }
  .ktt-affiliate-button.is-size-medium { padding: 12px 24px; font-size: 15px; }
  .ktt-affiliate-button.is-size-large  { padding: 16px 32px; font-size: 17px; }

  .ktt-affiliate-button-icon { display: inline-flex; }
  .ktt-affiliate-button-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .ktt-affiliate-button.is-size-small  .ktt-affiliate-button-icon svg { width: 15px; height: 15px; }
  .ktt-affiliate-button.is-size-large  .ktt-affiliate-button-icon svg { width: 21px; height: 21px; }

  /* Auto-generated Table of Contents — collapsible by default. */
  .ktt-card-list-toc {
    background: var(--ktt-teal-muted);
    border: 1px solid var(--ktt-teal-soft);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 24px 0 28px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
  .ktt-card-list-toc.ktt-toc-collapsible > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--ktt-teal-deep);
    font-size: 15px;
    padding: 4px 0;
  }
  .ktt-card-list-toc.ktt-toc-collapsible > summary::-webkit-details-marker { display: none; }
  .ktt-card-list-toc.ktt-toc-collapsible > summary::after {
    content: ' ▾';
    color: var(--ktt-teal);
    font-size: 12px;
  }
  .ktt-card-list-toc.ktt-toc-collapsible[open] > summary::after {
    content: ' ▴';
  }
  .ktt-card-list-toc h3.ktt-toc-title {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--ktt-teal-deep);
  }
  .ktt-card-list-toc .ktt-toc-list {
    list-style: none;
    margin: 8px 0 0;
    padding-left: 0;
  }
  .ktt-card-list-toc .ktt-toc-list .ktt-toc-list {
    margin: 4px 0 4px 16px;
    padding-left: 8px;
    border-left: 2px solid rgba(31, 127, 149, 0.18);
  }
  .ktt-card-list-toc .ktt-toc-entry {
    margin: 3px 0;
  }
  .ktt-card-list-toc .ktt-toc-entry > a {
    color: var(--ktt-text);
    text-decoration: none;
    transition: color 0.15s;
  }
  .ktt-card-list-toc .ktt-toc-entry > a:hover,
  .ktt-card-list-toc .ktt-toc-entry > a:focus {
    color: var(--ktt-teal-dark);
    text-decoration: underline;
  }
  .ktt-card-list-toc .ktt-toc-h2 > a { font-weight: 700; color: var(--ktt-teal-deep); }
  .ktt-card-list-toc .ktt-toc-h3 > a { font-weight: 600; color: var(--ktt-teal); }
  .ktt-card-list-toc .ktt-toc-card > a { color: var(--ktt-text); }

  /* Mobile responsive — ToC stacks normally; collapse stays user-controlled. */
  @media (max-width: 600px) {
    .ktt-card-list-toc {
      margin: 18px 0 24px;
      padding: 12px 14px;
    }
    .ktt-affiliate-button.is-size-large { padding: 14px 24px; font-size: 16px; }
    .ktt-affiliate-button.is-size-medium { padding: 11px 20px; font-size: 14px; }
    .ktt-card-list + h2,
    .ktt-card-list + .wp-block-heading {
      padding-top: 40px;
      margin-top: 20px;
    }
  }

  /* ======================================================
     Phase 4c.2 — [ktt-card-filters] sticky filter bar.
     ====================================================== */

  .ktt-card-filters {
    margin: 1.5em 0 2em;
    font-family: 'DM Sans', sans-serif;
  }
  .ktt-card-filters__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ktt-teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
  }
  .ktt-card-filters__intro {
    font-size: 13px;
    color: var(--ktt-text-light);
    margin-bottom: 12px;
  }
  /* The bar itself sticks to the top of the viewport on scroll so the user
     can re-filter without scrolling up. Backdrop-filter softens content
     scrolling underneath. */
  .ktt-card-filters__bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ktt-teal-soft);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 12px rgba(15, 72, 86, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: flex-start;
  }
  .ktt-card-filters__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .ktt-card-filters__label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .ktt-card-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .ktt-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1.5px solid var(--ktt-teal-soft);
    color: var(--ktt-text);
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
    line-height: 1.4;
  }
  .ktt-filter-chip:hover {
    border-color: var(--ktt-teal);
    color: var(--ktt-teal-dark);
  }
  .ktt-filter-chip:active {
    transform: translateY(1px);
  }
  .ktt-filter-chip.is-active {
    background: var(--ktt-teal);
    border-color: var(--ktt-teal);
    color: white;
  }
  .ktt-filter-chip.is-active:hover {
    background: var(--ktt-teal-dark);
    border-color: var(--ktt-teal-dark);
    color: white;
  }
  .ktt-filter-chip.is-zero:not(.is-active) {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .ktt-filter-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    background: var(--ktt-teal-muted);
    color: var(--ktt-teal-dark);
    line-height: 1;
  }
  .ktt-filter-chip.is-active .ktt-filter-chip__count {
    background: rgba(255, 255, 255, 0.22);
    color: white;
  }
  .ktt-card-filters__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
  }
  .ktt-card-filters__summary {
    font-size: 12px;
    color: var(--ktt-text-light);
    font-weight: 600;
  }
  .ktt-card-filters__clear {
    background: transparent;
    border: 1.5px solid var(--ktt-border);
    color: var(--ktt-text-light);
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
  }
  .ktt-card-filters__clear:hover {
    border-color: var(--ktt-teal);
    color: var(--ktt-teal);
  }

  /* Filter-driven visibility. Using `display: none` rather than
     `visibility: hidden` so collapsed sections don't reserve layout space.
     QMP spans inside still parse/run regardless. */
  .ktt-card-anchor.is-filtered-out {
    display: none;
  }
  .ktt-section-collapsed {
    display: none !important;
  }

  /* Mobile: chip groups stack and the bar loses its actions row's auto-margin
     so the clear button wraps naturally under the chips. */
  @media (max-width: 720px) {
    .ktt-card-filters__bar {
      gap: 10px 16px;
      padding: 10px 12px;
      position: static;  /* Sticky on mobile competes with theme headers — disable. */
      backdrop-filter: none;
    }
    .ktt-card-filters__actions {
      margin-left: 0;
      width: 100%;
      justify-content: space-between;
    }
    .ktt-filter-chip {
      font-size: 12px;
      padding: 4px 10px;
    }
  }

  /* ======================================================
     KTT-themed landing pages.
     Triggered by `body.ktt-wide-page`, which is added when the current
     post uses [ktt-card-filters]. Widens the content column from the
     theme's default ~720px to 960px and gives H2/H3/intros the brand feel.
     ====================================================== */

  /* Width override — WP's constrained-layout sets `max-width: content-size`
     on direct children of .is-layout-constrained. Bump that to 960px just
     for pages that opt in (and only for the inner content, not the page
     header / footer the theme owns). */
  body.ktt-wide-page .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
  body.ktt-wide-page .entry-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
  body.ktt-wide-page .wp-block-post-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 960px;
  }

  /* H1 — page hero. Large, teal-deep, centered. */
  body.ktt-wide-page .entry-content > h1,
  body.ktt-wide-page .wp-block-post-content > h1 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    color: var(--ktt-teal-deep);
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1.1;
    margin: 0.4em 0 0.2em;
    text-align: center;
    letter-spacing: -0.5px;
  }
  body.ktt-wide-page .entry-content > h1 + p,
  body.ktt-wide-page .wp-block-post-content > h1 + p {
    text-align: center;
    color: var(--ktt-text-light);
    font-size: 17px;
    margin-bottom: 1.6em;
  }

  /* H2 — major section divider. Teal underline + accent bar. */
  body.ktt-wide-page h2.wp-block-heading,
  body.ktt-wide-page .entry-content > h2,
  body.ktt-wide-page .wp-block-post-content > h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    color: var(--ktt-teal-deep);
    font-size: 30px;
    line-height: 1.2;
    margin: 2.2em 0 0.6em;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ktt-teal-soft);
    position: relative;
    letter-spacing: -0.2px;
  }
  body.ktt-wide-page h2.wp-block-heading::after,
  body.ktt-wide-page .entry-content > h2::after,
  body.ktt-wide-page .wp-block-post-content > h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 96px;
    height: 4px;
    background: var(--ktt-teal);
    border-radius: 2px;
  }

  /* H3 — sub-section. Teal-dark, smaller, with a teal vertical bar accent. */
  body.ktt-wide-page h3.wp-block-heading,
  body.ktt-wide-page .entry-content > h3,
  body.ktt-wide-page .wp-block-post-content > h3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    font-size: 22px;
    line-height: 1.25;
    margin: 1.8em 0 0.5em;
    padding-left: 16px;
    border-left: 5px solid var(--ktt-teal);
  }

  /* Intro / editorial paragraphs — slightly larger + more relaxed line-height
     than the body default. Targets paragraphs that follow an H2 or H3. */
  body.ktt-wide-page h2 + p,
  body.ktt-wide-page h2.wp-block-heading + p,
  body.ktt-wide-page h3 + p,
  body.ktt-wide-page h3.wp-block-heading + p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ktt-text);
    margin-bottom: 0.8em;
  }
  /* Consecutive paragraphs after the intro one. */
  body.ktt-wide-page h2 + p + p,
  body.ktt-wide-page h3 + p + p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ktt-text);
  }

  /* Section-divider auto-rule (Phase 4c.1) duplicates the H2's own border —
     suppress it on .ktt-wide-page so we don't get a double underline. */
  body.ktt-wide-page .ktt-card-list + h2,
  body.ktt-wide-page .ktt-card-list + h2.wp-block-heading,
  body.ktt-wide-page .ktt-card-list + .wp-block-heading {
    border-top: none;
    padding-top: 0;
    margin-top: 2.2em;
  }

  /* Slightly tighter spacing around the filter bar so it doesn't feel
     stranded after the hero. */
  body.ktt-wide-page .ktt-card-filters {
    margin: 0.8em 0 1.4em;
  }

  /* ======================================================
     Phase 4c.4 — Floating [ktt-jump-nav] section nav.
     ====================================================== */

  .ktt-jump-nav-placeholder { display: none; }

  .ktt-jump-nav-floating {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;  /* below modal (9999), below sticky filter bar's z=50 */
    font-family: 'DM Sans', sans-serif;
    pointer-events: none;  /* let children opt back in so nav doesn't block content */
  }
  .ktt-jump-nav-floating.is-position-right {
    right: 18px;
  }
  .ktt-jump-nav-floating.is-position-left {
    left: 18px;
  }

  .ktt-jump-nav-toggle {
    pointer-events: auto;
    display: none;  /* hidden on desktop; visible on mobile via @media below */
    align-items: center;
    gap: 8px;
    background: var(--ktt-teal);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 10px 16px 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 72, 86, 0.25);
    transition: background 0.15s;
  }
  .ktt-jump-nav-toggle:hover { background: var(--ktt-teal-dark); }
  .ktt-jump-nav-toggle-icon {
    font-size: 16px;
    line-height: 1;
  }

  .ktt-jump-nav-panel {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ktt-teal-soft);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 6px 22px rgba(15, 72, 86, 0.10);
    max-width: 220px;
    min-width: 180px;
  }

  .ktt-jump-nav-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
  }

  .ktt-jump-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ktt-jump-nav-item {
    margin: 0;
    border-left: 3px solid transparent;
    transition: border-color 0.15s, background 0.15s;
  }
  .ktt-jump-nav-item.is-collapsed {
    display: none;
  }
  .ktt-jump-nav-item a {
    display: block;
    padding: 7px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ktt-text);
    text-decoration: none;
    line-height: 1.35;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
  }
  .ktt-jump-nav-item a:hover,
  .ktt-jump-nav-item a:focus {
    color: var(--ktt-teal);
    background: var(--ktt-teal-muted);
    outline: none;
  }
  .ktt-jump-nav-item a.is-active {
    color: var(--ktt-teal-deep);
    font-weight: 800;
    background: var(--ktt-teal-pale);
  }
  .ktt-jump-nav-item.ktt-jump-nav-h2 { margin-top: 2px; }
  .ktt-jump-nav-item.ktt-jump-nav-h3 a {
    padding-left: 22px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ktt-text-light);
  }
  .ktt-jump-nav-item.ktt-jump-nav-h3 a.is-active {
    color: var(--ktt-teal-dark);
    font-weight: 700;
    background: var(--ktt-teal-pale);
  }

  /* Desktop collapse-to-the-side control: fold the floating nav away so it
     doesn't cover card content; a small tab re-opens it (state persists via
     localStorage). Desktop-only (>1100px) — mobile keeps its own toggle. */
  .ktt-jump-nav-panel { position: relative; }
  .ktt-jump-nav-title { padding-right: 18px; }
  .ktt-jump-nav-collapse {
    pointer-events: auto;
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--ktt-text-light);
    padding: 2px 4px;
  }
  .ktt-jump-nav-collapse:hover { color: var(--ktt-teal); }
  .ktt-jump-nav-reopen {
    pointer-events: auto;
    display: none;
    background: var(--ktt-teal);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px 9px;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(15, 72, 86, 0.25);
  }
  .ktt-jump-nav-reopen:hover { background: var(--ktt-teal-dark); }
  @media (min-width: 1101px) {
    .ktt-jump-nav-collapse { display: block; }
    .ktt-jump-nav-floating.is-collapsed .ktt-jump-nav-panel { display: none; }
    .ktt-jump-nav-floating.is-collapsed .ktt-jump-nav-reopen { display: inline-flex; }
  }

  /* Hide the floating nav when the viewport is narrower than the
     content + nav width combined. Below 1100px, switch to the
     mobile toggle pattern. */
  @media (max-width: 1100px) {
    .ktt-jump-nav-floating {
      top: auto;
      bottom: 18px;
      transform: none;
    }
    .ktt-jump-nav-toggle {
      display: inline-flex;
    }
    .ktt-jump-nav-panel {
      display: none;
      margin-top: 10px;
      max-width: 78vw;
      min-width: 220px;
      max-height: 60vh;
      overflow-y: auto;
    }
    .ktt-jump-nav-floating.is-open .ktt-jump-nav-panel {
      display: block;
    }
    .ktt-jump-nav-floating.is-position-right {
      right: 14px;
    }
    .ktt-jump-nav-floating.is-position-left {
      left: 14px;
    }
    /* On mobile we anchor the panel to the toggle by placing it BELOW
       the toggle in flex order via column-reverse so the panel pops
       UP above the floating button. */
    .ktt-jump-nav-floating {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
    }
    .ktt-jump-nav-floating.is-position-left {
      align-items: flex-start;
    }
  }

  /* Prefer-reduced-motion: skip smooth-scroll (JS uses scrollTo behavior
     anyway, but we ensure CSS-driven transitions are minimal). */
  @media (prefers-reduced-motion: reduce) {
    .ktt-jump-nav-item,
    .ktt-jump-nav-item a,
    .ktt-jump-nav-toggle {
      transition: none;
    }
  }

  /* ======================================================
     Phase 4c.5 — [ktt-card-tile] + [ktt-card-grid] + Sort dropdown.
     ====================================================== */

  /* Responsive grid: 1 → 2 → 3 → 4 columns as viewport grows. */
  .ktt-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 1.2em 0;
  }
  @media (min-width: 500px)  { .ktt-card-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 820px)  { .ktt-card-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1080px) { .ktt-card-grid { grid-template-columns: repeat(4, 1fr); } }

  .ktt-card-tile-wrap { display: flex; }
  .ktt-card-tile-wrap.is-filtered-out { display: none; }

  /* Tile is an <article>; the image / title / CTA are independent anchors,
     and Katie's Take is a <details> in between. Hover effect drives off
     :hover on the article so it lights up regardless of which child gets
     focus. */
  .ktt-card-tile {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--ktt-border);
    border-radius: 12px;
    overflow: hidden;
    color: var(--ktt-text);
    box-shadow: 0 1px 3px rgba(15, 72, 86, 0.05);
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    width: 100%;
  }
  .ktt-card-tile:hover,
  .ktt-card-tile:focus-within {
    transform: translateY(-2px);
    border-color: var(--ktt-teal);
    box-shadow: 0 8px 22px rgba(15, 72, 86, 0.12);
  }

  .ktt-card-tile__image-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .ktt-card-tile__image-link:focus-visible {
    outline: 2px solid var(--ktt-teal);
    outline-offset: -2px;
  }

  .ktt-card-tile__image {
    background: var(--ktt-teal-muted);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    border-bottom: 1px solid var(--ktt-teal-soft);
  }
  .ktt-card-tile__image img {
    max-width: 100%;
    max-height: 110px;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }
  .ktt-card-tile__image-placeholder {
    width: 90px;
    height: 60px;
    color: var(--ktt-teal-soft);
  }
  .ktt-card-tile__image-placeholder svg {
    width: 100%;
    height: 100%;
  }

  .ktt-card-tile__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .ktt-card-tile__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ktt-text);
    line-height: 1.3;
    margin: 0;
  }
  .ktt-card-tile__title a {
    color: inherit;
    text-decoration: none;
  }
  .ktt-card-tile__title a:hover,
  .ktt-card-tile__title a:focus-visible {
    color: var(--ktt-teal);
    outline: none;
  }
  .ktt-card-tile:hover .ktt-card-tile__title a,
  .ktt-card-tile:focus-within .ktt-card-tile__title a {
    color: var(--ktt-teal);
  }
  .ktt-card-tile__meta {
    font-size: 11.5px;
    color: var(--ktt-text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .ktt-card-tile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
  }
  .ktt-card-tile__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .ktt-card-tile__badge--keeper {
    background: var(--ktt-teal-muted);
    color: var(--ktt-teal-dark);
    border: 1px solid var(--ktt-teal-soft);
  }
  .ktt-card-tile__badge--3yr {
    background: var(--ktt-teal-deep);
    color: white;
  }

  /* "Transfers to X" pill — populated by JS only when a currency filter
     is active AND the card matched through a transfer relationship (not
     a direct earn). Hidden via the `hidden` attribute by default. */
  .ktt-transfers-pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    padding: 4px 9px;
    margin: 0 0 8px;
    border-radius: 4px;
    background: var(--ktt-teal-pale);
    color: var(--ktt-teal-dark);
    border: 1px solid var(--ktt-teal-soft);
  }
  .ktt-transfers-pill[hidden] {
    display: none;
  }
  /* Tile context — sit above the fee block. */
  .ktt-card-tile__transfers-pill {
    align-self: flex-start;
  }
  /* Compact context — sit right under the title, above meta pills. */
  .ktt-compact-card__transfers-pill {
    margin-top: 4px;
  }

  /* Annual fee + welcome offer — shown together for QMP compliance.
     Sits between badges and Katie's Take so the most useful info is
     above the fold of the tile. */
  .ktt-card-tile__fee {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0 4px;
    border-top: 1px dashed var(--ktt-teal-soft);
    margin-top: 4px;
  }
  .ktt-card-tile__fee-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ktt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }
  .ktt-card-tile__fee-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
  }
  .ktt-card-tile__offer-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ktt-text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 3px;
  }
  .ktt-card-tile__offer-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ktt-text);
  }
  .ktt-card-tile__offer-body em {
    color: var(--ktt-text-light);
    font-style: italic;
  }

  /* Katie's Take expandable — editorial copy that keeps the page out
     of marketplace territory (FTC). */
  .ktt-card-tile__take {
    margin-top: 4px;
    border: 1px solid var(--ktt-teal-soft);
    border-radius: 8px;
    background: var(--ktt-teal-muted);
    overflow: hidden;
  }
  .ktt-card-tile__take-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 11px;
    list-style: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    user-select: none;
  }
  .ktt-card-tile__take-summary::-webkit-details-marker { display: none; }
  .ktt-card-tile__take-summary::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--ktt-teal-dark);
    border-bottom: 2px solid var(--ktt-teal-dark);
    transform: rotate(45deg);
    transition: transform 0.15s;
    flex-shrink: 0;
    margin-left: 8px;
    margin-top: -3px;
  }
  .ktt-card-tile__take[open] .ktt-card-tile__take-summary::after {
    transform: rotate(-135deg);
    margin-top: 2px;
  }
  .ktt-card-tile__take-summary:hover { background: var(--ktt-teal-pale); }
  .ktt-card-tile__take-body {
    padding: 0 12px 12px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ktt-text);
    background: white;
    border-top: 1px solid var(--ktt-teal-soft);
  }
  .ktt-card-tile__take-body p { margin: 8px 0 0; }
  .ktt-card-tile__take-body p:first-child { margin-top: 10px; }

  .ktt-card-tile__cta {
    margin-top: auto;
    padding-top: 10px;
    color: var(--ktt-teal);
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-top: 1px dashed var(--ktt-teal-soft);
    text-decoration: none;
  }
  .ktt-card-tile__cta:hover,
  .ktt-card-tile__cta:focus-visible {
    color: var(--ktt-teal-dark);
    outline: none;
  }
  .ktt-card-tile:hover .ktt-card-tile__cta,
  .ktt-card-tile:focus-within .ktt-card-tile__cta {
    color: var(--ktt-teal-dark);
  }

  /* Rewards System multi-select dropdown. Replaces the chip row for
     groups whose definition includes render='dropdown'. Same underlying
     filter state model as chips — each option button is still a
     .ktt-filter-chip with data-filter-group/value — but visually they
     live inside a <details> panel grouped by section. */
  .ktt-card-filters__dropdown {
    position: relative;
  }
  .ktt-card-filters__dropdown[open] > summary {
    border-color: var(--ktt-teal);
    color: var(--ktt-teal-dark);
  }
  .ktt-card-filters__dropdown.has-active > summary {
    background: var(--ktt-teal-muted);
    border-color: var(--ktt-teal);
    color: var(--ktt-teal-dark);
  }
  .ktt-card-filters__dropdown-trigger {
    list-style: none;
    cursor: pointer;
    background: white;
    border: 1.5px solid var(--ktt-teal-soft);
    color: var(--ktt-text);
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    user-select: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .ktt-card-filters__dropdown-trigger::-webkit-details-marker { display: none; }
  .ktt-card-filters__dropdown-trigger:hover {
    border-color: var(--ktt-teal);
    color: var(--ktt-teal-dark);
  }
  .ktt-card-filters__dropdown-trigger-count {
    display: inline-block;
    min-width: 14px;
  }
  .ktt-card-filters__dropdown-trigger-caret {
    font-size: 10px;
    transition: transform 0.15s;
  }
  .ktt-card-filters__dropdown[open] .ktt-card-filters__dropdown-trigger-caret {
    transform: rotate(180deg);
  }
  .ktt-card-filters__dropdown-panel {
    /* In-flow (accordion) rather than a floating layer: the panel drops below
       the trigger in normal document flow, so it can never overflow the
       viewport regardless of screen size or where the trigger sits. The group
       widens to a full bar row while open (see the :has rule below) so the
       options have room. */
    margin-top: 8px;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--ktt-teal-soft);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 22px rgba(15, 72, 86, 0.12);
  }
  .ktt-card-filters__dropdown-section + .ktt-card-filters__dropdown-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--ktt-teal-soft);
  }
  .ktt-card-filters__dropdown-section-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }
  .ktt-card-filters__dropdown-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
  }
  .ktt-filter-chip--dropdown {
    font-size: 12px;
    padding: 4px 10px;
  }
  /* While a dropdown is open, give its group a full bar row so the in-flow
     panel spans the available width. Closed groups stay trigger-width. If
     :has() is unavailable the panel still renders in-flow (just narrower) —
     never off-screen. */
  .ktt-card-filters__group--dropdown:has( .ktt-card-filters__dropdown[open] ) {
    flex-basis: 100%;
  }

  /* Sort dropdown (sits beside the filter chip groups). */
  .ktt-card-filters__sort {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .ktt-card-filters__sort-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ktt-teal-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .ktt-card-filters__sort-select {
    background: white;
    border: 1.5px solid var(--ktt-teal-soft);
    border-radius: 999px;
    padding: 5px 30px 5px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ktt-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%231f7f95'><path d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 8px;
    transition: border-color 0.15s;
  }
  .ktt-card-filters__sort-select:hover,
  .ktt-card-filters__sort-select:focus {
    border-color: var(--ktt-teal);
    outline: none;
  }

  /* ======================================================
     Avada theme-compat overrides — Compact card image + title only.
     ======================================================

     Targeted fix for the two specific divergences confirmed in a
     June 15 screenshot: image rendering too small / unaligned in the
     left column, and h4 card title falling back to Avada's ~16-18px
     default instead of our 24px design. Both stem from Avada CSS
     loaded later than ours and / or with equal-or-higher specificity.

     Important: this block deliberately does NOT touch any
     .ktt-collapsible styles — the prior attempt's blanket override
     trampled the .ktt-collapsible-featured (Katie's Take) variant's
     teal-deep summary background. Collapsibles + featured styling
     are left to the original CSS rules above. */

  /* Card image: anchor the design size on both QMP-rendered and
     manual <img> elements. Avada's `.fusion-text img` rules tend to
     set width:auto + max-width:100%, which shrinks the QMP image
     down to its source-asset native dimensions. */
  body .ktt-compact-card .ktt-compact-left .ktt-card-img-holder img,
  body .ktt-compact-card .ktt-compact-left img.sh-quidget-markup {
    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 6px;
  }

  /* Card title: 24px DM Sans bold. Avada applies h4 typography from
     theme presets ('body .fusion-text h4 { font-size: 16px }' style)
     which beats our 2-class selector. Body-prefix + element-on-class
     selector gets us to (0,3,2) specificity, which beats Avada's
     typical theme rules. */
  body .ktt-compact-card .ktt-compact-right h4.ktt-compact-title,
  body .ktt-compact-card .ktt-compact-right .ktt-compact-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--ktt-text) !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
  }
  body .ktt-compact-card .ktt-compact-right h4.ktt-compact-title a,
  body .ktt-compact-card .ktt-compact-right .ktt-compact-title a {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  /* Collapsible summary text inside the Compact card.
     The .ktt-collapsible-text container holds an h4 (section name —
     'Katie's Take', 'Highlights', 'Offer History') and a small p
     (one-line description below). Avada applies h4 typography from
     theme presets (~22-26px) which beats our designed 14px on equal
     specificity, ballooning every section row vertically.

     We only touch font-family, size, line-height, weight, and
     spacing — NOT color. The featured (Katie's Take) variant has
     its own color rule above for white-on-teal-deep that we don't
     want to override. */
  body .ktt-compact-card .ktt-compact-collapsibles .ktt-collapsible .ktt-collapsible-text h4 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  body .ktt-compact-card .ktt-compact-collapsibles .ktt-collapsible .ktt-collapsible-text p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ======================================================
     Avada theme-compat overrides — Tile (All Cards grid).
     ======================================================

     Same class of issue as the Compact card, different element
     surface. The Tile uses h4.ktt-card-tile__title for the card
     name (designed 15px) and a small <details>/<summary> for
     Katie's Take. Avada's theme presets inflate both.

     Mirrors the Compact pattern: body-prefix specificity bump +
     !important on layout-defining typography. Scoped under
     .ktt-card-tile so it doesn't bleed into Compact or anywhere
     else. Color properties are deliberately omitted — the existing
     stylesheet already establishes the right colors and overriding
     them risks unintended downstream effects. */

  /* Tile card-name (h4) — Avada h4 preset (~22-26px) blows past
     our designed 15px. */
  body .ktt-card-tile h4.ktt-card-tile__title,
  body .ktt-card-tile .ktt-card-tile__title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  body .ktt-card-tile h4.ktt-card-tile__title a,
  body .ktt-card-tile .ktt-card-tile__title a {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  /* Tile image — same shrink risk as the Compact image. The Tile
     is intentionally smaller (max-height 110px) and the image
     should fit the tile's 200px-ish content width. */
  body .ktt-card-tile .ktt-card-tile__image img {
    max-width: 100% !important;
    max-height: 110px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Tile Katie's Take collapsible — h4-equivalent summary that
     Avada will likewise inflate. */
  body .ktt-card-tile .ktt-card-tile__take .ktt-card-tile__take-summary {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 7px 11px !important;
    margin: 0 !important;
  }
  body .ktt-card-tile .ktt-card-tile__take .ktt-card-tile__take-body p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin: 8px 0 0 !important;
  }
  body .ktt-card-tile .ktt-card-tile__take summary::-webkit-details-marker {
    display: none !important;
  }
  body .ktt-card-tile .ktt-card-tile__take summary::marker {
    display: none !important;
    content: '' !important;
  }