/* Sitewide early-access CTA — a solid orange pill with dark navy text.
   Geometry (pill shape, height, padding, weight) matches the adjacent
   .demo-top "Watch demo" button; only the fill/text colour differs.
   #F57C1F on #142D39 text = 5.3:1 contrast (WCAG AA for normal text).
   Hover lightens to #FF922E (6.4:1), so contrast never drops below AA. */
.access-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#F57C1F;color:#142D39;
  padding:12px 18px;border-radius:24px;min-height:44px;
  font-weight:600;font-size:14px;line-height:1.1;
  border:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .2s,background .2s,box-shadow .2s;
}
.access-cta:hover{transform:translateY(-2px);background:#FF922E;color:#142D39;box-shadow:0 6px 16px rgba(20,45,57,.22)}
.access-cta:focus-visible{outline:3px solid #142D39;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.access-cta{transition:none}.access-cta:hover{transform:none}}

/* In-content CTA band — a quiet navy strip with the same orange pill. */
.access-band{
  box-sizing:border-box;width:100%;margin:0;padding:34px 24px;
  background:#142D39;color:#F2ECDF;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px 22px;text-align:center;
}
.access-band p{margin:0;font-size:18px;font-weight:600;line-height:1.3}
@media(max-width:760px){.access-band{flex-direction:column;padding:28px 18px}}

/* Fixed, unobtrusive corner pill for chrome-less pages (the interactive
   demo and the start splash). Sits bottom-right, clear of demo/voice
   controls; respects safe-area insets so it never covers a control bar. */
.access-cta-fixed{
  position:fixed;z-index:40;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  box-shadow:0 6px 18px rgba(20,45,57,.28);
}
@media(max-width:760px){
  .access-cta-fixed{right:12px;bottom:12px;padding:10px 14px;font-size:13px}
}