/* ==========================================================================
   Pricing Detail Page System (Build 35.8)
   ONE shared stylesheet for all four plan pages: Starter, Pro, Elite,
   Enterprise. Plan differences are handled by modifier classes only
   (.pricing-detail--starter / --pro / --elite / --enterprise); the common
   structure and behaviour are shared.

   Reuses without duplication: Internal Hero System (hero-internal.css),
   buttons.css, faq.css, cta.css, standard-pages.css section/card/step
   primitives. Nothing here overrides a shared component's own rules.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero: shared geometry from Internal Hero System v1.0. Each plan gets a
   restrained background tint only - no new hero concept, no imagery.
   -------------------------------------------------------------------- */
.internal-hero--pricing-detail{
    --internal-hero-bg-image:
        repeating-linear-gradient(0deg, rgba(111,217,224,.07) 0, rgba(111,217,224,.07) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(90deg, rgba(111,217,224,.05) 0, rgba(111,217,224,.05) 1px, transparent 1px, transparent 48px),
        linear-gradient(135deg, rgba(19,167,179,.14) 0%, transparent 50%);
}
.internal-hero--pricing-detail .internal-hero__bg{background-size:48px 48px,48px 48px,100% 100%;background-position:center;}
.internal-hero--pricing-detail .internal-hero__overlay{
    background:
        radial-gradient(circle at 74% 40%,rgba(19,167,179,.10),transparent 36%),
        linear-gradient(90deg,rgba(0,31,49,.93) 0%,rgba(0,31,49,.83) 54%,rgba(0,31,49,.62) 100%);
}
/* Plan accent - a single tinted radial, the only per-plan hero difference */
.pricing-detail--pro .internal-hero--pricing-detail .internal-hero__overlay{
    background:
        radial-gradient(circle at 74% 40%,rgba(242,68,5,.12),transparent 38%),
        linear-gradient(90deg,rgba(0,31,49,.93) 0%,rgba(0,31,49,.83) 54%,rgba(0,31,49,.62) 100%);
}
.pricing-detail--elite .internal-hero--pricing-detail .internal-hero__overlay{
    background:
        radial-gradient(circle at 74% 40%,rgba(245,141,29,.12),transparent 38%),
        linear-gradient(90deg,rgba(0,31,49,.93) 0%,rgba(0,31,49,.83) 54%,rgba(0,31,49,.62) 100%);
}

/* Package badge above the H1 */
.pd-badge{
    display:inline-block;background:var(--cta-500);color:var(--white);
    font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
    padding:5px 14px;border-radius:999px;margin-bottom:12px;
}
.pd-badge--custom{background:var(--teal-500);}

/* Price block - the primary visual message in the hero */
.pd-price{margin:18px 0 22px;}
.pd-price__amount{
    display:block;color:var(--white);font-size:clamp(2.4rem,4vw,3.1rem);
    font-weight:800;line-height:1;letter-spacing:-.02em;
}
.pd-price__amount span{font-size:1.05rem;font-weight:500;color:var(--gray-300);letter-spacing:0;}
.pd-price__setup{display:block;color:var(--teal-300);font-size:.95rem;font-weight:600;margin-top:8px;}
.pd-price__note{display:block;color:var(--gray-300);font-size:.9rem;margin-top:6px;}

/* Hero object: restrained plan-summary panel. Abstract, decorative,
   aria-hidden. Carries no invented figures. */
.pd-hero-card{
    max-width:360px;margin-left:auto;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
    border-radius:16px;padding:22px 24px;backdrop-filter:blur(3px);
    box-shadow:0 22px 48px rgba(0,10,18,.34);
}
.pd-hero-card__tier{
    color:var(--teal-300);font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px;
}
.pd-hero-card__row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.pd-hero-card__row:last-child{border-bottom:none;}
.pd-hero-card__check{color:var(--teal-300);flex-shrink:0;font-weight:700;font-size:.9rem;}
.pd-hero-card__bar{flex:1;height:7px;border-radius:3px;background:rgba(255,255,255,.2);min-width:0;}
.pd-hero-card__bar--short{width:56%;flex:none;background:rgba(255,255,255,.12);}
.pd-hero-card__bar--accent{background:rgba(111,217,224,.4);}

/* --------------------------------------------------------------------
   Feature list ("What's Included") - checkmark heading + description
   -------------------------------------------------------------------- */
.pd-features{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px;}
.pd-feature{
    background:var(--white);border:1px solid var(--gray-300);border-radius:12px;
    padding:22px 24px;box-shadow:0 4px 14px rgba(0,31,49,.05);
}
.pd-feature h3{
    color:var(--navy-950);font-size:1.02rem;font-weight:700;margin-bottom:9px;
    display:flex;gap:9px;align-items:flex-start;
}
.pd-feature h3::before{content:'\2713';color:var(--teal-500);flex-shrink:0;font-weight:700;}
.pd-feature p{color:var(--gray-700);font-size:.92rem;line-height:1.6;margin:0;}

/* --------------------------------------------------------------------
   Multi-location pricing block
   -------------------------------------------------------------------- */
.pd-multi{
    max-width:760px;margin:32px auto 0;background:var(--white);
    border:1px solid var(--gray-300);border-radius:14px;padding:28px 26px;
    box-shadow:0 8px 24px rgba(0,31,49,.07);
}
.pd-multi__row{
    display:flex;justify-content:space-between;gap:16px;align-items:baseline;
    padding:12px 16px;background:var(--gray-100);border-radius:8px;margin-bottom:10px;
}
.pd-multi__row:last-of-type{margin-bottom:0;}
.pd-multi__row span{color:var(--gray-700);font-size:.94rem;}
.pd-multi__row b{color:var(--navy-950);font-size:1rem;}
.pd-multi__example{
    margin-top:16px;padding:14px 16px;background:rgba(19,167,179,.08);
    border:1px solid rgba(19,167,179,.25);border-radius:8px;
    color:var(--navy-950);font-size:.94rem;font-weight:600;
}
.pd-multi__example + .pd-multi__example{margin-top:10px;}
.pd-multi__link{display:block;margin-top:18px;text-align:center;font-size:.95rem;}

/* --------------------------------------------------------------------
   Fit / not-fit two-column ("Is X Right for You?")
   -------------------------------------------------------------------- */
.pd-fit{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:32px;}
.pd-fit__col{
    background:var(--white);border:1px solid var(--gray-300);border-radius:14px;padding:26px 24px;
}
.pd-fit__col--yes{border-left:4px solid var(--teal-500);}
.pd-fit__col--no{border-left:4px solid var(--gray-300);}
.pd-fit__col h3{color:var(--navy-950);font-size:1.05rem;font-weight:700;margin-bottom:14px;}
.pd-fit__col ul{list-style:none;display:grid;gap:10px;margin:0;padding:0;}
.pd-fit__col li{color:var(--gray-700);font-size:.93rem;line-height:1.55;display:flex;gap:9px;align-items:flex-start;}
.pd-fit__col--yes li::before{content:'\2713';color:var(--teal-500);font-weight:700;flex-shrink:0;}
.pd-fit__col--no li::before{content:'\2022';color:var(--gray-700);font-weight:700;flex-shrink:0;}
.pd-fit__note{margin-top:26px;text-align:center;font-size:.96rem;color:var(--gray-700);}

/* --------------------------------------------------------------------
   ROI / value block (Pro + Elite pages)
   -------------------------------------------------------------------- */
.pd-roi{
    display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
    max-width:900px;margin:32px auto 0;
}
.pd-roi__panel{
    background:var(--white);border:1px solid var(--gray-300);border-radius:14px;
    padding:26px 24px;box-shadow:0 6px 18px rgba(0,31,49,.06);
}
.pd-roi__panel h3{color:var(--navy-950);font-size:1.02rem;font-weight:700;margin-bottom:14px;}
.pd-roi__figure{display:block;color:var(--navy-950);font-size:1.5rem;font-weight:800;line-height:1.2;}
.pd-roi__figure small{display:block;font-size:.9rem;font-weight:500;color:var(--gray-700);margin-top:4px;}
.pd-roi__total{
    display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-300);
    color:var(--teal-500);font-size:1.1rem;font-weight:800;
}
.pd-roi__arrow{color:var(--teal-500);font-size:1.6rem;font-weight:700;text-align:center;}
.pd-roi__panel ul{list-style:none;display:grid;gap:9px;margin:0;padding:0;}
.pd-roi__panel li{color:var(--gray-700);font-size:.93rem;line-height:1.5;display:flex;gap:8px;align-items:flex-start;}
.pd-roi__panel li::before{content:'\2022';color:var(--teal-500);font-weight:700;flex-shrink:0;}
.pd-roi__disclaimer{max-width:900px;margin:16px auto 0;color:var(--gray-700);font-size:.86rem;line-height:1.55;text-align:center;}

