/* =========================================================
   WEBSITE PAGE — section-scoped styles only
   All selectors prefixed with .web-* (per CLAUDE.md no-cross-section rule).
   The wins testimonial reuses .cmo-wins from cmo.css verbatim.
   ========================================================= */

/* ===== HEADER (page-scoped — light variant) ===== */
.website-page .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }

/* ===== Shared text underlines — colored emphasis used throughout the page.
   Lavender-blue is the default; red and blue variants for callouts. */
.web-underline,
.web-underline-red,
.web-underline-blue,
.web-underline-yellow {
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-underline-offset: 1px;
    text-decoration-skip-ink: none;
}
.web-underline         { text-decoration-color: #b2baff; }
.web-underline-red     { text-decoration-color: var(--clr-red); }
.web-underline-blue    { text-decoration-color: var(--clr-blue); }
.web-underline-yellow  { text-decoration-color: var(--clr-yellow); }

/* ===== HERO =====
   Full-bleed photo bg (Kathy at laptop). No veil — photo's natural white wall
   gives plenty of contrast for the headline on the left. */
.web-hero {
    position: relative;
    background-color: var(--clr-cream);
    background-repeat: no-repeat;
    background-size: 185% auto;
    /* Bg-y shifted down (50% center → 65%) so the table+notebook stays where
       the checklist ends. Pairs with the taller min-height + extra top
       padding below so the headline gets breathing room from the logo
       without re-overlapping the table. */
    background-position: 76% 65%;
    overflow: hidden;
    padding: 200px 0 160px;
    min-height: 920px;
}

.web-hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 clamp(24px, 6vw, 80px);
}

.web-hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.3vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--clr-navy);
    margin: 0 0 22px;
    max-width: 720px;
}
.web-hero-title .line { display: block; }

/* "business's evolution" reads heavier than the lines around it */
.web-hero-bold { font-weight: 700; }

/* Hand-drawn red circle around "needs" */
.web-hero-circle {
    position: relative;
    display: inline-block;
    padding: 0 0.25em;
}
.web-hero-circle::after {
    content: "";
    position: absolute;
    left: -0.06em;
    right: -0.06em;
    top: -0.16em;
    bottom: -0.16em;
    border: 4px solid var(--clr-red);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    transform: rotate(-2deg);
    pointer-events: none;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.web-hero-lede {
    max-width: 620px;
    margin: 0 0 36px;
}

/* "—all in one powerful online presence." — brand bold (weight 500). */
.web-hero-lede-serif {
    font-family: inherit;
    font-weight: 500;
}

.web-hero-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.web-hero-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--clr-navy);
    margin-bottom: 12px;
    letter-spacing: 0.4px;
}
.web-hero-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ===== IN-HOUSE TEAM ===== */
.web-team {
    background: #ebeefc;
    padding: var(--section-py-lg) 0;
    position: relative;
    overflow: hidden;
}

.web-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.web-team-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 32px;
}
.web-team-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.web-team-content { max-width: none; }

/* Title fills its column at a generous size so "in-house team" lands at
   the end of line 1 with the natural 7-line wrap from the design. */
.web-team-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.3rem, 3.8vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--clr-navy);
    margin: 0 0 28px;
    max-width: none;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.web-team-lede {
    margin-bottom: 32px;
    max-width: 540px;
}

/* CTA text white on the yellow pill */
.web-team-cta { color: #fff; }
.web-team-cta:hover { color: #fff; }

/* ===== OUR WORK ===== */
.web-work {
    background: #fff;
    padding: var(--section-py-lg) 0 var(--section-py);
}

.web-work-container { text-align: center; }

.web-work-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--clr-navy);
    margin-bottom: 8px;
}

.web-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 36px 0 56px;
}

.web-work-card {
    display: block;
    aspect-ratio: 16 / 10;
    background: #fff;
    border: 5px solid var(--clr-navy);
    border-radius: 14px;
    box-shadow: 6px 6px 0 rgba(26, 31, 54, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.web-work-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(26, 31, 54, 0.22);
}

/* Solid blue CTA — matches the brand blue */
.web-work-btn {
    background: #0152f5;
    color: #fff;
    border: 0;
}
.web-work-btn:hover { background: #0145cd; color: #fff; }

/* ===== YOUR BUSINESS HAS EVOLVED =====
   Cream band with a horizontal scribble divider at the bottom only. */
.web-evolved {
    background: var(--clr-cream);
    padding: var(--section-py-lg) 0;
    position: relative;
}

.web-evolved::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 36px;
    background-image: url('../assets/images/SVG/scribble-divider.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.web-evolved-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
}

.web-evolved-headline-col { max-width: 560px; }

.web-evolved-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--clr-navy);
    margin: 0 0 56px;
}
.web-evolved-title .line { display: block; }

