/* 72 — price (owner: B5). The buy moment: a liquid-glass plate over a slowly drifting blue light field.
   Glass sits on moving content only: drifting light + the rising "keeps getting better" curve from the film pass behind it. */
.pr{isolation:isolate;overflow:hidden;padding-block:clamp(56px,6vw,88px) clamp(72px,8vw,112px)}

/* ---- moving light field (transform-only animation; paused offscreen via .is-live) ---- */
.pr-field{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.pr-blob{position:absolute;border-radius:50%;will-change:transform}
.pr-blob--a{width:70vw;height:70vw;max-width:1100px;max-height:1100px;left:-8vw;top:8%;
  background:radial-gradient(closest-side,rgba(59,99,255,.42),rgba(59,99,255,.12) 55%,transparent);
  animation:prDriftA 15s var(--e-io) infinite alternate}
.pr-blob--b{width:58vw;height:58vw;max-width:900px;max-height:900px;right:-10vw;top:-6%;
  background:radial-gradient(closest-side,rgba(120,150,255,.30),rgba(59,99,255,.08) 60%,transparent);
  animation:prDriftB 13s var(--e-io) infinite alternate}
.pr-blob--c{width:40vw;height:40vw;max-width:640px;max-height:640px;left:38%;bottom:-12%;
  background:radial-gradient(closest-side,rgba(159,180,255,.22),transparent 70%);
  animation:prDriftC 17s var(--e-io) infinite alternate}
@keyframes prDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,-5vh,0) scale(1.08)}}
@keyframes prDriftB{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-8vw,8vh,0) scale(.94)}}
@keyframes prDriftC{from{transform:translate3d(0,0,0)}to{transform:translate3d(-12vw,-7vh,0)}}
.pr-grid{position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 64px);
  -webkit-mask:radial-gradient(70% 60% at 50% 55%,#000 20%,transparent 75%);mask:radial-gradient(70% 60% at 50% 55%,#000 20%,transparent 75%)}
.pr-curve{position:absolute;left:-6%;width:112%;top:26%;height:64%;overflow:visible;will-change:transform;
  animation:prCurve 14s var(--e-io) infinite alternate}
.pr-curve__glow{opacity:.45;filter:blur(22px)}
.pr-curve__line{filter:drop-shadow(0 0 6px rgba(159,180,255,.9))}
@keyframes prCurve{from{transform:translate3d(-2.5%,2%,0)}to{transform:translate3d(2.5%,-3%,0)}}
.pr-grain{display:none;position:absolute;inset:0;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pr:not(.is-live) .pr-blob,.pr:not(.is-live) .pr-curve{animation-play-state:paused}

/* ---- header ---- */
.pr-wrap{position:relative}
.pr-head{text-align:center;margin-bottom:clamp(24px,2.8vw,40px)}
.pr-head .eyebrow{margin-bottom:10px}
.pr-title{margin-inline:auto;max-width:16ch}
@media (min-width:900px){.pr-title{max-width:none}}

/* ---- the plate ---- */
.pr-plate{--rim:1;max-width:1080px;margin-inline:auto;border-radius:var(--r-plate)}
.pr-plate.glass::before{opacity:1;transition:opacity .7s ease .2s}
.pr-plate{transition:transform .9s var(--e-out)}
.pr-plate.is-pre{transform:scale(.97)}
.pr-plate.is-pre.glass::before{opacity:.15;transition:none}
.pr-sheen{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none}
.pr-sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;transform:translateX(-120%) skewX(-14deg);opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.07) 55%,transparent)}
.pr-plate.is-lit .pr-sheen::before{animation:prSheen 1.6s var(--e-io) .25s 1 both}
@keyframes prSheen{0%{transform:translateX(-120%) skewX(-14deg);opacity:1}100%{transform:translateX(260%) skewX(-14deg);opacity:1}}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pr-plate.glass{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 42%,rgba(255,255,255,.08)),rgba(8,10,18,.40);
    -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
}
@media (max-width:733px){@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pr-plate.glass{-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}}}
.pr-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  padding:clamp(22px,4vw,52px);gap:0}
.pr-buy{padding-right:clamp(28px,4vw,60px)}
.pr-lists{padding-left:clamp(28px,4vw,60px);border-left:1px solid rgba(255,255,255,.11)}

.pr-buy{display:flex;flex-direction:column;align-items:flex-start;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.pr-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;line-height:.95}
.pr-amount b{flex-basis:100%}
.pr-amount__unit{margin-top:8px}
/* launch offer: the shared offer chip (same treatment as the hero and the buy sheet): soft translucent blue, hairline,
   struck regular price, "Launch offer", % off, live countdown on one line with a fixed width (never jitters or re-wraps).
   In the plate, a 1px hairline at its foot shows how much of the 72-hour launch window is left. */
.pr-offer{margin-bottom:clamp(18px,2vw,26px)}
.pr-chip{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:8px 12px;border-radius:12px;
  background:rgba(59,99,255,.12);box-shadow:inset 0 0 0 1px rgba(159,180,255,.28);overflow:hidden;
  font-size:15px;font-weight:600;line-height:1.35;color:var(--fg);text-shadow:none}
