:root { --gold:#ebd1a1; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { width:100%; min-height:100%; margin:0; background:#020405; }
body { overflow:hidden; font-family:Arial, sans-serif; }
.screen { position:relative; min-height:100svh; width:100%; overflow:hidden; background:#05090b; }
.reference-screen { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; }
.popup-launcher { position:fixed; z-index:2; right:28px; bottom:26px; width:44px; height:44px; border:1px solid rgba(235,209,161,.72); border-radius:50%; color:#fff0cb; background:rgba(8,11,12,.54); box-shadow:0 4px 23px rgba(0,0,0,.45); font-size:17px; backdrop-filter:blur(7px); cursor:pointer; transition:transform .25s ease, background .25s ease; }
.popup-launcher:hover { transform:translateY(-3px); background:rgba(117,87,48,.64); }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(1,4,7,.42); backdrop-filter:blur(2px); animation:fade .26s ease both; }
.modal { width:min(calc(100% - 40px),500px); max-height:calc(100svh - 40px); position:relative; overflow:hidden; color:#eae4d9; background:linear-gradient(145deg,rgba(27,30,32,.98),rgba(9,13,16,.98)); border:1px solid rgba(224,197,141,.65); box-shadow:0 24px 80px rgba(0,0,0,.64), inset 0 0 0 5px rgba(236,214,170,.06); animation:rise .34s cubic-bezier(.2,.8,.2,1) both; }
.modal::before,.modal::after { content:""; position:absolute; width:20px; height:20px; border-color:#d9b976; pointer-events:none; }.modal::before { left:10px; top:10px; border-left:1px solid; border-top:1px solid; }.modal::after { right:10px; bottom:10px; border-right:1px solid; border-bottom:1px solid; }
.video-wrap { height:clamp(220px,42vw,300px); position:relative; overflow:hidden; background:#0d1015; }.video-wrap::after { content:""; position:absolute; z-index:1; left:0; right:0; top:60%; height:40%; background:linear-gradient(transparent,#121316); pointer-events:none; }.video-wrap wistia-player { display:block; width:100%; height:100%; }.video-shield { position:absolute; z-index:2; inset:0; cursor:default; }.corner-ribbon { position:absolute; z-index:3; top:20px; left:-50px; width:180px; padding:9px 0; transform:rotate(-45deg); background:#f59320; color:#1a1510; text-align:center; font-size:12px; font-weight:800; letter-spacing:.1em; box-shadow:0 2px 8px rgba(0,0,0,.32); animation:heartbeat 1.8s ease-in-out infinite; transform-origin:center; }.modal-copy { position:relative; z-index:2; margin-top:-1px; padding:0 38px 28px; text-align:center; background:#121316; }.eyebrow { margin:0 0 12px; color:#ed9d3a; font-size:10px; font-weight:bold; letter-spacing:.22em; }
wistia-player[media-id='ryn6ebxq75']:not(:defined) { background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/ryn6ebxq75/swatch'); display:block; filter:blur(5px); padding-top:56.25%; }
h1 { margin:0 0 9px; font-family:Georgia,'Yu Mincho',serif; font-weight:400; font-size:clamp(36px,5vw,52px); line-height:.95; letter-spacing:.035em; } h1 em { font-style:normal; color:#f79221; }
#modal-copy { max-width:325px; margin:0 auto 16px; color:rgba(240,235,223,.76); font-size:12px; line-height:1.7; }.cta { width:100%; display:flex; align-items:center; justify-content:center; gap:15px; padding:14px 18px; color:#fff; background:linear-gradient(90deg,#bd701f,#e14c12); font-size:13px; font-weight:700; text-decoration:none; transition:filter .2s ease,transform .2s ease; }.cta:hover { filter:brightness(1.12); transform:translateY(-2px); }.cta span { font-size:18px; }.cta.is-disabled { pointer-events:none; opacity:.55; filter:saturate(.6); }.unlock { --progress:0%; position:relative; width:min(100%,355px); height:58px; margin:14px auto 10px; overflow:hidden; border:1px solid rgba(255,255,255,.5); background:#242424; text-align:center; animation:swipe-prompt 1.6s ease-in-out infinite; }.unlock-progress { position:absolute; inset:0 auto 0 0; width:var(--progress); background:linear-gradient(90deg,#bd701f,#e14c12); transition:width .08s linear; }.unlock-label { position:relative; z-index:1; display:block; padding:19px 52px; color:#f2ede3; font-size:12px; font-weight:700; letter-spacing:.1em; pointer-events:none; }.unlock-range { position:absolute; z-index:2; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:grab; }.unlock-range:active { cursor:grabbing; }.unlock-handle { position:absolute; z-index:1; top:5px; bottom:5px; left:clamp(5px,calc(var(--progress) - 24px),calc(100% - 53px)); width:48px; border-radius:2px; color:#2c1a0c; background:#f2c06d; font-size:37px; line-height:43px; font-family:Georgia,serif; transition:left .08s linear, background .2s ease; pointer-events:none; }.unlock.is-ready { border-color:#e9bd6c; animation:none; }.unlock.is-ready .unlock-handle { left:calc(100% - 53px); color:#112014; background:#85d19a; }
@keyframes fade { from{opacity:0}to{opacity:1} } @keyframes rise { from{opacity:0;transform:translateY(17px) scale(.98)}to{opacity:1;transform:none} } @keyframes swipe-prompt { 0%,100% { transform:translateX(0); box-shadow:0 0 0 rgba(245,147,32,0); } 45% { transform:translateX(10px); box-shadow:0 0 24px rgba(245,147,32,.26); } } @keyframes heartbeat { 0%,100% { transform:rotate(-45deg) scale(1); filter:brightness(1); } 8% { transform:rotate(-45deg) scale(1.08); filter:brightness(1.18); } 16% { transform:rotate(-45deg) scale(1); filter:brightness(1); } 24% { transform:rotate(-45deg) scale(1.06); filter:brightness(1.12); } 38% { transform:rotate(-45deg) scale(1); filter:brightness(1); } } @keyframes heartbeat-mobile { 0%,100% { transform:rotate(-45deg) scale(.8); filter:brightness(1); } 8% { transform:rotate(-45deg) scale(.864); filter:brightness(1.18); } 16% { transform:rotate(-45deg) scale(.8); filter:brightness(1); } 24% { transform:rotate(-45deg) scale(.848); filter:brightness(1.12); } 38% { transform:rotate(-45deg) scale(.8); filter:brightness(1); } } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .reference-screen { width:auto; min-width:100%; height:100%; object-position:center; }.modal { width:min(calc(100% - 32px),390px); }.modal-copy { padding:0 25px 24px; }.video-wrap { height:175px; }.video-wrap::after { top:100px; height:75px; }.corner-ribbon { top:13px; left:-59px; transform:rotate(-45deg) scale(.8); animation-name:heartbeat-mobile; }.popup-launcher { right:18px; bottom:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }


/* Popup fits the entire viewport with NO scroll on desktop, mobile or landscape. */
html, body { overflow: hidden !important; }
.modal-backdrop {
  display: block;
  overflow: hidden;
  padding: 0;
  overscroll-behavior: none;
}
.modal-positioner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(500px, calc(100vw - 24px));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.modal {
  width: 100%;
  max-height: none;
  overflow: hidden;
  transform: scale(var(--modal-fit-scale, 1));
  transform-origin: center center;
  pointer-events: auto;
  animation: popup-reveal .25s ease both;
}
@keyframes popup-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .modal-positioner { width: min(390px, calc(100vw - 20px)); }
  .modal-copy { padding-left: clamp(14px, 5vw, 25px); padding-right: clamp(14px, 5vw, 25px); }
  .video-wrap { height: clamp(110px, 25dvh, 175px); }
  .video-wrap::after { top: 57%; height: 43%; }
  .modal-copy { padding-bottom: 16px; }
}
@media (max-height: 700px) {
  .video-wrap { height: clamp(86px, 24dvh, 165px); }
  .modal-copy { padding-bottom: 14px; }
  .eyebrow { margin-bottom: 7px; }
  h1 { font-size: clamp(29px, 6dvh, 42px); margin-bottom: 5px; }
  #modal-copy { margin-bottom: 9px; line-height: 1.35; }
  .cta { padding: 10px 12px; min-height: 40px; }
  .unlock { height: 48px; margin: 9px auto 5px; }
  .unlock-label { padding-top: 14px; padding-bottom: 13px; }
  .unlock-handle { height: 38px; line-height: 36px; }
}
@media (max-height: 420px) {
  .video-wrap { height: clamp(60px, 20dvh, 85px); }
  .modal-copy { padding-bottom: 10px; }
  .eyebrow { margin-bottom: 5px; }
  h1 { font-size: 30px; }
  #modal-copy { margin-bottom: 6px; }
  .unlock { height: 44px; margin-top: 6px; }
  .unlock-label { padding-top: 12px; padding-bottom: 12px; }
  .unlock-handle { height: 34px; line-height: 33px; }
}


/* Video occupies exactly the upper half of the popup.
   The full panel keeps a known intrinsic height so the existing JS can
   shrink it uniformly on shorter screens without introducing a scrollbar. */
.modal {
  height: 720px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
.video-wrap {
  height: 100%;
  min-height: 0;
}
.video-wrap::after {
  top: 62%;
  height: 38%;
}
.modal-copy {
  margin-top: 0;
  min-height: 0;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 760px) {
  .modal { height: 660px; }
  .video-wrap { height: 100%; }
  .video-wrap::after { top: 62%; height: 38%; }
  .modal-copy { padding-top: 10px; padding-bottom: 14px; }
}
@media (max-height: 420px) {
  .video-wrap { height: 100%; }
}

/* Keep the scaled panel centered even on very short landscape screens. */
.modal-positioner {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  display: grid;
  place-items: center;
}
.modal { width: min(500px, calc(100vw - 24px)); }
@media (max-width: 760px) {
  .modal { width: min(390px, calc(100vw - 20px)); }
}
.modal-positioner {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.modal { justify-self: center; align-self: center; }


/* 2026-11-12: Bigger CTA and swipe, with a pronounced double heartbeat.
   Leaves the 50/50 video split, responsive no-scroll scaling and tracking intact. */
.cta {
  min-height: 66px;
  padding: 18px 20px;
  font-size: 17px;
  letter-spacing: .025em;
  font-weight: 800;
  position: relative;
  z-index: 1;
  transform-origin: center;
  animation: cta-double-heartbeat 1.55s ease-in-out infinite;
  will-change: transform;
}
.cta span { font-size: 23px; }
.cta:hover { filter: brightness(1.18); }
@keyframes cta-double-heartbeat {
  0%, 42%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(244,95,24,0); }
  9% { transform: scale(1.065); box-shadow: 0 0 22px rgba(255,98,18,.85), 0 0 42px rgba(255,98,18,.3); }
  18% { transform: scale(1.005); box-shadow: 0 0 7px rgba(255,98,18,.36); }
  29% { transform: scale(1.045); box-shadow: 0 0 18px rgba(255,98,18,.7); }
}
.unlock {
  width: min(100%, 380px);
  height: 70px;
  margin: 13px auto 8px;
}
.unlock-label {
  padding: 24px 62px;
  font-size: 13px;
}
.unlock-handle {
  top: 5px;
  bottom: 5px;
  left: clamp(5px, calc(var(--progress) - 29px), calc(100% - 63px));
  width: 58px;
  height: auto;
  font-size: 42px;
  line-height: 57px;
}
.unlock.is-ready .unlock-handle { left: calc(100% - 63px); }
/* The lower half still contains all content without inner scrolling. */
@media (max-width: 760px) {
  .modal { height: 720px; }
  .modal-copy { padding-top: 6px; padding-bottom: 10px; }
  .eyebrow { margin-bottom: 8px; }
  h1 { margin-bottom: 6px; }
  #modal-copy { margin-bottom: 10px; }
  .cta { min-height: 62px; padding: 15px 12px; font-size: 15px; }
  .unlock { height: 66px; margin: 11px auto 6px; }
  .unlock-label { padding: 22px 56px; font-size: 12px; }
  .unlock-handle { width: 54px; line-height: 53px; left: clamp(5px, calc(var(--progress) - 27px), calc(100% - 59px)); }
  .unlock.is-ready .unlock-handle { left: calc(100% - 59px); }
}
@media (max-height: 420px) {
  /* The existing fit-to-screen script scales the complete popup uniformly. */
  .cta { min-height: 62px; }
  .unlock { height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta { animation: none !important; will-change: auto; }
}