/* Scoped from html/credit-card-widget-modified.html */
.finsery-cc-root{
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface2: #f8fafc;
    --surface3: #f1f5f9;
    --border: #e2e8f0;
    --accent: #1a56db;
    --accent2: #0e3fad;
    --accent-light: #eff6ff;
    --gold: #f59e0b;
    --gold-light: #fef3c7;
    --gold-bg: #fffbeb;
    --green: #10b981;
    --green-light: #d1fae5;
    --green-bg: #ecfdf5;
    --red: #ef4444;
    --red-light: #fee2e2;
    --purple: #8b5cf6;
    --purple-light: #ede9fe;
    --text: #0f172a;
    --text2: #475569;
    --text3: #64748b;
    --text4: #94a3b8;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 2px 16px rgba(15,23,42,0.07);
    --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.05);
  }

  .finsery-cc-root .page-header{ max-width: 100%; width: 100%; margin: 0 0 32px; box-sizing: border-box; }
  .finsery-cc-root .page-header h1{
    font-family: 'Sora', sans-serif;
    font-size: 28px; font-weight: 700;
    color: var(--text); letter-spacing: -0.5px;
  }
  .finsery-cc-root .page-header p{ margin-top: 6px; font-size: 15px; color: var(--text2); }

  .finsery-cc-root .cards-list{ max-width: 100%; width: 100%; margin: 0; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; }

  /* ══════════════════════════
     CARD WIDGET
  ══════════════════════════ */
  .finsery-cc-root .card-widget{
    background-color: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* visible so header / CTA tooltips (e.g. advertiser disclosure) are not clipped */
    overflow: visible;
    position: relative;
    isolation: isolate;
  }

  /*
   * Top accent: layered background on the card (not a child div). Browsers clip backgrounds to
   * border-radius, so the strip cannot square-off past the rounded corners.
   */
  .finsery-cc-root .card-widget.finsery-cc-has-top-strip{
    background-image: var(--cc-widget-top-strip), linear-gradient(var(--surface), var(--surface));
    background-size: 100% 4px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
  }

  .finsery-cc-root .card-widget.finsery-cc-top--gold{ --cc-widget-top-strip: linear-gradient(90deg, #f59e0b, #fbbf24); }
  .finsery-cc-root .card-widget.finsery-cc-top--blue{ --cc-widget-top-strip: linear-gradient(90deg, #1a56db, #3b82f6); }
  .finsery-cc-root .card-widget.finsery-cc-top--green{ --cc-widget-top-strip: linear-gradient(90deg, #10b981, #34d399); }
  .finsery-cc-root .card-widget.finsery-cc-top--purple{ --cc-widget-top-strip: linear-gradient(90deg, #8b5cf6, #a78bfa); }
  .finsery-cc-root .card-widget.finsery-cc-top--teal{ --cc-widget-top-strip: linear-gradient(90deg, #0d9488, #2dd4bf); }
  .finsery-cc-root .card-widget.finsery-cc-top--cyan{ --cc-widget-top-strip: linear-gradient(90deg, #0891b2, #22d3ee); }
  .finsery-cc-root .card-widget.finsery-cc-top--orange{ --cc-widget-top-strip: linear-gradient(90deg, #ea580c, #fb923c); }
  .finsery-cc-root .card-widget.finsery-cc-top--red{ --cc-widget-top-strip: linear-gradient(90deg, #dc2626, #f87171); }
  .finsery-cc-root .card-widget.finsery-cc-top--pink{ --cc-widget-top-strip: linear-gradient(90deg, #db2777, #f472b6); }
  .finsery-cc-root .card-widget.finsery-cc-top--indigo{ --cc-widget-top-strip: linear-gradient(90deg, #4f46e5, #818cf8); }
  .finsery-cc-root .card-widget.finsery-cc-top--slate{ --cc-widget-top-strip: linear-gradient(90deg, #475569, #94a3b8); }
  .finsery-cc-root .card-widget.finsery-cc-top--lime{ --cc-widget-top-strip: linear-gradient(90deg, #65a30d, #a3e635); }
  /* .finsery-cc-top--custom: inline style sets --cc-widget-top-strip */

  /* Advertiser disclosure (i): above Apply in CTA column — tooltip must escape .card-widget (overflow: visible) */
  .finsery-cc-root .card-cta-disclosure{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 4px;
    position: relative;
    z-index: 30;
  }
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip-wrap{
    margin-left: 0;
    overflow: visible;
  }
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip-trigger{
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text3);
  }
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip-trigger svg{
    width: 14px;
    height: 14px;
  }
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip-trigger:hover{
    background: rgba(60, 131, 246, 0.12);
  }
  .dark .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip-trigger{
    background: rgba(148, 163, 184, 0.18);
  }
  /* Open below trigger: avoids clipping when ancestors use overflow-x-clip (y becomes scroll/auto) */
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip{
    left: auto;
    right: 0;
    transform: none;
    top: 100%;
    bottom: auto;
    margin-top: 8px;
    margin-bottom: 0;
    max-width: min(340px, calc(100vw - 40px));
    z-index: 100;
    box-sizing: border-box;
  }
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip__caret{
    top: -5px;
    bottom: auto;
    left: auto;
    right: 11px;
    margin-left: 0;
    transform: rotate(45deg);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: none;
    border-bottom: none;
  }
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip__caret.is-light{
    border-color: #e2e8f0;
  }
  .finsery-cc-root .card-cta-disclosure .finsery-cc-tooltip__caret.is-dark{
    border-color: rgba(255, 255, 255, 0.12);
  }

  .finsery-cc-root .card-inner{
    padding: 24px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    min-width: 0;
  }

  .finsery-cc-root .card-main-top,
  .finsery-cc-root .card-main-body{
    min-width: 0;
  }

  /*
   * Generic Modern template uses a narrower content card than Best Credit Card.
   * Keep widget stacked until desktop to prevent CTA/title overlap in mid widths.
   */
  .finsery-cc-root.finsery-cc-context--generic-modern .card-cta{
    min-width: 0;
  }
  @media (min-width: 769px) and (max-width: 1023px){
    .finsery-cc-root.finsery-cc-context--generic-modern .card-inner{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-mobile-media-row{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 12px;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-img-col{
      width: 100%;
      align-items: center;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-cta{
      width: 100%;
      align-items: stretch;
      padding-top: 4px;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .fee-block,
    .finsery-cc-root.finsery-cc-context--generic-modern .bonus-block,
    .finsery-cc-root.finsery-cc-context--generic-modern .affiliate-note{
      text-align: center;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-cta .apply-btn,
    .finsery-cc-root.finsery-cc-context--generic-modern .card-cta .affiliate-note{
      align-self: stretch;
      max-width: 100%;
    }
  }

  /*
   * Generic Modern: ease dense grids so content feels less “over-fitted”
   * inside the narrower article shell on tablets / small desktops.
   */
  @media (min-width: 769px) and (max-width: 1279px){
    .finsery-cc-root.finsery-cc-context--generic-modern .benefits-list{
      grid-template-columns: 1fr;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .pros-cons-grid{
      grid-template-columns: 1fr;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .details-grid.finsery-cc-welcome-bonus-grid{
      grid-template-columns: 1fr 1fr;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .details-grid.finsery-cc-pricing-grid,
    .finsery-cc-root.finsery-cc-context--generic-modern .details-grid.finsery-cc-rates-grid,
    .finsery-cc-root.finsery-cc-context--generic-modern .details-grid.finsery-cc-requirements-grid{
      grid-template-columns: 1fr 1fr;
    }
  }

  /*
   * Generic Modern desktop: use the space beneath the image for
   * highlights + tags, and place a left-aligned CTA in a full-width
   * row below that.
   */
  @media (min-width: 1024px){
    .finsery-cc-root.finsery-cc-context--generic-modern .card-inner{
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      column-gap: 24px;
      row-gap: 18px;
      align-items: flex-start;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-img-col{
      grid-column: 1;
      grid-row: 1 / span 3;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-main-top{
      grid-column: 2 / 3;
      grid-row: 1;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-cta{
      grid-column: 1 / 3;
      grid-row: 3;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-main-body{
      grid-column: 1 / 3;
      grid-row: 2;
    }
  }

  /* Generic Modern: center CTA row horizontally */
  .finsery-cc-root.finsery-cc-context--generic-modern .card-cta{
    align-items: center;
    justify-content: center;
  }

  /* Generic Modern: make CTA button narrower (not edge‑to‑edge) */
  .finsery-cc-root.finsery-cc-context--generic-modern .card-cta .apply-btn{
    width: auto;
    min-width: 220px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .finsery-cc-root .card-mobile-media-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
  }

  .finsery-cc-root .editorial-badge--hero .editorial-badge-text{
    line-height: 1.25;
  }

  @media (min-width: 769px){
    .finsery-cc-root .card-inner{
      display: grid;
      grid-template-columns: 150px 1fr auto;
      grid-template-rows: auto auto;
      gap: 0 24px;
      align-items: start;
    }
    .finsery-cc-root .card-mobile-media-row{
      display: contents;
    }
    .finsery-cc-root .card-img-col{
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .finsery-cc-root .card-main-top{
      grid-column: 2;
      grid-row: 1;
    }
    .finsery-cc-root .card-main-body{
      grid-column: 2;
      grid-row: 2;
    }
    .finsery-cc-root .card-cta{
      grid-column: 3;
      grid-row: 1 / span 2;
    }
  }

  /* LEFT COLUMN - Card Image */
  .finsery-cc-root .card-img-col{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .finsery-cc-root .card-img-wrap{
    width: 130px; height: 82px;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.14);
    position: relative; flex-shrink: 0;
  }

  /* Generic Modern: show full card artwork, centered (override inline cover + 100% stretch) */
  .finsery-cc-root.finsery-cc-context--generic-modern .card-img-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .finsery-cc-root.finsery-cc-context--generic-modern .card-img-wrap .finsery-cc-card-photo{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    margin: 0;
  }

  /*
   * Generic Modern article shell uses Tailwind prose on the_content();
   * prose img utilities must not distort the CC thumbnail.
   */
  .prose .finsery-cc-root.finsery-cc-context--generic-modern .card-img-wrap .finsery-cc-card-photo{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-height: 100% !important;
  }
  .finsery-cc-root .card-visual{
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 10px 12px; position: relative; overflow: hidden;
  }
  .finsery-cc-root .card-visual::before{
    content:''; position:absolute; top:-20px; right:-20px;
    width:80px; height:80px; border-radius:50%;
    background:rgba(255,255,255,0.12);
  }
  .finsery-cc-root .card-visual::after{
    content:''; position:absolute; bottom:-15px; left:-15px;
    width:60px; height:60px; border-radius:50%;
    background:rgba(255,255,255,0.08);
  }
  .finsery-cc-root .card-chip{ width:22px; height:16px; border-radius:3px; background:rgba(255,255,255,0.6); }
  .finsery-cc-root .card-network{ font-size:13px; font-weight:700; color:rgba(255,255,255,0.9); text-align:right; letter-spacing:-0.3px; }
  .finsery-cc-root .ribbon{
    position:absolute; top:10px; right:-18px;
    background:#84cc16; color:#fff;
    font-size:7.5px; font-weight:800;
    letter-spacing:0.4px; text-transform:uppercase;
    padding:3px 22px; transform:rotate(35deg);
  }
  .finsery-cc-root .rates-link{ font-size:12px; color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }

  .finsery-cc-root .star-row{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }
  .finsery-cc-root .cc-rating-wrapper{
    display: block;
    width: 80px;
    height: 12.8px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 17 14' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='m8.2 1.466 1.648 3.339 3.686.54-2.667 2.596.629 3.67L8.2 9.877 4.904 11.61l.63-3.67-2.667-2.596 3.685-.54L8.2 1.467Z' fill='%23E2E8F0' stroke='%23E2E8F0' stroke-width='1.09' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(.2 .4)' d='M0 0h16v12.8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 16px 12.8px;
  }
  .finsery-cc-root .cc-rating{
    display: block;
    height: 12.8px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 17 14' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='m8.2 1.466 1.648 3.339 3.686.54-2.667 2.596.629 3.67L8.2 9.877 4.904 11.61l.63-3.67-2.667-2.596 3.685-.54L8.2 1.467Z' fill='%23FFB136' stroke='%23FFB136' stroke-width='1.09' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' transform='translate(.2 .4)' d='M0 0h16v12.8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 16px 12.8px;
  }
  .finsery-cc-root .rating-val{
    font-size: 16px;
    font-weight: 700;
    color: #0b1f3f;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: 'Sora', sans-serif;
  }
  .finsery-cc-root .rating-total{
    font-size: 14px;
    color: #64748b;
    line-height: 1;
    font-weight: 500;
  }
  .finsery-cc-root .rating-source{ font-size:10.5px; color:var(--text3); }

  /* Widget: last updated (below star rating; ACF widget_last_updated) — keep on one line */
  .finsery-cc-root .finsery-cc-last-updated{
    margin: 0;
    white-space: nowrap;
    width: max-content;
    box-sizing: border-box;
    padding: 0 4px;
    text-align: center;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--text3);
    letter-spacing: -0.02em;
  }
  @media (min-width: 400px){
    .finsery-cc-root .finsery-cc-last-updated{
      font-size: 9.5px;
      padding: 0 6px;
    }
  }
  @media (min-width: 640px){
    .finsery-cc-root .finsery-cc-last-updated{
      font-size: 10.25px;
      line-height: 1.35;
    }
  }
  @media (min-width: 768px){
    .finsery-cc-root .finsery-cc-last-updated{
      font-size: 10.75px;
    }
  }
  @media (min-width: 1024px){
    .finsery-cc-root .finsery-cc-last-updated{
      font-size: 11px;
      padding: 0 8px;
    }
  }
  /* Generic Modern: first grid column is 150px — tighten so long locale dates stay one line */
  @media (min-width: 1024px){
    .finsery-cc-root.finsery-cc-context--generic-modern .finsery-cc-last-updated{
      font-size: 9.25px;
      letter-spacing: -0.03em;
      padding: 0 2px;
    }
  }
  @media (min-width: 1280px){
    .finsery-cc-root.finsery-cc-context--generic-modern .finsery-cc-last-updated{
      font-size: 10px;
      letter-spacing: -0.02em;
    }
  }

  /* MIDDLE COLUMN - Card Info */
  .finsery-cc-root .card-main-top{ padding-top: 4px; }
  .finsery-cc-root .editorial-badge{
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--gold-light); color: #92400e;
    font-size: 11.5px; font-weight: 600;
    font-family: 'Sora', sans-serif; letter-spacing: 0.3px;
    padding: 4px 10px; border-radius: 6px; margin-bottom: 14px;
  }
  .finsery-cc-root .editorial-badge.blue-badge{ background: #eff6ff; color: #1e40af; }
  .finsery-cc-root .editorial-badge.green-badge{ background: var(--green-light); color: #065f46; }
  .finsery-cc-root .editorial-badge-trophy{
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
  }
  .finsery-cc-root .card-title{
    font-family: 'Sora', sans-serif;
    font-size: 17px; font-weight: 700;
    color: var(--text); letter-spacing: -0.3px;
    margin-bottom: 4px; line-height: 1.3;
  }
  @media (min-width: 640px){
    .finsery-cc-root .card-title{ font-size: 19px; }
  }
  @media (min-width: 768px){
    .finsery-cc-root .card-title{ font-size: 20px; }
  }
  @media (min-width: 1024px){
    .finsery-cc-root .card-title{ font-size: 22px; }
  }
  @media (min-width: 1280px){
    .finsery-cc-root .card-title{ font-size: 24px; }
  }
  .finsery-cc-root .card-issuer{ font-size:13px; color:var(--text3); margin-bottom:14px; }

  .finsery-cc-root .highlights{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
  .finsery-cc-root .highlight-item{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--text2); line-height:1.4; }
  .finsery-cc-root .hi-icon{
    width:18px; height:18px; border-radius:50%;
    background:var(--green-light); color:var(--green);
    font-size:10px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:1px;
  }
  .finsery-cc-root .hi-icon > .fas{
    font-size:9px;
    line-height:1;
  }
  .finsery-cc-root .hi-icon.blue-icon{ background:#eff6ff; color:var(--accent); }
  .finsery-cc-root .hi-icon.gold-icon{ background:var(--gold-light); color:#b45309; }

  /* Bulletin custom icons (ACF image) — avoid 18px circle clipping uploaded art */
  .finsery-cc-root .hi-icon--image{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 1px;
    padding: 2px;
    border-radius: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    box-sizing: border-box;
  }
  .finsery-cc-root .hi-icon--image.blue-icon{
    background: #eff6ff;
    border-color: #bfdbfe;
  }
  .finsery-cc-root .hi-icon--image.gold-icon{
    background: var(--gold-light);
    border-color: #fcd34d;
  }
  .finsery-cc-root .hi-icon__img{
    width: 20px;
    height: 20px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  .finsery-cc-root .highlight-text{ flex: 1; min-width: 0; }

  .finsery-cc-root .hi-label{ font-weight:500; color:var(--text); }

  .finsery-cc-root .tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
  .finsery-cc-root .tag{
    padding:3px 10px; border-radius:6px;
    font-size:11.5px; font-weight:500;
    background:var(--surface2); color:var(--text2);
    border:1px solid var(--border);
  }

  /* RIGHT COLUMN - CTA (disclosure row stacks above Apply; column stays end-aligned) */
  .finsery-cc-root .card-cta{ display:flex; flex-direction:column; align-items:stretch; gap:10px; padding-top:4px; min-width:280px; }
  @media (min-width: 769px){
    .finsery-cc-root .card-cta .apply-btn,
    .finsery-cc-root .card-cta .affiliate-note{
      align-self: flex-end;
      max-width: 100%;
    }
  }
  .finsery-cc-root .fee-block{ text-align:right; }
  .finsery-cc-root .fee-label{ font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; }
  .finsery-cc-root .fee-val{ font-family:'Sora',sans-serif; font-size:22px; font-weight:700; color:var(--text); line-height:1.1; }
  .finsery-cc-root .fee-val.free{ color: var(--green); }
  .finsery-cc-root .fee-sub{ font-size:11.5px; color:var(--text3); }
  .finsery-cc-root .divider-h{ width:100%; height:1px; background:var(--border); }
  .finsery-cc-root .bonus-block{ text-align:right; }
  .finsery-cc-root .bonus-label{ font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; }
  .finsery-cc-root .bonus-val{ font-family:'Sora',sans-serif; font-size:14px; font-weight:700; color:var(--green); }

  .finsery-cc-root .apply-btn{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:16px 20px;
    box-sizing:border-box;
    background:var(--accent); color:#fff;
    font-family:'Sora',sans-serif; font-size:18px; font-weight:700;
    border-radius:16px; border:none; cursor:pointer;
    text-align:center; text-decoration:none;
    transition:background 0.17s, transform 0.12s; letter-spacing:0.1px;
  }

  /* Slightly smaller CTA in Generic Modern so it feels less overpowering in the narrower shell */
  .finsery-cc-root.finsery-cc-context--generic-modern .apply-btn{
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 14px;
    gap: 8px;
  }

  /* Generic Modern: keep CTA icons/images fitted inside the smaller button */
  .finsery-cc-root.finsery-cc-context--generic-modern .apply-btn i,
  .finsery-cc-root.finsery-cc-context--generic-modern .apply-btn .apply-btn__lock{
    font-size: 14px;
  }
  .finsery-cc-root.finsery-cc-context--generic-modern .apply-btn svg,
  .finsery-cc-root.finsery-cc-context--generic-modern .apply-btn img{
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    object-fit: contain;
    display: inline-block;
  }
  .finsery-cc-root a.apply-btn,
  .finsery-cc-root a.apply-btn:link,
  .finsery-cc-root a.apply-btn:visited,
  .finsery-cc-root a.apply-btn:hover,
  .finsery-cc-root a.apply-btn:focus,
  .finsery-cc-root a.apply-btn:active{
    color:#fff !important;
    text-decoration:none !important;
  }
  .finsery-cc-root .apply-btn i,
  .finsery-cc-root .apply-btn .apply-btn__lock{
    color: inherit !important;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
  }
  .finsery-cc-root .apply-btn:hover{ background:var(--accent2); transform:scale(1.02); }
  .finsery-cc-root .apply-btn.green{ background: var(--green); }
  .finsery-cc-root .apply-btn.green:hover{ background: #059669; }
  .finsery-cc-root .apply-btn.purple{ background: var(--purple); }
  .finsery-cc-root .apply-btn.purple:hover{ background: #7c3aed; }
  .finsery-cc-root .affiliate-note{ width:100%; font-size:13px; color:var(--text3); text-align:center; line-height:1.4; }

  /* ══════════════════════════
     CARD DETAILS TABS (NEW)
  ══════════════════════════ */
  .finsery-cc-root .card-details-section{ border-top: 1.5px solid var(--border); }

  /* Tab Navigation */
  .finsery-cc-root .tab-nav{
    display: flex;
    background: var(--surface2);
    border-bottom: 1.5px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .finsery-cc-root .tab-nav::-webkit-scrollbar{ display: none; }

  .finsery-cc-root .tab-btn{
    flex: 1;
    min-width: 140px;
    padding: 16px 20px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text3);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
  }
  .finsery-cc-root .tab-btn:hover{
    color: var(--text);
    background: rgba(255,255,255,0.5);
  }
  .finsery-cc-root .tab-btn.active{
    color: var(--accent);
    background: var(--surface);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }
  .finsery-cc-root .tab-btn i{ font-size: 14px; }

  /* Generic Modern: keep first tab icon/text fully visible (no left-edge clipping) */
  .finsery-cc-root.finsery-cc-context--generic-modern .tab-nav{
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    scroll-padding-left: 12px;
  }

  /*
   * Tablet / small viewports (e.g. iPad Air 820px+): desktop flex:1 + min-width forces tabs to
   * shrink past their labels and clips the first tab. Use the same scroll strip as mobile.
   */
  @media (max-width: 1280px){
    .finsery-cc-root .card-details-section{
      min-width: 0;
    }
    .finsery-cc-root .tab-nav{
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      padding-inline: 10px;
      box-sizing: border-box;
    }
    .finsery-cc-root .tab-btn{
      flex: 0 0 auto;
      min-width: max(7.5rem, max-content);
      scroll-snap-align: start;
    }
    .finsery-cc-root .tab-content{
      min-width: 0;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .tab-nav{
      padding-inline: 12px;
      scroll-padding-inline-start: 12px;
    }
    /* Generic Modern: fit tabs in one row (no horizontal clipping/scroll) */
    .finsery-cc-root.finsery-cc-context--generic-modern .tab-nav{
      overflow-x: hidden;
      scroll-snap-type: none;
      padding-inline: 6px;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .tab-btn{
      flex: 1 1 0;
      min-width: 0;
      padding: 12px 8px;
      font-size: 12px;
      gap: 6px;
      line-height: 1.2;
      white-space: normal;
      text-align: center;
      justify-content: center;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .tab-btn i{
      font-size: 12px;
      flex-shrink: 0;
    }
  }

  /* Tab Panels */
  .finsery-cc-root .tab-content{ background: var(--surface); }
  .finsery-cc-root .tab-panel{ display: none; padding: 28px; }
  .finsery-cc-root .tab-panel.active{ display: block; }

  /* Detail Cards Grid */
  .finsery-cc-root .details-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .finsery-cc-root .details-grid.two-col{ grid-template-columns: repeat(2, 1fr); }
  .finsery-cc-root .details-grid.four-col{ grid-template-columns: repeat(4, 1fr); }

  .finsery-cc-root .detail-card{
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px;
    transition: all 0.2s ease;
  }
  .finsery-cc-root .detail-card:hover{
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
  }
  .finsery-cc-root .detail-card.highlight{
    background: var(--gold-bg);
    border-color: var(--gold-light);
  }
  .finsery-cc-root .detail-card.highlight-green{
    background: var(--green-bg);
    border-color: var(--green-light);
  }
  .finsery-cc-root .detail-card.highlight-blue{
    background: var(--accent-light);
    border-color: #bfdbfe;
  }

  .finsery-cc-root .detail-icon{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
    background: var(--surface);
    color: var(--text2);
  }
  .finsery-cc-root .detail-card.highlight .detail-icon{ background: var(--gold-light); color: #92400e; }
  .finsery-cc-root .detail-card.highlight-green .detail-icon{ background: var(--green-light); color: #065f46; }
  .finsery-cc-root .detail-card.highlight-blue .detail-icon{ background: #dbeafe; color: #1e40af; }

  .finsery-cc-root .detail-label{
    font-size: 12px;
    font-weight: 500;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    /* Block + normal inline flow so wrapped titles keep the (i) after the last word, not centered beside the block */
    display: block;
  }

  /* Tooltip trigger follows the label text in the line box (Tailwind "flex" on wrap is block-level — override here only) */
  .finsery-cc-root .detail-label .finsery-cc-tooltip-wrap{
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
    flex-shrink: 0;
  }

  .finsery-cc-root .detail-value{
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
  }
  .finsery-cc-root .detail-value.large{
    font-size: 20px;
  }
  .finsery-cc-root .detail-value.free{ color: var(--green); }
  .finsery-cc-root .detail-value.fee{ color: var(--red); }

  .finsery-cc-root .detail-sublabel{
    font-size: 12px;
    color: var(--text4);
    margin-top: 4px;
  }

  /* Field help tooltip (Pricing / Interest Rates) — not inherited uppercase from .detail-label */
  .finsery-cc-root .finsery-cc-tooltip-wrap{
    margin-left: 4px;
  }
  .finsery-cc-root .finsery-cc-tooltip-trigger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .finsery-cc-root .finsery-cc-tooltip-trigger:hover{
    color: var(--accent);
  }
  .dark .finsery-cc-root .finsery-cc-tooltip-trigger{
    color: #94a3b8;
  }
  .dark .finsery-cc-root .finsery-cc-tooltip-trigger:hover{
    color: #60a5fa;
  }
  .finsery-cc-root .finsery-cc-tooltip-trigger:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .finsery-cc-root .finsery-cc-tooltip{
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    z-index: 50;
    width: auto;
    max-width: min(248px, calc(100vw - 32px));
    min-width: 140px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-align: left;
    text-transform: none;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
    border: 1px solid var(--border);
  }
  .finsery-cc-root .finsery-cc-tooltip.is-light{
    background: #fff;
    color: var(--text2);
    border-color: #e2e8f0;
  }
  .finsery-cc-root .finsery-cc-tooltip.is-dark{
    background: rgba(15, 23, 42, 0.97);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  }
  .finsery-cc-root .finsery-cc-tooltip__text{
    margin: 0;
    padding: 0;
    text-transform: none;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
    color: inherit;
  }
  .finsery-cc-root .finsery-cc-tooltip__caret{
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    transform: rotate(45deg);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    pointer-events: none;
  }
  .finsery-cc-root .finsery-cc-tooltip__caret.is-light{
    background: #fff;
    border-color: #e2e8f0;
  }
  .finsery-cc-root .finsery-cc-tooltip__caret.is-dark{
    background: rgba(15, 23, 42, 0.97);
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* Rewards Section Special Styling */
  .finsery-cc-root .rewards-header{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .finsery-cc-root .rewards-icon{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--gold-bg);
    border: 2px solid var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
  }
  .finsery-cc-root .rewards-icon__img{
    display: block;
  }
  .finsery-cc-root .rewards-title-block h3{
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }
  .finsery-cc-root .rewards-title-block p{
    font-size: 13px;
    color: var(--text2);
  }

  /* Category Rewards Table */
  .finsery-cc-root .category-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
  }
  .finsery-cc-root .category-table th{
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--surface3);
    border-bottom: 1px solid var(--border);
  }
  .finsery-cc-root .category-table td{
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .finsery-cc-root .category-table tr:last-child td{ border-bottom: none; }
  .finsery-cc-root .category-table td:first-child{
    white-space: nowrap;
  }
  .finsery-cc-root .category-table .cat-icon{
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    vertical-align: middle;
    margin-right: 8px;
  }
  /* Reward Categories: per-icon colors (scoped only to this table) */
  .finsery-cc-root .category-table .cat-icon--travel{ color: #2563eb; }   /* blue */
  .finsery-cc-root .category-table .cat-icon--food{ color: #f59e0b; }     /* orange */
  .finsery-cc-root .category-table .cat-icon--shopping{ color: #10b981; } /* green */
  .finsery-cc-root .category-table .cat-icon--cashback{ color: #0f172a; } /* dark */
  .finsery-cc-root .category-table .cat-icon--gas{ color: #ef4444; }      /* red */
  .finsery-cc-root .category-table .cat-icon--gift{ color: #8b5cf6; }     /* purple */
  .finsery-cc-root .category-table .cat-icon--hotel{ color: #06b6d4; }    /* cyan */
  .finsery-cc-root .category-table .cat-icon--plane{ color: #3b82f6; }    /* sky blue */
  .finsery-cc-root .category-table .cat-icon--mobile{ color: #6366f1; }   /* indigo */
  .finsery-cc-root .category-table .cat-icon--percent{ color: #f97316; }  /* orange */
  .finsery-cc-root .category-table .cat-icon--star{ color: #eab308; }     /* yellow */
  .finsery-cc-root .category-table .cat-icon--shield{ color: #14b8a6; }   /* teal */
  .finsery-cc-root .category-table .cat-icon svg,
  .finsery-cc-root .category-table .cat-icon i{
    width: 20px;
    height: 20px;
    display: block;
  }
  .finsery-cc-root .category-table .cat-label{
    display: inline-block;
  }

  /* Reward rate: primary value + optional note (badge or plain) */
  .finsery-cc-root .category-table .rate-cell{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    line-height: 1.35;
  }
  .finsery-cc-root .category-table .rate-primary{
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .finsery-cc-root .category-table .rate-note__arrow{
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    vertical-align: middle;
  }
  .finsery-cc-root .category-table .rate-note__arrow-svg{
    display: block;
  }
  .finsery-cc-root .category-table .rate-note--badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: #0a0a0a;
    max-width: 100%;
  }
  .dark .finsery-cc-root .category-table .rate-note--badge{
    background: #4b5563;
    border-color: #6b7280;
    color: #fafafa;
  }
  .finsery-cc-root .category-table .rate-note--plain{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text3);
    max-width: 100%;
  }

  /* Credits & Perks: wrapper for mobile horizontal scroll (table stays full-width on desktop) */
  .finsery-cc-root .finsery-cc-credits-perks-scroll{
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
  }
  .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table{
    margin-top: 0;
  }

  /* Credits & Perks Table */
  .finsery-cc-root .credits-perks-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
  }
  .finsery-cc-root .credits-perks-table th{
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--surface3);
    border-bottom: 1px solid var(--border);
  }
  .finsery-cc-root .credits-perks-table td{
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.5;
  }
  .finsery-cc-root .credits-perks-table tr:last-child td{
    border-bottom: none;
  }
  .finsery-cc-root .credits-perks-table th:nth-child(1),
  .finsery-cc-root .credits-perks-table td:nth-child(1){
    width: 30%;
  }
  .finsery-cc-root .credits-perks-table td:nth-child(1){ font-weight: 400; }
  .finsery-cc-root .credits-perks-table th:nth-child(2),
  .finsery-cc-root .credits-perks-table td:nth-child(2){
    width: 18%;
  }
  .finsery-cc-root .credits-perks-table td:nth-child(2){ font-weight: 400; }
  .finsery-cc-root .credits-perks-table th:nth-child(3),
  .finsery-cc-root .credits-perks-table td:nth-child(3){
    width: 52%;
  }

  /* Benefits List */
  .finsery-cc-root .benefits-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .finsery-cc-root .benefit-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
  }
  .finsery-cc-root .benefit-item i{
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: content-box;
    font-size: 16px;
    flex-shrink: 0;
  }
  .finsery-cc-root .benefit-item svg,
  .finsery-cc-root .benefit-item > img{
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 10px;
    border-radius: 10px;
    background: var(--accent-light);
    box-sizing: content-box;
    flex-shrink: 0;
    display: block;
  }
  .finsery-cc-root .benefit-item svg{
    color: var(--accent);
  }

  /* Pros & Cons */
  .finsery-cc-root .pros-cons-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .finsery-cc-root .pros-cons-col{
    background: var(--surface2);
    border-radius: var(--radius-sm);
    padding: 20px;
  }
  .finsery-cc-root .pros-cons-col h4{
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.25;
  }
  .finsery-cc-root .pros-col h4{ color: var(--green); }
  .finsery-cc-root .cons-col h4{ color: var(--red); }

  .finsery-cc-root .pros-cons-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .finsery-cc-root .pros-cons-list li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.38;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .finsery-cc-root .pros-cons-list li i{
    font-size: 12px;
    margin-top: 2px;
    line-height: 1;
    flex-shrink: 0;
  }
  .finsery-cc-root .pros-cons-list.pros li i{ color: var(--green); }
  .finsery-cc-root .pros-cons-list.cons li i{ color: var(--red); }

  @media (min-width: 640px){
    .finsery-cc-root .pros-cons-list li{
      font-size: 15px;
      line-height: 1.4;
    }
    .finsery-cc-root .pros-cons-list li i{
      font-size: 13px;
      margin-top: 2px;
    }
  }
  @media (min-width: 1024px){
    .finsery-cc-root .pros-cons-list li{
      font-size: 15.5px;
      line-height: 1.42;
    }
    .finsery-cc-root .pros-cons-list li i{
      font-size: 13px;
      margin-top: 3px;
    }
  }
  @media (min-width: 1280px){
    .finsery-cc-root .pros-cons-list li{
      font-size: 16px;
      line-height: 1.42;
    }
  }

  /* Additional Info Rich Text Area */
  .finsery-cc-root .additional-content{
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
  }
  .finsery-cc-root .additional-content h4{
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text);
  }
  .finsery-cc-root .additional-content h4 > i{
    color: var(--accent);
    margin-right: 8px;
  }
  .finsery-cc-root .additional-content p{
    font-size: 14px;
    line-height: 1.7;
    color: var(--text2);
  }

  /* Section Divider */
  .finsery-cc-root .section-divider{
    margin: 24px 0;
    height: 1px;
    background: var(--border);
  }

  .finsery-cc-root .section-title{
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .finsery-cc-root .section-title i{ color: var(--accent); font-size: 14px; }

  /* ══════════════════════════
     ACCORDION STYLES
  ══════════════════════════ */
  .finsery-cc-root .accordion{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
  }

  .finsery-cc-root .accordion-item{
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: all 0.2s ease;
  }

  .finsery-cc-root .accordion-item:hover{
    border-color: var(--border);
  }

  .finsery-cc-root .accordion-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    transition: background 0.2s ease;
  }

  .finsery-cc-root .accordion-header:hover{
    background: var(--surface3);
  }

  .finsery-cc-root .accordion-header span{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .finsery-cc-root .accordion-header span i{
    color: var(--accent);
    font-size: 14px;
  }

  .finsery-cc-root .accordion-icon{
    font-size: 12px;
    color: var(--text3);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .finsery-cc-root .accordion-item.active .accordion-icon{
    transform: rotate(180deg);
  }

  /* Height animates to content size (smooth); max-height 0→2000px feels sluggish/uneven */
  .finsery-cc-root .accordion-content{
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
  }
  .finsery-cc-root .accordion-content[hidden]{
    display: block !important;
  }

  .finsery-cc-root .accordion-item.active .accordion-content{
    opacity: 1;
    visibility: visible;
  }

  .finsery-cc-root .accordion-content-inner{
    overflow: hidden;
    min-height: 0;
    padding: 0 20px 20px;
  }

  @media (prefers-reduced-motion: reduce){
    .finsery-cc-root .accordion-content{
      transition: none;
    }
    .finsery-cc-root .accordion-icon{
      transition: none;
    }
  }

  /* Widget footer: inside .card-widget (below tabs) so it stays in the white card */
  .finsery-cc-root .card-widget > .finsery-cc-widget-foot{
    margin-top: 0;
    padding: 10px 22px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-sizing: border-box;
    /*
     * Card uses overflow:visible for CTA tooltips, so this block stays square by default and the
     * outer rounded border looks “cut” at the bottom corners. Match the content-box corner radius
     * (outer --radius minus card border width).
     */
    border-bottom-left-radius: calc(var(--radius) - 1.5px);
    border-bottom-right-radius: calc(var(--radius) - 1.5px);
    overflow: hidden;
  }
  /* Fallback if foot is ever a direct child of root (e.g. legacy markup) */
  .finsery-cc-root > .finsery-cc-widget-foot{
    max-width: 100%;
    width: 100%;
    margin-top: 20px;
    padding: 16px 4px 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
  }
  .finsery-cc-root .finsery-cc-widget-foot{
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  /* Disclaimer — fluid type scales from phone to wide desktop */
  .finsery-cc-root .disclaimer{
    max-width: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    color: var(--text3);
  }
  .finsery-cc-root .disclaimer p{
    margin: 0 0 10px;
  }
  .finsery-cc-root .disclaimer p:last-child{
    margin-bottom: 0;
  }
  /* Bottom disclaimer: compact, scales down on small viewports */
  .finsery-cc-root .finsery-cc-widget-foot .disclaimer__informational{
    font-size: clamp(11px, 0.32vw + 9.85px, 12px);
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--text3);
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  @media (min-width: 640px){
    .finsery-cc-root .finsery-cc-widget-foot .disclaimer__informational{
      font-size: clamp(11px, 0.22vw + 10.2px, 12.5px);
      line-height: 1.52;
    }
  }
  @media (min-width: 1024px){
    .finsery-cc-root .finsery-cc-widget-foot .disclaimer__informational{
      font-size: clamp(11.5px, 0.15vw + 10.8px, 13px);
      line-height: 1.55;
    }
  }
  .finsery-cc-root .finsery-cc-widget-foot .disclaimer__informational strong{
    font-weight: 600;
    color: var(--text2);
  }
  .dark .finsery-cc-root .finsery-cc-widget-foot .disclaimer__informational strong{
    color: #cbd5e1;
  }
  .finsery-cc-root .finsery-cc-widget-foot .disclaimer{
    margin-top: 0;
  }

  /* Tablet only: Credits & Perks fills accordion width; Details column uses remaining horizontal space */
  @media (min-width: 769px) and (max-width: 1024px){
    .finsery-cc-root .finsery-cc-credits-perks-scroll{
      width: 100%;
      max-width: 100%;
      overflow-x: visible;
    }
    .finsery-cc-root .credits-perks-table{
      table-layout: fixed;
      width: 100%;
      min-width: 0;
      max-width: none;
    }
    .finsery-cc-root .credits-perks-table th,
    .finsery-cc-root .credits-perks-table td{
      padding: 11px 10px;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    .finsery-cc-root .credits-perks-table th:nth-child(1),
    .finsery-cc-root .credits-perks-table td:nth-child(1){
      width: 26%;
    }
    .finsery-cc-root .credits-perks-table th:nth-child(2),
    .finsery-cc-root .credits-perks-table td:nth-child(2){
      width: 14%;
    }
    .finsery-cc-root .credits-perks-table th:nth-child(3),
    .finsery-cc-root .credits-perks-table td:nth-child(3){
      width: 60%;
    }
  }

  /* Responsive — mobile: scrollable tabs + wide tab/accordion content */
  @media (max-width: 768px){
    .finsery-cc-root .card-inner{ gap: 16px; }
    .finsery-cc-root .card-main-top .card-title{ margin-bottom: 2px; }
    .finsery-cc-root .card-main-top .card-issuer{ margin-bottom: 0; }
    .finsery-cc-root .editorial-badge--hero{
      align-self: flex-start;
      text-transform: uppercase;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 6px 12px;
      border-radius: 999px;
      margin-bottom: 10px;
    }
    .finsery-cc-root .editorial-badge--hero:not(.blue-badge):not(.green-badge){
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .finsery-cc-root .editorial-badge--hero .editorial-badge-trophy--hero{
      font-size: 12px;
    }
    .finsery-cc-root .card-mobile-media-row{
      gap: 14px;
      align-items: center;
    }
    .finsery-cc-root .card-img-col{
      width: 100%;
      max-width: 100%;
      align-items: center;
    }
    .finsery-cc-root .card-img-wrap{
      width: 172px;
      height: 108px;
      border-radius: 12px;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .card-img-wrap{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .finsery-cc-root .rates-link{
      font-size: 13px;
    }
    .finsery-cc-root .star-row{
      padding: 8px 10px;
      gap: 8px;
    }
    .finsery-cc-root .star-row .cc-rating-wrapper{
      width: 96px;
      height: 15.36px;
      background-size: 19.2px 15.36px;
    }
    .finsery-cc-root .star-row .cc-rating{
      height: 15.36px;
      background-size: 19.2px 15.36px;
    }
    .finsery-cc-root .star-row .rating-val{
      font-size: 18px;
    }
    .finsery-cc-root .star-row .rating-total{
      font-size: 15px;
    }
    .finsery-cc-root .card-cta{
      align-items: stretch;
      width: 100%;
      min-width: 0;
      padding-top: 4px;
    }
    .finsery-cc-root .fee-block, .finsery-cc-root .bonus-block, .finsery-cc-root .affiliate-note{ text-align: center; }
    .finsery-cc-root .apply-btn{
      padding: 14px 20px;
      gap: 10px;
    }

    .finsery-cc-root .details-grid, .finsery-cc-root .details-grid.two-col, .finsery-cc-root .details-grid.four-col{ grid-template-columns: 1fr; }

    /* Welcome bonus: two columns on mobile (single row); other tab detail grids stay stacked */
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
    }
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid .detail-card{
      padding: 12px 10px;
      min-width: 0;
    }
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid .detail-card:only-child{
      grid-column: 1 / -1;
    }
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid .detail-label{
      font-size: 10px;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid .detail-value{
      font-size: 14px;
    }
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid .detail-value.large{
      font-size: 16px;
    }
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid .detail-sublabel{
      font-size: 10px;
      margin-top: 3px;
    }
    .finsery-cc-root .details-grid.finsery-cc-welcome-bonus-grid .detail-icon{
      width: 30px;
      height: 30px;
      font-size: 14px;
      margin-bottom: 8px;
    }

    /* Pricing & Fees + Interest Rates + Additional Info (Requirements): two columns on mobile */
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
    }
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid .detail-card,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid .detail-card,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid .detail-card{
      padding: 12px 10px;
      min-width: 0;
    }
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid .detail-icon,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid .detail-icon,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid .detail-icon{
      width: 30px;
      height: 30px;
      font-size: 14px;
      margin-bottom: 8px;
    }
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid .detail-label,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid .detail-label,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid .detail-label{
      font-size: 10px;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
    }
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid .detail-value,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid .detail-value,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid .detail-value{
      font-size: 14px;
    }
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid .detail-value.large,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid .detail-value.large,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid .detail-value.large{
      font-size: 15px;
    }
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid .detail-sublabel,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid .detail-sublabel,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid .detail-sublabel{
      font-size: 10px;
      margin-top: 3px;
    }
    .finsery-cc-root .details-grid.finsery-cc-pricing-grid .detail-card:only-child,
    .finsery-cc-root .details-grid.finsery-cc-rates-grid .detail-card:only-child,
    .finsery-cc-root .details-grid.finsery-cc-requirements-grid .detail-card:only-child{
      grid-column: 1 / -1;
    }

    .finsery-cc-root .benefits-list{ grid-template-columns: 1fr; }
    .finsery-cc-root .pros-cons-grid{ grid-template-columns: 1fr; }
    .finsery-cc-root .category-table{ font-size: 12px; }
    .finsery-cc-root .category-table th, .finsery-cc-root .category-table td{ padding: 10px 12px; }
    .finsery-cc-root .category-table .rate-primary{ font-size: 15px; }
    .finsery-cc-root .category-table .rate-note--badge{ font-size: 13px; padding: 4px 10px; }
    /* Credits & Perks: horizontal scroll so columns stay readable (not squeezed into viewport) */
    .finsery-cc-root .finsery-cc-credits-perks-scroll{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      min-width: 0;
    }
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table{
      font-size: 12px;
      width: max-content;
      min-width: 32rem;
      max-width: none;
      table-layout: auto;
    }
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table th,
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table td{
      padding: 10px 12px;
    }
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table th:nth-child(1),
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table td:nth-child(1){
      width: auto;
      min-width: 9.5rem;
      max-width: 11rem;
    }
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table th:nth-child(2),
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table td:nth-child(2){
      width: auto;
      min-width: 4.5rem;
      max-width: 6.5rem;
    }
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table th:nth-child(3),
    .finsery-cc-root .finsery-cc-credits-perks-scroll .credits-perks-table td:nth-child(3){
      width: auto;
      min-width: 15rem;
      max-width: 22rem;
    }

    .finsery-cc-root .card-inner{ padding: 20px 10px 16px; }

    .finsery-cc-root .accordion-header{
      padding: 14px 12px;
    }
    .finsery-cc-root .accordion-content-inner{
      padding: 0 10px 16px;
    }

    /* Tab bar: true horizontal scroll (desktop flex:1 shrinks labels; disable on small screens) */
    .finsery-cc-root .card-details-section{
      min-width: 0;
    }
    .finsery-cc-root .tab-nav{
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
    }
    .finsery-cc-root .tab-btn{
      flex: 0 0 auto;
      min-width: max(7.5rem, max-content);
      padding: 14px 12px;
      font-size: 12px;
      scroll-snap-align: start;
    }
    .finsery-cc-root .tab-content{
      min-width: 0;
    }
    /* Generic Modern on small screens: tighter fit for all 5 tabs, no side cut */
    .finsery-cc-root.finsery-cc-context--generic-modern .tab-nav{
      overflow-x: hidden;
      scroll-snap-type: none;
      padding-inline: 4px;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .tab-btn{
      flex: 1 1 0;
      min-width: 0;
      padding: 12px 6px;
      font-size: 11px;
      gap: 5px;
      line-height: 1.15;
      white-space: normal;
      text-align: center;
      justify-content: center;
    }
    .finsery-cc-root.finsery-cc-context--generic-modern .tab-btn i{
      font-size: 11px;
      flex-shrink: 0;
    }
    .finsery-cc-root .tab-panel{
      padding: 20px 10px;
      min-width: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    .finsery-cc-root .tab-panel.active{
      display: block;
    }

    .finsery-cc-root .card-widget > .finsery-cc-widget-foot{
      padding: 8px 10px 12px;
    }
    .finsery-cc-root .finsery-cc-widget-foot .disclaimer__informational{
      font-size: clamp(11px, 0.65vw + 8.9px, 11.5px);
      line-height: 1.48;
    }

    /* Wide category table: extend past column so tab panel scrolls (Credits & Perks stays full-width above) */
    .finsery-cc-root .category-table{
      min-width: 28rem;
      width: max-content;
      max-width: none;
      overflow: visible;
    }
    .finsery-cc-root .additional-content.finsery-cc-wysiwyg{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }

    /* Open accordion: allow horizontal overflow to reach tab-panel scroller */
    .finsery-cc-root .accordion-item.active .accordion-content{
      overflow-x: auto;
      overflow-y: hidden;
    }
    .finsery-cc-root .accordion-content-inner{
      overflow-x: visible;
      min-width: 0;
    }
  }

  @media (max-width: 480px){
    .finsery-cc-root .tab-btn{ min-width: max(6.25rem, max-content); padding: 12px 10px; }
    /* Keep tab lead icons visible on small phones (was display:none, which hid all FA icons). */
    .finsery-cc-root .tab-btn i{
      font-size: 13px;
      flex-shrink: 0;
    }
  }