/* Typography from .section-sublede (style.css). Layout only here. */
.web-evolved-eyebrow {
    max-width: 460px;
}

.web-evolved-text-col { max-width: 600px; padding-top: 8px; }

.web-evolved-text-col p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 18px;
    letter-spacing: 0.4px;
}

.web-evolved-text-col p:last-child { margin-bottom: 0; }

.web-evolved-question {
    margin-top: 4px;
    margin-bottom: 18px !important;
}

.web-evolved-text-col strong { font-weight: 600; }

/* ===== DESIGNED + DEVELOPED ===== */
.web-designed {
    background: #fff;
    padding: var(--section-py-lg) 0;
}

.web-designed-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.web-designed-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 32px;
}
.web-designed-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.web-designed-content { max-width: 760px; }

.web-designed-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 3.7vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--clr-navy);
    margin: 0 0 36px;
}
.web-designed-title .line { display: block; }

.web-designed-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 18px;
    letter-spacing: 0.4px;
}
.web-designed-content p:last-child { margin-bottom: 0; }

/* ===== CLARITY WEBSITE PRICING =====
   Soft blue → white gradient band. iPhone SVG on the left overlaps the
   right-column tier cards via grid + z-index. */
.web-pricing {
    background: linear-gradient(180deg, #d8dcff 0%, #d8dcff 70%, #ffffff 100%);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

/* Single relative container, narrower max-width so the entire phone +
   content composition sits visually centered in the section. */
.web-pricing-grid {
    position: relative;
    min-height: 720px;
    max-width: 1080px;
    margin: 0 auto;
}

.web-pricing-mockup {
    position: absolute;
    left: clamp(60px, 7vw, 100px);
    top: 50%;
    transform: translateY(calc(-50% + 28px));
    width: clamp(280px, 30vw, 360px);
    z-index: 2;
    pointer-events: none;
}
.web-pricing-phone {
    width: 100%;
    height: auto;
    display: block;
}

/* Right-side content — left padding NOT applied to the container so tier
   cards can stretch full width. Each child element gets its own clearance. */
.web-pricing-content {
    max-width: none;
    position: relative;
    z-index: 1;
}
/* Head and foot wrappers sit to the right of the phone, left-aligned. */
.web-pricing-head,
.web-pricing-foot {
    margin-left: clamp(420px, 46vw, 540px);
    text-align: left;
}
.web-pricing-foot { margin-top: 0; }

.web-pricing-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1;
    color: var(--clr-navy);
    margin-top: 0;
    margin-bottom: 8px;
}
/* Typography from .section-sublede (style.css). Layout only here. */
.web-pricing-sub {
    margin-bottom: 18px;
}
.web-pricing-price {
    margin-bottom: 28px;
    text-align: left;
}
/* Pricing pill — white pill with 1px red outline; amount in mono font */
.web-pricing-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--clr-red);
    border-radius: 999px;
    padding: 12px 26px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
}
.web-pricing-pill-amount {
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.04em;
}

.web-pricing-eyebrow {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 600;
    color: var(--clr-navy);
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

/* Tier cards extend behind the phone on the left and end with a right
   margin so they don't run all the way to the section edge. PHASE circle
   sits just past the phone's right edge in its own slot, then text.
   Margin-left intentionally lands INSIDE the phone's right-edge envelope
   (~30-50px under the phone bezel) so the cards visually butt up against
   the phone with no gap. Phone has z-index:2 so it covers the overlap. */
.web-pricing-tiers {
    list-style: none;
    padding: 0;
    margin: 0 0 36px clamp(310px, 33vw, 410px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.web-pricing-tiers > li {
    background: var(--clr-cream);
    border-radius: 0 36px 36px 0; /* left edge straight where phone intersects */
    /* Left padding bumped to 78px to compensate for the wider tier margin —
       keeps the PHASE circle visible just past the phone's right edge
       instead of getting buried under the phone bezel. */
    padding: 18px 32px 18px 78px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
}
img.web-pricing-num {
    width: 73px;
    height: 73px;
    flex-shrink: 0;
    display: block;
}
.web-pricing-tier-body h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--clr-navy);
    margin: 0 0 2px;
}
.web-pricing-tier-body p {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.3px;
}
.web-pricing-tier-body ul {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}
.web-pricing-tier-body ul li {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
    margin: 0;
}

/* ===== BRING YOUR WEBSITE TO LIFE — Photo + Video =====
   Full-bleed section: the photo (Kathy with yellow phone) is the section
   background. Photo's natural white wall extends to the right and gives
   the content column its own clean canvas. Image is set inline via
   `style="background-image: url(...)"` so paths resolve from the document
   (per CLAUDE.md gotcha noted in the rebranded section). */
.web-photo-video {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: auto 101%;
    background-position: calc(61% + 30px) center;
    padding: var(--section-py-lg) 0;
}

.web-photo-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
    min-height: 660px;
}

