/* ==========================================================================
   SKYBOUND SCALING - pricing.css
   Three website packages set like real boxed packages, plus one custom
   digital marketing plan priced on contact.

   Anatomy of a package (.pp):
     header band  - tier, name, one line promise
     price block  - "Starting at", the figure, "USD one-time"
     perforation  - a dashed tear line with two notches, the box motif
     inclusions   - checklist, the first line carries "everything in ..."
     CTA          - full-width button straight to the booking page
   The middle package is the featured one: inverted to the site's ink,
   lifted, and flagged. The custom plan is a wide blue panel below.
   ========================================================================== */

.pp-sec{padding:clamp(56px,9vh,120px) var(--pad) 0}

.pp-head{text-align:center;max-width:780px;margin:0 auto clamp(30px,4.6vh,52px)}
.pp-head .mono{color:var(--blue);letter-spacing:.14em}
.pp-head h2{
  margin:14px 0 0;font-family:var(--sans);
  font-weight:800;font-variation-settings:'wdth' 112;
  font-size:clamp(32px,4.4vw,62px);line-height:1.02;letter-spacing:-.025em;
}
.pp-head h2 .punct{color:var(--blue)}
.pp-head p{margin:16px auto 0;max-width:60ch;color:rgba(10,10,12,.66);font-size:clamp(15px,1.2vw,17.5px);line-height:1.6}

