/* PCI Feature Preview Hero — scoped under #pci-fph. Same brand tokens as the
   other PCI modules (navy #0c1a2b / ink #15293f / gold #c2902a / green #2f7d55).
   Layout: copy + CTAs on the left, a LIVE, interactive mini version of the
   platform on the right (zones map, ROI, CONFOTUR). Keyframes carry a pcifph
   prefix so they can't collide with the theme.
   Insert the shortcode in a FULL-WIDTH section with no padding. */

#pci-fph{
  --navy:#0a1625; --navy2:#0f2236; --ink:#15293f; --cream:#faf9f5;
  --gold:#c2902a; --gold2:#e0b65a; --lightgold:#ead9a8; --green:#2f7d55; --green2:#4fb07f;
  --muted:#8a93a0; --line:rgba(255,255,255,.09); --glass:rgba(255,255,255,.06);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Outfit',var(--sans);

  position:relative;width:100%;overflow:hidden;isolation:isolate;
  background:var(--navy);color:#fff;font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  padding:clamp(96px,12vh,140px) 0 clamp(72px,10vh,120px);
}
#pci-fph *{box-sizing:border-box;margin:0;padding:0}
#pci-fph ::selection{background:var(--lightgold);color:var(--ink)}
#pci-fph button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

@keyframes pcifphRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pcifphPop{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pcifphFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pcifphPulse{0%{box-shadow:0 0 0 0 rgba(79,176,127,.55)}100%{box-shadow:0 0 0 10px rgba(79,176,127,0)}}
@keyframes pcifphRing{0%{r:6;opacity:.9}100%{r:20;opacity:0}}
@keyframes pcifphGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes pcifphShine{to{background-position:200% center}}
@keyframes pcifphFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- backdrop: aerial video + grid + glows ---------- */
#pci-fph .fph-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
#pci-fph .fph-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(1.1)}
#pci-fph .fph-bg::before{ /* tint so text always reads */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 600px at 78% 40%, rgba(15,34,54,.35), rgba(10,22,37,.92) 70%),
    linear-gradient(180deg, rgba(10,22,37,.85) 0%, rgba(10,22,37,.55) 40%, rgba(10,22,37,.95) 100%);
}
#pci-fph .fph-bg::after{ /* blueprint grid, faded at edges */
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 45%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 60% 45%,#000 20%,transparent 75%);
  opacity:.55;
}
#pci-fph .fph-glow{position:absolute;border-radius:50%;filter:blur(30px);animation:pcifphGlow 10s ease-in-out infinite}
#pci-fph .fph-glow.g1{width:560px;height:560px;right:4%;top:6%;background:radial-gradient(circle,rgba(194,144,42,.30),transparent 65%)}
#pci-fph .fph-glow.g2{width:460px;height:460px;left:-8%;bottom:-12%;background:radial-gradient(circle,rgba(47,125,85,.28),transparent 65%);animation-delay:3s}

/* ---------- layout ---------- */
#pci-fph .fph-wrap{
  max-width:1320px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center;
}
#pci-fph .fph-copy,#pci-fph .fph-stage{min-width:0}
@media (max-width:520px){
  #pci-fph .fph-wrap{padding:0 16px;gap:64px}
  #pci-fph .fph-ctas .fph-btn{flex:1 1 100%;justify-content:center}
  #pci-fph .fph-stat{padding:12px}
  #pci-fph .fph-panel{padding:14px}
  #pci-fph .fph-kpi b{font-size:19px}
}
@media (min-width:1040px){
  #pci-fph .fph-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding:0 48px}
}

/* ---------- copy column ---------- */
#pci-fph .fph-copy > *{animation:pcifphRise .8s cubic-bezier(.22,1,.36,1) both}
#pci-fph .fph-live{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lightgold);
  background:rgba(194,144,42,.10);border:1px solid rgba(194,144,42,.35);
  padding:7px 14px 7px 12px;border-radius:999px;
}
#pci-fph .fph-live i{width:8px;height:8px;border-radius:50%;background:var(--green2);animation:pcifphPulse 1.8s ease-out infinite}
#pci-fph .fph-h1{
  margin-top:24px;font-family:var(--display);font-weight:600;
  font-size:clamp(38px,5.2vw,68px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;
  animation-delay:.06s;
}
#pci-fph .fph-h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold2) 0%,#f5dc9b 30%,var(--gold) 55%,var(--gold2) 80%,#f5dc9b 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pcifphShine 6s linear infinite;
}
#pci-fph .fph-sub{margin-top:22px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:rgba(255,255,255,.72);max-width:540px;animation-delay:.12s}
#pci-fph .fph-sub b{color:#fff;font-weight:600}