.web-photo-video-content {
    max-width: 560px;
    grid-column: 2;
}

.web-photo-video-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.08;
    color: var(--clr-navy);
    margin: 0 0 28px;
}
.web-photo-video-title .line { display: block; }

.web-photo-video-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 14px;
    letter-spacing: 0.4px;
}

.web-photo-video-lede {
    margin-bottom: 22px;
}
.web-photo-video-lede strong {
    font-weight: 500;
}

/* Hand-drawn circle highlights — SVG assets, organic stroke.
   Inline-block + relative padding lets the SVG hug the word at any size. */
.web-circle-red,
.web-circle-blue {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background-repeat: no-repeat;
    background-position: center 52%;
    background-size: 100% 105%;
}
.web-circle-red  { background-image: url('../assets/images/red-circle-scribble.svg'); }
.web-circle-blue {
    position: relative;
    z-index: 0;
    padding: 0 18px;
    background-image: none;
    isolation: isolate;
}
.web-circle-blue-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 118%;
    height: 150%;
    pointer-events: none;
    z-index: -1;
}

/* Layout-only: extra breathing room above the CTA. Visual styling comes from
   canonical .btn .btn-blue .btn-lg in style.css. */
.web-photo-video-cta { margin-top: 28px; }

/* ===== TRUST / GETTING THE WEBSITE ===== */
.web-trust {
    background: var(--clr-cream);
    padding: var(--section-py-lg) 0;
}

.web-trust-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.web-trust-content { max-width: 580px; }

.web-trust-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    color: var(--clr-navy);
    margin: 0 0 24px;
}
.web-trust-title .line { display: block; }

.web-trust-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 16px;
    letter-spacing: 0.4px;
}

.web-trust-lede { margin-bottom: 22px; }
.web-trust-lede strong { font-weight: 500; }

.web-trust-content .btn { margin-top: 16px; }

/* iMac mockup graphic (SVG asset). Right-column visual for the trust section. */
.web-trust-mockup {
    position: relative;
    text-align: center;
}
.web-trust-imac {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 0 auto;
}

/* ===== FAQ ===== */
.web-faq {
    background: #fff;
    padding: var(--section-py-lg) 0 var(--section-py);
}

.web-faq-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}

.web-faq-heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.web-faq-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    line-height: 0.95;
    color: var(--clr-navy);
    margin: 0;
}

.web-faq-mark {
    width: clamp(38px, 4vw, 56px);
    height: auto;
    align-self: flex-start;
    margin-top: 8px;
}

/* Accordion list — each item is a rounded-pill outlined row.
   The outline disappears on the open item, freeing the answer to hang
   below the question with no border. */
.web-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}

/* Pill outline lives on the summary (Q row) so it stays a perfect pill
   regardless of open/closed state. The answer hangs below the pill. */
.web-faq-item {
    border: none;
    background: transparent;
}

.web-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
    border: 1.5px solid #d8d8ea;
    border-radius: 999px;
    background: #fff;
}
.web-faq-item summary:hover { border-color: #b8b8d4; }
.web-faq-item summary::-webkit-details-marker,
.web-faq-item summary::marker { display: none; }

/* Q: / A: labels — serif, slightly larger than body, fixed-width column
   so the question text and answer text align on the same left edge. */
.web-faq-label {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--clr-navy);
    flex-shrink: 0;
    min-width: 28px;
}
.web-faq-label--a {
    align-self: flex-start;
    line-height: 1.6;
}

.web-faq-q {
    flex: 1;
}

.web-faq-item[open] summary { cursor: default; }

