/* Pair-page-specific styles (extracted from v11 pages/*.html inline <style>) */
/* Comparison grid cards */
.ip-card .grid.md\:grid-cols-2>div{
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:20px}
.ip-card .grid.md\:grid-cols-2>div.bg-green-500{
  background:#ecfdf5!important;border-color:#059669!important}
/* Table header - dark navy */
.ip-card thead tr,.ip-card tr.bg-white.bg-opacity-10{background:#001f3f!important}
.ip-card thead th{color:#fff!important;padding:12px 16px;text-align:left;font-weight:600}
.ip-card tbody tr.bg-white.bg-opacity-5 td{background:#f8fafc!important}
.ip-card td{color:#1e293b!important}
/* Pair card links - no underline */
.ip-card a.inline-block{text-decoration:none!important}
.ip-card .grid a{text-decoration:none!important}
/* For inner pages topbar sits on a full-width navy bar */
.ip-topbar-wrapper{background:#001f3f;padding:0}
/* ── Hero ── */
.ip-hero{background:#001f3f;padding:0}
.ip-hero-inner{max-width:1240px;margin:0 auto;padding:40px 52px}
.ip-breadcrumb{margin-bottom:20px;font-family:'IBM Plex Sans',sans-serif;font-size:12px}
.ibc-link{color:rgba(255,255,255,.5)!important;text-decoration:none!important}
.ibc-link:hover{color:rgba(255,255,255,.85)!important}
.ibc-sep{color:rgba(255,255,255,.2);margin:0 7px}
.ibc-cur{color:rgba(255,255,255,.3)}
.ip-h1{font-family:'Playfair Display',serif!important;font-size:clamp(26px,3.5vw,44px)!important;font-weight:700!important;color:#fff!important;line-height:1.12!important;letter-spacing:-.5px!important;margin:0 0 14px!important;max-width:750px}
.ip-rate-badge{display:inline-flex;align-items:center;background:rgba(0,102,204,.25);border:1px solid rgba(0,102,204,.45);border-radius:100px;padding:5px 16px;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#93c5fd!important;margin-bottom:14px}
.ip-cta-strip{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.ip-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#0066cc;color:#fff!important;font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:700;padding:13px 30px;border-radius:9px;text-decoration:none!important;transition:background .15s}
.ip-cta-btn:hover{background:#004a8f;color:#fff!important}
.ip-cta-meta{font-family:'IBM Plex Sans',sans-serif;font-size:12px;color:rgba(255,255,255,.4)}
.ip-cta-meta b{color:rgba(255,255,255,.65)}
/* ── Content area ── */
.ip-body{background:#f0f4f8}
.ip-content-wrap{max-width:1240px;margin:0 auto;padding:32px 52px 64px}
/* ── Section cards ── */
.ip-card{background:#fff;border:1px solid #dce8f5;border-radius:14px;padding:32px 36px;margin-bottom:20px;overflow:hidden}
.ip-card:empty{display:none}
.ip-card:first-child{margin-top:0}
.ip-card h2{font-family:'Playfair Display',serif!important;font-size:22px!important;font-weight:700!important;color:#001f3f!important;margin:0 0 18px!important;padding-bottom:12px!important;border-bottom:1px solid #dce8f5!important}
.ip-card h3{font-family:'IBM Plex Sans',sans-serif!important;font-size:16px!important;font-weight:700!important;color:#001f3f!important;margin:16px 0 8px!important}
.ip-card p{font-family:'IBM Plex Sans',sans-serif!important;font-size:14px!important;color:#1e293b!important;line-height:1.75!important;margin-bottom:10px!important}
.ip-card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;width:100%;min-width:360px;font-family:'IBM Plex Sans',sans-serif;font-size:14px}
.ip-card th{background:#001f3f!important;color:#fff!important;padding:11px 14px;font-weight:600;text-align:left;white-space:nowrap}
.ip-card td{padding:11px 14px;border-bottom:1px solid #dce8f5;color:#1e293b!important;vertical-align:middle;white-space:normal;min-width:80px}
.ip-card tr:nth-child(even) td{background:#f8fafc!important}
.ip-card ul{list-style:none;padding-left:0;margin-bottom:12px}
.ip-card li{font-family:'IBM Plex Sans',sans-serif!important;font-size:14px!important;color:#1e293b!important;line-height:1.65!important;margin-bottom:8px!important;
  display:block!important;white-space:normal!important}
/* Fix: .flex.gap-2 on li causes whitespace collapse between text nodes and <strong> */
.ip-card li.flex{display:block!important}
/* ── Related pairs chips ── */
.rp-card h2{border-bottom:1px solid #dce8f5!important;padding-bottom:12px!important;margin-bottom:16px!important}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.rp-chip{display:flex;flex-direction:column;gap:2px;background:#f8fafc;border:1.5px solid #dce8f5;border-radius:10px;padding:12px 14px;text-decoration:none!important;transition:border-color .15s,background .15s}
.rp-chip:hover{border-color:#0066cc;background:#f0f6ff}
.rp-pair{font-family:'IBM Plex Mono',monospace!important;font-size:14px!important;font-weight:600!important;color:#001f3f!important}
.rp-names{font-family:'IBM Plex Sans',sans-serif!important;font-size:11px!important;color:#475569!important}
.ip-card li span,.ip-card li>span:first-child{display:inline!important;margin-right:3px}
/* Add soft bullet/arrow for non-emoji lists */
.ip-card ul>li:not([class])::before{content:'→ ';color:#0066cc;font-weight:600}
.ip-card strong{color:#001f3f!important}
.ip-card a{color:#0066cc!important;text-decoration:none!important}
.ip-card a.ss-btn-solid,.ip-card a.ss-btn-solid:visited,.ip-card a.ip-cta-btn,.ip-card a.ip-cta-btn:visited,.ip-card a.trk-back-btn,.ip-card a.trk-back-btn:visited,.ip-card a.hp-track-btn,.ip-card a.hp-track-btn:visited,.ip-card a.hp-back-btn,.ip-card a.hp-back-btn:visited{color:#fff!important;text-decoration:none!important}
.ip-card a:hover{text-decoration:underline!important}
/* ── Content CTA strip ── */
/* ── Inline CTA card (pair/guide pages) ── */
.ip-inline-cta{background:#001f3f!important;border-radius:16px!important;padding:0!important;margin:28px 0!important;border:1px solid rgba(255,255,255,.08)!important;overflow:hidden!important;box-shadow:0 4px 24px rgba(0,31,63,.18)!important}
.ip-inline-cta *{color:#fff!important}
/* suppress any old gradient/text styles from source */
.ip-inline-cta h2,.ip-inline-cta h3{display:none!important}
.ip-inline-cta>*:not(.ip-cta-inner){display:none!important}
.ip-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;flex-wrap:wrap}
.ip-cta-coins{display:flex;align-items:center;gap:0;flex-shrink:0}
.ip-cta-coin{width:44px;height:44px;border-radius:50%;border:3px solid #001f3f;margin-right:-10px;flex-shrink:0}
.ip-cta-arrow{font-size:20px;color:rgba(255,255,255,.4);margin:0 6px 0 16px;flex-shrink:0}
.ip-cta-text{flex:1;min-width:160px}
.ip-cta-headline{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fff!important;line-height:1.2;margin-bottom:6px}
.ip-cta-sub{font-family:'IBM Plex Sans',sans-serif;font-size:13px;color:rgba(255,255,255,.55)!important;margin:0}
.ip-cta-pills{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ip-cta-pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:3px 10px;font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;color:#fff!important;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
.ip-cta-pill.green{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.25);color:#4ade80!important}
.ip-cta-action{flex-shrink:0}
.ip-cta-go{display:inline-flex;align-items:center;gap:8px;background:#0066cc;color:#fff!important;font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:700;padding:14px 28px;border-radius:10px;text-decoration:none!important;transition:background .15s;white-space:nowrap;border:none!important;-webkit-font-smoothing:antialiased}
.ip-cta-go:hover{background:#0055aa!important;color:#fff!important;text-decoration:none!important}
.ip-inline-cta .ip-cta-go,.ip-inline-cta .ip-cta-go *{color:#fff!important}

/* ── FAQ blocks (pair pages, guides, etc.) ── */
/* The source HTML uses Tailwind classes (bg-white bg-opacity-5 etc.) that aren't loaded.
   We override with proper styling. */
.ip-card details{background:#f8fafc!important;border:1.5px solid #dce8f5!important;border-radius:10px!important;padding:0!important;margin-bottom:10px!important;cursor:pointer!important;transition:border-color .15s,background .15s}
.ip-card details:hover{border-color:#cbd5e1}
.ip-card details[open]{background:#fff!important;border-color:#0066cc!important;padding:0!important}
.ip-card details summary{font-family:'IBM Plex Sans',sans-serif!important;font-size:15px!important;font-weight:600!important;color:#001f3f!important;padding:16px 20px!important;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0!important;position:relative}
.ip-card details summary::-webkit-details-marker{display:none}
.ip-card details summary::after{content:'+';font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:400;color:#0066cc;flex-shrink:0;transition:transform .2s}
.ip-card details[open] summary::after{content:'−'}
.ip-card details p{padding:0 20px 18px!important;margin:0!important;color:#1e293b!important;line-height:1.65!important}
.ip-card details ul,.ip-card details ol{padding:0 20px 18px 40px!important;margin:0!important}
.ip-card details > div{padding:0 20px 18px!important}
.ip-card details > div > div{padding:0!important}
.ip-card details > div p{padding:0 0 10px!important}
.ip-card details > div p:last-child{padding-bottom:0!important}
.ip-card details > div ul,.ip-card details > div ol{padding-left:20px!important;padding-bottom:10px!important}

/* ── Related Exchange Pairs section (pair pages) ── */
.ip-card .grid.md\:grid-cols-3{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:12px!important;margin-top:8px}
.ip-card .grid.md\:grid-cols-3 > a{display:flex!important;flex-direction:column!important;gap:3px!important;background:#f8fafc!important;border:1.5px solid #dce8f5!important;border-radius:10px!important;padding:14px 16px!important;text-decoration:none!important;transition:border-color .15s,background .15s;color:inherit!important;align-items:flex-start!important;justify-content:flex-start!important}
.ip-card .grid.md\:grid-cols-3 > a:hover{border-color:#0066cc!important;background:#f0f6ff!important;text-decoration:none!important}
.ip-card .grid.md\:grid-cols-3 > a p{margin:0!important;padding:0!important}
.ip-card .grid.md\:grid-cols-3 > a p.font-bold{font-family:'IBM Plex Mono',monospace!important;font-size:15px!important;font-weight:600!important;color:#001f3f!important;display:flex;align-items:center;gap:7px}
.ip-card .grid.md\:grid-cols-3 > a p.text-sm{font-family:'IBM Plex Sans',sans-serif!important;font-size:12px!important;color:#475569!important;margin-top:2px!important}
/* "View All 56 Pairs" variant */
.ip-card .grid.md\:grid-cols-3 > a.bg-gradient-to-r{background:linear-gradient(135deg,#0066cc,#004a8f)!important;border-color:transparent!important;color:#fff!important;justify-content:center!important;align-items:center!important;text-align:center}
.ip-card .grid.md\:grid-cols-3 > a.bg-gradient-to-r:hover{background:linear-gradient(135deg,#004a8f,#003366)!important;color:#fff!important}
.ip-card .grid.md\:grid-cols-3 > a.bg-gradient-to-r p.font-bold{color:#fff!important;font-family:'IBM Plex Sans',sans-serif!important;justify-content:center}

/* ── "Why Exchange X with..." grid (pair pages: 4 feature cards) ── */
.ip-card .grid.md\:grid-cols-2{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:14px!important;margin-bottom:8px}

/* ── "Popular pairs for FixedFloat refugees" block fixes ── */
/* Source pages have bad HTML where pair labels and descriptions run together.
   Force proper spacing around <strong> blocks inside paragraphs. */
.ip-card p strong{display:inline-block;margin-right:4px}
/* When bold text is followed by links that should be separated, this line-breaks them */
.ip-card p > a:not(:first-child){margin-left:2px}

/* ── "Ready to Swap? No Account Needed." CTA block ── */
/* The guide pages have these bottom CTAs rendered bare (no wrapping container class).
   Target the heading text + following elements. */
.ip-card h2 + p + a,
.ip-card h3 + p + a{display:inline-block;background:#0066cc!important;color:#fff!important;font-weight:700;padding:12px 26px;border-radius:9px;text-decoration:none!important;margin:8px 0}

/* ── Comparison page: "Compare Superswap.cx with Other Exchanges" grid ── */
/* Uses Tailwind .grid.sm:grid-cols-2.md:grid-cols-4 — render as real grid */
.ip-card .grid.sm\:grid-cols-2,
.ip-card .grid.sm\:grid-cols-2.md\:grid-cols-4,
.ip-card .grid.md\:grid-cols-4{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:12px!important;margin:10px 0}
/* Links inside this grid are cards, not inline text */
.ip-card .grid.sm\:grid-cols-2 > a,
.ip-card .grid.md\:grid-cols-4 > a{display:block!important;background:#f8fafc!important;border:1.5px solid #dce8f5!important;border-radius:10px!important;padding:14px 16px!important;text-align:center!important;text-decoration:none!important;color:#001f3f!important;transition:border-color .15s,background .15s}
.ip-card .grid.sm\:grid-cols-2 > a:hover,
.ip-card .grid.md\:grid-cols-4 > a:hover{border-color:#0066cc!important;background:#f0f6ff!important;text-decoration:none!important}
/* Force the span children onto separate lines */
.ip-card .grid.sm\:grid-cols-2 > a > span,
.ip-card .grid.md\:grid-cols-4 > a > span{display:block!important}
.ip-card .grid.sm\:grid-cols-2 > a > span:first-child,
.ip-card .grid.md\:grid-cols-4 > a > span:first-child{font-family:'IBM Plex Sans',sans-serif!important;font-size:14px!important;font-weight:700!important;color:#001f3f!important;margin-bottom:2px}
.ip-card .grid.sm\:grid-cols-2 > a > span:last-child,
.ip-card .grid.md\:grid-cols-4 > a > span:last-child{font-family:'IBM Plex Sans',sans-serif!important;font-size:12px!important;color:#0066cc!important;margin-top:0!important}

/* ── Privacy Comparison grid (3-column) ── */
.ip-card .grid.md\:grid-cols-3{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:14px!important;margin:10px 0}
.ip-card .grid.md\:grid-cols-3 > div{background:#f8fafc!important;border:1.5px solid #dce8f5!important;border-radius:12px!important;padding:20px 18px!important;text-align:center}
.ip-card .grid.md\:grid-cols-3 > div > .text-3xl{font-size:28px!important;margin-bottom:8px!important;display:block}
.ip-card .grid.md\:grid-cols-3 > div > h3{font-family:'IBM Plex Sans',sans-serif!important;font-size:15px!important;font-weight:700!important;color:#001f3f!important;margin:0 0 10px!important}
.ip-card .grid.md\:grid-cols-3 > div > p{font-family:'IBM Plex Sans',sans-serif!important;font-size:13px!important;margin:4px 0!important;line-height:1.4!important}
.ip-card .grid.md\:grid-cols-3 > div > p.text-green-300{color:#047857!important;font-weight:600}
.ip-card .grid.md\:grid-cols-3 > div > p.text-yellow-300{color:#b45309!important}
.ip-card .grid.md\:grid-cols-3 > div > p.text-red-300{color:#dc2626!important;font-weight:600}

/* ── Final Verdict gradient block (comparison pages) ── */
/* Uses Tailwind bg-gradient-to-r from-green-600 via-blue-600 to-purple-700 */
.bg-gradient-to-r.from-green-600,
.ip-body .bg-gradient-to-r{display:block;background:linear-gradient(135deg,#047857 0%,#0066cc 50%,#6d28d9 100%)!important;border-radius:16px!important;padding:32px 36px!important;margin:24px 0!important;color:#fff!important;box-shadow:0 4px 20px rgba(0,31,63,.15)}
.bg-gradient-to-r.from-green-600 h2,
.ip-body .bg-gradient-to-r h2{color:#fff!important;font-family:'Playfair Display',serif!important;font-size:24px!important;font-weight:700!important;border:none!important;padding:0!important;margin:0 0 16px!important}
.bg-gradient-to-r.from-green-600 p,
.ip-body .bg-gradient-to-r p{color:rgba(255,255,255,.92)!important;font-size:15px!important;line-height:1.6!important;margin:0 0 16px!important}
.bg-gradient-to-r.from-green-600 p strong,
.ip-body .bg-gradient-to-r p strong{color:#fff!important;font-weight:700}
.bg-gradient-to-r.from-green-600 ul,
.ip-body .bg-gradient-to-r ul{list-style:none!important;margin:0!important;padding:0!important}
.bg-gradient-to-r.from-green-600 ul li,
.ip-body .bg-gradient-to-r ul li{color:rgba(255,255,255,.95)!important;font-size:14px!important;line-height:1.6!important;margin:0 0 10px!important;padding:0!important;display:block!important}
.bg-gradient-to-r.from-green-600 ul li::before,
.ip-body .bg-gradient-to-r ul li::before{display:none!important}
.bg-gradient-to-r.from-green-600 ul li strong,
.ip-body .bg-gradient-to-r ul li strong{color:#fff!important;font-weight:700}

/* ── Inline-styled "Exchange crypto now" button ── */
/* Any <a> inside ip-card that has an inline background:#2563eb or similar blue should keep its white text */
.ip-card a[style*="background:#2563eb"],
.ip-card a[style*="background: #2563eb"],
.ip-card a[style*="background:#0066cc"],
.ip-card a[style*="background: #0066cc"]{color:#fff!important}

/* ── Comparison page: Real-World Example grid cards ── */
/* After the div-wrapper fix, cards have <h3 class="text-green-300"> header */
.ip-card .grid.md\:grid-cols-2 > div h3.text-green-300{color:#047857!important}
.ip-card .grid.md\:grid-cols-2 > div p.text-3xl{font-family:'IBM Plex Sans',sans-serif!important;font-size:26px!important;font-weight:700!important;color:#001f3f!important;margin-bottom:4px!important}
.ip-card .grid.md\:grid-cols-2 > div p.text-sm{font-family:'IBM Plex Sans',sans-serif!important;font-size:13px!important;color:#475569!important;margin:0!important}
.ip-card .grid.md\:grid-cols-2 > div p.text-red-300{color:#dc2626!important}