/* =========================================================
   PRICING HUB (Page A) — page-specific styles
   A normal site page (full nav/footer) that routes to the two
   service pages. Reuses global tokens + the .cta-final card.

   Used by: pricing.php
   ========================================================= */

/* =========================
   HERO
========================= */
.pr-hero { padding:190px 0 70px; text-align:center; background:var(--white); }
.pr-hero .section-label {
  display:inline-block; color:var(--red); font-size:.8rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:16px;
}
.pr-hero h1 {
  font-size:clamp(2.4rem,5vw,4rem); line-height:1.05; letter-spacing:-.04em;
  max-width:18ch; margin:0 auto 24px;
}
.pr-hero-lead {
  max-width:620px; margin:0 auto; color:var(--muted);
  font-size:1.06rem; line-height:1.9;
}

/* =========================
   THE TWO CHOICE CARDS
========================= */
.pr-choices { padding:40px 0 130px; background:var(--white); }
.pr-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:30px;
  max-width:1060px; margin:0 auto; align-items:stretch;
}
.pr-card {
  display:flex; flex-direction:column; position:relative;
  background:#fff; border:1px solid rgba(7,62,129,.12);
  border-radius:28px; padding:48px 42px;
  transition:transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}
.pr-card:hover { transform:translateY(-6px); box-shadow:0 30px 66px rgba(7,62,129,.10); border-color:rgba(0,152,255,.4); }

.pr-card-featured { border-color:var(--blue); box-shadow:0 30px 70px rgba(7,62,129,.12); }
.pr-badge {
  position:absolute; top:-15px; left:42px;
  background:var(--red); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 16px; border-radius:100px;
}

.pr-eyebrow {
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin-bottom:14px;
}
.pr-card h2 { font-size:1.6rem; letter-spacing:-.025em; line-height:1.2; margin-bottom:16px; }
.pr-desc { color:var(--muted); font-size:.98rem; line-height:1.8; margin-bottom:28px; }

