/* FFE_Pair_Page — scoped, mobile-first, high-readability design.
   Brand: black + gold + white. No gray. Grounded in:
   - WCAG 1.4.8 (line width <=80 chars, line-height >=1.5, not justified)
   - WCAG 1.4.12 text spacing (paragraph spacing >= 2x font size survivable)
   - Baymard optimal line length ~50-75 chars
   - WCAG AA contrast >=4.5:1 (white / warm-white on near-black)
   All selectors live under .ffe-pp to prevent theme bleed. Heights are
   reserved on JS-filled blocks to avoid CLS. */

.ffe-pp{
  --pp-bg:#0a0a0a;
  --pp-card:#141417;
  --pp-card-2:#1a1a1e;
  --pp-line:rgba(255,255,255,.10);
  --pp-line-gold:rgba(232,185,35,.30);
  --pp-fg:#ffffff;                 /* headings / strong */
  --pp-text:#efe9dc;               /* body — warm white, NOT gray, AA on black */
  --pp-gold:#e8b923;
  --pp-gold-bright:#f5d77e;
  --pp-r:16px; --pp-r-sm:11px;
  --pp-pad:clamp(18px,4vw,28px);
  --pp-gap:clamp(28px,5vw,44px);   /* space between major sections */

  color:var(--pp-text);
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased;
  text-align:left;
  max-width:1080px; margin:0 auto;
  padding:clamp(12px,3vw,24px) clamp(16px,4vw,28px) clamp(48px,8vw,72px);
  box-sizing:border-box; overflow-x:clip;
}
.ffe-pp *,.ffe-pp *::before,.ffe-pp *::after{box-sizing:border-box}
.ffe-pp h1,.ffe-pp h2,.ffe-pp h3,.ffe-pp p,.ffe-pp ul,.ffe-pp ol{margin:0;color:inherit}
.ffe-pp strong,.ffe-pp b{color:var(--pp-fg);font-weight:700}
.ffe-pp em{color:var(--pp-gold-bright);font-style:italic}
.ffe-pp a{color:var(--pp-gold-bright);text-decoration:none;font-weight:600}
.ffe-pp a:hover,.ffe-pp a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.ffe-pp a:focus-visible{outline:2px solid var(--pp-gold);outline-offset:2px;border-radius:4px}

/* Reading measure: keep prose to a comfortable line length (~66ch). */
.ffe-pp__measure{max-width:66ch}

/* ---------- hero (plain, on page background) ---------- */
.ffe-pp__crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13px;color:var(--pp-text);opacity:.9;margin:0 0 var(--pp-gap)}
.ffe-pp__crumbs a{color:var(--pp-gold-bright)}
.ffe-pp__crumbs [aria-current="page"]{color:var(--pp-fg);font-weight:700}
.ffe-pp__crumbs span[aria-hidden]{color:var(--pp-gold);opacity:.7}

.ffe-pp__h1{
  font-size:clamp(28px,6vw,46px);line-height:1.1;letter-spacing:-.02em;
  font-weight:800;color:var(--pp-fg);margin:0 0 16px;text-wrap:balance;
  text-align:center;                                   /* centered hero */
}
.ffe-pp__intro{font-size:clamp(16px,1.4vw,19px);max-width:60ch;margin:0 auto 22px;text-align:center}

/* Quick answer (direct answer up top = strong AI-citation + snippet signal) */
.ffe-pp__quick{
  margin:0 0 var(--pp-gap);padding:18px 20px;border-radius:var(--pp-r);
  border:1px solid var(--pp-line-gold);
  background:radial-gradient(120% 90% at 0% 0%,rgba(232,185,35,.08),transparent 62%),var(--pp-card);
}
.ffe-pp__quick-a{font-size:clamp(15.5px,1.3vw,18px);max-width:72ch;margin:0 auto}
.ffe-pp__quick-a::first-letter{font-weight:700}
.ffe-pp__facts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ffe-pp__facts li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  background:rgba(232,185,35,.10);border:1px solid var(--pp-line-gold);border-radius:999px;
  font-size:13px;font-weight:700;color:var(--pp-gold-bright)}
.ffe-pp__facts li::before{content:"✓";font-size:12px}
.ffe-pp__updated{margin:12px 0 0;font-size:12.5px;color:var(--pp-text);opacity:.8}

.ffe-pp__widget{margin:0 0 24px}

/* ---------- Buy/Sell (Transak) funnel widget ----------
   GOAL: the widget must NEVER be wider than the screen — the user has to see
   and control all of it. The previous mobile rule used width:100vw + transform
   translateX(-50%) to go edge-to-edge; in some browsers (in-app/Messenger,
   when a scrollbar is present) 100vw is wider than the visual viewport, so the
   iframe's right side (currency dropdowns, network) was pushed off-screen and
   unreachable. We now constrain EVERYTHING to max-width:100% (no 100vw, no
   transform) so the Transak iframe is exactly the available width and renders
   fully responsive. A thin frame keeps it a tidy, contained card. */
