/* ═══════════════════════════════════════════════════════════════════════════
   PIIXONOVA · PRICING POPUP  —  Ivory & Gold
   Two panels: an ivory column of type, and a photograph cut away from it by a
   tall elliptical arc. Butler carries the display line, Noto Serif Display
   supplies the true italic Butler has no face for, Nunito Sans does the work.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{ font-family:Butler; font-style:normal; font-weight:300; font-display:swap;
  src:url("https://piixonova.com/wp-content/uploads/butler_light.woff2") format("woff2"); }
@font-face{ font-family:Butler; font-style:normal; font-weight:200; font-display:swap;
  src:url("https://piixonova.com/wp-content/uploads/butler_ultra_light.woff2") format("woff2"); }

#pxp{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  font:400 15px/1.45 "Nunito Sans", system-ui, -apple-system, sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;

  --ivory:#F7F3EC;
  --ivory-2:#FBF8F3;
  --ink:#14100C;
  --ink-2:#5C554C;
  --ink-3:#8A8177;
  --gold:#B08A55;
  --gold-2:#C9AC7E;
  --gold-rule:rgba(176,138,85,.38);
  --err:#B4432F;

  --btn-dark:#16120E;
  --hair:rgba(20,16,12,.13);

  --art:url("https://mljb83qmzirc.i.optimole.com/cb:NaXl.d20/w:auto/h:auto/q:mauto/g:sm/f:best/https://piixonova.com/wp-content/uploads/Preloader-20240217-Anirban-n-Vani-14429-Recovered-1.webp");
  /* The frame is 400x600 with both faces in the upper third (~17-42% down), so
     the crop is positioned from the top rather than centred. Centring puts the
     132px mobile band across their torsos and loses the moment entirely. */
  --art-pos:center 30%;

  --pad:34px;
  --rr:26px;
}
#pxp[hidden]{ display:none; }
#pxp *{ box-sizing:border-box; }

/* ── Scrim ────────────────────────────────────────────────────────────────── */
/* Blur only — no tint. The page is pushed out of focus rather than darkened,
   so the photography behind keeps its own colour and the card separates on
   depth-of-field instead of on a wash. The card's shadow does the rest of the
   separating work that a dimming layer would otherwise do. */
#pxp .pxp__scrim{
  position:absolute; inset:0;
  background:transparent;
  backdrop-filter:blur(18px) saturate(1.02);
  -webkit-backdrop-filter:blur(18px) saturate(1.02);
  opacity:0; will-change:opacity;
}

/* ── The card ─────────────────────────────────────────────────────────────── */
#pxp .pxp__card{
  position:relative; width:100%; max-width:724px;
  display:grid; grid-template-columns:minmax(0,1fr) 40%;
  background:var(--ivory);
  border-radius:var(--rr);
  overflow:hidden;
  box-shadow:
    0 2px 4px rgba(28,20,10,.10),
    0 26px 48px -20px rgba(28,20,10,.34),
    0 64px 100px -56px rgba(28,20,10,.30);
  opacity:0;
  will-change:transform,opacity,filter;
  touch-action:pan-y;
}
/* A hairline of warm light on the very edge — the card reads as pressed stock
   rather than a flat rectangle. */
#pxp .pxp__card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:9;
  border:1px solid rgba(255,255,255,.55); pointer-events:none;
}

/* ── The photograph ───────────────────────────────────────────────────────────
   Cut from the type column by one tall ellipse rather than a straight seam;
   the arc is what makes the two halves read as a single composition. */
#pxp .pxp__art{
  position:relative; min-height:100%;
  background-image:var(--art);
  background-size:cover; background-position:var(--art-pos);
  background-repeat:no-repeat;
  border-top-left-radius:78% 46%;
  border-bottom-left-radius:78% 46%;
  margin-left:-2px;
}
/* Warm the photograph toward the ivory so both panels share one light. */
#pxp .pxp__art::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  /* This frame is high-key, so the caption had almost nothing to sit on. The
     foot of the panel is carried further down to give the white type a ground
     without dimming the faces in the upper third. */
  background:linear-gradient(200deg, rgba(247,243,236,.06) 0%, rgba(40,26,12,.10) 42%, rgba(26,16,8,.40) 74%, rgba(20,12,4,.66) 100%);
}

