/* (c) 2026 Jennifer K. Mellen - GenM Software. LightningWX page depth: radar bands, glass layers, icon tiles, steps. */
:root{--pd-night:#050B1E;--pd-panel:#0F1B3D;--pd-bolt:#3D8BFF;--pd-cyan:#47E7F9;--pd-violet:#8A6CFF;--pd-strike:#F7F160;--pd-ink:#EAF1FF;--pd-muted:#9AA8C7}

/* Radar-loop band: full width, the loop drifts slowly (parallax) behind a glass panel. */
.pd-band{position:relative;overflow:hidden;margin:56px 0;min-height:420px;display:flex;align-items:center;
  border-radius:24px;border:1px solid rgba(71,231,249,.16);background:var(--pd-night);isolation:isolate}
.page-shell .pd-band{margin-left:0;margin-right:0}
.pd-band-media{position:absolute;inset:-8% 0;z-index:-2}
.pd-band-video{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transform:translateY(var(--pd-par,0px)) scale(1.06);will-change:transform}
.page-shell .pd-band video{max-width:none;margin:0;border-radius:0;height:100%}
.pd-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,11,30,.94) 0%,rgba(5,11,30,.72) 42%,rgba(5,11,30,.15) 100%),
             radial-gradient(120% 80% at 0% 100%,rgba(61,139,255,.25),transparent 60%)}
.pd-band-inner{padding:40px;width:100%}
.pd-glass{max-width:520px;padding:28px 30px;border-radius:20px;background:rgba(15,27,61,.55);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.7)}
.pd-glass h2{margin:8px 0 10px}
.pd-glass p{margin:0;color:var(--pd-muted)}

/* A section layered over a faint radar or satellite image. */
.pd-layer{position:relative;margin:48px 0;border-radius:24px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.08)}
.pd-layer::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--pd-bg) center/cover no-repeat;opacity:.22;filter:saturate(1.15)}
.pd-layer::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,11,30,.55),rgba(5,11,30,.92))}
.pd-layer-inner{padding:36px}
.pd-layer .card,.pd-layer details,.pd-layer .pd-tile{background:rgba(15,27,61,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Icon tiles. */
.pd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:22px 0}
.pd-tile{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:rgba(15,27,61,.7);border:1px solid rgba(255,255,255,.09);
  transition:border-color .25s,transform .25s}
.pd-tile:hover{border-color:rgba(71,231,249,.35);transform:translateY(-2px)}
.pd-tile h3{margin:2px 0 4px;font-size:16.5px;line-height:1.3}
.pd-tile p{margin:0;font-size:14.5px;line-height:1.5;color:var(--pd-muted)}
.pd-ico-wrap{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(71,231,249,.10);border:1px solid rgba(71,231,249,.28);color:var(--pd-cyan)}
.pd-acc-blue .pd-ico-wrap{background:rgba(61,139,255,.12);border-color:rgba(61,139,255,.35);color:var(--pd-bolt)}
.pd-acc-violet .pd-ico-wrap{background:rgba(138,108,255,.12);border-color:rgba(138,108,255,.35);color:var(--pd-violet)}
.pd-acc-strike .pd-ico-wrap{background:rgba(247,241,96,.12);border-color:rgba(247,241,96,.4);color:var(--pd-strike)}
.pd-ico{display:block}

/* Text and picture side by side, to break up long text. */
.pd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;margin:40px 0}
.pd-split.pd-rev > :first-child{order:2}
.pd-split h2:first-child{margin-top:0}
.pd-shot{margin:24px 0}
.pd-split .pd-shot{margin:0}

/* Step strip. */
.pd-steps{list-style:none;margin:26px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:none}
.pd-step{position:relative;padding:20px;border-radius:18px;background:rgba(15,27,61,.7);border:1px solid rgba(255,255,255,.09);margin:0}
.pd-step::marker{content:none}
.pd-step-num{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font:700 16px/1 "Sora",system-ui,sans-serif;
  color:#04102E;background:linear-gradient(135deg,var(--pd-cyan),var(--pd-bolt));margin-bottom:12px}
.pd-step:first-child .pd-step-num{background:var(--pd-strike);color:#050B1E}
.pd-step h3{margin:0 0 6px;font-size:17px}
.pd-step p{margin:0 0 14px;color:var(--pd-muted);font-size:14.5px;line-height:1.5}
.pd-step .pd-shot{margin:0}
.pd-step .fg-frame{border-radius:12px}

/* Visual tier comparison (Pricing). */
.pd-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin:26px 0}
.pd-col{padding:24px;border-radius:20px;background:rgba(15,27,61,.72);border:1px solid rgba(255,255,255,.1)}
.pd-col.pd-full{border-color:rgba(71,231,249,.35);box-shadow:0 0 0 1px rgba(71,231,249,.2),0 18px 50px -20px rgba(61,139,255,.5)}
.pd-col h3{margin:0 0 4px}
.pd-col .pd-sub{margin:0 0 16px;color:var(--pd-muted);font-size:14px}
.pd-rows{list-style:none;margin:0;padding:0}
.pd-rows li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14.5px;line-height:1.45;margin:0}
.pd-rows li::marker{content:none}
.pd-rows .pd-ico{width:20px;height:20px;flex:none;margin-top:1px}
.pd-yes .pd-ico{color:var(--pd-cyan)}
.pd-no{color:var(--pd-muted)}
.pd-no .pd-ico{color:rgba(154,168,199,.5)}
.pd-meter{height:8px;border-radius:999px;background:rgba(255,255,255,.08);margin:6px 0 18px;overflow:hidden}
.pd-meter span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pd-cyan),var(--pd-bolt))}

/* About: the slot for Jen's own lightning photographs. */
.pd-photo-slot{margin:28px 0}

@media (max-width:860px){
  .pd-split,.pd-compare{grid-template-columns:1fr;gap:20px}
  .pd-split.pd-rev > :first-child{order:0}
  .pd-band{min-height:360px;border-radius:18px;margin:40px 0}
  .pd-band::before{background:linear-gradient(180deg,rgba(5,11,30,.35) 0%,rgba(5,11,30,.9) 70%)}
  .pd-band-inner{padding:18px;align-self:flex-end}
  .pd-glass{padding:20px}
  .pd-layer-inner{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .pd-band-video{transform:none}
  .pd-tile,.pd-tile:hover{transition:none;transform:none}
}