:root{--subpage-hero-height:460px;--subpage-hero-copy-top:42px;--site-page-gutter:64px;--subpage-hero-navy:#031a2d}
.section-shell{width:min(1320px,calc(100% - var(--site-page-gutter)))!important;margin-inline:auto!important}
.shared-site-header{position:relative;z-index:1000;overflow:visible;background:#021424;color:#fff}
.shared-site-header .section-shell{width:min(1320px,calc(100% - var(--site-page-gutter)));margin:0 auto}
.shared-site-header .nav-shell{height:72px;display:grid;grid-template-columns:210px 1fr;align-items:center;gap:30px}
.shared-site-header .preview-logo,.shared-site-header .preview-logo img{display:block;width:150px;height:auto}
.shared-site-header .main-nav{display:flex;justify-content:flex-start;align-items:center;gap:54px;transform:translateX(-38px);font:750 13px/1.3 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.shared-site-header .main-nav>a{color:#fff;text-decoration:none}
.shared-site-header .nav-dropdown{position:relative;align-self:stretch;display:flex;align-items:center}
.shared-site-header .nav-dropdown-trigger{display:flex;align-items:center;height:100%;gap:5px;padding:0;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer}
.shared-site-header .nav-dropdown-trigger::after{content:"⌄";font-size:12px;transition:transform .18s ease}
.shared-site-header .nav-dropdown:hover .nav-dropdown-trigger::after,.shared-site-header .nav-dropdown:focus-within .nav-dropdown-trigger::after,.shared-site-header .nav-dropdown.is-open .nav-dropdown-trigger::after{transform:rotate(180deg)}
.shared-site-header .nav-dropdown-menu{position:absolute;z-index:1100;top:calc(100% + 8px);left:0;min-width:210px;padding:8px;display:grid;gap:3px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#071d2d;box-shadow:0 16px 35px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.shared-site-header .nav-dropdown::after{content:"";position:absolute;top:100%;left:0;width:100%;height:12px}
.shared-site-header .nav-dropdown:hover .nav-dropdown-menu,.shared-site-header .nav-dropdown:focus-within .nav-dropdown-menu,.shared-site-header .nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.shared-site-header .nav-dropdown-menu a{display:block;padding:11px 13px;border-radius:6px;color:#fff;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.shared-site-header .nav-dropdown-menu a:hover,.shared-site-header .nav-dropdown-menu a:focus-visible{background:#0bad5b;outline:none}
.shared-site-header .nav-dropdown-trigger:focus-visible,.shared-site-header .main-nav>a:focus-visible{outline:2px solid #22d883;outline-offset:5px;border-radius:2px}
@media(max-width:760px){:root{--site-page-gutter:28px}.shared-site-header .nav-shell{height:68px;grid-template-columns:1fr}.shared-site-header .preview-logo,.shared-site-header .preview-logo img{width:132px}.shared-site-header .main-nav{display:none}}

/* One consistent blue hero height across Buckio subpages. */
@media(min-width:801px){
  .about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero{box-sizing:border-box;height:var(--subpage-hero-height)!important;min-height:var(--subpage-hero-height)!important;overflow:hidden}
  .about-hero-grid,.cashback-hero-grid,.euro-hero-grid,.guides-hero-inner,.credit-hero-grid,.contact-hero-grid,.affiliate-hero-grid,.articles-hero-inner,.article-header-inner,.faq-hero-grid{box-sizing:border-box;height:var(--subpage-hero-height)!important;min-height:var(--subpage-hero-height)!important;padding-top:0!important;padding-bottom:0!important;align-items:start!important}
  .compare-decision-hero-inner{box-sizing:border-box;height:var(--subpage-hero-height)!important;min-height:var(--subpage-hero-height)!important;padding-top:var(--subpage-hero-copy-top)!important}
  .compare-hero{box-sizing:border-box;height:460px;min-height:460px;padding:0!important;background:#021424!important;overflow:hidden}
  .compare-hero>.compare-shell{box-sizing:border-box;height:460px;padding-top:var(--subpage-hero-copy-top)!important}
  .about-hero-copy,.cashback-hero-copy,.euro-hero-copy,.credit-hero-grid>div:first-child,.affiliate-hero-copy,.faq-hero-copy,.contact-hero-grid>div:first-child{align-self:start!important;margin-top:var(--subpage-hero-copy-top)!important}
  .guides-hero-inner,.articles-hero-inner,.article-header-inner{justify-content:flex-start!important;padding-top:var(--subpage-hero-copy-top)!important}
  .about-hero-copy h1,.cashback-hero-copy h1,.euro-hero-copy h1,.guides-hero h1,.credit-hero-copy h1,.contact-hero h1,.affiliate-hero-copy h1,.articles-hero h1,.article-header h1,.faq-hero h1{margin-top:14px!important}
}
@media(max-width:800px){.about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero,.compare-decision-hero-inner,.about-hero-grid,.cashback-hero-grid,.euro-hero-grid,.guides-hero-inner,.credit-hero-grid,.contact-hero-grid,.affiliate-hero-grid,.articles-hero-inner,.article-header-inner,.faq-hero-grid,.compare-hero{height:auto!important;min-height:auto!important}}

/* Reusable standard for every current and future Buckio subpage hero. */
@media(min-width:801px){.standard-subpage-hero{box-sizing:border-box;height:var(--subpage-hero-height)!important;min-height:var(--subpage-hero-height)!important;overflow:hidden}.standard-subpage-hero-inner{box-sizing:border-box;height:var(--subpage-hero-height)!important;min-height:var(--subpage-hero-height)!important;padding-top:var(--subpage-hero-copy-top)!important;padding-bottom:0!important;justify-content:flex-start!important;align-items:flex-start!important}}

/* Editorial and information pages use the same compact desktop height as the start page. */
@media(min-width:801px){
  .about-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero{height:350px!important;min-height:350px!important}
  .about-hero-grid,.guides-hero-inner,.credit-hero-grid,.contact-hero-grid,.affiliate-hero-grid,.articles-hero-inner,.article-header-inner,.faq-hero-grid{height:350px!important;min-height:350px!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
  .guides-hero-inner,.articles-hero-inner,.article-header-inner{justify-content:center!important}
  .about-hero-copy,.credit-hero-grid>div:first-child,.contact-hero-grid>div:first-child,.affiliate-hero-copy,.faq-hero-copy{align-self:center!important;margin-top:0!important}
}
.has-library-art{position:relative;background:radial-gradient(circle at 78% 45%,rgba(0,96,255,.2),transparent 31%),linear-gradient(180deg,#021424,var(--subpage-hero-navy))!important}.has-library-art>.section-shell{position:relative;z-index:2}.has-library-art>.section-shell>*{max-width:54%}.section-hero-art{position:absolute;z-index:1;top:0;right:0;width:min(58vw,900px);height:var(--subpage-hero-height);object-fit:cover;object-position:68% center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
@media(max-width:800px){.standard-subpage-hero,.standard-subpage-hero-inner{height:auto!important;min-height:auto!important}.has-library-art>.section-shell>*{max-width:none}.section-hero-art{position:relative;width:100%;height:230px;object-position:70% center}.has-library-art>.section-shell{padding-bottom:20px}}

/* Center check glyphs consistently inside every circular status icon. */
.proof-icon,.about-hero-points li>span,.contact-proof>span:first-child,.contact-info-card>span:first-child,.affiliate-updated>span:first-child,.trust-icon,.pro-item>i,.payment-support-item>i,.matcher-reasons i{display:grid!important;place-items:center!important;box-sizing:border-box;line-height:1!important;text-align:center!important;padding:0!important;text-indent:0!important}
.proof-icon,.about-hero-points li>span,.contact-proof>span:first-child,.contact-info-card>span:first-child,.affiliate-updated>span:first-child,.trust-icon{font-family:Arial,sans-serif!important}

/* Article artwork fades into the shared navy hero on every edge and screen width. */
@media(min-width:851px){.article-cover{-webkit-mask-image:radial-gradient(ellipse 72% 84% at 50% 50%,#000 52%,rgba(0,0,0,.94) 66%,rgba(0,0,0,.5) 82%,transparent 100%)!important;mask-image:radial-gradient(ellipse 72% 84% at 50% 50%,#000 52%,rgba(0,0,0,.94) 66%,rgba(0,0,0,.5) 82%,transparent 100%)!important}}
/* Standard placement for library hero artwork: contained on the right like the cashback visual. */
@media(min-width:801px){.has-library-art>.section-hero-art{top:50%;right:max(32px,calc((100vw - 1320px)/2));width:min(43vw,620px);height:360px;transform:translateY(-50%);object-fit:cover;object-position:right center;-webkit-mask-image:radial-gradient(ellipse 78% 88% at 60% 50%,#000 55%,rgba(0,0,0,.82) 73%,transparent 100%);mask-image:radial-gradient(ellipse 78% 88% at 60% 50%,#000 55%,rgba(0,0,0,.82) 73%,transparent 100%)}}

/* Library visuals use the same broad, edge-to-edge fade as the calculator heroes. */
@media(min-width:801px){.has-library-art>.section-hero-art{right:max(24px,calc((100vw - 1320px)/2));width:min(46vw,660px);height:370px;object-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 14%,#000 34%,#000 76%,rgba(0,0,0,.5) 91%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 11%,#000 27%,#000 73%,rgba(0,0,0,.45) 89%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 14%,#000 34%,#000 76%,rgba(0,0,0,.5) 91%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 11%,#000 27%,#000 73%,rgba(0,0,0,.45) 89%,transparent 100%);mask-composite:intersect}}

/* Reserve header space before the shared navigation is installed. */
.site-header{min-height:72px}
.mobile-nav-toggle{display:none}
@media(max-width:760px){
  .site-header{min-height:68px}
  .shared-site-header .nav-shell{grid-template-columns:1fr auto}
  .shared-site-header .mobile-nav-toggle{display:block;min-height:44px;min-width:64px;padding:8px 14px;border:1px solid #668397;border-radius:7px;background:#071d2d;color:#fff;font:700 14px/1.3 inherit;cursor:pointer}
  .shared-site-header .mobile-nav-toggle:focus-visible{outline:2px solid #22d883;outline-offset:3px}
  .shared-site-header.is-mobile-menu-open .main-nav{display:grid;position:absolute;top:100%;left:14px;right:14px;gap:0;transform:none;padding:10px;border:1px solid #668397;border-radius:8px;background:#071d2d;box-shadow:0 14px 30px #0005}
  .shared-site-header .nav-dropdown{display:block}
  .shared-site-header .nav-dropdown-trigger,.shared-site-header .nav-dropdown::after{display:none}
  .shared-site-header .nav-dropdown-menu{position:static;min-width:0;padding:0;border:0;box-shadow:none;visibility:visible;opacity:1;transform:none}
  .shared-site-header .main-nav a{display:block;min-height:44px;padding:13px;border-radius:6px;white-space:normal}
  .shared-site-header .main-nav a:focus-visible{outline:2px solid #22d883;outline-offset:-2px}
}