/* Value-stack list (Elite "What You Get for +$300/month") */
.pd-value{max-width:760px;margin:28px auto 0;}
.pd-value ul{list-style:none;display:grid;gap:11px;margin:0 0 18px;padding:0;}
.pd-value li{
    color:var(--gray-700);font-size:.94rem;line-height:1.55;
    padding:12px 16px;background:var(--gray-100);border-radius:8px;
}
.pd-value li strong{color:var(--navy-950);}
.pd-value__total{
    background:rgba(19,167,179,.09);border:1px solid rgba(19,167,179,.28);
    border-radius:10px;padding:16px;text-align:center;
    color:var(--navy-950);font-size:1.02rem;font-weight:800;
}

/* --------------------------------------------------------------------
   Enterprise pricing-tier cards
   -------------------------------------------------------------------- */
.pd-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;align-items:start;}
.pd-tier{
    position:relative;background:var(--white);border:1px solid var(--gray-300);
    border-radius:14px;padding:28px 24px;box-shadow:0 6px 18px rgba(0,31,49,.06);
}
.pd-tier--featured{border-color:var(--teal-500);box-shadow:0 14px 34px rgba(19,167,179,.14);}
.pd-tier__badge{
    position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    background:var(--teal-500);color:var(--white);font-size:.66rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.8px;padding:4px 12px;border-radius:999px;white-space:nowrap;
}
.pd-tier h3{color:var(--navy-950);font-size:1.08rem;font-weight:700;margin-bottom:10px;}
.pd-tier__price{display:block;color:var(--teal-500);font-size:1.35rem;font-weight:800;margin-bottom:16px;line-height:1.25;}
.pd-tier ul{list-style:none;display:grid;gap:8px;margin:0 0 16px;padding:0;}
.pd-tier li{color:var(--gray-700);font-size:.89rem;line-height:1.5;display:flex;gap:8px;align-items:flex-start;}
.pd-tier li::before{content:'\2713';color:var(--teal-500);font-weight:700;flex-shrink:0;}
.pd-tier__example{
    padding-top:14px;border-top:1px solid var(--gray-300);
    color:var(--navy-950);font-size:.92rem;font-weight:600;
}

