/* ============================================================
   Plans & Pricing — REBUILD (staging only)
   Loaded ONLY on /plans-pricing?staging via staticPageStage.html.twig.
   Every selector is namespaced under .pp2 so it cannot affect any
   other page or leak into shared site CSS.
   ============================================================ */

.pp2 {
  --pp-charcoal: #28282A;
  --pp-teal: #007C88;          /* badge (Best Value / Most Popular)  */
  --pp-local-blue: #006998;    /* Local Pricing text + pin           */
  --pp-blue: #007FB3;          /* CTA button + geolocation icon      */
  --pp-blue-hover: #006a97;
  --pp-ink: #28282A;
  --pp-muted-50: rgba(0,0,0,.5);
  --pp-hairline: rgba(0,0,0,.1);
  --pp-local-bg: #F2F8FB;      /* Local Pricing box background       */
  --pp-toggle-bg: #F4F4F3;
  --pp-radius: 12px;
  --pp-maxw: 1320px;           /* 1280 content + 20px side padding each */

  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--pp-ink);
  -webkit-font-smoothing: antialiased;

  /* Everything sits in a single 1280-wide centered container */
  max-width: 1320px;          /* 1280 content + 20px padding each side */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.pp2 *,
.pp2 *::before,
.pp2 *::after { box-sizing: border-box; }

.pp2 .pp-wrap {
  width: 100%;
  padding: 48px 0 64px;   /* horizontal gutter handled by .pp2 */
}

/* ---------- Hero ---------- */
.pp2 .pp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

.pp2 .pp-hero h1 {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 57px;
  line-height: 64px;
  letter-spacing: -0.005em;
  color: var(--pp-charcoal);
  margin: 0 0 60px;              /* Figma: 60px gap title -> ZIP */
  text-align: center;
}

/* ZIP bar — row, 15px gap, 50px tall */
.pp2 .pp-zip {
  display: inline-flex;
  gap: 15px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

/* Text field: white, 12px radius, 50px tall */
.pp2 .pp-zip-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  background: #fff;
  border: 1px solid #e3e3e3;    /* subtle outline (matches screenshot; Figma frame omits it) */
  border-radius: 12px;
  padding: 14px 20px 14px 15px;
  min-width: 100px;
}
.pp2 .pp-zip-field svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--pp-blue); }
.pp2 .pp-zip-field input {
  border: 0; outline: 0; background: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--pp-ink); width: 100%; min-width: 98px;
}
.pp2 .pp-zip-field input::placeholder { color: #757575; }

/* CTA: #007FB3, 12px radius, 50px tall */
.pp2 .pp-btn {
  appearance: none; border: 0; cursor: pointer; height: 50px;
  background: var(--pp-blue); color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: 0.03em;
  padding: 18px 30px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease; white-space: nowrap;
  text-decoration: none; box-sizing: border-box;
}
.pp2 .pp-btn:hover { background: var(--pp-blue-hover); }

/* Standard / Military toggle — #F4F4F3 pill, 40px tall, 2px pad.
   Sits on its own row directly above the Wellness Plans title. */
.pp2 .pp-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--pp-toggle-bg);
  border-radius: 9999px;
  padding: 2px;
  height: 40px;
  margin: 0 0 20px;
}
.pp2 .pp-toggle button {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-weight: 600; font-size: 14px; line-height: 20px;
  color: var(--pp-muted-50);
  height: 36px; padding: 8px 20px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pp2 .pp-toggle button.is-active {
  background: #fff;
  color: var(--pp-charcoal);
  border-color: var(--pp-hairline);
}

/* ---------- Sections ---------- */
.pp2 .pp-section { margin-top: 60px; }
.pp2 .pp-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
}
.pp2 .pp-section h2 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 44px;
  color: var(--pp-teal);
  margin: 0;
}
/* section "+" info button — appears only after ZIP */
.pp2 .pp-info-btn {
  display: inline-flex;   /* always visible, even before a ZIP is entered */
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 9999px;
  background: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
}
.pp2 .pp-info-btn svg { width: 14px; height: 14px; display: block; }

