/* Extracted internal CSS from featured-snippet-ranking.php */
    /* ============================================================
       FEATURED SNIPPET RANKING -Visual Animation System (fsr- prefix)
       PERFECT-FILL: frame is height:100% flex-column, body flex:1 with
       space-between so content fills the column height, no whitespace.
    ============================================================ */
    @keyframes fsrFloatA   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-10px)} }
    @keyframes fsrFloatB   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-14px)} }
    @keyframes fsrCountBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
    @keyframes fsrBlink    { 0%,100%{opacity:1} 50%{opacity:.3} }
    @keyframes fsrRise     { 0%{transform:translateY(16px);opacity:0} 100%{transform:translateY(0);opacity:1} }
    @keyframes fsrRingSweep{ from{stroke-dashoffset:283} to{stroke-dashoffset:var(--fsr-off,60)} }
    @keyframes fsrRingPulse{ 0%,100%{stroke-dashoffset:var(--fsr-off,60)} 50%{stroke-dashoffset:calc(var(--fsr-off,60) - 6)} }
    @keyframes fsrGlow     { 0%{background-position:-150% 0} 100%{background-position:250% 0} }
    @keyframes fsrSlideIn  { 0%{opacity:0;transform:translateX(14px)} 100%{opacity:1;transform:translateX(0)} }
    @keyframes fsrTypeCursor{ 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes fsrSnippetPop{ 0%{transform:scale(.9);opacity:0} 60%{transform:scale(1.02)} 100%{transform:scale(1);opacity:1} }
    @keyframes fsrStar     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

    .fsr-frame {
      width:100%; max-width:560px; max-height:100%; border-radius:1.1rem;
      background:#fff; border:1px solid #E6ECF5;
      box-shadow:0 12px 30px -14px rgba(17,24,39,.12);
      overflow:hidden; animation:fsrFloatA 6s ease-in-out infinite;
      min-width:0; box-sizing:border-box;
    }
    .fsr-frame * { box-sizing:border-box; }
    .fsr-frame-bar { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; background:#F7F8FC; border-bottom:1px solid #ECEFF6; min-width:0; }
    .fsr-dot { width:10px; height:10px; border-radius:9999px; flex-shrink:0; }
    .fsr-frame-url {
      flex:1; min-width:0; margin-left:.5rem; height:24px; border-radius:9999px; background:#EEF1F8;
      display:flex; align-items:center; padding:0 .75rem; font:600 11px/1 'Inter',monospace;
      color:#475569; gap:.35rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    }
    .fsr-frame-tag { margin-left:auto; display:flex; align-items:center; gap:.35rem; font:800 10px/1 'Inter',monospace; color:#6A58E4; letter-spacing:.05em; }
    .fsr-live-dot { width:7px; height:7px; border-radius:9999px; background:#6A58E4; animation:fsrBlink 1.4s ease-in-out infinite; }
    .fsr-frame-body { padding:clamp(1.2rem,3vw,1.7rem); }

    .fsr-terminal {
      width:100%; max-width:560px; max-height:100%; border-radius:1.1rem; background:#0A0E17;
      border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 30px -14px rgba(0,0,0,.35);
      overflow:hidden; animation:fsrFloatB 7s ease-in-out infinite; min-width:0; box-sizing:border-box;
    }
    .fsr-terminal * { box-sizing:border-box; }
    .fsr-terminal-bar { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.07); }
    .fsr-terminal-title { font:600 12px/1 'Inter',monospace; color:#94A3B8; margin-left:.35rem; }
    .fsr-terminal-live { margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:9999px; border:1px solid rgba(52,211,153,.35); background:rgba(52,211,153,.08); font:800 10px/1 'Inter',monospace; color:#6A58E4; letter-spacing:.05em; }
    .fsr-terminal-body { padding:clamp(1rem,2.6vw,1.2rem); }

    /* snippet box (position zero) */
    .fsr-snippet-box {
      border:1.5px solid rgba(106,88,228,.3); border-radius:.9rem; padding:.9rem 1rem;
      background:linear-gradient(135deg,rgba(106,88,228,.05),rgba(74,134,245,.03));
      animation:fsrSnippetPop .6s ease-out both; position:relative;
    }
    .fsr-snippet-badge { position:absolute; top:-9px; left:14px; font:800 10px/1 'Inter',monospace; color:#fff; background:linear-gradient(135deg,#6A58E4,#4A86F5); padding:.28rem .6rem; border-radius:9999px; letter-spacing:.04em; }
    .fsr-serp-result { padding:.55rem 0; }
    .fsr-serp-url { font:600 10px/1 'Inter',monospace; color:#059669; }
    .fsr-serp-title { font:600 13px/1.3 'Inter',sans-serif; color:#2563EB; margin-top:.2rem; }
    .fsr-serp-desc { font:500 11px/1.4 'Inter',sans-serif; color:#5B6475; margin-top:.15rem; }

    .fsr-bar-row  { display:flex; align-items:center; gap:.7rem; padding:.45rem 0; min-width:0; }
    .fsr-bar-label{ flex-shrink:0; width:120px; font:700 11px/1.25 'Inter',monospace; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .fsr-bar-track{ flex:1; min-width:0; height:6px; border-radius:9999px; background:#EEF1F8; overflow:hidden; position:relative; }
    .fsr-bar-fill { position:absolute; inset:0; border-radius:9999px; background:linear-gradient(90deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4); background-size:250% 100%; transform-origin:left; animation:fsrCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, fsrGlow 3.2s linear infinite 1.1s; }
    .fsr-bar-val { flex-shrink:0; width:40px; text-align:right; font:800 13px/1 'Inter',monospace; color:#6A58E4; }

    .fsr-t-bar-row   { display:flex; align-items:center; gap:.7rem; padding:.45rem 0; min-width:0; }
    .fsr-t-bar-label { flex-shrink:0; width:130px; font:700 11px/1.2 'Inter',monospace; color:#94A3B8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .fsr-t-bar-track { flex:1; min-width:0; height:6px; border-radius:9999px; background:rgba(255,255,255,.08); overflow:hidden; position:relative; }
    .fsr-t-bar-fill  { position:absolute; inset:0; border-radius:9999px; background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4); background-size:250% 100%; transform-origin:left; animation:fsrCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, fsrGlow 3.2s linear infinite 1.1s; }
    .fsr-t-bar-val { flex-shrink:0; width:38px; text-align:right; font:800 12px/1 'Inter',monospace; color:#6A58E4; }

    .fsr-frame-footer { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.05rem; border-radius:.95rem; background:rgba(106,88,228,.06); border:1px solid rgba(106,88,228,.18); }
    .fsr-frame-footer b { font:700 13px/1 'Inter',sans-serif; color:#111827; }
    .fsr-t-footer { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-radius:.9rem; background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.22); }
    .fsr-t-footer b { font:700 12px/1 'Inter',sans-serif; color:#fff; }
    .fsr-pill-violet { padding:.4rem .85rem; border-radius:9999px; background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4); background-size:250% 100%; color:#fff; font:800 11px/1 'Inter',monospace; animation:fsrGlow 3.6s linear infinite; }
    .fsr-pill-green { padding:.35rem .8rem; border-radius:9999px; background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4); background-size:250% 100%; animation:fsrGlow 3.6s linear infinite; color:#04140D; font:800 10px/1 'Inter',monospace; }

    .fsr-stat-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
    .fsr-stat-tile  { text-align:center; padding:.85rem .5rem; border-radius:.85rem; background:#FAFBFF; border:1px solid #ECEFF6; }
    .fsr-stat-tile b{ display:block; font:800 17px/1.1 'Inter',sans-serif; color:#111827; }
    .fsr-stat-tile span{ display:block; margin-top:.35rem; font:700 10px/1.2 'Inter',monospace; color:#475569; letter-spacing:.04em; text-transform:uppercase; }

    .fsr-check-row  { display:flex; align-items:center; gap:.7rem; animation:fsrRise .5s ease-out both; }
    .fsr-check-icon { flex-shrink:0; width:26px; height:26px; border-radius:.55rem; background:rgba(16,185,129,.12); color:#059669; display:flex; align-items:center; justify-content:center; }
    .fsr-check-text { font:600 12px/1.3 'Inter',sans-serif; color:#1E293B; }

    .fsr-ring-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; width:100%; }
    .fsr-ring-card { background:#FAFBFF; border:1px solid #ECEFF6; border-radius:1rem; padding:1rem .8rem; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; animation:fsrRise .55s ease-out both; }
    .fsr-ring-svg  { transform:rotate(-90deg); width:clamp(48px,7vw,60px); height:clamp(48px,7vw,60px); flex-shrink:0; }
    .fsr-ring-svg .track { fill:none; stroke:#EDEFF6; stroke-width:6; }
    .fsr-ring-svg .fill  { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:283; animation:fsrRingSweep 1.3s cubic-bezier(.2,.8,.2,1) both, fsrRingPulse 2.6s ease-in-out infinite 1.3s; }
    .fsr-ring-card-num   { font:800 20px/1 'Inter',sans-serif; color:#111827; }
    .fsr-ring-card-label { font:700 11px/1 'Inter',monospace; color:#475569; text-transform:uppercase; letter-spacing:.03em; }

    /* snippet-type cards */
    .fsr-type-card { display:flex; align-items:center; gap:.8rem; padding:.8rem .9rem; border-radius:.85rem; background:#FAFBFF; border:1px solid #ECEFF6; animation:fsrRise .5s ease-out both; }
    .fsr-type-icon { flex-shrink:0; width:38px; height:38px; border-radius:.7rem; display:flex; align-items:center; justify-content:center; color:#fff; }
    .fsr-type-title { font:700 13px/1.2 'Inter',sans-serif; color:#1E293B; }
    .fsr-type-sub   { font:600 11px/1.3 'Inter',sans-serif; color:#475569; margin-top:.15rem; }

    .fsr-visual { position:relative; width:100%; height:100%; min-height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-sizing:border-box; }
    .grid > * { min-width:0; }
    .fsr-frame, .fsr-terminal { min-width:0; box-sizing:border-box; }

    @media (max-width:640px) {
      .fsr-visual { min-height:240px; padding:.75rem; }
      .fsr-bar-label, .fsr-t-bar-label { width:82px; font-size:10px; }
      .fsr-stat-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
      .fsr-ring-grid  { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:400px) { .fsr-bar-label, .fsr-t-bar-label { width:76px; font-size:10px; } }
    @media (prefers-reduced-motion:reduce) { .fsr-visual * { animation-duration:.001ms !important; animation-iteration-count:1 !important; } }
  


/* ==========================================================
   MOBILE 2-UP FIX -- fixed 3-item metric/stat strips show only
   2 tiles per row on small phones (3 tiles in a row was either
   cramped/clipped, or stacking all 3 full-width made the card
   too tall). The 3rd tile is hidden rather than wrapped to its
   own half-empty row, and the CTA nothing else references it.
   ========================================================== */
@media (max-width: 480px) {
  .fsr-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .fsr-stat-tiles > *:nth-child(3) { display: none !important; }
}