#pxp .pxp__artcap{
  /* Held clear of the arc, which eats the panel's left edge — at 12% the
     caption was sliced in half by it. */
  position:absolute; left:32%; bottom:9%; z-index:2;
  font-family:"Noto Serif Display", Butler, Georgia, serif;
  font-style:italic; font-weight:400; text-transform:uppercase;
  font-size:11.5px; line-height:1.76; letter-spacing:.18em;
  color:rgba(255,252,247,.95);
  text-shadow:0 1px 10px rgba(20,12,4,.45);
}
#pxp .pxp__artcap span{ display:block; }
#pxp .pxp__artcap::after{
  content:""; display:block; width:38px; height:1px; margin-top:13px;
  background:rgba(255,250,242,.7);
}

/* ── Close ────────────────────────────────────────────────────────────────── */
#pxp .pxp__close{
  position:absolute; top:18px; right:18px; z-index:10;
  width:38px; height:38px; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,253,250,.94); color:var(--ink);
  box-shadow:0 2px 10px rgba(28,20,10,.22);
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, transform .18s ease;
}
#pxp .pxp__close:hover{ background:#fff; transform:scale(1.05); }
#pxp .pxp__close:focus-visible{ outline:2.5px solid var(--gold); outline-offset:3px; }
#pxp .pxp__close svg{ width:13px; height:13px; }

/* ── Type column ──────────────────────────────────────────────────────────── */
#pxp .pxp__body{ position:relative; min-width:0; }

#pxp .pxp__view{ position:relative; overflow:hidden; will-change:height; }
#pxp .pxp__screen{
  position:absolute; inset:0 0 auto 0;
  padding:var(--pad) var(--pad) calc(var(--pad) - 4px);
  opacity:0; pointer-events:none;
  will-change:transform,opacity;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#pxp .pxp__screen::-webkit-scrollbar{ width:0; height:0; }
#pxp .pxp__screen.clip-b{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent 100%);
}
#pxp .pxp__screen.on{ pointer-events:auto; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
#pxp .pxp__eyebrow{
  margin:0; font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
#pxp .pxp__h{
  margin:18px 0 0; font-family:Butler, "Noto Serif Display", Georgia, serif;
  font-weight:300; font-size:clamp(30px, 3vw, 38px);
  line-height:1.06; letter-spacing:-.022em; color:var(--ink);
  text-wrap:balance;
}
/* Butler ships no italic, so the accent borrows the site's other serif, which
   has a real one — a synthesised oblique on a display serif looks broken. */
#pxp .pxp__h em{
  font-family:"Noto Serif Display", Georgia, serif;
  font-style:italic; font-weight:300; color:var(--ink);
}
#pxp .pxp__h b{ font-weight:300; color:var(--gold); }

#pxp .pxp__p{
  margin:14px 0 0; font-size:14.5px; line-height:1.54; letter-spacing:.002em;
  color:var(--ink-2); font-weight:400;
}
#pxp .pxp__p strong{ font-weight:700; color:var(--ink); }

/* ── Actions ──────────────────────────────────────────────────────────────── */
#pxp .pxp__actions{ margin:22px 0 0; }
#pxp .pxp__act + .pxp__act{ margin-top:15px; }

#pxp .pxp__btn{
  position:relative; width:100%; min-height:54px;
  display:grid; grid-template-columns:22px 1fr 22px; align-items:center; gap:12px;
  padding:15px 18px; border:0; border-radius:13px; cursor:pointer;
  font:700 12px/1.2 "Nunito Sans", system-ui, sans-serif;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
}
#pxp .pxp__btn > span:nth-of-type(1){ text-align:center; }
#pxp .pxp__btn svg{ width:19px; height:19px; }
#pxp .pxp__btn .pxp__arw{ width:17px; height:17px; justify-self:end; }
#pxp .pxp__btn:focus-visible{ outline:2.5px solid var(--gold); outline-offset:3px; }
#pxp .pxp__btn:disabled{ cursor:default; }

#pxp .pxp__btn--p{ background:var(--btn-dark); color:#FBF7F1; }
#pxp .pxp__btn--p svg{ color:var(--gold-2); }
#pxp .pxp__btn--p[data-busy] > span, #pxp .pxp__btn--p[data-busy] > svg{ opacity:0; }

#pxp .pxp__btn--s{
  background:var(--ivory-2); color:var(--ink);
  border:1px solid var(--hair);
  transition:background .18s ease, border-color .18s ease;
}
#pxp .pxp__btn--s svg{ color:var(--gold); }
#pxp .pxp__btn--s:hover{ background:#fff; border-color:rgba(20,16,12,.24); }

/* The quiet exit. Not a third competing button. */
#pxp .pxp__btn--t{
  grid-template-columns:1fr; min-height:44px; background:none; color:var(--ink-2);
  font-weight:600; font-size:12px; letter-spacing:.1em;
}
#pxp .pxp__btn--t:hover{ color:var(--ink); }