.ffe-pp__widget .ffe-transak-container{width:100%;max-width:560px;margin:0 auto;box-sizing:border-box}
.ffe-pp__widget .ffe-transak-widget-wrapper{
  width:100%;max-width:100%;box-sizing:border-box;
  height:auto;min-height:680px;max-height:none;overflow:hidden;
  background:transparent !important;box-shadow:none;
  border:1px solid rgba(255,255,255,.12);border-radius:14px}
.ffe-pp__widget .ffe-transak-widget-wrapper iframe{width:100%;max-width:100%;min-height:680px;height:auto;border:0;border-radius:14px;display:block}
.ffe-pp__widget iframe{max-width:100%;min-height:680px}   /* belt-and-suspenders */
@media (max-width:768px){
  /* Full available width WITHOUT 100vw/transform → can't overflow the screen.
     The container already centers; just let it use 100% of the content area. */
  .ffe-pp__widget .ffe-transak-container{max-width:100%}
  .ffe-pp__widget .ffe-transak-widget-wrapper,
  .ffe-pp__widget .ffe-transak-widget-wrapper iframe{min-height:720px}
}
@media (max-width:380px){
  .ffe-pp__widget .ffe-transak-widget-wrapper,
  .ffe-pp__widget .ffe-transak-widget-wrapper iframe{min-height:680px}
}

/* live rate — a clean gold-edged pill, not a cramped line */
.ffe-pp__rate{
  display:block;min-height:30px;margin:0 0 var(--pp-gap);
  padding:14px 18px;border:1px solid var(--pp-line-gold);border-radius:var(--pp-r-sm);
  background:rgba(232,185,35,.05);font-size:15.5px;
}
.ffe-pp__rate-line strong,.ffe-pp__rate-line b{color:var(--pp-gold-bright)}
.ffe-pp__rate-upd{display:block;font-size:12.5px;color:var(--pp-text);opacity:.8;margin-top:5px}

/* ---------- shared section rhythm ---------- */
.ffe-pp section{margin:0 0 var(--pp-gap)}
.ffe-pp h2{
  font-size:clamp(21px,3.2vw,30px);font-weight:800;letter-spacing:-.015em;
  color:var(--pp-fg);line-height:1.2;margin:0 0 18px;
}
.ffe-pp__card,
.ffe-pp__fng,
.ffe-pp__conv,
.ffe-pp__how,
.ffe-pp__faq,
.ffe-pp__related{
  background:var(--pp-card);border:1px solid var(--pp-line);
  border-radius:var(--pp-r);padding:var(--pp-pad);
}

/* ---------- Fear & Greed ---------- */
.ffe-pp__fng{display:flex;gap:20px;align-items:flex-start;
  background:radial-gradient(120% 90% at 0% 0%,rgba(232,185,35,.08),transparent 60%),var(--pp-card)}
.ffe-pp__fng-num{flex:0 0 auto;text-align:center;line-height:1;padding-top:2px}
.ffe-pp__fng-num span{font-size:clamp(36px,7vw,52px);font-weight:800;color:var(--pp-gold-bright)}
.ffe-pp__fng-num small{display:block;font-size:11px;color:var(--pp-text);opacity:.8;margin-top:4px}
.ffe-pp__fng-body{max-width:58ch}
.ffe-pp__fng-body strong{display:block;font-size:18px;margin-bottom:8px;color:var(--pp-fg)}
.ffe-pp__fng-body p{margin:0 0 10px}
.ffe-pp__disclaimer{font-size:12.5px;color:var(--pp-text);opacity:.78;line-height:1.6}
.ffe-pp__disclaimer--foot{margin-top:12px}

/* ---------- chart ---------- */
.ffe-pp__chart-box{min-height:380px;border:1px solid var(--pp-line);border-radius:var(--pp-r-sm);
  background:var(--pp-card-2);overflow:hidden;margin-top:4px;position:relative}
/* placeholder/centered states use a modifier so the loaded chart can fill the
   box (flex-centering on the box would squash the TradingView iframe). */
.ffe-pp__chart-box.is-loading,.ffe-pp__chart-box.is-error{display:flex;align-items:center;justify-content:center}
.ffe-pp__chart-box>div{width:100%}
.ffe-pp__chart-ph{color:var(--pp-text);opacity:.85;font-size:13.5px;text-align:center;padding:16px;line-height:1.6}
.ffe-pp__chart-ph a{color:var(--pp-gold-bright);font-weight:600}