/* card row — fixed 400px cards, 40px gap, left-aligned */
.pp2 .pp-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: stretch;
}
.pp2 .pp-card {
  flex: 0 1 400px;
  max-width: 400px;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--pp-hairline);
  border-radius: var(--pp-radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* badge + title group (gap 20) */
.pp2 .pp-type { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pp2 .pp-badge {
  align-self: flex-start;
  background: var(--pp-teal);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.01em;
  padding: 2px 7px; border-radius: 8px;
}
.pp2 .pp-card h3 {
  font-family: "Inter", sans-serif;
  font-weight: 500; font-size: 22px; line-height: 30px;
  color: #000; margin: 0;
}

/* before-ZIP "Local Pricing" box */
.pp2 .pp-local {
  align-self: stretch;
  background: var(--pp-local-bg);
  border: 2px solid var(--pp-hairline);
  border-radius: var(--pp-radius);
  padding: 24px 20px;
  flex: 1 1 auto;               /* grow to fill -> equal-height cards per row */
  min-height: 277px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 15px;
}
.pp2 .pp-local-text { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.pp2 .pp-pin {
  width: 80px; height: 80px;
  background: #fff;
  border: 1px solid var(--pp-hairline);
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-bottom: 3px;
}
.pp2 .pp-pin svg { width: 37px; height: 43px; display: block; }
.pp2 .pp-local-title {
  font-family: "Inter", sans-serif;
  font-weight: 600; font-size: 22px; line-height: 30px;
  color: var(--pp-local-blue); margin: 0;
}
.pp2 .pp-local-desc {
  font-family: "Inter", sans-serif;
  font-weight: 400; font-size: 18px; line-height: 28px;
  color: var(--pp-ink); margin: 0; max-width: 250px;
}
.pp2 .pp-local-hint {
  font-family: "Inter", sans-serif;
  font-weight: 400; font-size: 16px; line-height: 24px;
  color: var(--pp-muted-50); margin: 0;
}

/* footnote — Wellness uses body/small (14/20) */
.pp2 .pp-foot {
  display: none;   /* zone-dependent terms — only revealed once a ZIP sets the zone */
  font-family: "Inter", sans-serif;
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--pp-muted-50);
  margin: 0;
}
/* Packages footnote uses body/default (16/24) */
.pp2 #packages .pp-foot { font-size: 16px; line-height: 24px; }

/* ---------- Stats band (true full-bleed, breaks out of the 1280 container) ---------- */
.pp2 .pp-stats {
  display: flex;
  flex-wrap: wrap;
  padding: 80px 40px;   /* Figma: top 80, sides 40, bottom 80 */
  gap: 20px;            /* Figma: 20px between stat cards */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pp2 .pp-stat {
  flex: 1 1 0;
  min-width: 0;
  min-height: 205px;
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}
.pp2 .pp-stat-num {
  font-family: "Inter", sans-serif;
  font-weight: 700; font-size: 45px; line-height: 52px; letter-spacing: -0.05em;
  margin: 0;
}
.pp2 .pp-stat-text {
  font-family: "Inter", sans-serif;
  font-weight: 400; font-size: 16px; line-height: 24px;
  margin: 0;
}
.pp2 .pp-stat--pink   { background:#FFF9FC; border:1px solid #F4D0DF; color:#7B2143; }
.pp2 .pp-stat--indigo { background:#F7F7FE; border:1px solid #D7D8FA; color:#36378F; }
.pp2 .pp-stat--blue   { background:#F2F8FB; border:1px solid #BDD7E5; color:#004F73; }
.pp2 .pp-stat--teal   { background:#F2FCFC; border:1px solid #BFE8EB; color:#007C88; }
/* Per-card text colors (number + description). Explicit so a global p{color}
   rule can't override the card's inherited color. */
.pp2 .pp-stat--pink   .pp-stat-num, .pp2 .pp-stat--pink   .pp-stat-text { color:#7B2143; }
.pp2 .pp-stat--indigo .pp-stat-num, .pp2 .pp-stat--indigo .pp-stat-text { color:#36378F; }
.pp2 .pp-stat--blue   .pp-stat-num, .pp2 .pp-stat--blue   .pp-stat-text { color:#004F73; }
.pp2 .pp-stat--teal   .pp-stat-num, .pp2 .pp-stat--teal   .pp-stat-text { color:#007C88; }

/* stats responsive: 4 -> 2x2 -> stacked */
@media (max-width: 900px) {
  .pp2 .pp-stats { padding: 60px 20px; }
  .pp2 .pp-stat { flex: 1 1 calc(50% - 10px); }
}
@media (max-width: 600px) {
  .pp2 .pp-stats { padding: 40px 0; }
  .pp2 .pp-stat { flex: 1 1 100%; min-height: 0; }
}

/* ---------- HSA/FSA + Military promo panels (full-bleed) ---------- */
.pp2 .pp-promos {
  display: flex;
  gap: 20px;
  padding: 0 40px 80px;   /* 40px side gutters, 80px bottom */
  align-items: stretch;
  width: 100vw;           /* full-bleed so panels reach the Figma 814px width */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pp2 .pp-promo {
  flex: 1 1 0;
  min-width: 0;
  min-height: 550px;
  border-radius: 12px;
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.pp2 .pp-promo--hsa {
  background:
    linear-gradient(108.4deg, rgba(0,105,152,0.83) 37.52%, rgba(0,164,175,0.83) 100%),
    linear-gradient(92.53deg, #015D86 35.92%, rgba(1,93,134,0) 79.16%),
    url('/assets/images/plans-pricing-staging/GettyImages-2161463056-extendd.jpg');
  background-size: cover;
  background-position: center;
}
.pp2 .pp-promo--mil {
  background:
    linear-gradient(108.4deg, rgba(0,105,152,0.78) 37.52%, rgba(0,164,175,0.78) 100%),
    linear-gradient(36.37deg, rgba(1,93,134,0.7) 25.57%, rgba(1,93,134,0) 73.22%),
    url('/assets/images/plans-pricing-staging/GettyImages-2243919857.jpg');
  background-size: cover;
  background-position: center;
}
.pp2 .pp-promo-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
}
.pp2 .pp-promo h2 {
  font-family: "Inter", sans-serif;
  font-weight: 800; font-size: 36px; line-height: 44px; color: #fff; margin: 0;
}
.pp2 .pp-promo p {
  font-family: "Inter", sans-serif;
  font-weight: 500; font-size: 18px; line-height: 28px; color: #fff; margin: 0;
}
.pp2 .pp-btn-outline {
  appearance: none; cursor: pointer; background: transparent;
  border: 2px solid #fff; border-radius: 12px; height: 50px; padding: 0 30px;
  font-family: "Inter", sans-serif;
  font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: 0.03em;
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease; white-space: nowrap;
}
.pp2 .pp-btn-outline:hover { background: #fff; color: #006998; }

@media (max-width: 900px) {
  .pp2 .pp-promos { flex-direction: column; padding: 0 20px 48px; }
  .pp2 .pp-promo { flex: 0 0 auto; min-height: 0; padding: 40px 20px; gap: 30px; }
}

/* ---------- Testimonial (full-bleed, dark video hero) ---------- */
.pp2 .pp-testimonial {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 0 80px 120px;
  color: #fff;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('/assets/images/plans-pricing-staging/testimonial-karina.jpg');
  background-size: cover;
  background-position: center;
  width: 100vw;           /* full-bleed, edge to edge */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pp2 .pp-testimonial-inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px; max-width: 650px;
}
.pp2 .pp-testimonial-copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.pp2 .pp-testimonial h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700; font-size: 45px; line-height: 52px;
  letter-spacing: -0.005em; text-transform: capitalize;
  color: #fff; margin: 0;
}
.pp2 .pp-testimonial-text {
  font-family: "Inter", sans-serif;
  font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.8); margin: 0;
}
.pp2 .pp-btn-video {
  appearance: none; cursor: pointer; background: #fff; border: 0; border-radius: 12px;
  height: 50px; padding: 0 30px 0 23px; gap: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 800; font-size: 16px; line-height: 24px; letter-spacing: 0.03em;
  color: #000; text-decoration: none;
}
.pp2 .pp-btn-video svg { width: 24px; height: 24px; flex: 0 0 auto; }

@media (max-width: 900px) {
  .pp2 .pp-testimonial { min-height: 390px; padding: 40px 20px; }
  .pp2 .pp-testimonial-inner { max-width: 100%; }
  .pp2 .pp-testimonial h2 { font-size: 36px; line-height: 44px; }
}

/* ---------- FAQ accordion (full-bleed white) ---------- */
.pp2 .pp-faq {
  background: #fff;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pp2 .pp-faq-list {
  width: 100%;
  max-width: 1280px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pp2 .pp-faq-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  padding: 10px 0;
}
.pp2 .pp-faq-q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.pp2 .pp-faq-qt {
  flex: 1 1 auto;
  padding: 25px 0 25px 30px;
  font-family: "Inter", sans-serif;
  font-weight: 800; font-size: 36px; line-height: 44px;
  color: #007C88; margin: 0;
}
.pp2 .pp-faq-icon {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
}
.pp2 .pp-faq-plus {
  width: 36px; height: 36px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 9999px;
  position: relative; display: block;
}
.pp2 .pp-faq-plus::before,
.pp2 .pp-faq-plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: #007C88; }
.pp2 .pp-faq-plus::before { width: 14px; height: 3px; transform: translate(-50%, -50%); }  /* horizontal */
.pp2 .pp-faq-plus::after  { width: 3px; height: 14px; transform: translate(-50%, -50%); }  /* vertical  */
.pp2 .pp-faq-q[aria-expanded="true"] .pp-faq-plus::after { display: none; }        /* + -> −     */
.pp2 .pp-faq-a { padding: 0 30px 25px; }
.pp2 .pp-faq-a[hidden] { display: none; }
.pp2 .pp-faq-a p {
  font-family: "Inter", sans-serif;
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: #000; margin: 0;
}
@media (max-width: 767px) {
  .pp2 .pp-faq { padding: 48px 0; }
  .pp2 .pp-faq-qt { font-size: 22px; line-height: 28px; padding: 18px 0 18px 18px; }
  .pp2 .pp-faq-icon { width: 56px; height: 56px; }
  .pp2 .pp-faq-a { padding: 0 18px 18px; }
}

/* ---------- After-ZIP priced card state ---------- */
.pp2 .pp-priced { display: none; }
.pp2.is-priced .pp-card--priceable .pp-local { display: none; }
.pp2.is-priced .pp-card--priceable .pp-priced { display: flex; flex-direction: column; gap: 16px; }
.pp2.is-priced .pp-card--priceable { gap: 16px; }
.pp2.is-priced .pp-card--priceable .pp-foot { display: block; margin-top: auto; }  /* show + pin footnote once priced */

/* Packages priced layout (price black, total-visits line, larger per-visit) */
.pp2 .pp-pkg-price { font-family:"Inter",sans-serif; font-weight:400; font-size:45px; line-height:54px; letter-spacing:-0.05em; color:#000; margin:0; }
.pp2 .pp-pkg-lines { display:flex; flex-direction:column; gap:6px; }
.pp2 .pp-pkg-pervisit { font-family:"Inter",sans-serif; font-weight:500; font-size:22px; line-height:30px; color:#000; margin:0; }
.pp2 .pp-pkg-total { font-family:"Inter",sans-serif; font-weight:500; font-size:18px; line-height:28px; color:#000; margin:0; }
.pp2 .pp-pkg-features { display:flex; flex-direction:column; gap:10px; }
.pp2 .pp-pkg-features-h { font-family:"Inter",sans-serif; font-weight:500; font-size:18px; line-height:28px; color:#000; margin:0; }
.pp2 .pp-pkg-features ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pp2 .pp-pkg-features li { display:flex; align-items:center; gap:10px; font-family:"Inter",sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#000; }
.pp2 .pp-pkg-features li svg { flex:0 0 auto; width:19px; height:19px; }

/* Single Visits priced layout (Initial-Visit list, optional CTA) */
.pp2 .pp-priced--sv { gap:16px; }
.pp2 .pp-sv-block { display:flex; flex-direction:column; gap:20px; align-self:stretch; }
.pp2 .pp-sv-subhead { font-family:"Inter",sans-serif; font-weight:500; font-size:22px; line-height:30px; color:#000; margin:0; }
.pp2 .pp-sv-features { display:flex; flex-direction:column; gap:13px; }
.pp2 .pp-sv-features ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.pp2 .pp-sv-features li { display:flex; align-items:center; gap:10px; font-family:"Inter",sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#000; }
.pp2 .pp-sv-features li svg { flex:0 0 auto; width:19px; height:19px; }
.pp2 .pp-priced--sv .pp-btn--card { margin-top:4px; align-self:flex-start; }

.pp2 .pp-price { margin: 0; display: flex; align-items: baseline; gap: 3px; }
.pp2 .pp-price-amt { font-family:"Inter",sans-serif; font-weight:500; font-size:45px; line-height:1; color:#007C88; }
.pp2 .pp-price-per { font-family:"Inter",sans-serif; font-weight:400; font-size:18px; color:#28282A; }
.pp2 .pp-pervisit { margin:0; font-family:"Inter",sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#28282A; }
.pp2 .pp-visits { margin:0; font-family:"Inter",sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#28282A; }
.pp2 .pp-accent { color:#007C88; font-weight:600; }
.pp2 .pp-features { display:flex; flex-direction:column; gap:12px; }
.pp2 .pp-features-h { margin:0; font-family:"Inter",sans-serif; font-weight:700; font-size:16px; line-height:24px; color:#28282A; }
.pp2 .pp-features ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pp2 .pp-features li { display:flex; align-items:flex-start; gap:10px; font-family:"Inter",sans-serif; font-weight:400; font-size:16px; line-height:24px; color:#28282A; }
.pp2 .pp-features li svg { flex:0 0 auto; width:18px; height:18px; margin-top:3px; }

/* Desktop: uniform feature-list item spacing (25px) across all pricing cards,
   plus 40px above the in-card CTA. Mobile keeps its own spacing (base gaps). */
@media (min-width: 768px) {
  .pp2 .pp-features ul,
  .pp2 .pp-pkg-features ul,
  .pp2 .pp-sv-features ul { gap: 25px; }
  /* .pp-sv-block already contributes 20px via gap, so 20px margin = 40px total */
  .pp2 .pp-priced--sv .pp-btn--card { margin-top: 20px; }
}

/* ---------- Info modals (section "+" popups, after ZIP) ---------- */
.pp2 .pp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pp2 .pp-modal[hidden] { display: none; }
.pp2 .pp-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.pp2 .pp-modal-box {
  position: relative; z-index: 1;
  width: min(960px, 92vw); max-height: 88vh; overflow: auto;
  background: #FAF9F9; border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.12); border-radius: 12px;
  display: flex; align-items: center; gap: 24px;
  padding: 0 28px 0 80px;
}
.pp2 .pp-modal-body { flex: 1 1 auto; max-width: 784px; display: flex; flex-direction: column; gap: 30px; padding: 80px 0; }
.pp2 .pp-modal-title { font-family:"Inter",sans-serif; font-weight:500; font-size:36px; line-height:44px; color:#000; margin:0; }
.pp2 .pp-modal-text { font-family:"Inter",sans-serif; font-weight:400; font-size:14px; line-height:20px; color:#000; margin:0; }
.pp2 .pp-modal-text a { color: #007C88; text-decoration: underline; }
.pp2 .pp-modal-text a:hover { text-decoration: none; }
.pp2 .pp-modal-close {
  position: absolute; top: 20px; right: 20px;
  flex: 0 0 auto; width: 36px; height: 36px;
  border: 1px solid rgba(0,0,0,.1); border-radius: 9999px; background: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.pp2 .pp-modal-close svg { width: 14px; height: 14px; display: block; }
@media (max-width: 767px) {
  .pp2 .pp-modal-box { padding: 24px; gap: 0; }
  .pp2 .pp-modal-body { padding: 0; gap: 20px; max-width: 100%; }
  .pp2 .pp-modal-title { font-size: 28px; line-height: 1.3; }
  .pp2 .pp-modal-close { position: absolute; top: 16px; right: 16px; }
}

/* ---------- Inner FAQ Q&A items (revealed inside the FAQ accordion) ---------- */
.pp2 .pp-qa-list { display: flex; flex-direction: column; }
.pp2 .pp-qa { border-top: 1px solid rgba(0,0,0,.1); }
.pp2 .pp-qa-q {
  display: flex; align-items: center; justify-content: space-between; gap: 50px;
  width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 25px 20px 25px 30px;
}
.pp2 .pp-qa-qt { font-family: "Inter", sans-serif; font-weight: 500; font-size: 22px; line-height: 30px; color: #000; }
.pp2 .pp-qa-arrow {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.pp2 .pp-qa-arrow svg { width: 20px; height: 20px; display: block; }
.pp2 .pp-qa-q[aria-expanded="true"] .pp-qa-arrow { transform: rotate(180deg); }
.pp2 .pp-qa-a { padding: 0 40px 40px 30px; }
.pp2 .pp-qa-a[hidden] { display: none; }
.pp2 .pp-qa-a p { font-family: "Inter", sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; color: #000; margin: 0; }
.pp2 .pp-qa-a p + p { margin-top: 16px; }   /* spacing between multi-paragraph answers */
.pp2 .pp-qa-a a { color: #007C88; text-decoration: underline; }
.pp2 .pp-qa-a a:hover { text-decoration: none; }
@media (max-width: 767px) {
  .pp2 .pp-qa-q { gap: 16px; padding: 18px 16px; }
  .pp2 .pp-qa-qt { font-size: 18px; line-height: 24px; }
  .pp2 .pp-qa-a { padding: 0 16px 20px; }
  .pp2 .pp-qa-a p { font-size: 16px; line-height: 24px; }
}

/* accessible name for background-image sections (announced as an image, no visual footprint) */
.pp2 .pp-bg-alt { display: inline-block; width: 0; height: 0; overflow: hidden; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .pp2 { padding: 0 16px; }
  .pp2 .pp-wrap { padding: 28px 0 44px; }
  .pp2 .pp-hero { margin-bottom: 40px; }
  .pp2 .pp-hero h1 { font-size: 32px; line-height: 38px; margin-bottom: 28px; }
  /* ZIP field + button side by side, centered, 15px gap (max 350px per Figma) */
  .pp2 .pp-zip { flex-direction: row; flex-wrap: nowrap; gap: 15px; width: 100%; max-width: 350px; margin-left: auto; margin-right: auto; justify-content: center; }
  .pp2 .pp-zip-field { flex: 1 1 auto; width: auto; min-width: 0; gap: 4px; padding: 14px 6px 14px 10px; }
  .pp2 .pp-btn { width: 100%; }
  .pp2 .pp-zip .pp-btn { flex: 0 0 auto; width: auto; padding: 0 20px; }
  /* Standard / Military toggle centered */
  .pp2 .pp-toggle { display: flex; width: fit-content; margin: 0 auto 20px; }
  .pp2 .pp-section { margin-top: 40px; }
  .pp2 .pp-section-head { justify-content: space-between; gap: 12px; margin-bottom: 20px; }
  .pp2 .pp-section h2 { font-size: 28px; line-height: 1.2; }
  .pp2 .pp-cards { gap: 30px; }
  .pp2 .pp-card { flex: 1 1 100%; max-width: 100%; padding: 20px; gap: 30px; }
  /* compact horizontal Local Pricing box (icon left, text right) */
  .pp2 .pp-local { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; padding: 12px 10px; min-height: 0; }
  .pp2 .pp-pin { flex: 0 0 auto; width: 42px; height: 42px; padding-bottom: 3px; }
  .pp2 .pp-pin svg { width: 20px; height: 23px; }
  .pp2 .pp-local-text { align-items: flex-start; gap: 10px; flex: 1 1 auto; }
  .pp2 .pp-local-title { font-size: 14px; line-height: 1; }
  .pp2 .pp-local-desc { font-size: 12px; line-height: 1.3; max-width: none; }
  .pp2 .pp-local-hint { font-size: 12px; line-height: 16px; }
  /* the in-card CTA doesn't belong in the compact horizontal box on mobile */
  .pp2 .pp-local .pp-btn--card { display: none; }
}