/* ===========================================================================
   HOMEPAGE REDESIGN — ported from the approved prototype (design_handoff_home).
   Scoped under .ce-home so it never touches the rest of the site; the ce-theme
   still supplies the real site header (#masthead) + footer (#colophon). Injected
   into the front-page the_content by ce-seo-layer.php.

   Notes
   -----
   - Tokens live on .ce-home (mirrors the .ce-sm send-money redesign).
   - .ce-home itself is full-bleed using the theme's own .alignfull technique
     (100vw + calc(50% - 50vw) margins) so the coloured bands reach the screen
     edges even though we render inside .site-main > .entry-content.
   - !important is used ONLY on typography that the ce-theme global rule
     (h1,h2,h3 { font-size:var(--fs-lg)!important }) would otherwise win.
   - Fonts (Merriweather Sans, Open Sans) are already loaded by the theme header,
     so no @import / <link> here.
   - Prototype classes that collide with theme classes were renamed:
       .btn-secondary -> .ce-allrev   (theme styles .button.btn-secondary)
     The bespoke prototype header/footer were dropped (theme supplies chrome).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   THEME HEADER FIX (front page only — this sheet loads only on is_front_page).
   The ce-theme deliberately makes ONLY the homepage masthead transparent because
   the old homepage had a dark hero behind it; the white logo + white nav were
   legible against that. Every inner page uses a solid dark header (#002a31) on
   which the same white logo/nav read fine. Our redesigned hero is light, so the
   transparent masthead left the white logo and nav invisible. Give the homepage
   masthead the same solid dark header as the rest of the site — keeping the
   theme's white logo/nav and matching every other page. Applies at all widths,
   so the mobile bar is fixed too; the hamburger overlay was already dark.

   The theme also sets the homepage masthead to position:fixed (it used to
   overlay the old dark hero), so it sits ON TOP of our content — at wide widths
   the header grows to ~107px while the hero's 88px top padding left the compare
   card tucked ~19px under it. Inner pages use position:sticky, which occupies
   flow space so content sits below it. Match that on the homepage so the hero
   clears the header at every width / header height. There is no body offset
   padding on the homepage, so making it sticky adds no gap.
   --------------------------------------------------------------------------- */
body.home #masthead{background:#002a31!important;position:sticky!important;top:0}

.ce-home{
  --ink:#15202e;--body:#3a4452;--muted:#6b7480;--line:#e7eaf0;--tint:#f7f8fa;
  --cream:#fbf8ee;--cream-line:#f0e4b8;--brand:#ffc704;--brand-h:#ffd633;
  --brand-d:#caa000;--pro:#1c8a5b;--wrap:1240px;
  /* full-bleed out of the constrained .entry-content, identical to the theme's
     own .alignfull blocks the current homepage already uses */
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  text-align:left;
}
.ce-home *{box-sizing:border-box}
.ce-home img{max-width:100%;height:auto}
.ce-home a{color:inherit;text-decoration:none}
.ce-home a:hover{text-decoration:none}
.ce-home p{margin:0}
.ce-home .serif{font-family:'Merriweather Sans',sans-serif}
.ce-home .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;width:100%}

/* shared section header rhythm */
.ce-home .sec-eyebrow{font-family:'Merriweather Sans',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-d);margin:0 0 16px}
.ce-home .sec-title{font-family:'Merriweather Sans',sans-serif!important;font-weight:800!important;font-size:clamp(26px,3vw,34px)!important;line-height:1.16!important;letter-spacing:-.02em!important;color:var(--ink)!important;margin:0!important}
.ce-home .sec-sub{font-size:17.5px;color:var(--body);margin:16px 0 0;max-width:54ch;text-wrap:pretty}
.ce-home .center{text-align:center}
.ce-home .center .sec-sub{margin-left:auto;margin-right:auto}