/* ---------- conversion tables ---------- */
/* answer-first lead under section headings (GEO/snippet signal) */
.ffe-pp__lead{font-size:clamp(15px,1.2vw,17px);max-width:72ch;margin:0 0 16px;color:var(--pp-text)}

.ffe-pp__conv-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.ffe-pp__conv-grid{grid-template-columns:1fr 1fr}}
.ffe-pp__conv-tbl{width:100%;border-collapse:collapse;background:var(--pp-card-2);
  border:1px solid var(--pp-line);border-radius:var(--pp-r-sm);overflow:hidden;min-height:360px}
.ffe-pp__conv-tbl th,.ffe-pp__conv-tbl td{padding:12px 16px;text-align:left;font-size:14.5px;
  border-bottom:1px solid var(--pp-line)}
.ffe-pp__conv-tbl th{background:#0e0e10;color:var(--pp-gold-bright);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.ffe-pp__conv-tbl td:last-child{color:var(--pp-fg);text-align:right;font-variant-numeric:tabular-nums}
.ffe-pp__conv-tbl tr:last-child td{border-bottom:0}
.ffe-pp__conv-note{font-size:13px;color:var(--pp-text);opacity:.8;margin-top:14px}

/* ---------- unique prose (the readable core) ---------- */
/* Airy, easy-to-read rhythm (modern long-form UX): generous space between
   paragraphs, clear separation before each new subheading, roomy line length. */
.ffe-pp__prose{padding:0}
.ffe-pp__measure{max-width:70ch;margin-left:auto;margin-right:auto}  /* centered column */
.ffe-pp__prose .ffe-pp__measure{font-size:17px;line-height:1.8}

/* "Invest safely" summary card — centered, with a link to the full guide. */
.ffe-pp__safe{max-width:760px;margin:var(--pp-gap) auto 0;padding:22px 24px;
  border:1px solid var(--pp-line-gold);border-radius:var(--pp-r);
  background:radial-gradient(120% 90% at 50% 0%,rgba(232,185,35,.08),transparent 62%),var(--pp-card);
  text-align:center}
.ffe-pp__safe h2{margin:0 0 8px}
.ffe-pp__safe p{margin:0 auto 14px;max-width:60ch;color:var(--pp-text);line-height:1.7}
.ffe-pp__safe ul{list-style:none;margin:0 auto 16px;padding:0;max-width:60ch;text-align:left;display:grid;gap:9px}
.ffe-pp__safe li{position:relative;padding-left:26px;line-height:1.6}
.ffe-pp__safe li::before{content:"✓";position:absolute;left:0;top:0;color:var(--pp-gold-bright);font-weight:800}
.ffe-pp__safe .ffe-pp__btn{margin-top:2px}
.ffe-pp__prose .ffe-pp__measure>*+*{margin-top:1.5em}        /* vertical rhythm */
.ffe-pp__prose h2{margin:0 0 16px}
.ffe-pp__prose h3{font-size:clamp(19px,2.2vw,23px);font-weight:700;color:var(--pp-fg);
  line-height:1.35;margin:2.2em 0 .7em}
.ffe-pp__prose h2:first-child,.ffe-pp__prose h3:first-child{margin-top:0}
.ffe-pp__prose p{margin:0}
.ffe-pp__prose ul,.ffe-pp__prose ol{margin:0;padding-left:22px}
.ffe-pp__prose li{margin:.6em 0;line-height:1.7}
.ffe-pp__prose li::marker{color:var(--pp-gold)}
.ffe-pp__prose .ffe-pp__risk{
  margin:1.6em 0;padding:18px 20px;background:rgba(232,185,35,.07);
  border:1px solid var(--pp-line-gold);border-left:4px solid var(--pp-gold);
  border-radius:0 var(--pp-r-sm) var(--pp-r-sm) 0;max-width:none;
}
.ffe-pp__prose .ffe-pp__risk>*+*{margin-top:.9em}

/* Clear breathing room between the major page sections (airy layout). */
.ffe-pp__prose,.ffe-pp__how,.ffe-pp__faq,.ffe-pp__related{margin-top:var(--pp-gap)}

/* ---------- no-KYC highlight callout + scroll-to button ---------- */
.ffe-pp__kyc-cta{margin:0 0 8px;padding:18px 20px;border-radius:var(--pp-r-sm);
  background:linear-gradient(180deg,rgba(232,185,35,.12),rgba(232,185,35,.05));
  border:1px solid var(--pp-line-gold)}
.ffe-pp__kyc-cta strong{color:var(--pp-gold-bright)}
.ffe-pp__kyc-cta p{margin:0 0 12px;font-size:15.5px;line-height:1.65}
.ffe-pp__btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;
  padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;
  color:#0a0a0a !important;background:linear-gradient(135deg,#f7e29c,#e8b923 45%,#b8860b);
  text-decoration:none !important;border:0;cursor:pointer;transition:filter .15s,transform .15s}