.pr-price {
  padding:22px 0; margin-bottom:26px;
  border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08);
}
.pr-price span { display:block; font-size:.8rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#999; margin-bottom:6px; }
.pr-price strong {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:2.6rem;
  letter-spacing:-.03em; color:var(--blue); line-height:1;
}
.pr-price strong small { font-size:.9rem; font-weight:600; color:#888; letter-spacing:0; }
.pr-gst { display:block; margin-top:8px; font-size:.82rem; color:#999; }

.pr-list { list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:13px; flex-grow:1; }
.pr-list li { font-size:.95rem; color:#444; line-height:1.5; padding-left:26px; position:relative; }
.pr-list li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--blue); font-weight:700; font-size:.85rem; }

.pr-btn { width:100%; justify-content:center; }
.pr-foot { margin-top:16px; font-size:.85rem; color:#999; font-style:italic; text-align:center; }

/* =========================
   NOT SURE WHICH?
========================= */
.pr-help { padding:0 0 130px; background:var(--white); }
.pr-help-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:860px; margin:0 auto; }
.pr-help-card {
  background:var(--bg); border:1px solid rgba(0,0,0,.06);
  border-radius:24px; padding:40px 36px; text-align:center;
}
.pr-help-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:18px;
  background:rgba(7,62,129,.07); color:var(--blue); margin-bottom:22px;
}
.pr-help-icon svg { width:26px; height:26px; }
.pr-help-card h3 { font-size:1.2rem; letter-spacing:-.02em; margin-bottom:12px; }
.pr-help-card p { color:var(--muted); font-size:.96rem; line-height:1.8; }
.pr-help-note { text-align:center; margin-top:34px; color:var(--muted); font-size:1rem; }
.pr-help-note a { color:var(--blue); font-weight:700; }
.pr-help-note a:hover { text-decoration:underline; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:860px) {
  .pr-grid, .pr-help-grid { grid-template-columns:1fr; gap:26px; }
  .pr-card-featured { order:-1; }
}
@media (max-width:720px) {
  .pr-hero { padding:140px 0 50px; }
  .pr-choices { padding:20px 0 90px; }
  .pr-help { padding:0 0 90px; }
  .pr-card { padding:40px 28px; }
  .pr-help-card { padding:34px 26px; }
}

/* =========================================================
   SLIDE-OVER PANEL
   Opens a service page in place (iframe) instead of navigating.
   Slides in from the left; a backdrop gutter on the right makes
   it read as a dismissible overlay.
   ========================================================= */
.panel-overlay {
  position:fixed; inset:0; z-index:300;
  opacity:0; transition:opacity .4s ease;
}
.panel-overlay[hidden] { display:none; }
.panel-overlay.is-open { opacity:1; }

.panel-backdrop {
  position:absolute; inset:0;
  background:rgba(6,16,32,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  cursor:pointer;
}

.panel {
  position:absolute; top:0; left:0; bottom:0;
  width:100%;                        /* full width (Esc / Close still dismiss) */
  background:#fff;
  display:flex; flex-direction:column;
  box-shadow:0 0 80px rgba(0,0,0,.4);
  transform:translateX(-100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.panel-overlay.is-open .panel { transform:translateX(0); }

/* top bar — blue, with an inverted close button */
.panel-bar {
  flex-shrink:0; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px;
  background:var(--blue); border-bottom:1px solid rgba(0,0,0,.12);
}
.panel-title {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1rem;
  letter-spacing:-.02em; color:#fff;
}
.panel-close {
  all:unset; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:100px;
  background:#fff; color:var(--blue);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.85rem;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.panel-close svg { width:16px; height:16px; }
.panel-close:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.28); background:#eef3fb; }
.panel-close:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* embedded page */
.panel-body { position:relative; flex:1; min-height:0; background:#fff; }
.panel-frame { width:100%; height:100%; border:0; display:block; }
.panel-loader {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:#fff; color:var(--muted); font-size:.95rem; font-weight:600;
}
.panel-spinner {
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(7,62,129,.15); border-top-color:var(--blue);
  animation:panel-spin .8s linear infinite;
}
@keyframes panel-spin { to { transform:rotate(360deg); } }

@media (max-width:720px) {
  .panel { width:100%; max-width:none; }   /* full width on mobile */
  .panel-bar { height:54px; padding:0 16px; }
  .panel-title { font-size:.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-overlay, .panel { transition:none; }
  .panel-spinner { animation:none; }
}

/* While the slide-over panel is open, suppress the hub's custom cursor
   (it would otherwise freeze on top of the iframe) and show normal cursors
   over the panel chrome. */
body.panel-open #cursor-dot { display:none !important; }
body.custom-cursor-on.panel-open,
body.custom-cursor-on.panel-open a,
body.custom-cursor-on.panel-open button,
body.custom-cursor-on.panel-open iframe { cursor:auto !important; }
body.custom-cursor-on.panel-open .panel-close,
body.custom-cursor-on.panel-open .panel-backdrop { cursor:pointer !important; }

/* =========================================================
   DECISION-PAGE additions (outcome-first rewrite)
   ========================================================= */

/* small label above each card's deliverables list */
.pr-list-label {
  display:block; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:#9aa1ad; margin-bottom:14px;
}

/* Optional add-on block inside the Monthly card */
.pr-addon {
  background:var(--bg); border:1px dashed rgba(7,62,129,.28);
  border-radius:16px; padding:18px 20px; margin:0 0 30px;
}
.pr-addon-tag {
  display:inline-block; font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:var(--red); padding:4px 10px; border-radius:100px;
  margin-bottom:10px;
}
.pr-addon strong {
  display:block; font-family:'Manrope',sans-serif; font-weight:800;
  font-size:1.02rem; color:#22293a; letter-spacing:-.02em; margin-bottom:6px;
}
.pr-addon p { color:var(--muted); font-size:.9rem; line-height:1.65; }

/* decision bullet lists in the "Which option fits" cards */
.pr-choose-list {
  list-style:none; padding:0; margin:0; text-align:left;
  display:flex; flex-direction:column; gap:11px;
}
.pr-choose-list li {
  font-size:.96rem; color:#444; line-height:1.5;
  padding-left:26px; position:relative;
}
.pr-choose-list li::before {
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--blue); font-weight:800; font-size:.85rem;
}

/* =========================================================
   PANEL BAR NAV — the embedded page's nav, mirrored into the
   blue top bar (desktop). Sits centred between title and Close.
   ========================================================= */
/* Reset every property the global `nav {}` rule (style.css) forces onto this
   element — it's fixed/centred/half-width by default; we want it to sit in the
   flex bar as a plain inline group. */
.panel-nav {
  position:static; top:auto; left:auto; right:auto; bottom:auto;
  transform:none; width:auto; max-width:none; margin:0; padding:0;
  background:transparent; box-shadow:none; border:none; border-radius:0;
  display:flex; align-items:center; gap:26px;
}
.panel-nav-link {
  color:rgba(255,255,255,.82); font-family:'Manrope',sans-serif;
  font-weight:600; font-size:.9rem; white-space:nowrap;
  transition:color .25s ease;
}
.panel-nav-link:hover { color:#fff; }
.panel-nav-cta {
  background:#fff; color:var(--blue);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.85rem;
  padding:8px 18px; border-radius:100px; white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease;
}
.panel-nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.25); }

/* On mobile the bar is too narrow for the links — hide them here and let the
   embedded page show its own hamburger nav instead (see social-media-v2.css). */
@media (max-width:820px) {
  .panel-nav { display:none; }
}