/*
  Buckio design system
  This is the final shared stylesheet, loaded by site-header.js on every public page.
  New pages should use .standard-subpage-hero and the tokens below rather than
  introducing page-specific colours, typefaces or hero dimensions.
*/
:root{
  --buckio-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --buckio-navy:#031a2d;
  --buckio-navy-deep:#021424;
  --buckio-blue:#1476b5;
  --buckio-blue-soft:#eaf4fc;
  --buckio-green:#0bad5b;
  --buckio-green-dark:#087c4b;
  --buckio-text:#153d54;
  --buckio-muted:#607789;
  --buckio-line:#d7e3eb;
  --buckio-surface:#f4f8fb;
  --buckio-radius:12px;
  --buckio-shadow:0 12px 30px rgba(3,26,45,.08);
  --subpage-hero-height:460px;
  --subpage-hero-copy-top:42px;
  --site-page-gutter:64px;
  --navy:var(--buckio-navy);
  --green:var(--buckio-green);
  --text:var(--buckio-text);
  --muted:var(--buckio-muted);
  --line:var(--buckio-line);
}

html{font-family:var(--buckio-font)}
body,button,input,select,textarea{font-family:var(--buckio-font)!important}
body{color:var(--buckio-text);background:#fff}
button,input,select,textarea{font-size:inherit}
body>header:empty{min-height:72px;background:var(--buckio-navy-deep)}

/* Shared responsive page width and heading scale. */
.section-shell{width:min(1320px,calc(100% - var(--site-page-gutter)))!important;margin-inline:auto!important}
:where(.article-body,.guide-article,.affiliate-article,.legal-article) :is(h2,h3){color:var(--buckio-text)}
:where(.article-body,.guide-article,.affiliate-article,.legal-article) h2{font-size:clamp(1.6rem,2.2vw,1.9rem);line-height:1.2;letter-spacing:-.025em}
:where(.article-body,.guide-article,.affiliate-article,.legal-article) h3{font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.3;letter-spacing:-.015em}
:where(.article-body,.guide-article,.affiliate-article,.legal-article) :is(p,li){color:#39586c}
:where(.article-body,.guide-article,.affiliate-article,.legal-article) a{color:var(--buckio-green-dark);font-weight:700}

/* The blue Buckio hero is the default for all current and future subpages. */
:where(.about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero,.guide-detail-hero,.legal-hero,.page-hero,.compare-hero){
  color:#fff!important;
  background:radial-gradient(circle at 78% 44%,rgba(20,118,181,.26),transparent 30%),radial-gradient(circle at 88% 62%,rgba(11,173,91,.13),transparent 22%),linear-gradient(180deg,var(--buckio-navy-deep),var(--buckio-navy))!important;
}
:where(.about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero,.guide-detail-hero,.legal-hero,.page-hero,.compare-hero) h1{
  color:#fff!important;
  font-family:var(--buckio-font)!important;
  font-size:clamp(2.5rem,4vw,3.2rem)!important;
  font-weight:800!important;
  line-height:1.06!important;
  letter-spacing:-.04em!important;
}
:where(.about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero,.guide-detail-hero,.legal-hero,.page-hero,.compare-hero) :is(p,.lead,.article-lead){color:#d8e5ee!important;font-size:16px;line-height:1.65}
:where(.about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero,.guide-detail-hero,.legal-hero,.page-hero,.compare-hero) :is(.eyebrow,.articles-kicker,.guide-detail-kicker,.legal-kicker){color:#52d998!important;font-family:var(--buckio-font);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}

@media(min-width:801px){
  :where(.about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero,.guide-detail-hero,.legal-hero,.page-hero,.compare-hero){height:var(--subpage-hero-height)!important;min-height:var(--subpage-hero-height)!important;overflow:hidden}
  :where(.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,.guide-detail-hero-grid,.legal-hero-grid,.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;padding-bottom:0!important;align-items:start!important}
  .page-hero>.section-shell{box-sizing:border-box;height:var(--subpage-hero-height);padding-top:var(--subpage-hero-copy-top)}

  /* Keep editorial and information pages as compact as the 350 px start-page hero. */
  :where(.about-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.guide-detail-hero,.page-hero.catalog-hero){
    height:350px!important;
    min-height:350px!important;
  }
  :where(.about-hero-grid,.guides-hero-inner,.credit-hero-grid,.contact-hero-grid,.affiliate-hero-grid,.articles-hero-inner,.article-header-inner,.faq-hero-grid,.guide-detail-hero-grid,.catalog-hero-grid){
    height:350px!important;
    min-height:350px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    align-items:center!important;
  }
  .page-hero.catalog-hero>.section-shell{
    height:350px!important;
    min-height:350px!important;
    padding-top:0!important;
  }
  :where(.guides-hero-inner,.articles-hero-inner,.article-header-inner){justify-content:center!important}
  :where(.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;
  }
  :where(.about-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.guide-detail-hero,.page-hero.catalog-hero) h1{
    font-size:clamp(2.25rem,3.4vw,2.75rem)!important;
  }

  /* Contain every hero illustration inside the shorter canvas without lowering resolution. */
  :where(.contact-hero-art,.credit-hero-visual,.affiliate-hero-visual,.faq-hero-art,.guide-hero-visual){
    height:350px!important;
    min-height:0!important;
  }
  :where(.contact-hero-art img,.credit-hero-visual img){max-height:310px!important;object-fit:contain!important}
  .faq-hero-art img{top:20px!important;height:310px!important}
  .guide-hero-visual{width:min(700px,50vw)!important;margin-left:-50px!important}
  .guide-detail-hero-grid>div:first-child{margin-top:0!important}
  .about-hero-visual{height:350px!important;margin:-3% -8% -3% -4%!important}
  .about-hero-scene{width:116%!important;height:100%!important;aspect-ratio:auto!important;object-fit:contain!important}
  .about-hero-copy h1{margin-bottom:14px!important}
  .about-hero-actions{margin-top:18px!important}
  .about-hero-points{margin-top:18px!important}
  :where(.guides-hero,.articles-hero) .section-hero-art{
    top:50%!important;
    height:310px!important;
    transform:translateY(-50%)!important;
  }
  .article-cover{top:20px!important;height:310px!important}
}

/* Reusable building blocks for pages created from now on. */
.buckio-content{padding:56px 0 72px;background:var(--buckio-surface)}
.buckio-panel{border:1px solid var(--buckio-line);border-radius:var(--buckio-radius);background:#fff;box-shadow:var(--buckio-shadow)}
.buckio-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:0 17px;border:1px solid var(--buckio-green);border-radius:8px;background:var(--buckio-green);color:#fff!important;font:800 13px/1 var(--buckio-font);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.buckio-button:hover,.buckio-button:focus-visible{background:var(--buckio-green-dark);box-shadow:0 8px 18px rgba(11,173,91,.22);outline:none;transform:translateY(-1px)}
.buckio-button--secondary{border-color:#a9cfe7;background:#fff;color:var(--buckio-blue)!important}
.buckio-button--secondary:hover,.buckio-button--secondary:focus-visible{border-color:var(--buckio-green);background:#edf9f3;color:var(--buckio-green-dark)!important}

/* Shared vector check: prevents font-glyph drift inside the green status circles. */
:where(.pro-item>i,.payment-support-item.supported>i,.matcher-reason--met>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;color:transparent!important;font-size:0!important;background-image:url("assets/buckio-check.svg")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:72%!important}
:where(.pro-item>i,.payment-support-item.supported>i,.matcher-reason--met>i)::before{display:none!important;content:none!important}

@media(max-width:800px){
  :root{--site-page-gutter:28px}
  body>header:empty{min-height:68px}
  :where(.about-hero,.cashback-hero,.euro-hero,.guides-hero,.credit-hero,.contact-hero,.affiliate-hero,.articles-hero,.article-header,.faq-hero,.compare-decision-hero,.guide-detail-hero,.legal-hero,.page-hero,.compare-hero){height:auto!important;min-height:auto!important}
  :where(.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,.guide-detail-hero-grid,.legal-hero-grid,.compare-decision-hero-inner){height:auto!important;min-height:auto!important;padding-top:42px!important;padding-bottom:42px!important}
}

/* Editorial landing-page copy follows the same left edge as its page content. */
.guides-hero-inner,.articles-hero-inner{align-items:flex-start!important;text-align:left!important}