#pci-fph .fph-ctas{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;animation-delay:.18s}
#pci-fph .fph-btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:15px;font-weight:600;border-radius:12px;padding:15px 22px;
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
#pci-fph .fph-btn.primary{
  color:var(--ink);background:linear-gradient(180deg,#e7c06a,var(--gold));
  box-shadow:0 10px 30px -8px rgba(194,144,42,.65), inset 0 1px 0 rgba(255,255,255,.45);
}
#pci-fph .fph-btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(194,144,42,.8), inset 0 1px 0 rgba(255,255,255,.45)}
#pci-fph .fph-btn.ghost{color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
#pci-fph .fph-btn.ghost:hover{border-color:var(--lightgold);background:rgba(255,255,255,.08)}
#pci-fph .fph-btn svg{transition:transform .2s}
#pci-fph .fph-btn:hover svg{transform:translateX(3px)}

#pci-fph .fph-trust{
  margin-top:26px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.7);
  animation-delay:.24s;
}
#pci-fph .fph-trust svg{flex:none}

#pci-fph .fph-stats{
  margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  animation-delay:.3s;max-width:540px;
}
#pci-fph .fph-stat{background:rgba(10,22,37,.75);padding:16px 18px}
#pci-fph .fph-stat b{display:block;font-family:var(--display);font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#pci-fph .fph-stat b small{font-size:.6em;color:var(--lightgold);margin-left:1px}
#pci-fph .fph-stat span{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--muted)}

/* ---------- product stage ---------- */
#pci-fph .fph-stage{position:relative;animation:pcifphPop 1s cubic-bezier(.22,1,.36,1) .25s both}
#pci-fph .fph-hint{
  position:absolute;left:-6px;top:-38px;z-index:3;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:15px;font-weight:500;color:var(--lightgold);
}
#pci-fph .fph-hint svg{transform:translateY(8px)}
@media (min-width:1040px){#pci-fph .fph-hint{left:-118px;top:72px;flex-direction:column;align-items:flex-end;text-align:right;width:110px}
  #pci-fph .fph-hint svg{transform:none}}

#pci-fph .fph-app{
  position:relative;z-index:2;border-radius:18px;overflow:hidden;color:var(--ink);
  background:var(--cream);
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -20px rgba(0,0,0,.65), 0 0 120px -30px rgba(194,144,42,.45);
}
#pci-fph .fph-chrome{
  display:flex;align-items:center;gap:12px;padding:11px 14px;background:#eef0f2;border-bottom:1px solid #e1e4e8;
}
#pci-fph .fph-dots{display:flex;gap:6px}
#pci-fph .fph-dots i{width:11px;height:11px;border-radius:50%;background:#d4d8dd}
#pci-fph .fph-dots i:nth-child(1){background:#f06b5c}#pci-fph .fph-dots i:nth-child(2){background:#f4bf4f}#pci-fph .fph-dots i:nth-child(3){background:#5fc454}
#pci-fph .fph-url{
  flex:1;display:flex;align-items:center;gap:7px;justify-content:center;
  font-size:12.5px;color:#5a6472;background:#fff;border:1px solid #e1e4e8;border-radius:8px;padding:5px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#pci-fph .fph-badge{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#1e5e3e;background:#dcefe3;border-radius:6px;padding:4px 8px;display:flex;align-items:center;gap:6px;
}
#pci-fph .fph-badge i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pcifphPulse 1.8s ease-out infinite}
@media (max-width:520px){#pci-fph .fph-badge{display:none}}

#pci-fph .fph-tabs{display:flex;gap:4px;padding:10px 12px 0;background:#fff;border-bottom:1px solid #eceae3;overflow-x:auto;scrollbar-width:none}
#pci-fph .fph-tab{
  position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px 12px;
  font-size:13.5px;font-weight:600;color:#7a8492;white-space:nowrap;border-radius:8px 8px 0 0;
  transition:color .2s, background .2s;
}
#pci-fph .fph-tab:hover{color:var(--ink);background:#f6f4ee}
#pci-fph .fph-tab[aria-selected="true"]{color:var(--ink)}
#pci-fph .fph-tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--gold)}
#pci-fph .fph-tab svg{flex:none;opacity:.8}

/* panels share one grid cell, so the window keeps the height of the tallest
   tab and never jumps when switching */