/* A label with no icon and no arrow still has to centre in the same box. */
#pxp .pxp__btn--plain{ grid-template-columns:1fr; }

/* One line of plain language under each control: the uppercase label says what
   it is, this says what happens. */
#pxp .pxp__hint{
  margin:8px 0 0; text-align:center;
  font-size:12px; font-weight:400; letter-spacing:.004em; color:var(--ink-3);
}

#pxp .pxp__spin{ position:absolute; inset:0; display:none; place-items:center; }
#pxp .pxp__btn[data-busy] .pxp__spin{ display:grid; }
#pxp .pxp__spin i{
  width:19px; height:19px; border-radius:50%; display:block;
  border:2px solid rgba(251,247,241,.26); border-top-color:var(--gold-2);
  animation:pxpspin .62s linear infinite;
}
@keyframes pxpspin{ to{ transform:rotate(360deg); } }

/* ── Footer rule ──────────────────────────────────────────────────────────── */
#pxp .pxp__foot{
  margin:24px 0 0; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:14px;
}
#pxp .pxp__foot::before, #pxp .pxp__foot::after{ content:""; height:1px; background:var(--gold-rule); }
#pxp .pxp__foot span{
  font-size:9.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */
#pxp .pxp__fields{ margin:20px 0 0; display:flex; flex-direction:column; gap:9px; }
#pxp .pxp__f{ position:relative; }
#pxp .pxp__f input{
  width:100%; height:55px; padding:21px 16px 7px; border-radius:11px;
  border:1px solid var(--hair); background:var(--ivory-2);
  font:500 15px/1.2 "Nunito Sans", system-ui, sans-serif; letter-spacing:-.004em;
  color:var(--ink); -webkit-appearance:none; appearance:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#pxp .pxp__f input::placeholder{ color:transparent; }
#pxp .pxp__f input:focus{
  outline:0; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 3.5px rgba(176,138,85,.16);
}
#pxp .pxp__f label{
  position:absolute; left:17px; top:18px; pointer-events:none;
  font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:.002em;
  transform-origin:left top;
  transition:transform .19s cubic-bezier(.2,.8,.2,1), color .19s ease;
}
#pxp .pxp__f input:focus + label,
#pxp .pxp__f.filled label{ transform:translateY(-12px) scale(.72); }
#pxp .pxp__f input:focus + label{ color:var(--gold); }

#pxp .pxp__f.bad input{ border-color:rgba(180,67,47,.65); background:#FDF7F5; }
#pxp .pxp__f.bad input:focus{ box-shadow:0 0 0 3.5px rgba(180,67,47,.14); }
#pxp .pxp__err{
  display:block; overflow:hidden; height:0; opacity:0; font-style:normal;
  padding-left:17px; font-size:11.5px; font-weight:600; color:var(--err);
  will-change:height,opacity;
}

#pxp .pxp__f input[type=date]{ color:var(--ink); }
#pxp .pxp__f input[type=date].empty{ color:transparent; }
#pxp .pxp__f input[type=date]::-webkit-calendar-picker-indicator{ opacity:.4; cursor:pointer; }

#pxp .pxp__opt{
  margin:11px 0 0; display:flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:500; color:var(--ink-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent; user-select:none; width:fit-content;
}
#pxp .pxp__opt input{ position:absolute; opacity:0; width:0; height:0; }
#pxp .pxp__box{
  width:19px; height:19px; border-radius:6px; flex:none;
  border:1.4px solid rgba(20,16,12,.3); background:var(--ivory-2);
  display:grid; place-items:center;
  transition:background .16s ease, border-color .16s ease;
}
#pxp .pxp__box svg{ width:11px; height:11px; opacity:0; transform:scale(.6);
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.8,.3,1); }
#pxp .pxp__opt input:checked + .pxp__box{ background:var(--gold); border-color:var(--gold); }
#pxp .pxp__opt input:checked + .pxp__box svg{ opacity:1; transform:scale(1); }
#pxp .pxp__opt input:focus-visible + .pxp__box{ outline:2.5px solid var(--gold); outline-offset:2px; }

/* ── Price plate ──────────────────────────────────────────────────────────── */
#pxp .pxp__anchor{
  margin:20px 0 0; padding:17px 20px; border-radius:12px;
  background:var(--ivory-2); border:1px solid var(--gold-rule);
  text-align:center;
}
#pxp .pxp__anchor b{
  display:block; font-family:Butler, "Noto Serif Display", Georgia, serif;
  font-weight:300; font-size:22px; line-height:1.22; letter-spacing:-.018em; color:var(--ink);
  text-wrap:balance;
}