.ffe-pp__btn:hover,.ffe-pp__btn:focus-visible{filter:brightness(1.07);transform:translateY(-1px)}
.ffe-pp__btn:focus-visible{outline:2px solid var(--pp-gold-bright);outline-offset:3px}

/* ---------- readable data tables (KYC levels, limits, payment methods) ---------- */
.ffe-pp__tablewrap{margin:1.2em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--pp-line);border-radius:var(--pp-r-sm)}
.ffe-pp__prose table.ffe-pp__data{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.ffe-pp__prose table.ffe-pp__data caption{caption-side:top;text-align:left;padding:12px 14px 0;
  font-weight:700;color:var(--pp-gold-bright);font-size:14px}
.ffe-pp__prose table.ffe-pp__data th,.ffe-pp__prose table.ffe-pp__data td{
  padding:11px 14px;text-align:left;border-bottom:1px solid var(--pp-line);vertical-align:top;line-height:1.55}
.ffe-pp__prose table.ffe-pp__data thead th{background:#0e0e10;color:var(--pp-gold-bright);
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;position:sticky;top:0}
.ffe-pp__prose table.ffe-pp__data tr:last-child td{border-bottom:0}
.ffe-pp__prose table.ffe-pp__data td:not(:first-child){font-variant-numeric:tabular-nums}
@media (max-width:600px){.ffe-pp__prose table.ffe-pp__data{font-size:13.5px}
  .ffe-pp__prose table.ffe-pp__data th,.ffe-pp__prose table.ffe-pp__data td{padding:9px 11px}}
.ffe-pp__yes{color:#7ee787;font-weight:700}
.ffe-pp__no{color:#ff9b8c;font-weight:700}
/* KYC limits section breaks out of the 70ch reading measure so wide tables fit. */
.ffe-pp__prose .ffe-pp__kyc-section{max-width:none}
.ffe-pp__kyc-section h3{margin-top:1.6em}
.ffe-pp [id]{scroll-margin-top:20px}     /* anchor jump (#kyc-limits) clears the top */
html{scroll-behavior:smooth}

/* ---------- how-to ---------- */
.ffe-pp__steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:12px}
.ffe-pp__steps li{position:relative;padding:16px 18px 16px 56px;background:var(--pp-card-2);
  border:1px solid var(--pp-line);border-radius:var(--pp-r-sm);font-size:15px}
.ffe-pp__steps li::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:15px;
  width:28px;height:28px;border-radius:50%;background:rgba(232,185,35,.14);border:1px solid var(--pp-line-gold);
  color:var(--pp-gold-bright);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.ffe-pp__how p{margin-top:16px}

/* ---------- FAQ ---------- */
.ffe-pp__faq h2{margin-bottom:6px}
.ffe-pp__faq-row{background:var(--pp-card-2);border:1px solid var(--pp-line);
  border-radius:var(--pp-r-sm);margin-top:12px;overflow:hidden}
.ffe-pp__faq-row[open]{border-color:var(--pp-line-gold)}
.ffe-pp__faq-row summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;
  font-size:15.5px;color:var(--pp-fg);display:flex;justify-content:space-between;gap:16px;
  align-items:center;min-height:52px}
.ffe-pp__faq-row summary::-webkit-details-marker{display:none}
.ffe-pp__faq-row summary::after{content:"+";color:var(--pp-gold-bright);font-size:24px;line-height:1;flex:0 0 auto}
.ffe-pp__faq-row[open] summary::after{content:"\2013"}
.ffe-pp__faq-a{padding:0 18px 18px;max-width:66ch}

/* ---------- related ---------- */
.ffe-pp__related ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.ffe-pp__related li a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  background:var(--pp-card-2);border:1px solid var(--pp-line);border-radius:999px;
  font-size:14px;color:var(--pp-fg);font-weight:600}
.ffe-pp__related li a:hover{border-color:var(--pp-gold);color:var(--pp-gold-bright);text-decoration:none}

/* ---------- E-E-A-T footer ---------- */
.ffe-pp__eeat{border-top:1px solid var(--pp-line);padding-top:22px;margin-top:8px}
.ffe-pp__byline{font-size:14px;margin:0 0 10px;color:var(--pp-text)}
.ffe-pp__byline a{color:var(--pp-gold-bright)}
.ffe-pp__eeat .ffe-pp__disclaimer{max-width:80ch}

@media (max-width:600px){
  .ffe-pp{font-size:16px}
  .ffe-pp__fng{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){.ffe-pp *{animation:none!important;transition:none!important}}