#pci-fph .fph-panels{display:grid;background:var(--cream)}
#pci-fph .fph-panel{grid-area:1/1;padding:18px;min-width:0}
#pci-fph .fph-panel[hidden]{display:block;visibility:hidden;pointer-events:none}
@media (max-width:599px){#pci-fph .fph-panel[hidden]{display:none}} /* stacked tabs differ too much in height on phones */
#pci-fph .fph-panel.is-in{animation:pcifphFade .45s ease both}

/* ---------- panel: zones ---------- */
#pci-fph .fph-zones{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){#pci-fph .fph-zones{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
#pci-fph .fph-map{
  position:relative;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#1c6f8c 0%,#145a78 45%,#0e4664 100%);
  min-height:320px;
}
#pci-fph .fph-map svg{display:block;width:100%;height:100%;position:absolute;inset:0}
#pci-fph .fph-map .land{fill:#f2ede1;stroke:rgba(255,255,255,.55);stroke-width:1.2}
#pci-fph .fph-map .reef{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 5}
#pci-fph .fph-map .road{fill:none;stroke:#e2d9c4;stroke-width:1.4}
#pci-fph .fph-map .z{cursor:pointer}
#pci-fph .fph-map .z .halo{fill:var(--c);opacity:.22;transition:opacity .2s}
#pci-fph .fph-map .z .dot{fill:var(--c);stroke:#fff;stroke-width:1.6;transition:r .25s}
#pci-fph .fph-map .z:hover .halo{opacity:.45}
#pci-fph .fph-map .z .ring{fill:none;stroke:var(--c);stroke-width:2;opacity:0}
#pci-fph .fph-map .z.on .ring{animation:pcifphRing 1.6s ease-out infinite}
#pci-fph .fph-map .z .lbl{font:600 10px var(--sans);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;opacity:0;transition:opacity .2s;pointer-events:none}
#pci-fph .fph-map .z.on .lbl,#pci-fph .fph-map .z:hover .lbl{opacity:1}
#pci-fph .fph-map .ocean{font:600 9px var(--sans);letter-spacing:.3em;fill:rgba(255,255,255,.45)}
#pci-fph .fph-map .compass{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1}
#pci-fph .fph-legend{
  position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px);border-radius:8px;padding:6px 9px;
}
#pci-fph .fph-legend .bar{width:58px;height:6px;border-radius:3px;background:linear-gradient(90deg,#9fb3c8,#e0b65a,#2f7d55)}
#pci-fph .fph-maptip{
  position:absolute;right:10px;top:10px;font-size:10.5px;font-weight:600;color:#fff;
  background:rgba(10,22,37,.55);backdrop-filter:blur(6px);border-radius:999px;padding:5px 10px;
  display:flex;align-items:center;gap:6px;
}

#pci-fph .fph-detail{display:flex;flex-direction:column;gap:12px;min-width:0}
#pci-fph .fph-dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#pci-fph .fph-dhead h3{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
#pci-fph .fph-dhead p{margin-top:4px;font-size:12.5px;color:#7a8492}
#pci-fph .fph-conf{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:5px 8px;white-space:nowrap}
#pci-fph .fph-conf.si{color:#1e5e3e;background:#dcefe3}
#pci-fph .fph-conf.parcial{color:#7a5a12;background:#f6ebcc}
#pci-fph .fph-conf.no{color:#6b7280;background:#eceef1}

#pci-fph .fph-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#pci-fph .fph-kpi{background:#fff;border:1px solid #ece8de;border-radius:12px;padding:11px 12px}
#pci-fph .fph-kpi span{display:block;font-size:11px;font-weight:600;color:#7a8492;text-transform:uppercase;letter-spacing:.05em}
#pci-fph .fph-kpi b{display:block;margin-top:3px;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#pci-fph .fph-kpi .meter{margin-top:8px;height:4px;border-radius:2px;background:#efece4;overflow:hidden}
#pci-fph .fph-kpi .meter i{display:block;height:100%;border-radius:2px;background:var(--mc,var(--gold));width:0;transition:width .7s cubic-bezier(.22,1,.36,1)}
#pci-fph .fph-kpi .rank{float:right;font-size:10.5px;font-weight:700;color:var(--gold);margin-top:2px}

#pci-fph .fph-ticket{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;color:#5a6472;background:#fff;border:1px dashed #e2dccb;border-radius:12px;padding:10px 12px;
}
#pci-fph .fph-ticket b{color:var(--ink);font-variant-numeric:tabular-nums}
#pci-fph .fph-go{
  display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-size:13.5px;font-weight:600;color:#fff;background:var(--ink);border-radius:10px;padding:11px 14px;
  transition:background .2s;
}
#pci-fph .fph-go:hover{background:#1f3d5c}