/* ----- hero ----- */
.ce-home .hero{background:var(--cream);border-bottom:1px solid var(--line);padding:88px 0 80px;margin:0}
.ce-home .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(372px,36vw,432px);gap:56px;align-items:center}
.ce-home .hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-d);background:#fff;border:1px solid var(--cream-line);padding:8px 16px;border-radius:100px;margin-bottom:24px;white-space:nowrap}
.ce-home .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex-shrink:0}
.ce-home h1.title{font-family:'Merriweather Sans',sans-serif!important;font-weight:800!important;font-size:clamp(34px,4.3vw,52px)!important;line-height:1.06!important;letter-spacing:-.025em!important;color:var(--ink)!important;margin:0!important;max-width:15ch}
.ce-home .hero p.lede{font-size:18.5px;color:var(--body);margin:24px 0 0;max-width:46ch;text-wrap:pretty}
.ce-home .trust{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap}
.ce-home .trust-r{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--cream-line);padding:8px 15px;border-radius:100px;font-family:'Merriweather Sans',sans-serif;font-size:13.5px;font-weight:700;color:var(--ink)}
.ce-home .tick{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--pro);color:#fff;font-size:10.5px;font-weight:800;flex-shrink:0}
.ce-home .trust-t{font-size:13.5px;color:var(--muted);font-weight:600}

