/* Paradigm brand-blue CTA buttons (shared by index.html and process.html).
   Modelled on the two diagram buttons (.cmp-cta / .arc-pill in style-brand-blue.css), which keep
   their own rules. Load this file after each page's main styles so it takes precedence.

   Layered look: the inner surface is the background, the rim is the 1px border plus a
   box-shadow ring. Hover and focus only change colours and shadows (no size, padding, border
   width or transform changes), so nothing around the button moves.

   .btn             primary CTA (main page actions)
   .btn.secondary   quieter outline option
   .btn--compact    small variant for header-sized placements
   Dark sections (.cta-band, .dark, .standard-band) get light focus outlines and rims. */

.btn{
  --btn-surface:#112846;          /* subdued dark blue at rest (the reference's --navy-2) */
  --btn-surface-hover:#2d56c2;    /* reference sapphire */
  --btn-rim:rgba(52,82,158,.16);
  --btn-rim-hover:rgba(120,160,240,.32);
  --btn-focus:var(--blue-deep,#263f82);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;
  border-radius:999px;border:1px solid rgba(152,200,245,.5);
  background:var(--btn-surface);color:#f4f7fb;
  font-family:var(--serif);font-size:1.06rem;font-weight:500;line-height:1.25;letter-spacing:.005em;
  text-align:center;text-wrap:balance;max-width:100%;
  box-shadow:0 0 0 3px var(--btn-rim),0 8px 22px rgba(10,27,49,.18);
  transform:none;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease;
}
.btn:hover,.btn:focus-visible{
  background:var(--btn-surface-hover);border-color:#9cc0f5;color:#fff;
  box-shadow:0 0 0 4px var(--btn-rim-hover),0 12px 34px rgba(60,110,230,.34);
  transform:none;
}
.btn:focus-visible{outline:2px solid var(--btn-focus);outline-offset:5px}

/* Secondary: outline style on the page background; fills with a light blue tint on hover. */
.btn.secondary{
  min-height:48px;padding:12px 26px;font-size:1rem;
  background:transparent;color:var(--blue-deep,#263f82);border-color:rgba(52,82,158,.45);
  box-shadow:0 0 0 3px rgba(52,82,158,.07);
}
.btn.secondary:hover,.btn.secondary:focus-visible{
  background:rgba(45,86,194,.08);color:#1f3f9c;border-color:#2d56c2;
  box-shadow:0 0 0 4px rgba(45,86,194,.14),0 8px 22px rgba(45,86,194,.14);
}

/* Compact variant for header-sized placements (not currently used in the markup). */
.btn.btn--compact{min-height:40px;padding:9px 18px;font-size:.92rem}

/* On navy sections the rim and focus outline switch to light blue. */
.cta-band .btn,.dark .btn,.standard-band .btn{--btn-rim:rgba(152,200,245,.14);--btn-rim-hover:rgba(152,200,245,.28);--btn-focus:#d6e8fb}
.dark .btn.secondary,.cta-band .btn.secondary{color:#cfe3fa;border-color:rgba(152,200,245,.5)}

/* Page-specific size overrides in the main stylesheets use higher specificity; keep one scale. */
.hero-left .btn{min-height:56px;padding:16px 32px;font-size:1.08rem}

@media (max-width:620px){
  .btn{padding:14px 24px;font-size:1.02rem}
  .hero-left .btn{padding:15px 26px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}