#pci-fph .fph-chips{margin-top:14px;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
#pci-fph .fph-chip{
  flex:none;font-size:12px;font-weight:600;color:#5a6472;background:#fff;border:1px solid #e6e2d6;
  border-radius:999px;padding:6px 11px;transition:all .2s;white-space:nowrap;
}
#pci-fph .fph-chip:hover{border-color:var(--gold);color:var(--ink)}
#pci-fph .fph-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- panel: ROI ---------- */
#pci-fph .fph-roi{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){#pci-fph .fph-roi{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
#pci-fph .fph-field{display:block;margin-bottom:14px}
#pci-fph .fph-field > span{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;color:#5a6472;margin-bottom:7px}
#pci-fph .fph-field > span b{font-family:var(--display);font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
#pci-fph select{
  width:100%;appearance:none;-webkit-appearance:none;font:600 14px var(--sans);color:var(--ink);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2315293f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid #e2ddd0;border-radius:10px;padding:10px 34px 10px 12px;cursor:pointer;
}
#pci-fph select:focus-visible,#pci-fph input[type=range]:focus-visible,#pci-fph button:focus-visible,#pci-fph a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#pci-fph input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;cursor:pointer;
  background:linear-gradient(90deg,var(--gold) 0 var(--p,50%),#e6e1d4 var(--p,50%) 100%);
}
#pci-fph input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--gold);box-shadow:0 2px 8px rgba(21,41,63,.25);transition:transform .15s}
#pci-fph input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
#pci-fph input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--gold);box-shadow:0 2px 8px rgba(21,41,63,.25)}
#pci-fph .fph-range-ends{display:flex;justify-content:space-between;font-size:10.5px;color:#9aa2ad;margin-top:5px}
#pci-fph .fph-fixed{display:flex;gap:8px}
#pci-fph .fph-fixed div{flex:1;background:#fff;border:1px solid #ece8de;border-radius:10px;padding:8px 10px;font-size:11px;color:#7a8492;font-weight:600}
#pci-fph .fph-fixed b{display:block;font-size:15px;color:var(--ink);font-family:var(--display);margin-top:2px}

#pci-fph .fph-result{
  border-radius:14px;padding:16px;color:#fff;
  background:radial-gradient(400px 200px at 100% 0%,rgba(194,144,42,.35),transparent 60%),linear-gradient(160deg,#15293f,#0c1a2b);
}
#pci-fph .fph-result .big{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
#pci-fph .fph-result .big span{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em}
#pci-fph .fph-result .big > div:first-child b{display:block;font-family:var(--display);font-size:44px;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--gold2);font-variant-numeric:tabular-nums;margin-top:4px}
#pci-fph .fph-result .vs{font-size:11.5px;color:rgba(255,255,255,.65);text-align:right;line-height:1.4}
#pci-fph .fph-result .vs b{color:#fff;font-weight:600}
#pci-fph .fph-rows{margin-top:14px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}
#pci-fph .fph-rows div{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;color:rgba(255,255,255,.7)}
#pci-fph .fph-rows div b{color:#fff;font-variant-numeric:tabular-nums;font-weight:600}
#pci-fph .fph-rows div.neg b{color:#f2a49a}
#pci-fph .fph-rows div.tot{border-top:1px solid rgba(255,255,255,.1);margin-top:4px;padding-top:9px}
#pci-fph .fph-rows div.tot b{color:var(--green2)}

