/* Approved sandstone concept: real navigation and a live WebGL tablet. */
body.cp-site { --hero-header:118px; background:#fffef8; }
.cp-header { padding:16px 16px 0; background:#fffef8; border:0; box-shadow:none; }
.cp-header .cp-nav-wrap {
 position:relative; isolation:isolate; width:100%; max-width:1800px; min-height:102px; padding:12px 3%;
 border-radius:20px; color:#fff8ed; background:#0b3d23 url(v3-green-leather.webp?v=1) center/cover;
 box-shadow:0 7px 18px #55221626,inset 0 1px 2px #ffcec966; gap:24px;
}
.cp-header .cp-nav-wrap::before { content:''; position:absolute; inset:6px; border:1.5px dashed #f6dcc6; border-radius:15px; pointer-events:none; z-index:-1; }
.cp-header .cp-nav-wrap::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:20px; background:radial-gradient(circle at 0 50%,#fffef8 0 15px,transparent 16px),radial-gradient(circle at 100% 50%,#fffef8 0 15px,transparent 16px); }
.cp-header .cp-brand { align-self:stretch; padding-right:30px; border-right:1.5px dashed #f4d8c9b3; min-width:230px; }
.cp-header .cp-brand img { width:74px; height:76px; }
.cp-header .cp-brand span { font-size:16px; line-height:1.12; font-weight:600; }
.cp-header .cp-nav { flex:1; justify-content:space-evenly; gap:clamp(12px,1.6vw,28px); }
.cp-header .cp-nav > a,.cp-header .cp-contact-link { color:#fff8ed; font-size:clamp(12px,1.08vw,17px); }
.cp-header .cp-nav > a.is-active { color:#fff8ed; }
.cp-header .cp-nav > a.is-active::after { background:#fff0d9; background-image:none; height:2px; }
.cp-header .cp-nav-actions { align-self:stretch; border-left:1.5px dashed #f4d8c9b3; padding-left:32px; gap:30px; }
.cp-header .cp-nav-actions .cp-button { background:linear-gradient(135deg,#fffdf1,#f1e2c8); color:#062817; border:1px solid #fff3db; min-height:54px; padding:12px 30px; box-shadow:0 3px 8px #26030a26; }
.cp-header .cp-nav-actions .cp-button:hover { background:#fff9ec; color:#062817; }
.cp-header :is(a,button):focus-visible { outline-color:#f8dcb8; }
#cp-main-content .edition-hero.hero-live { background:#fff; }
#cp-main-content .hero-live .hero-stage { width:min(1760px,calc(100% - clamp(48px,6vw,112px))); grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr); align-items:center; gap:clamp(24px,2vw,40px); min-height:calc(100svh - var(--hero-header)); padding:clamp(28px,5svh,68px) 0; }
#cp-main-content .hero-live .hero-stage-copy { min-width:0; max-width:760px; padding-top:0; text-align:left; }
.cp-home-hero .cp-hero-eyebrow { margin-bottom:clamp(16px,2.8svh,30px); font-size:clamp(11px,1vw,15px); color:#0b3d23; }
#cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(36px,min(4.25vw,7.5svh),78px); letter-spacing:-.055em; line-height:1.1; margin-bottom:clamp(18px,2.8svh,30px); text-wrap:initial; }
#cp-main-content .cp-hero-heading .title-ink,#cp-main-content .cp-hero-heading .title-accent { color:#062817; }
#cp-main-content .cp-hero-heading .title-accent { margin-top:10px; }
.cp-hero-mark { color:#0b3d23; margin-right:.2em; padding-bottom:.4em; }
.cp-hero-mark > .cp-hero-seam { left:-12%; width:130%; }
#cp-main-content .hero-live .edition-hero-copy > p.cp-hero-desc { max-width:650px; color:#3f5747; font-size:clamp(15px,min(1.25vw,2svh),20px); line-height:1.65; margin-bottom:clamp(20px,3svh,30px); }
.cp-hero-conversion,.cp-hero-stores-card { align-items:flex-start; }
.cp-hero-conversion { gap:clamp(18px,2.8svh,28px); }
.cp-hero-actions,.cp-hero-stores-card .hero-store-buttons { justify-content:flex-start; }
#cp-main-content .cp-hero-actions > a { min-height:clamp(48px,6.2svh,64px); padding:12px clamp(16px,1.6vw,26px); font-size:clamp(13px,min(1.2vw,2svh),18px); }
#cp-main-content .cp-hero-actions > .cp-hero-watch { background:#fffef880; border-color:#0b3d23; color:#062817; }
.cp-hero-stores-card { max-width:clamp(300px,24vw,410px); gap:10px; }
.stores-rating { font-size:14px; color:#526956; }
.stores-rating svg { width:19px; height:19px; }
.cp-hero-stores-card .hero-store-buttons a { flex:1 1 0; }
.hero-stage-visual { perspective:1500px; justify-self:center; padding:12px 10px 0 0; translate:clamp(-32px,-1.8vw,-20px) 12px; width:min(100%,max(300px,calc((100svh - var(--hero-header) - 130px)*1.45))); }
.cp-hero-bat { display:block; position:absolute; z-index:0; width:112%; height:auto; aspect-ratio:2140 / 350; left:-4%; top:45%; pointer-events:none; }
.hero-stage-visual > .v2-tablet {
 width:86%;
 --tablet-pose:perspective(1200px) rotateY(-7deg) skewX(-2deg); aspect-ratio:1.45; rotate:0deg;
 transform:var(--tablet-pose); transform-origin:center; transform-style:flat; will-change:auto;
 background:linear-gradient(145deg,#29282c,#17171c 42%,#101015);
 border:2px solid #635951;
 box-shadow:inset 0 1px 0 #d6bd9e,inset 0 -1px 0 #060609,0 0 0 1px #c4a180,3px 2px 0 1px #745640,0 20px 18px -15px #3d251b80;
}
/* Keep highlights on the metal edge; the body has no blurred halo. */
.hero-stage-visual > .v2-tablet::after { display:none; }
.hero-stage-visual > .v2-tablet::before { content:''; position:absolute; inset:2px; border:1px solid #ffffff14; border-radius:inherit; pointer-events:none; }
.v2-tablet .tablet-camera-notch { padding:2px 6px; background:#0b0d12; border:1px solid #36363d; backdrop-filter:none; -webkit-backdrop-filter:none; }
.v2-tablet .tablet-lens { width:8px; height:8px; border:1px solid #4c5264; box-shadow:inset 0 0 0 1px #050915; }
.v2-tablet .lens-glint { width:2px; height:2px; top:1px; left:1px; box-shadow:none; background:#d5e8ff; }
.v2-tablet .tablet-btn { border:1px solid #605c59; background:linear-gradient(#5b5755,#28272b); box-shadow:none; }
.v2-tablet .tablet-btn-power { top:-5px; height:4px; }
.v2-tablet .tablet-btn-vol-up,.v2-tablet .tablet-btn-vol-down { right:-5px; width:4px; }
.v2-tablet .tablet-speaker-ports { opacity:1; }
.v2-tablet .tablet-speaker-ports span { box-shadow:none; background:#07080c; }
.v2-tablet .hero-broadcast-frame.hero-drs.drs-view { height:100%; aspect-ratio:auto; }
.v2-tablet .hero-live-badge { gap:5px; padding:4px 6px; background:#f00; background-image:none; border:0; border-radius:2px; color:#fff; font:700 clamp(10px,.8vw,14px)/1 'Inter',sans-serif; letter-spacing:.02em; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.v2-tablet .hero-live-badge svg { display:block; width:1.5em; height:1.125em; flex:none; }
.v2-tablet .hero-drs[data-environment="daylight"]::before { background:linear-gradient(rgb(14 28 36 / .15),transparent); }
.v2-tablet .hero-drs[data-environment="daylight"]::after { height:80px; background:linear-gradient(transparent,rgb(10 25 22 / .32)); }
.cp-hero-preview-caption { margin-top:clamp(22px,3.5svh,40px); color:#526956; }
.cp-hero-preview-caption p { font-size:13px; }
@media (min-width:1121px) and (max-width:1380px) {
 body.cp-site { --hero-header:104px; }
 .cp-header .cp-nav-wrap { padding-inline:30px; gap:18px; min-height:88px; }
 .cp-header .cp-brand { min-width:190px; padding-right:18px; }
 .cp-header .cp-brand img { width:58px; height:64px; }
 .cp-header .cp-brand span { font-size:13px; }
 .cp-header .cp-nav-actions { padding-left:18px; gap:18px; }
 .cp-header .cp-nav-actions .cp-button { padding-inline:22px; }
 #cp-main-content .hero-live .hero-stage { gap:24px; }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(36px,min(4vw,7.5svh),54px); }
 #cp-main-content .cp-hero-actions > a { padding-inline:16px; }
}
@media (max-width:1120px) {
 body.cp-site { --hero-header:90px; }
 .cp-header { padding:10px 10px 0; }
 .cp-header .cp-nav-wrap { min-height:80px; padding:10px 26px; }
 .cp-header .cp-brand { border:0; padding:0; min-width:0; }
 .cp-header .cp-brand img { width:56px; height:60px; }
 .cp-header .cp-brand span { font-size:14px; }
 .cp-header .cp-menu-toggle span { background:#fff3dd; }
 .cp-header .cp-nav { justify-content:flex-start; gap:4px; color:#062817; background:#fffef8; }
 .cp-header .cp-nav > a { color:#062817; font-size:16px; }
 .cp-header .cp-nav > a.is-active { color:#0b3d23; }
 .cp-header .cp-nav > a.is-active::after { background:#0b3d23; }
 .cp-header .cp-nav > .cp-mobile-signin { color:#fff8ed; }
 #cp-main-content .hero-live .hero-stage { width:min(780px,calc(100% - 48px)); grid-template-columns:minmax(0,1fr); padding:clamp(24px,3.5svh,40px) 0; min-height:calc(100svh - var(--hero-header)); gap:clamp(22px,3svh,36px); }
 #cp-main-content .hero-live .hero-stage-copy { padding-top:0; text-align:center; margin-inline:auto; }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(36px,min(5.3vw,5.2svh),54px); }
 #cp-main-content .hero-live .edition-hero-copy > p.cp-hero-desc { max-width:620px; font-size:16px; line-height:1.6; }
 .cp-hero-conversion,.cp-hero-stores-card { align-items:center; }
 .cp-hero-actions,.cp-hero-stores-card .hero-store-buttons { justify-content:center; }
 .hero-stage-visual { width:min(92%,max(300px,calc(32svh * 1.7))); padding:0; translate:none; }
 .cp-hero-bat { width:100%; left:0; }
 .hero-stage-visual > .v2-tablet { width:78%; }
 .hero-stage-visual > .v2-tablet { --tablet-pose:perspective(1200px) rotateY(-5deg) skewX(-1.5deg); aspect-ratio:1.7; }
 .cp-hero-preview-caption { margin-top:20px; }
 .cp-hero-stores-card { max-width:330px; }
 #cp-main-content .edition-hero.hero-live { background-position:65% center; }
}
@media (max-width:600px) {
 body.cp-site { --hero-header:82px; }
 .cp-header .cp-nav-wrap { min-height:72px; border-radius:15px; padding:8px 20px; }
 .cp-header .cp-nav-wrap::before { inset:5px; border-radius:11px; }
 .cp-header .cp-nav-wrap::after { border-radius:15px; background:radial-gradient(circle at 0 50%,#fffef8 0 10px,transparent 11px),radial-gradient(circle at 100% 50%,#fffef8 0 10px,transparent 11px); }
 .cp-header .cp-brand img { width:44px; height:50px; }
 .cp-header .cp-brand span { font-size:12px; }
 #cp-main-content .hero-live .hero-stage { width:calc(100% - 36px); padding:clamp(20px,3svh,32px) 0 28px; gap:24px; }
 #cp-main-content .hero-live .hero-stage-copy { text-align:left; }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(28px,7.5vw,44px); line-height:1.12; margin-bottom:18px; }
 .cp-home-hero .cp-hero-eyebrow { margin-bottom:18px; font-size:10px; letter-spacing:.08em; gap:8px; }
 #cp-main-content .hero-live .edition-hero-copy > p.cp-hero-desc { font-size:14px; line-height:1.6; margin-bottom:20px; }
 #cp-main-content .cp-hero-actions > a { min-height:48px; flex:1 1 145px; font-size:12px; gap:7px; padding:11px 10px; }
 .cp-hero-actions { gap:10px; }
 .cp-hero-action-icon { width:18px; height:18px; flex-basis:18px; }
 .cp-hero-stores-card { align-self:flex-start; max-width:310px; align-items:flex-start; gap:8px; }
 .cp-hero-stores-card .hero-store-buttons { justify-content:flex-start; }
 .stores-rating { font-size:12px; }
 .hero-stage-visual { width:min(96%,380px); }
 .hero-stage-visual > .v2-tablet { --tablet-pose:perspective(900px) rotateY(-4deg) skewX(-1deg); border-radius:22px; }
 .cp-hero-preview-caption { margin-top:18px; }
 .cp-hero-preview-caption p { font-size:11px; }
}
/* A split layout uses landscape tablets and phone widths without a giant stack. */
@media (min-width:620px) and (max-width:1120px) and (orientation:landscape) {
 #cp-main-content .hero-live .hero-stage { width:calc(100% - 48px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; }
 #cp-main-content .hero-live .hero-stage-copy { text-align:left; }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(28px,3.7vw,40px); }
 .cp-home-hero .cp-hero-eyebrow { justify-content:flex-start; font-size:10px; letter-spacing:.06em; gap:8px; }
 #cp-main-content .hero-live .edition-hero-copy > p.cp-hero-desc { font-size:14px; }
 .cp-hero-conversion,.cp-hero-stores-card { align-items:flex-start; }
 .cp-hero-actions,.cp-hero-stores-card .hero-store-buttons { justify-content:flex-start; }
 #cp-main-content .cp-hero-actions > a { min-height:44px; padding:10px 12px; font-size:12px; flex:1 1 135px; }
 .hero-stage-visual { width:96%; }
 .cp-hero-preview-caption p { font-size:10px; }
}
@media (max-width:600px) and (max-height:740px) and (orientation:portrait) {
 body.cp-site { --hero-header:70px; }
 .cp-header .cp-nav-wrap { min-height:60px; padding-block:7px; }
 .cp-header .cp-brand img { width:38px; height:44px; }
 #cp-main-content .hero-live .hero-stage { padding-block:12px; gap:16px; }
 .cp-home-hero .cp-hero-eyebrow { margin-bottom:12px; }
 #cp-main-content .cp-home-hero h1.cp-hero-heading { font-size:clamp(26px,7vw,34px); margin-bottom:12px; }
 #cp-main-content .hero-live .edition-hero-copy > p.cp-hero-desc { margin-bottom:14px; }
 #cp-main-content .cp-hero-actions > a { min-height:44px; padding-block:9px; }
 .cp-hero-conversion { gap:12px; }
 .cp-hero-stores-card { max-width:280px; gap:6px; }
 .hero-stage-visual { width:min(96%,calc(22svh * 2)); }
 .hero-stage-visual > .v2-tablet { aspect-ratio:2; }
 .cp-hero-preview-caption { margin-top:8px; }
 .cp-hero-preview-caption p { font-size:10px; }
}
/* Compact the chrome and spacing on shallow laptop/landscape displays. */
@media (min-width:1121px) and (max-height:760px) {
 body.cp-site { --hero-header:88px; }
 .cp-header { padding-top:10px; }
 .cp-header .cp-nav-wrap { min-height:78px; padding-block:8px; }
 .cp-header .cp-brand img { width:54px; height:60px; }
 .cp-header .cp-brand span { font-size:14px; }
 .cp-header .cp-nav-actions .cp-button { min-height:44px; }
 #cp-main-content .hero-live .hero-stage { padding-block:24px; }
 .cp-hero-stores-card { max-width:320px; }
 .stores-rating { font-size:12px; }
}
/* Center the download block on the actual CTA pair, rather than the copy column. */
.cp-home-hero .cp-hero-conversion { width:fit-content; max-width:100%; align-items:center; }
.cp-home-hero .cp-hero-stores-card { align-self:center; align-items:center; }
.cp-home-hero .stores-meta,.cp-home-hero .cp-hero-stores-card .hero-store-buttons { justify-content:center; }
@media (max-width:1120px) { .cp-home-hero .cp-hero-conversion { margin-inline:auto; } }
@media (min-width:620px) and (max-width:1120px) and (orientation:landscape) { .cp-home-hero .cp-hero-conversion { margin-inline:0; } }
@media (prefers-reduced-motion:reduce) { .hero-stage-visual > .v2-tablet { transform:none; rotate:none; } }