/* ARR Buy CTA — lives inside the existing plum action card
   (.arrp-action-card: linear-gradient(155deg,#3a0140,#6b016e); color:#fff), so
   this is the light-on-plum palette, not the ink palette.

   Gold is NOT used. arr-product-template.css:47-49 reserves --arr-gold for
   .arrp-primary-action and there is exactly one primary action per page — the
   existing "Choose start date" button keeps it. This CTA is the white /
   outline secondary beneath it.

   State is carried on [data-state] only. Style attributes are inert under the
   site's `style-src-attr 'none'` CSP, so nothing here is set at runtime. */

.arr-buy-cta{
  margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.18);
  display:grid;gap:10px
}
.arr-buy-cta-button{
  box-sizing:border-box;width:100%;min-width:0;min-height:50px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border:1px solid transparent;border-radius:12px;
  background:#fff;color:#2d0631;
  font:800 .9rem/1.2 var(--arr-font,system-ui,sans-serif);
  text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer
}
/* White, because the control sits on plum — the same reason
   .arrp-hero-action overrides the plum focus ring. */
.arr-buy-cta-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.arr-buy-cta[data-state="checking"] .arr-buy-cta-button{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);
  color:#e8d6e8;cursor:default
}
.arr-buy-cta[data-state="request"] .arr-buy-cta-button{
  background:transparent;border-color:rgba(255,255,255,.55);color:#fff
}
.arr-buy-cta[data-state="payable"] .arr-buy-cta-button{background:#fff;color:#2d0631}
.arr-buy-cta .arr-buy-cta-note{
  margin:0;color:#efddef;
  font:600 .78rem/1.45 var(--arr-font,system-ui,sans-serif)
}
/* The note is empty while readiness is still being checked; an empty line must
   not reserve a grid row. */
.arr-buy-cta .arr-buy-cta-note:empty{display:none}

@media(max-width:860px){
  .arr-buy-cta-button{min-height:54px}
}
@media(max-width:520px){
  .arr-buy-cta{margin-top:16px;padding-top:16px}
}
@media(max-width:350px){
  .arr-buy-cta-button{padding-inline:12px;font-size:.84rem}
  .arr-buy-cta .arr-buy-cta-note{font-size:.75rem}
}