#pci-fph .fph-proj{margin-top:12px;background:#fff;border:1px solid #ece8de;border-radius:14px;padding:12px 14px}
#pci-fph .fph-proj-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;color:#5a6472}
#pci-fph .fph-proj-h b{font-family:var(--display);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
#pci-fph .fph-bars{margin-top:10px;height:78px;display:flex;align-items:flex-end;gap:5px}
#pci-fph .fph-bars .col{flex:1;display:flex;flex-direction:column-reverse;height:100%;}
#pci-fph .fph-bars .col i{display:block;border-radius:3px 3px 0 0;transition:height .6s cubic-bezier(.22,1,.36,1)}
#pci-fph .fph-bars .col i.r{background:var(--green);border-radius:0}
#pci-fph .fph-bars .col i.a{background:var(--gold)}
#pci-fph .fph-key{margin-top:8px;display:flex;gap:14px;font-size:11px;color:#7a8492}
#pci-fph .fph-key i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------- panel: CONFOTUR ---------- */
#pci-fph .fph-cf{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){#pci-fph .fph-cf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
#pci-fph .fph-receipt{
  position:relative;background:#fff;border:1px solid #ece8de;border-radius:14px;padding:16px;
  box-shadow:0 10px 30px -18px rgba(21,41,63,.35);
}
#pci-fph .fph-receipt::after{ /* torn edge */
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:8px;
  background:radial-gradient(circle at 7px -1px,transparent 6px,#fff 6.5px) repeat-x;background-size:14px 8px;
}
#pci-fph .fph-receipt h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a8492}
#pci-fph .fph-receipt .r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px dashed #e8e3d6;font-size:13px;color:#5a6472}
#pci-fph .fph-receipt .r b{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
#pci-fph .fph-receipt .r s{color:#b0473b;margin-right:6px;font-weight:500}
#pci-fph .fph-receipt .r .ok{color:var(--green);font-weight:700}
#pci-fph .fph-receipt .save{margin-top:12px;display:flex;justify-content:space-between;align-items:flex-end}
#pci-fph .fph-receipt .save span{font-size:12px;font-weight:600;color:#5a6472}
#pci-fph .fph-receipt .save b{font-family:var(--display);font-size:34px;font-weight:600;color:var(--green);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
#pci-fph .fph-note{margin-top:14px;font-size:11px;line-height:1.5;color:#8a93a0}

#pci-fph .fph-registry{background:#fff;border:1px solid #ece8de;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
#pci-fph .fph-registry-h{padding:14px 14px 10px;display:flex;align-items:center;gap:12px}
#pci-fph .fph-registry-h b{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1}
#pci-fph .fph-registry-h span{font-size:12px;line-height:1.4;color:#5a6472}
#pci-fph .fph-rowz{position:relative;padding:0 14px 14px;flex:1}
#pci-fph .fph-rowz .rw{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f1eee6}
#pci-fph .fph-rowz .rw i{width:22px;height:22px;border-radius:6px;background:#dcefe3;flex:none;display:grid;place-items:center}
#pci-fph .fph-rowz .rw .sk{height:8px;border-radius:4px;background:#e6e2d6}
#pci-fph .fph-rowz .rw .sk.w1{width:46%}#pci-fph .fph-rowz .rw .sk.w2{width:22%;margin-left:auto;background:#efe6cc}
#pci-fph .fph-rowz .blur{filter:blur(2.5px);opacity:.8}
#pci-fph .fph-lock{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 38%,#fff 70%);
}
#pci-fph .fph-lock p{font-size:12.5px;font-weight:600;color:var(--ink);max-width:240px;line-height:1.4}
#pci-fph .fph-lock a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:13px;font-weight:700;color:var(--ink);background:linear-gradient(180deg,#e7c06a,var(--gold));border-radius:10px;padding:10px 14px;box-shadow:0 8px 20px -8px rgba(194,144,42,.8)}
#pci-fph .fph-rowz .rw .tx{font-size:12.5px;line-height:1.4;color:#3d4a59}
#pci-fph .fph-cf-cta{
  margin-top:12px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:13px;font-weight:700;color:var(--ink);background:linear-gradient(180deg,#e7c06a,var(--gold));
  border-radius:10px;padding:10px 14px;box-shadow:0 8px 20px -8px rgba(194,144,42,.8);transition:transform .2s;
}
#pci-fph .fph-cf-cta:hover{transform:translateY(-1px)}
#pci-fph .fph-zone-cf{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
#pci-fph .fph-zone-cf span{font-size:11px;font-weight:600;border-radius:999px;padding:4px 9px}

/* ---------- floating glass cards around the window ---------- */
#pci-fph .fph-float{
  position:absolute;z-index:3;display:none;align-items:center;gap:10px;
  background:rgba(15,34,54,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:11px 14px;color:#fff;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.6);
  animation:pcifphRise .8s cubic-bezier(.22,1,.36,1) var(--d,1s) both;
}
#pci-fph .fph-float > div{animation:pcifphFloat 6s ease-in-out infinite var(--fd,0s)}
#pci-fph .fph-float .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
#pci-fph .fph-float small{display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em}
#pci-fph .fph-float b{display:block;font-family:var(--display);font-size:16px;font-weight:600;margin-top:1px;white-space:nowrap}
#pci-fph .fph-float b em{font-style:normal;color:var(--green2)}
@media (min-width:1180px){
  #pci-fph .fph-float{display:flex}
  #pci-fph .fph-float.f1{right:-26px;top:-30px}
  #pci-fph .fph-float.f2{left:-40px;bottom:-30px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #pci-fph *,#pci-fph *::before,#pci-fph *::after{animation:none!important;transition:none!important}
  #pci-fph .fph-bg video{display:none}
}