/* Enterprise vs Elite comparison rows */
.pd-vs{display:grid;gap:16px;max-width:820px;margin:32px auto 0;}
.pd-vs__row{
    background:var(--white);border:1px solid var(--gray-300);border-radius:12px;padding:20px 24px;
}
.pd-vs__row h3{color:var(--navy-950);font-size:1rem;font-weight:700;margin-bottom:10px;}
.pd-vs__row p{color:var(--gray-700);font-size:.93rem;line-height:1.6;margin:0 0 6px;}
.pd-vs__row p:last-child{margin-bottom:0;}
.pd-vs__row strong{color:var(--navy-950);}

/* --------------------------------------------------------------------
   Comparison table - semantic table, horizontal scroll CONTAINED to the
   table wrapper so the page itself never overflows. All columns are kept
   on mobile per spec (no column hiding).
   -------------------------------------------------------------------- */
.pd-compare-wrap{
    max-width:960px;margin:32px auto 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--gray-300);border-radius:12px;background:var(--white);
    box-shadow:0 6px 18px rgba(0,31,49,.06);
}
.pd-compare{border-collapse:collapse;width:100%;min-width:620px;font-size:.9rem;}
.pd-compare caption{
    caption-side:top;text-align:left;padding:16px 18px 0;
    color:var(--gray-700);font-size:.86rem;
}
.pd-compare th,.pd-compare td{
    padding:13px 16px;text-align:center;border-bottom:1px solid var(--gray-300);
    vertical-align:middle;
}
.pd-compare thead th{
    background:var(--navy-950);color:var(--white);font-size:.86rem;font-weight:700;
    border-bottom:none;line-height:1.35;
}
.pd-compare thead th a{color:var(--teal-300);text-decoration:none;}
.pd-compare thead th a:hover{text-decoration:underline;}
.pd-compare thead th .pd-compare__price{display:block;font-size:.8rem;font-weight:500;opacity:.85;margin-top:3px;}
/* First column: feature names, left-aligned and kept legible on mobile */
.pd-compare th[scope="row"]{
    text-align:left;color:var(--navy-950);font-weight:600;
    background:var(--gray-100);
    position:sticky;left:0;z-index:1;
    min-width:170px;
}
.pd-compare tbody tr:last-child th,
.pd-compare tbody tr:last-child td{border-bottom:none;}
.pd-compare td.pd-compare__current{background:rgba(19,167,179,.07);font-weight:700;color:var(--navy-950);}
.pd-compare__dash{color:var(--gray-300);}
.pd-compare-note{text-align:center;margin-top:18px;font-size:.95rem;}
.pd-compare-hint{
    display:none;text-align:center;color:var(--gray-700);font-size:.83rem;margin-top:10px;
}

