/* ============================================================
   LENSIE PAYWALL — shared by the home page and the three paywall modals
   Tokens, base, buttons and section labels are copied from the
   landing (index.html) so the paywall reads as the same product.
   The plan picker and pay buttons are rendered by paywall.js from
   one PLANS list; this file only styles them.
============================================================ */
:root{
  --ink:#08070b;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.075);

  --violet:#9883ec;
  --violet-hot:#b79dff;
  --violet-deep:#5b3fd6;
  --blush:#f6a3fc;
  --lilac:#ae7bfc;
  --ok:#7fe0a8;

  --text:#fff;
  --text-2:#bcbcc6;
  --text-3:#8b8899;

  --r:18px; --r-lg:28px; --r-xl:36px;
  --pad:clamp(16px,5vw,64px);
  --maxw:1240px;

  --sans:"Manrope",ui-sans-serif,-apple-system,"SF Pro Text",system-ui,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,.8,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.04}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--violet);color:#0b0910}
:focus-visible{outline:2px solid var(--violet-hot);outline-offset:3px;border-radius:6px}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--violet-hot)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- buttons (landing .btn) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:11px 20px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn-primary{background:linear-gradient(135deg,var(--violet-hot),var(--violet) 45%,var(--violet-deep));color:#0a0812;
  box-shadow:0 6px 26px -8px rgba(152,131,236,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary::after{content:"";position:absolute;inset:0;transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:transform .7s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 42px -10px rgba(152,131,236,.95),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover::after{transform:translateX(130%) skewX(-18deg)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:#fff}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}
.btn-lg{min-height:52px;padding:15px 28px;font-size:15px}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-block{width:100%}

.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--violet);display:flex;align-items:center;gap:12px;margin-bottom:18px;line-height:1.4}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--violet);opacity:.6;flex:none}
.pro-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,var(--violet-hot),var(--blush));color:#0b0910;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;line-height:1.3}

/* ---------- plan picker ----------
   A native radio group: the browser gives ↑/↓/←/→ between plans and one
   tab stop. The whole card is the label, so the full row is the hit area. */
.plans{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.plans legend{padding:0}
.plan{position:relative;display:flex;align-items:center;gap:14px;min-height:66px;padding:13px 18px;border-radius:var(--r);
  border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;
  transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--ease)}
.plan:hover{background:rgba(255,255,255,.06)}
.plan input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.plan:has(input:focus-visible){outline:2px solid var(--violet-hot);outline-offset:3px}
.plan:has(input:checked){border-color:rgba(183,157,255,.85);
  background:linear-gradient(135deg,rgba(152,131,236,.22),rgba(152,131,236,.06) 70%);box-shadow:0 0 0 4px rgba(152,131,236,.09),0 18px 40px -26px rgba(152,131,236,.9)}
