/* One composed first screen: live product, copy and a grounded feature rail. */
#cp-main-content .cp-home-hero.hero-live {
 display:flex; flex-direction:column; min-height:calc(100svh - var(--hero-header));
 isolation:isolate;
 background:radial-gradient(ellipse at 80% 48%,#f6ed9b30,transparent 53%),#fffef8;
}
#cp-main-content .cp-home-hero.hero-live::before {
 content:''; position:absolute; z-index:-1; pointer-events:none;
 width:min(84vw,1500px); aspect-ratio:1.8; right:-12%; top:14%;
 border:1px solid #234a2510; border-radius:50%; transform:rotate(-18deg);
 box-shadow:0 0 0 64px #39562e04,0 0 0 128px #39562e04;
}
#cp-main-content .cp-home-hero.hero-live .hero-stage {
 width:min(1760px,calc(100% - clamp(36px,6vw,112px)));
 min-height:0; flex:1;
 align-content:center;
 padding:clamp(28px,4svh,64px) 0;
 gap:clamp(24px,3vw,48px);
}
.cp-home-hero .hero-stage-visual {
 width:100%; max-width:960px; padding:8px 0 0;
 translate:none; align-self:center;
}
.cp-home-hero .hero-stage-visual > .v2-tablet { width:90%; }
.cp-home-hero .cp-hero-preview-caption { margin-top:22px; }
.cp-home-hero .cp-hero-bat { width:104%; left:-2%; }
#cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(36px,4.15vw,84px); }
.cp-home-hero .cp-hero-eyebrow {
 position:relative; width:fit-content; padding:8px 12px;
 border:1px solid #173d2315; border-radius:30px; background:#f5f3df;
}
/* One smoothly tapered snake follows the pill's rounded perimeter. */
.cp-home-hero .cp-pill-outline {
 position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
 overflow:visible; pointer-events:none;
}
.cp-home-hero .cp-pill-outline .cp-pill-body {
 fill:currentColor; filter:drop-shadow(0 0 2px #a3213940);
}
.cp-home-hero .cp-pill-outline .cp-pill-head {
 fill:currentColor; filter:drop-shadow(0 0 2px #a3213980) drop-shadow(0 0 4px #a3213940);
}
.cp-hero-foot {
 position:relative; z-index:2; width:min(1760px,calc(100% - clamp(36px,6vw,112px)));
 display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:center;
 gap:24px; margin:0 auto 24px; padding:22px 28px;
 border:1px solid #344d2520; border-radius:18px; background:#f5f3e7c9;
}
.cp-hero-foot-item { display:flex; align-items:center; gap:14px; min-width:0; }
.cp-hero-foot-item + .cp-hero-foot-item { padding-left:28px; border-left:1px solid #344d2520; }
.cp-hero-foot-icon { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:50%; background:#fee417; color:#0b3d23; }
.cp-hero-foot-icon svg { width:23px; height:23px; }
.cp-hero-foot strong { display:block; color:#062817; font:700 14px/1.4 'Inter',sans-serif; }
.cp-hero-foot small { display:block; margin-top:3px; color:#607066; font:400 12px/1.5 'Inter',sans-serif; }
.cp-hero-explore { display:inline-flex; align-items:center; gap:14px; color:#0b3d23; font:600 11px/1.4 'Inter',sans-serif; text-decoration:none; }
.cp-hero-explore span { display:grid; place-items:center; width:44px; height:44px; border:1px solid #344d2540; border-radius:50%; font-size:20px; transition:transform .2s; }
.cp-hero-explore:hover { color:#062817; }
.cp-hero-explore:hover span { transform:translateY(3px); }

@media (min-width:1700px) and (min-height:1000px) {
 #cp-main-content .cp-home-hero.hero-live .hero-stage { width:min(1800px,calc(100% - 128px)); grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); }
 .cp-home-hero .hero-stage-visual { max-width:1040px; }
 .cp-home-hero .cp-hero-foot { width:min(1800px,calc(100% - 128px)); padding-block:26px; }
 #cp-main-content .cp-home-hero .hero-stage-copy { max-width:880px; }
}

@media (max-width:1120px) {
 #cp-main-content .cp-home-hero.hero-live .hero-stage {
  width:min(780px,calc(100% - 48px));
  grid-template-columns:minmax(0,1fr);
  padding:28px 0 36px; gap:28px;
 }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(34px,5.1vw,52px); }
 .cp-home-hero .hero-stage-visual { width:min(100%,680px); max-width:100%; }
 .cp-home-hero .hero-stage-visual > .v2-tablet { width:86%; aspect-ratio:1.7; }
 .cp-home-hero .cp-hero-preview-caption { margin-top:18px; }
 .cp-home-hero .cp-hero-eyebrow { margin-inline:auto; }
 .cp-hero-foot { width:calc(100% - 48px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:18px; }
 .cp-hero-foot-item { gap:10px; }
 .cp-hero-foot-item + .cp-hero-foot-item { padding-left:16px; }
 .cp-hero-explore { display:none; }
 .cp-hero-foot strong { font-size:12px; }
 .cp-hero-foot small { font-size:11px; }
}

@media (max-width:600px) {
 #cp-main-content .cp-home-hero.hero-live .hero-stage {
  width:calc(100% - 36px); padding:22px 0 28px; gap:22px;
 }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(26px,7.3vw,44px); margin-bottom:16px; }
 .cp-home-hero .cp-hero-eyebrow { margin-bottom:14px; }
 #cp-main-content .cp-home-hero.hero-live .cp-hero-desc { margin-bottom:18px; line-height:1.6; }
 .cp-home-hero .cp-hero-conversion { gap:16px; width:100%; }
 .cp-home-hero .cp-hero-actions { gap:10px; }
 #cp-main-content .cp-home-hero .cp-hero-actions > a { min-height:48px; }
 .cp-home-hero .cp-hero-stores-card { max-width:310px; }
 .cp-home-hero .hero-stage-visual { width:min(100%,480px); padding-top:4px; }
 .cp-home-hero .hero-stage-visual > .v2-tablet { width:88%; aspect-ratio:1.7; }
 .cp-home-hero .cp-hero-preview-caption { margin-top:14px; }
 .cp-home-hero .cp-hero-eyebrow { margin-inline:0; padding:6px 9px; }
 .cp-hero-foot { width:calc(100% - 36px); padding:14px 8px; gap:8px; margin-bottom:18px; border-radius:14px; }
 .cp-hero-foot-item { flex-direction:column; text-align:center; gap:7px; }
 .cp-hero-foot-item + .cp-hero-foot-item { padding-left:8px; }
 .cp-hero-foot-icon { flex-basis:auto; width:32px; height:32px; }
 .cp-hero-foot-icon svg { width:18px; height:18px; }
 .cp-hero-foot strong { font-size:10px; }
 .cp-hero-foot small { display:none; }
}

/* Side by side only when both columns have room for readable copy and controls. */
@media (min-width:620px) and (max-width:1120px) and (orientation:landscape) {
 #cp-main-content .cp-home-hero.hero-live .hero-stage {
  width:calc(100% - 48px); grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding-block:28px; gap:28px;
 }
 #cp-main-content .cp-home-hero .hero-stage-copy { text-align:left; }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(28px,3.6vw,40px); }
 .cp-home-hero .cp-hero-conversion { margin-inline:0; }
 .cp-home-hero .hero-stage-visual { width:100%; }
 .cp-home-hero .cp-hero-eyebrow { margin-inline:0; }
}

@media (max-height:600px) and (min-width:620px) {
 body.cp-site { --hero-header:70px; }
 .cp-header { padding-top:8px; }
 .cp-header .cp-nav-wrap { min-height:62px; padding-block:7px; }
 .cp-header .cp-brand img { width:40px; height:46px; }
 #cp-main-content .cp-home-hero.hero-live .hero-stage { padding-block:22px; gap:24px; }
 .cp-home-hero .cp-hero-eyebrow { margin-bottom:12px; }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { margin-bottom:16px; }
 .cp-home-hero .cp-hero-conversion { gap:16px; }
 .cp-hero-foot { padding-block:12px; margin-bottom:16px; }
}
/* The live signal travels from the centre dot through the two wave pairs. */
.cp-home-hero .cp-hero-signal { width:36px; height:28px; flex-basis:36px; }
@media (max-width:700px) {
 .cp-home-hero .cp-hero-signal { width:30px; height:24px; flex-basis:30px; }
}
.cp-home-hero .cp-hero-signal .cp-signal-dot {
 transform-box:fill-box; transform-origin:center;
 animation:cp-signal-heartbeat 1.5s ease-in-out infinite;
}
.cp-home-hero .cp-hero-signal .cp-signal-wave {
 transform-box:view-box; transform-origin:50% 50%;
 animation:cp-signal-transmit 1.5s ease-in-out infinite both;
}
.cp-home-hero .cp-hero-signal .cp-signal-wave-inner { animation-delay:.1s; }
.cp-home-hero .cp-hero-signal .cp-signal-wave-outer { animation-delay:.25s; }
@keyframes cp-signal-heartbeat {
 0%,70%,100% { opacity:.85; transform:scale(1); }
 24% { opacity:1; transform:scale(1.15); }
}
@keyframes cp-signal-transmit {
 0%,100% { opacity:.3; transform:scale(.94); }
 36% { opacity:1; transform:scale(1); }
 72% { opacity:.3; transform:scale(1.025); }
}
@media (prefers-reduced-motion:reduce) {
 .cp-home-hero .cp-hero-signal .cp-signal-dot,
 .cp-home-hero .cp-hero-signal .cp-signal-wave { animation:none; opacity:1; transform:none; }
}