/* ── Success mark ─────────────────────────────────────────────────────────── */
#pxp .pxp__tick{ width:42px; height:42px; margin:0 0 15px; display:block; }
#pxp .pxp__tick circle{ stroke:var(--gold); stroke-width:1.4; fill:none; opacity:.42; }
#pxp .pxp__tick path{
  stroke:var(--gold); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26;
}

/* ── Progress ─────────────────────────────────────────────────────────────── */
/* Top-right of the type column, on the same line as each screen's eyebrow.
   Absolute so it neither adds height nor moves as the screens slide. */
#pxp .pxp__prog{
  position:absolute; top:var(--pad); right:var(--pad); z-index:7; height:15px;
  display:flex; align-items:center; gap:6px;
  transition:opacity .28s ease;
}
#pxp .pxp__prog.off{ opacity:0; pointer-events:none; }
#pxp .pxp__prog i{
  display:block; width:24px; height:2px; border-radius:99px;
  background:rgba(20,16,12,.16);
  transform:scaleX(.7); transform-origin:left center;
  transition:background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
#pxp .pxp__prog i.on{ background:var(--gold); transform:scaleX(1); }
#pxp .pxp__prog i.done{ background:rgba(176,138,85,.5); transform:scaleX(1); }
#pxp .pxp__prog i.gone{ display:none; }

/* ═══ Narrow ═══════════════════════════════════════════════════════════════
   The photograph becomes a band across the top, keeping the arc — now cutting
   upward — so the composition survives the stack instead of being dropped. */
@media (max-width:760px){
  #pxp{ align-items:flex-end; padding:0; }
  #pxp .pxp__card{
    max-width:none; grid-template-columns:1fr; grid-template-rows:auto 1fr;
    border-radius:26px 26px 0 0; --pad:26px; --rr:26px;
  }
  #pxp .pxp__art{
    /* Taller than a strip: at 132px the band showed 22% of the frame, which is
       not enough to hold two faces. */
    grid-row:1; height:158px; min-height:0;
    border-radius:0 0 46% 46% / 0 0 30% 30%;
    margin:0 0 -2px;
    /* The band crops 453px out of 585 vertically; 24% lands the window on the
       kiss instead of on the embrace below it. */
    --art-pos:center 24%;
  }
  #pxp .pxp__artcap{ display:none; }
  #pxp .pxp__close{ top:16px; right:16px; width:38px; height:38px; }
  #pxp .pxp__close svg{ width:13px; height:13px; }
  #pxp .pxp__h{ font-size:clamp(28px, 8vw, 34px); margin-top:18px; }
  #pxp .pxp__p{ font-size:14.5px; margin-top:13px; }
  #pxp .pxp__actions{ margin-top:22px; }
  #pxp .pxp__act + .pxp__act{ margin-top:16px; }
  #pxp .pxp__btn{ min-height:58px; font-size:12.5px; letter-spacing:.1em; padding:16px 18px; }
  #pxp .pxp__hint{ margin-top:8px; font-size:12.5px; }
  #pxp .pxp__foot{ margin-top:24px; }
  #pxp .pxp__screen{ padding:var(--pad) var(--pad) 24px; }
  #pxp .pxp__fields{ margin-top:20px; }
  #pxp .pxp__anchor{ margin-top:20px; padding:18px 20px; }
  #pxp .pxp__anchor b{ font-size:23px; }
}

/* ── The Elementor form ───────────────────────────────────────────────────────
   Present for its nonce and its submit actions only; the visible form is the
   one above. Clipped rather than display:none, because a hidden input cannot
   be filled and submitted by Elementor's own handler. */
#pxp .pxv-eform-price{
  position:absolute !important; left:-9999px !important; top:0 !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important; opacity:0 !important; pointer-events:none !important;
}

/* ── Preferences ──────────────────────────────────────────────────────────── */
/* With transparency reduced there is no blur to separate the card from the
   page, so this is the one case that still needs a veil. It is neutral, not
   tinted. */
@media (prefers-reduced-transparency: reduce){
  #pxp .pxp__scrim{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(0,0,0,.62); }
}
@media (prefers-contrast: more){
  #pxp{ --ink-2:#3B352E; --ink-3:#4E473F; --hair:rgba(20,16,12,.4); --gold:#8A6A3A; }
  #pxp .pxp__card{ border:2px solid var(--ink); }
  #pxp .pxp__f input{ border-width:1.5px; }
  #pxp .pxp__btn--s{ border-width:1.5px; }
}
@media (prefers-reduced-motion: reduce){
  #pxp .pxp__spin i{ animation-duration:1.4s; }
  #pxp .pxp__prog i{ transition:background .2s ease; }
}