.web-faq-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 28px 6px;
}
.web-faq-body p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    letter-spacing: 0.4px;
    margin: 0;
    max-width: 640px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    /* Hero — at tablet/phone the photo's natural cover crop puts Kathy on top
       of the headline. Fade a translucent-white veil from the left so the text
       column stays readable, and shift the bg-position right so Kathy sits on
       the right edge instead of dead-center. */
    .web-hero {
        padding: 160px 0 80px;
        min-height: 560px;
        background-size: cover;
        background-position: 92% 30%;
    }
    .web-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(241, 236, 225, 0.97) 0%,
            rgba(241, 236, 225, 0.93) 50%,
            rgba(241, 236, 225, 0.55) 78%,
            rgba(241, 236, 225, 0.1) 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    .web-team-grid,
    .web-evolved-grid,
    .web-designed-grid,
    .web-pricing-grid,
    .web-photo-video-grid,
    .web-trust-grid,
    .web-faq-grid {
        grid-template-columns: 1fr;
    }
    .web-team-image,
    .web-designed-image { order: -1; }
    /* Mobile aspect intentionally matches the photo's natural portrait crop
       (rounded to a soft square) so cover doesn't slice off Kathy's head
       like the prior 5/4 landscape ratio did. */
    .web-team-image,
    .web-designed-image { aspect-ratio: 1 / 1; max-width: 520px; margin: 0 auto; }
    /* Section-py-lg (140px top+bottom) is a desktop value — at mobile it
       leaves a big empty band above the now-first image. Drop the team
       section to the mobile section padding so the image sits close to
       the section's top edge. */
    .web-team { padding: var(--section-py-sm) 0; }

    /* Photo-video: photo is the section bg. On tablet/phone, push it up as a
       top banner via tall top padding + top-positioned bg, content underneath.
       Native photo aspect is ~3:2, so padding-top ≈ 67vw keeps text below it. */
    .web-photo-video {
        background-size: 100% auto;
        background-position: center top;
        padding: 70vw 24px var(--section-py-sm);
    }
    .web-photo-video-grid { min-height: 0; }
    .web-photo-video-content { grid-column: 1; max-width: none; margin: 0 auto; }

    .web-work-grid { grid-template-columns: repeat(2, 1fr); }

    /* "Getting the Website..." — iMac mockup should appear ABOVE the
       headline at mobile (designer reference), not stacked under it. */
    .web-trust-mockup { order: -1; margin-top: 0; margin-bottom: 32px; }

    /* Pricing — phone stacks above content; cancel desktop overlap */
    .web-pricing-grid { min-height: 0; }
    .web-pricing-mockup {
        position: static;
        transform: none;
        width: 100%;
        max-width: 280px;
        margin: 0 auto 32px;
    }
    .web-pricing-head,
    .web-pricing-foot { margin-left: 0; margin-right: 0; }
    .web-pricing-tiers { margin-left: 0; margin-right: 0; gap: 12px; }
    .web-pricing-tiers > li {
        padding: 16px 24px;
        border-radius: 24px;
        gap: 18px;
    }
    .web-pricing-tier-body ul { padding-left: 16px; }
    .web-pricing-tier-body ul li { margin-bottom: 4px; }
    .web-pricing-tier-body ul li:last-child { margin-bottom: 0; }
}

@media (max-width: 768px) {
    .web-hero { padding: 120px 0 64px; min-height: 480px; }
    .web-hero-title  { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    .web-hero-lede   { font-size: 1.05rem; }
    .web-hero-checklist li { font-size: 0.95rem; }

    .web-team-title,
    .web-evolved-title,
    .web-designed-title,
    .web-photo-video-title,
    .web-trust-title { font-size: clamp(1.6rem, 6vw, 2.1rem); }

    .web-pricing-title { font-size: clamp(2rem, 7vw, 2.6rem); }

    .web-work-grid { grid-template-columns: 1fr; }

    .web-pricing-phone { max-width: 260px; }

    /* Evolved — when stacked, drop the per-column max-widths so the headline
       and body fill the section width instead of leaving empty space right. */
    .web-evolved-headline-col,
    .web-evolved-text-col { max-width: none; }

    .web-faq-heading { gap: 8px; }
    .web-faq-item summary { font-size: 1rem; padding: 14px 22px; }
    .web-faq-body { padding: 12px 22px 6px; }
}

@media (max-width: 480px) {
    .web-hero { padding: 110px 0 56px; min-height: 440px; }
    .web-hero-title { font-size: clamp(1.7rem, 8vw, 2.1rem); }

    /* On phones the photo fully fills the section, so push the veil further
       right and bump opacity so the headline + checklist read cleanly. */
    .web-hero::before {
        background: linear-gradient(
            to right,
            rgba(241, 236, 225, 0.98) 0%,
            rgba(241, 236, 225, 0.94) 60%,
            rgba(241, 236, 225, 0.6) 88%,
            rgba(241, 236, 225, 0.2) 100%
        );
    }

    /* Pricing tiers — phone: tighten card padding, gap, and bullet indent
       so the cards read as a compact set rather than a sparse list. */
    .web-pricing-tiers { gap: 10px; }
    .web-pricing-tiers > li {
        padding: 12px 18px 12px 12px;
        gap: 12px;
        border-radius: 22px;
    }
    img.web-pricing-num { width: 57px; height: 57px; }
    .web-pricing-tier-body ul { padding-left: 14px; }
    .web-pricing-tier-body ul li { margin-bottom: 2px; }
}