.plan-dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.42);display:grid;place-items:center;transition:border-color .3s}
.plan-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--violet-hot);transform:scale(0);transition:transform .3s var(--ease)}
.plan:has(input:checked) .plan-dot{border-color:var(--violet-hot)}
.plan:has(input:checked) .plan-dot::after{transform:scale(1)}
.plan-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.plan-name{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.plan-bill{font-size:12.5px;color:var(--text-3);margin-top:3px}
.plan-price{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;text-align:end}
.plan-price b{font-size:20px;font-weight:800;letter-spacing:-.03em}
.plan-price s{font-size:12.5px;color:var(--text-3);margin-top:3px}
.plan-tag{position:absolute;top:-10px;inset-inline-end:16px;padding:3px 10px;border-radius:999px;pointer-events:none;
  background:linear-gradient(135deg,var(--violet-hot),var(--blush));color:#0b0910;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}

/* ---------- pay buttons ---------- */
.pay{display:grid;gap:10px}
.pay-apple{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 20px;border-radius:14px;
  background:#fff;color:#000;font-size:15.5px;font-weight:700;letter-spacing:-.01em;transition:transform .25s var(--ease),box-shadow .3s}
.pay-apple:hover{transform:translateY(-1px);box-shadow:0 14px 34px -16px rgba(255,255,255,.6)}
.pay-apple svg{flex:none;margin-top:-2px}
.pay-card{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;padding:0 20px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);font-size:14.5px;font-weight:700;transition:background .3s,border-color .3s}
.pay-card:hover{background:var(--surface-2);border-color:rgba(255,255,255,.22)}
.demo-note{font-size:12.5px;color:var(--violet-hot);text-align:center;min-height:0}
.demo-note:empty{display:none}

/* small notes */
.dev-note{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(152,131,236,.08);border:1px solid rgba(152,131,236,.2);
  font-size:13px;line-height:1.45;color:var(--text-2)}
.dev-note b{color:#fff;font-weight:700}
.dev-note svg{flex:none;color:var(--violet-hot)}
.refund{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid rgba(127,224,168,.22);background:rgba(127,224,168,.06);
  font-size:14px;line-height:1.45;color:var(--text-2)}
.refund b{color:#fff}
.refund svg{flex:none;color:var(--ok)}
.fine{font-size:12px;color:var(--text-3);text-align:center;line-height:1.5}
.fine a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:10px 2px;margin:-10px 0}
.fine a:hover{color:#fff}

/* ============================================================
   PAYWALL MODAL (paywall/*.html)
   Desktop: a centred split card, the visual on the left and the plan
   picker on the right. ≤600px: a full-screen sheet, visual on top.
============================================================ */
.pw-page{min-height:100vh}
.pw-backdrop{position:fixed;inset:-40px;z-index:0;background:#08070b url("/assets/studio-web.webp") center top/cover no-repeat;
  filter:blur(16px) brightness(.5) saturate(1.1)}
.pw-dim{position:fixed;inset:0;z-index:1;
  background:radial-gradient(60% 55% at 50% 45%,rgba(91,63,214,.18),transparent 70%),rgba(8,7,11,.6)}
.pw-layer{position:fixed;inset:0;z-index:2;display:flex;overflow-y:auto;padding:28px}
.pw-modal{position:relative;margin:auto;width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;
  border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0d0c13;
  box-shadow:0 60px 140px -40px rgba(0,0,0,.95),0 0 0 1px rgba(152,131,236,.08),0 0 120px -50px rgba(152,131,236,.5);
  animation:pwIn .6s var(--ease) both}
@keyframes pwIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.pw-visual{position:relative;min-height:640px;overflow:hidden;isolation:isolate;background:#0d0c12}
.pw-visual>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.pw-copy{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:140px 36px 34px;
  background:linear-gradient(to top,rgba(8,7,11,.96),rgba(8,7,11,.78) 45%,transparent)}
.pw-copy .eyebrow{margin-bottom:12px}
.pw-copy h1{font-size:clamp(30px,3.2vw,40px);letter-spacing:-.04em;text-wrap:balance}
.pw-copy p{margin-top:12px;color:var(--text-2);font-size:15.5px;line-height:1.5;max-width:36ch;text-wrap:balance}
.pw-panel{display:flex;flex-direction:column;gap:14px;padding:40px 36px 26px}
.pw-panel h2{font-size:24px;letter-spacing:-.03em;margin-bottom:10px;padding-inline-end:52px}
.pw-panel .pay{margin-top:6px}
.pw-panel .fine{margin-top:auto;padding-top:8px}
.pw-close{position:absolute;z-index:6;top:18px;right:18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,7,11,.62);border:1px solid var(--line);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,transform .3s var(--ease)}
.pw-close:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}
.pw-close:focus-visible{border-radius:50%}

/* visual details */
.pw-glass{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(11,10,16,.7);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12.5px;font-weight:600;color:#e9e8ef;line-height:1.3}
.pw-glass i{width:7px;height:7px;border-radius:50%;background:var(--violet-hot);flex:none}
.pw-mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

/* A1: the finished portrait, blurred and locked */
.pw-style .bg{filter:blur(26px) saturate(1.15);transform:scale(1.15)}
.pw-lock{position:absolute;left:50%;top:40%;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px}
.pw-lock-ico{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,10,16,.42);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 10px rgba(183,157,255,.08),0 20px 50px -18px rgba(0,0,0,.8)}
.pw-ready{position:absolute;top:22px;left:22px;z-index:2}

/* A2: a pending Studio Chat message over the photo */
.pw-chat .bg{object-position:50% 30%}
.pw-thread{position:absolute;top:30px;left:28px;right:28px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pw-bubble{max-width:80%;padding:12px 16px;border-radius:20px 20px 6px 20px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:#0a0812;
  background:linear-gradient(135deg,var(--violet-hot),var(--violet));box-shadow:0 16px 40px -16px rgba(152,131,236,.9)}
.pw-status{display:flex;align-items:center;gap:7px;font-size:12px;color:#e3e1ea;padding:5px 11px;border-radius:999px;background:rgba(11,10,16,.66);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pw-dots{display:inline-flex;gap:3px}
.pw-dots i{width:4px;height:4px;border-radius:50%;background:var(--violet-hot);animation:pwDot 1.2s infinite}
.pw-dots i:nth-child(2){animation-delay:.15s}.pw-dots i:nth-child(3){animation-delay:.3s}
@keyframes pwDot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.pw-thread .pw-glass{align-self:flex-start;margin-top:4px}

/* A3: a video preview with a slow push-in */
.pw-video .bg{animation:pwPush 9s var(--ease) infinite alternate;transform-origin:52% 30%}
@keyframes pwPush{from{transform:scale(1)}to{transform:scale(1.09) translateY(-1%)}}
.pw-dur{position:absolute;top:22px;left:22px;z-index:2;font-family:var(--mono);font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(8,7,11,.7);line-height:1.3}
.pw-play{position:absolute;left:50%;top:38%;z-index:2;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pw-play::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.5);animation:pwRing 2.4s var(--ease) infinite}
@keyframes pwRing{from{transform:scale(1);opacity:.8}to{transform:scale(1.5);opacity:0}}
.pw-bar{position:absolute;left:22px;right:22px;top:58px;z-index:2;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.pw-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--violet-hot),var(--blush));transform-origin:left;animation:pwBar 8s linear infinite}
@keyframes pwBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:860px) and (min-width:601px){
  .pw-visual{min-height:600px}
  .pw-copy{padding:120px 26px 28px}
  .pw-panel{padding:34px 24px 22px}
}
/* phones: a full-screen sheet. The visual is the top band, the copy sits
   centred under its fade, the plans follow. */
@media (max-width:600px){
  .pw-layer{padding:0}
  .pw-modal{grid-template-columns:1fr;margin:0;width:100%;min-height:100dvh;border-radius:0;border:0;align-content:start}
  .pw-visual{min-height:0;height:min(420px,56vh)}
  .pw-copy{padding:90px 20px 4px;text-align:center;background:linear-gradient(to top,#0d0c13 6%,rgba(13,12,19,.8) 45%,transparent)}
  .pw-copy .eyebrow{justify-content:center}
  .pw-copy .eyebrow::before{display:none}
  .pw-copy h1{font-size:30px}
  .pw-copy p{margin:8px auto 0;font-size:14.5px}
  .pw-panel{padding:18px 20px 24px}
  .pw-panel h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pw-close{top:14px;left:14px;right:auto}
  .pw-lock{top:34%}
  .pw-lock-ico{width:62px;height:62px}
  .pw-ready{left:auto;right:14px;top:18px}
  .pw-thread{top:74px;left:18px;right:18px}
  .pw-dur{left:auto;right:14px;top:20px}
  .pw-bar{top:auto;bottom:auto;display:none}
  .pw-play{top:32%;width:64px;height:64px;margin:-32px 0 0 -32px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .pw-video .bg{animation:none}
  .pw-bar i{animation:none;transform:scaleX(.35)}
}