/* Ellen's 2026-11-03 selected CTA: bright violet, fine light rim and soft glow.
   Surface artwork is generated from the supplied client reference; copy stays HTML. */
html[data-hero-preview] .a { --purple:#8143d7; --purple-dark:#7338c8; }
.a.direction-citrus .hero-art > picture,
.a.direction-citrus .hero-art > .banner-motion-media,
.a.direction-citrus .hero-art picture > img { aspect-ratio:4/3; }
.a.direction-citrus .hero-art picture > img { object-fit:contain; object-position:center; }
.a.direction-citrus .hero-art { position:relative; container-type:inline-size; }
.a .hero-spec {
  position:absolute; z-index:2; display:grid; grid-template-columns:max-content max-content;
  align-items:baseline; gap:4px 10px; line-height:1.15; color:#51443a;
}
.a .hero-spec-left { left:11.5%; top:7.875cqw; }
.a .hero-spec-right { left:61.2%; top:13.875cqw; }
.a .hero-spec span { grid-column:1/-1; font-size:clamp(13px,1.9cqw,25px); font-weight:550; }
.a .hero-spec strong { font-size:clamp(23px,3.9cqw,56px); font-weight:550; }
.a .hero-spec small { color:#645549; font-size:clamp(11px,1.65cqw,22px); }
.a .hero h1 em { color:#8143d7; }
.a .header nav a:first-child,
.a .hero-model-link .hero-model-arrow,
.a .reward-panel-prizes strong,
.a .product-more,
.a .product-purpose { color:#8143d7; }

.a #hero-cta,
.a #prize-start {
  position:relative; isolation:isolate; overflow:visible;
  display:inline-flex; align-items:center; justify-content:center;
  width:270px; min-width:0; max-width:100%; min-height:54px; height:54px;
  padding:0 24px; gap:16px;
  background:transparent; border:0; border-radius:999px; box-shadow:none;
  color:#fff; font-size:15px; font-weight:650; line-height:1.3;
  text-shadow:0 1px 3px #43168055; white-space:nowrap;
  transition:transform .22s ease,filter .22s ease;
}
.a #hero-cta::before,
.a #prize-start::before {
  content:""; position:absolute; inset:-58% -12%; z-index:-1;
  background:url('assets/r60/cta-primary.webp') center/100% 100% no-repeat;
  pointer-events:none;
}
.a #hero-cta:hover,
.a #prize-start:hover { background:transparent; transform:translateY(-2px); filter:brightness(1.06); }
.a #hero-cta:active,
.a #prize-start:active { transform:translateY(0); }
.a #hero-cta:focus-visible,
.a #prize-start:focus-visible { outline:2px solid #8143d7; outline-offset:9px; }
.a #prize-start::after {
  content:""; position:absolute; inset:1px; z-index:-1;
  border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 2px #b78df4,0 0 18px 5px #9752e0;
  opacity:0;
}
@media(prefers-reduced-motion:no-preference) {
  .a #prize-start:not(.banner-motion-cta-pending)::after { animation:prize-start-breathe 2.8s ease-in-out infinite; }
}
@keyframes prize-start-breathe {
  0%,100% { opacity:.06; }
  50% { opacity:.45; }
}
.a .reward-panel-action { padding-top:12px; padding-bottom:16px; }

.a .reward-approved-float {
  top:auto; right:26px; bottom:calc(26px + var(--prize-float-lift,0px)); transform:none;
  width:196px; min-width:196px; height:62px; min-height:62px;
  justify-content:center; gap:10px; padding:5px 16px;
  border:0; border-radius:999px; background:transparent; box-shadow:none;
  color:#fff; isolation:isolate; overflow:visible;
}
.a .reward-approved-float::before {
  content:""; position:absolute; inset:-62% -14%; z-index:-1;
  border:0; border-radius:0; opacity:1;
  background:url('assets/r60/cta-floating.webp') center/100% 100% no-repeat;
  pointer-events:none;
}
.a .reward-approved-float:hover { background:transparent; filter:brightness(1.06); }
.a .prize-float-symbol { width:29px; height:32px; border:0; background:none; border-radius:0; }
.a .prize-float-symbol svg { width:28px; height:28px; }
.a .prize-float-label { font-size:14px; line-height:1.4; letter-spacing:0; }
.a .prize-float-arrow { font-size:22px; margin-left:0; }

@media(min-width:821px) {
  .a.direction-citrus .hero { grid-template-columns:35% 65%; padding-bottom:28px; }
  .a.direction-citrus .hero-copy { padding-left:clamp(28px,4vw,58px); padding-right:30px; }
  .a.direction-citrus .hero h1 { font-size:clamp(28px,3.25vw,50px); line-height:1.34; }
  .a.direction-citrus #hero-description { margin-bottom:32px; }
  .a.direction-citrus .hero-foot { margin-top:30px; }
}
@media(min-width:821px) and (max-width:1100px) {
  .a #hero-cta { width:235px; font-size:13px; height:48px; min-height:48px; padding:0 17px; gap:10px; }
}
@media(max-width:820px) {
  .a.direction-citrus .hero { padding-bottom:22px; }
  .a.direction-citrus .hero-art { height:auto; aspect-ratio:4/3; }
  .a.direction-citrus .hero-art > picture,
  .a.direction-citrus .hero-art > .banner-motion-media,
  .a.direction-citrus .hero-art picture > img { aspect-ratio:4/3; height:auto; }
  .a .hero-spec { grid-template-columns:1fr; gap:1px; line-height:1.08; }
  .a .hero-spec-left { top:2.7%; }
  .a .hero-spec-right { top:10.7%; }
  .a .hero-spec span { font-size:clamp(11px,2.7cqw,18px); }
  .a .hero-spec strong { font-size:clamp(19px,5.1cqw,34px); }
  .a .hero-spec small { font-size:clamp(10px,2.4cqw,16px); }
  .a.direction-citrus .hero-copy { padding-bottom:22px; }
  .a #hero-cta, .a #prize-start { width:260px; height:52px; min-height:52px; font-size:14px; }
  .a.direction-citrus .hero-foot { margin-top:28px; }
  .a .reward-approved-float { width:132px; min-width:132px; height:44px; min-height:44px; right:12px; bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--prize-float-lift,0px)); padding:3px 8px; gap:6px; }
  .a .prize-float-label { font-size:12px; }
  .a .prize-float-symbol { width:20px; height:24px; }
  .a .prize-float-symbol svg { width:20px; height:20px; }
  .a .prize-float-arrow { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .a #hero-cta,.a #prize-start,.a .reward-approved-float { transition:none; animation:none; }
}