/* ---- "every website includes" strip ---- */
.pp-std{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:0 auto clamp(34px,5vh,58px);max-width:1240px;
}
.pp-std li{
  list-style:none;display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(34,48,254,.18);
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.pp-std li::before{
  content:"";width:16px;height:16px;border-radius:50%;flex:none;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ---- the three packages ---- */
.pp-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);
  align-items:stretch;max-width:1320px;margin:0 auto;
}
.pp{
  --pp-bg:#fff;--pp-ink:var(--ink);--pp-dim:rgba(10,10,12,.62);
  --pp-line:rgba(10,10,12,.10);--pp-check:var(--blue);--pp-notch:var(--paper);
  position:relative;display:flex;flex-direction:column;
  background:var(--pp-bg);color:var(--pp-ink);
  border-radius:26px;
  border:1px solid rgba(10,20,40,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 30px 70px -40px rgba(10,20,40,.35);
}
.pp-band{
  padding:clamp(24px,3vh,32px) clamp(22px,2.2vw,32px) 0;
}
.pp-tier{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  min-height:28px;color:var(--pp-dim);
}
.pp-flag{
  padding:6px 12px;border-radius:999px;
  background:var(--orange);color:#fff;letter-spacing:.12em;
}
.pp-name{
  margin:18px 0 0;font-family:var(--sans);
  font-weight:850;font-variation-settings:'wdth' 112;
  font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em;line-height:1.05;
}
.pp-name .punct{color:var(--blue)}
.pp-promise{margin:10px 0 0;color:var(--pp-dim);font-size:15px;line-height:1.5;min-height:3em}

.pp-price{padding:clamp(20px,2.8vh,28px) clamp(22px,2.2vw,32px) clamp(18px,2.4vh,24px)}
.pp-from{color:var(--pp-dim);letter-spacing:.12em}
.pp-fig{
  margin:6px 0 0;display:flex;align-items:flex-start;gap:4px;
  font-family:var(--sans);font-weight:850;font-variation-settings:'wdth' 104;
  font-size:clamp(52px,5.4vw,78px);line-height:.95;letter-spacing:-.04em;
}
.pp-fig .cur{font-size:.42em;margin-top:.22em;letter-spacing:0}
.pp-unit{margin:10px 0 0;color:var(--pp-dim);font-size:14px}

/* perforation: the tear line of a boxed package */
.pp-perf{
  position:relative;height:0;margin:0 clamp(22px,2.2vw,32px);
  border-top:2px dashed var(--pp-line);
}
.pp-perf::before,.pp-perf::after{
  content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;
  background:var(--pp-notch);
}
.pp-perf::before{left:calc(-1 * clamp(22px,2.2vw,32px) - 13px)}
.pp-perf::after{right:calc(-1 * clamp(22px,2.2vw,32px) - 13px)}

.pp-list{
  list-style:none;margin:0;flex:1;
  padding:clamp(20px,2.8vh,28px) clamp(22px,2.2vw,32px) 8px;
  display:grid;gap:12px;align-content:start;
}
.pp-list li{
  position:relative;padding-left:30px;
  font-size:15px;line-height:1.45;color:var(--pp-ink);
}
.pp-list li::before{
  content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--pp-check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat;
}
.pp-list li.is-carry{font-weight:700}
.pp-list li.is-carry::before{background-color:var(--orange)}

.pp-foot{padding:clamp(18px,2.4vh,24px) clamp(22px,2.2vw,32px) clamp(24px,3vh,32px)}
.pp-best{margin:0 0 16px;color:var(--pp-dim);font-size:13.5px;line-height:1.5}
.pp-best b{color:var(--pp-ink);font-weight:700}
.pp-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:17px 20px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.01em;
  transition:background .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.pp-cta .arr{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .pp-cta:hover{background:var(--blue)}
  .pp-cta:hover .arr{transform:translateX(4px)}
}

/* the featured package: inverted, lifted, flagged */
.pp.is-featured{
  --pp-bg:linear-gradient(170deg,#1B26D6 0%,#141C9A 46%,#0A1152 100%);
  --pp-ink:#F2F5FF;--pp-dim:rgba(232,238,255,.72);
  --pp-line:rgba(232,238,255,.26);--pp-check:#fff;
  background:var(--pp-bg);
  border-color:transparent;
  top:-14px; /* the lift; transform belongs to the .rv-card reveal */
  box-shadow:0 50px 100px -40px rgba(20,30,180,.65), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.pp.is-featured .pp-name .punct{color:#9FB0FF}
.pp.is-featured .pp-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23141C9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pp.is-featured .pp-list li.is-carry::before{
  background-color:var(--orange);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pp.is-featured .pp-cta{background:#fff;color:var(--ink)}
@media (hover:hover){ .pp.is-featured .pp-cta:hover{background:var(--orange);color:#fff} }

/* ---- custom digital marketing plan ---- */
.pp-custom{
  position:relative;overflow:hidden;isolation:isolate;
  max-width:1320px;margin:clamp(28px,4vh,44px) auto 0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(32px,5vh,60px) clamp(24px,3.6vw,60px);
  border-radius:30px;color:#EEF2FF;
  --pp-check:var(--orange);
  background:
    radial-gradient(80% 90% at 92% 0%, rgba(120,142,255,.42) 0%, rgba(120,142,255,0) 55%),
    linear-gradient(160deg,#0B0D18 0%, #0A1152 70%, #131C8E 100%);
  box-shadow:0 50px 100px -50px rgba(10,20,90,.7);
}
.pp-custom .mono{color:#9FB0FF;letter-spacing:.14em}
.pp-custom h3{
  margin:14px 0 0;font-family:var(--sans);
  font-weight:850;font-variation-settings:'wdth' 112;
  font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.022em;
}
.pp-custom h3 .punct{color:var(--orange)}
.pp-custom-lede{margin:14px 0 0;color:rgba(232,238,255,.78);font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:52ch}
.pp-custom-price{
  margin:24px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
}
.pp-custom-price b{
  font-family:var(--sans);font-weight:850;font-variation-settings:'wdth' 104;
  font-size:clamp(30px,3.2vw,46px);letter-spacing:-.03em;color:#fff;
}
.pp-custom-price span{color:rgba(232,238,255,.66);font-size:14px}
.pp-custom .pp-cta{margin-top:24px;width:auto;display:inline-flex;padding:17px 30px;background:#fff;color:var(--ink)}
@media (hover:hover){ .pp-custom .pp-cta:hover{background:var(--orange);color:#fff} }
.pp-custom .pp-list{padding:0;gap:13px}
.pp-custom .pp-list li{color:#EEF2FF}

/* ---- responsive ---- */
@media (max-width:1080px){
  .pp-grid{grid-template-columns:1fr;max-width:620px}
  .pp.is-featured{top:0;order:-1}
  .pp-promise{min-height:0}
  .pp-custom{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:480px){
  .pp-std li{font-size:12.5px;padding:8px 13px}
  .pp-fig{font-size:clamp(46px,15vw,64px)}
}
@media (prefers-reduced-motion:reduce){
  .pp-cta,.pp-cta .arr{transition:none}
}