.pr-chip s{color:var(--fg-2);font-weight:500;text-decoration-thickness:1.5px}
.pr-chip .pct{color:var(--blue-2)}
.pr-chip .pct::before{content:"·";color:var(--fg-4);margin-right:10px}
.pr-chip .end{white-space:nowrap;color:var(--fg-2);font-weight:500}
.pr-chip .t{display:inline-block;min-width:12.4ch;color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.pr-chip__bar{position:absolute;left:12px;right:12px;bottom:0;height:1px;background:rgba(159,180,255,.14)}
.pr-chip__bar span{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--left,1));background:linear-gradient(90deg,var(--blue),var(--blue-2))}
@media (max-width:420px){.pr-chip{font-size:14px;padding:8px 11px}}
.pr-amount b{font-size:clamp(64px,5.6vw + 10px,104px);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums;color:var(--fg)}
.pr-amount__unit{font-size:clamp(18px,.6vw + 14px,24px);font-weight:500;color:var(--fg-2);letter-spacing:-.01em}
.pr-sub span{display:block}
.pr-sub{margin-top:18px;font-size:var(--t-lead);line-height:1.4;color:var(--fg);font-weight:500;letter-spacing:-.01em;max-width:26ch;text-wrap:balance}
.pr-btn{margin-top:clamp(26px,3vw,36px);min-height:56px;padding:0 28px;font-size:17px}
.pr-mail{margin-top:16px;width:100%;max-width:420px;background:rgba(5,6,10,.28)}
.pr-note{margin-top:12px;color:var(--fg-2)}

.pr-lists{display:grid;gap:clamp(20px,2.2vw,28px);align-content:start}
.pr-h{font-size:var(--t-small);font-weight:600;letter-spacing:-.005em;color:var(--fg-2);margin-bottom:6px}
.pr-list li{position:relative;padding:9px 0 9px 30px;font-size:16px;line-height:1.42;color:var(--fg);letter-spacing:-.006em;
  border-top:1px solid rgba(255,255,255,.08);text-wrap:pretty}
.pr-list li:first-child{border-top:0}
.pr-list li::before{content:"";position:absolute;left:3px;top:15px;width:11px;height:6px;
  border-left:1.75px solid var(--blue-2);border-bottom:1.75px solid var(--blue-2);transform:rotate(-45deg)}
.pr-list--need li{color:var(--fg-2)}
.pr-list--need li::before{width:10px;height:0;top:19px;left:2px;border-left:0;border-bottom:1.5px solid var(--fg-3);transform:none}

/* ---- free upgrades: plain text on a hairline timeline, ticks on the line, no boxes ---- */
.pr-ups{max-width:1080px;margin:clamp(28px,3vw,40px) auto 0;padding-inline:clamp(4px,2vw,28px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:10px clamp(20px,3vw,40px)}
.pr-ups__lab{font-size:var(--t-small);font-weight:600;color:var(--fg-2);padding-bottom:16px;white-space:nowrap}
.pr-ups__row{position:relative;display:flex;justify-content:space-between;padding:0 6px 16px}
.pr-ups__row::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;
  background:linear-gradient(90deg,rgba(159,180,255,.65),rgba(159,180,255,.3) 80%,rgba(159,180,255,.08))}
.pr-ups__row li{position:relative;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.pr-ups__row li::after{content:"";position:absolute;left:50%;bottom:-16px;width:1.5px;height:9px;margin-left:-.75px;border-radius:1px;
  background:var(--blue-2);box-shadow:0 0 8px rgba(59,99,255,.9)}
.pr-ups__row b{font-size:clamp(16px,.4vw + 13px,19px);font-weight:700;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.pr-ups__row span{font-size:15px;font-weight:500;color:var(--blue-2)}
.pr-ups__row span::before{content:"· ";color:var(--fg-4)}
.pr-ups__row li:nth-child(3){opacity:.8}
.pr-ups__row li:nth-child(4){opacity:.6}
.pr-ups__more{font-size:var(--t-small);color:var(--fg-3);padding-bottom:16px;white-space:nowrap}

@media (max-width:900px){
  .pr-in{grid-template-columns:1fr}
  .pr-buy{padding-right:0;padding-bottom:clamp(26px,4vw,36px)}
  .pr-lists{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:clamp(22px,4vw,32px)}
}
@media (max-width:733px){
  .pr-btn{width:100%}
  .pr-ups{grid-template-columns:1fr;gap:12px;padding-inline:4px}
  .pr-ups__lab{padding-bottom:4px}
  .pr-ups__row li{flex-direction:column;align-items:center;gap:0}
  .pr-ups__row span::before{content:none}
  .pr-ups__more{padding-bottom:0;justify-self:end}
  .pr-blob--a{width:130vw;height:130vw;left:-40vw}
  .pr-blob--b{width:110vw;height:110vw}
  .pr-curve{top:44%;height:40%}
}
@media (prefers-reduced-motion:reduce){.pr-blob,.pr-curve{animation:none}}
/* phones: nothing moves behind the glass, so its backdrop blur is computed once, not every frame (smooth scroll) */
@media (max-width:733px){
  .pr-blob,.pr-curve{animation:none;will-change:auto}
  .pr-curve__glow{display:none}
  .pr-curve__line{filter:none}
  .pr-grain{display:none}
}
@media (prefers-reduced-transparency:reduce){.pr-plate.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,18,26,.96)}}
.pr-mail .copy{min-height:46px;padding:0 16px}
.pr-mail code{white-space:nowrap;overflow-wrap:normal;font-size:clamp(13.5px,3.8vw,18px)}
@media (max-width:380px){.pr-mail{padding-left:14px;gap:8px}.pr-mail .copy{padding:0 12px}.pr-in{padding:20px 18px}}