/* ----- hero: compare card ----- */
.ce-home .compare-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 20px 54px rgba(21,32,46,.11)}
.ce-home .cc-h{font-family:'Merriweather Sans',sans-serif;font-size:18px;font-weight:800;color:var(--ink);margin:0 0 4px}
.ce-home .cc-s{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.ce-home .field{display:block;margin-bottom:16px}
.ce-home .field>span.lab{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ce-home .amt{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:11px;padding:0 16px;height:56px;transition:border-color .15s}
.ce-home .amt:focus-within{border-color:var(--brand)}
.ce-home .amt .sym{font-family:'Merriweather Sans',sans-serif;font-size:20px;font-weight:800;color:var(--ink);margin-right:8px}
.ce-home .amt input{flex:1;border:0;outline:0;font-family:'Merriweather Sans',sans-serif;font-size:22px;font-weight:700;color:var(--ink);background:none;width:100%;min-width:0;padding:0;box-shadow:none}
.ce-home .cf-two{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.ce-home .sel{position:relative}
.ce-home .sel select{appearance:none;-webkit-appearance:none;width:100%;border:1.5px solid var(--line);border-radius:11px;height:56px;padding:0 40px 0 16px;font-family:'Open Sans',sans-serif;font-size:15.5px;font-weight:700;color:var(--ink);background:#fff;cursor:pointer;outline:0;margin:0}
.ce-home .sel select:focus{border-color:var(--brand)}
.ce-home .sel::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ce-home .swap{align-self:end;width:44px;height:56px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--brand-d);font-size:18px;cursor:pointer;transition:all .15s;flex-shrink:0}
.ce-home .swap:hover{background:var(--cream);border-color:var(--cream-line)}
.ce-home .compare-btn{width:100%;margin-top:20px;background:var(--brand);color:var(--ink);border:0;font-family:'Merriweather Sans',sans-serif;font-weight:800;font-size:16px;height:56px;border-radius:11px;cursor:pointer;transition:background .15s}
.ce-home .compare-btn:hover{background:var(--brand-h)}
.ce-home .cf-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600;margin:16px 0 0}
.ce-home .cf-note .dot{background:var(--pro)}

/* ----- logo strip ----- */
.ce-home .logos{padding:26px 0;border-bottom:1px solid var(--line);background:#fff}
.ce-home .logos-in{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:center}
.ce-home .logos-cap{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.ce-home .logo-img{height:24px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .15s,opacity .15s}
.ce-home .logo-img:hover{filter:grayscale(0);opacity:1}

/* ----- providers ----- */
.ce-home .providers{padding:80px 0;border-bottom:1px solid var(--line);background:#fff}
.ce-home .prov-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ce-home .prov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.ce-home .prov-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;transition:box-shadow .18s,border-color .18s,transform .18s}
.ce-home .prov-card:hover{box-shadow:0 16px 40px rgba(21,32,46,.10);border-color:#dce1ea;transform:translateY(-3px)}
.ce-home .prov-card.feature{border-color:var(--cream-line);background:var(--cream);box-shadow:0 10px 30px rgba(202,160,0,.08)}
.ce-home .prov-logo{height:30px;width:auto;object-fit:contain;object-position:left center;margin-bottom:18px;align-self:flex-start;max-width:130px}
.ce-home .prov-rate{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ce-home .prov-rate b{font-family:'Merriweather Sans',sans-serif;font-size:18px;font-weight:800;color:var(--ink)}
.ce-home .prov-card p{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--body)}
.ce-home .prov-tag{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brand-d);background:var(--cream);border:1px solid var(--cream-line);border-radius:7px;padding:5px 10px;align-self:flex-start;margin-bottom:22px}
.ce-home .prov-card.feature .prov-tag{background:#fff}
.ce-home .prov-link{margin-top:auto;font-family:'Merriweather Sans',sans-serif;font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:7px}
.ce-home .prov-card:hover .prov-link{color:var(--brand-d)}
.ce-home .ce-allrev{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-family:'Merriweather Sans',sans-serif;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:9px;white-space:nowrap;transition:border-color .15s,background .15s}
.ce-home .ce-allrev:hover{border-color:var(--brand);background:var(--cream)}

/* star rating */
.ce-home .stars{position:relative;display:inline-block;font-size:17px;letter-spacing:2px;line-height:1}
.ce-home .stars .base{color:#e6dcbb}
.ce-home .stars .fill{color:var(--brand);position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}

/* ----- dark value band ----- */
.ce-home .band{background:var(--ink);color:#aeb8c4;padding:80px 0}
.ce-home .band .sec-title{color:#fff!important}
.ce-home .band .sec-eyebrow{color:var(--brand)}
.ce-home .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.ce-home .fact{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:32px}
.ce-home .fact-ic{min-width:48px;height:48px;width:auto;padding:0 13px;border-radius:12px;background:var(--brand);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:'Merriweather Sans',sans-serif;font-weight:800;font-size:16px;margin-bottom:20px}
.ce-home .fact h3{font-family:'Merriweather Sans',sans-serif!important;font-size:18.5px!important;font-weight:800!important;color:#fff!important;margin:0 0 10px!important;line-height:1.25!important}
.ce-home .fact p{margin:0;font-size:15px;line-height:1.6;color:#aeb8c4}

/* ----- how it works ----- */
.ce-home .how{background:var(--cream);border-bottom:1px solid var(--line);padding:80px 0}
.ce-home .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.ce-home .step{background:#fff;border:1px solid var(--cream-line);border-radius:16px;padding:32px 28px}
.ce-home .step-n{font-family:'Merriweather Sans',sans-serif;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-d);margin-bottom:18px;display:flex;align-items:center;gap:11px}
.ce-home .step-n i{width:36px;height:36px;border-radius:9px;background:var(--brand);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:16px;font-style:normal;font-weight:800}
.ce-home .step h3{font-family:'Merriweather Sans',sans-serif!important;font-size:19px!important;font-weight:800!important;color:var(--ink)!important;margin:0 0 10px!important;line-height:1.25!important}
.ce-home .step p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body)}

/* ----- countries ----- */
.ce-home .countries{background:var(--tint);padding:80px 0 96px}
.ce-home .country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.ce-home .country-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px;transition:border-color .15s,box-shadow .15s}
.ce-home .country-card:hover{border-color:#dce1ea;box-shadow:0 8px 22px rgba(21,32,46,.07)}
.ce-home .country-card .flag{width:34px;height:24px;border-radius:5px;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.ce-home .country-card .ct{flex:1;min-width:0;display:block}
.ce-home .country-card .pre{display:block;font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.2}
.ce-home .country-card .nm{display:block;font-family:'Merriweather Sans',sans-serif;font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
.ce-home .country-card .arr{color:#c3c9d2;font-size:19px;font-weight:700;transition:color .15s,transform .15s}
.ce-home .country-card:hover .arr{color:var(--brand-d);transform:translateX(2px)}

/* ----- responsive ----- */
@media(max-width:1080px){
  .ce-home h1.title{max-width:18ch}
  .ce-home .prov-grid{grid-template-columns:repeat(2,1fr)}
  .ce-home .country-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .ce-home .hero-grid{grid-template-columns:1fr;gap:40px}
  .ce-home .hero p.lede{max-width:none}
  .ce-home .hero-eyebrow{white-space:normal}
  .ce-home .country-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .ce-home .wrap{padding:0 20px}
  .ce-home .hero{padding:48px 0 52px}
  .ce-home .facts,.ce-home .steps{grid-template-columns:1fr}
  .ce-home .prov-grid{grid-template-columns:1fr}
  .ce-home .country-grid{grid-template-columns:repeat(2,1fr)}
  .ce-home .prov-head{align-items:flex-start}
}
@media(max-width:440px){
  .ce-home .country-grid{grid-template-columns:1fr}
  .ce-home .compare-card{padding:24px}
}