/* --------------------------------------------------------------------
   Related packages
   -------------------------------------------------------------------- */
.pd-related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
.pd-related__card{
    display:block;background:var(--white);border:1px solid var(--gray-300);border-radius:12px;
    padding:22px 24px;text-decoration:none;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.pd-related__card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,31,49,.1);border-color:var(--teal-300);}
.pd-related__card h3{color:var(--navy-950);font-size:1.02rem;font-weight:700;margin-bottom:6px;}
.pd-related__price{display:block;color:var(--teal-500);font-size:1.1rem;font-weight:800;margin-bottom:8px;}
.pd-related__card p{color:var(--gray-700);font-size:.9rem;line-height:1.55;margin:0;}

/* Final CTA fine print */
.pd-cta-fineprint{color:var(--gray-300);font-size:.9rem;margin-top:14px;}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width:1024px){
    .pd-features,.pd-fit{grid-template-columns:1fr;}
    .pd-tiers,.pd-related{grid-template-columns:1fr;}
    .pd-roi{grid-template-columns:1fr;gap:16px;}
    .pd-roi__arrow{transform:rotate(90deg);}
}
@media (max-width:768px){
    .pd-compare-hint{display:block;}
}
@media (max-width:640px){
    .pd-price__amount{font-size:2.3rem;}
    .pd-multi{padding:20px 18px;}
    .pd-multi__row{flex-direction:column;gap:4px;}
    .pd-fit__col,.pd-tier,.pd-vs__row{padding:20px 18px;}
    .pd-feature{padding:18px 18px;}
    .pd-compare{min-width:560px;font-size:.85rem;}
    .pd-compare th,.pd-compare td{padding:11px 12px;}
    .pd-compare th[scope="row"]{min-width:140px;}
    .pd-value li{padding:11px 14px;}
}
@media (max-width:390px){
    .pd-compare{min-width:520px;}
    .pd-compare th[scope="row"]{min-width:126px;font-size:.82rem;}
}