/*
 * GoTroppo plan cards - condensed + full-width responsive layout (2026-07-03).
 * Single owner for .nbn-plan-card layout on BOTH surfaces:
 *   - [nbn_plans]  homepage widget  (class-nbn-plans-display.php markup)
 *   - [nbn_flow]   /nbn-plans-order/ Step 2 (class-nbn-flow-plans.php markup)
 * Cards-per-view: >=1200px 4-up static (arrows hidden), 992-1199 3-up,
 * 640-991 2-up, <640 1-up snap carousel with next-card peek.
 * Loads LAST (enqueued with nbn-site-custom as dependency at priority 999 in
 * services/core/class-hook-registrar.php), so it deterministically supersedes
 * the legacy fixed-width rules still present in plans-horizontal-scroll.css
 * (350px/300px/100vw) and plans-display-unified.css (384px flow / 90% mobile,
 * header min-height 200px, pricing min-height 150px). Those legacy blocks are
 * scheduled for deletion in the next consolidation phase - do not add new
 * width rules to them.
 * Selector convention: every internals rule carries three belt chains -
 * body .nbn-plugin-wrapper.nbn-flow (flow page, outranks nbn-flow-v4.css),
 * body .nbn-plugin-wrapper and body .nbn-plans-display (homepage) - so
 * equal-or-higher specificity plus later load order wins every collision.
 * Cache busting is via filename rename (Perfmatters strips ?ver=): bump -v1.
 */

/* ==========================================================================
   1. FULL-BLEED SECTION - homepage widget
   (.nbn-plugin-wrapper.nbn-flow already breaks out in plans-display-unified)
   ========================================================================== */

body .nbn-plans-display {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body .nbn-plans-display .nbn-plans-container,
body .nbn-plugin-wrapper.nbn-flow .nbn-plans-container {
    max-width: 1650px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .nbn-plans-display > .nbn-plans-title,
body .nbn-plans-display > .nbn-plan-filters,
body .nbn-plans-display > .nbn-payment-filters {
    max-width: 1650px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   2. RESPONSIVE CARD WIDTHS - flex carousel below 1200px, 4-up grid above.
   :not(.filter-hidden) keeps cadence-filtered cards collapsed and also
   outranks the legacy width selectors on visible cards.
   ========================================================================== */

/* Base (mobile-first): 1-up with next-card peek */
html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card:not(.filter-hidden),
html body .nbn-plugin-wrapper .nbn-plan-card:not(.filter-hidden),
html body .nbn-plans-display .nbn-plan-card:not(.filter-hidden) {
    flex: 0 0 88% !important;
    width: 88% !important;
    min-width: 88% !important;
    max-width: 88% !important;
    height: auto !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plans-grid,
body .nbn-plugin-wrapper .nbn-plans-grid,
body .nbn-plans-display .nbn-plans-grid {
    gap: 1rem !important;
    padding: 0 1rem 0.5rem !important;
    scroll-snap-type: x mandatory !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

/* 2-up: small tablets / large phones landscape */
@media (min-width: 640px) {
    html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card:not(.filter-hidden),
    html body .nbn-plugin-wrapper .nbn-plan-card:not(.filter-hidden),
    html body .nbn-plans-display .nbn-plan-card:not(.filter-hidden) {
        flex: 0 0 calc(50% - 0.5rem) !important;
        width: calc(50% - 0.5rem) !important;
        min-width: calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
}

/* 3-up: tablets landscape / small laptops */
@media (min-width: 992px) {
    html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card:not(.filter-hidden),
    html body .nbn-plugin-wrapper .nbn-plan-card:not(.filter-hidden),
    html body .nbn-plans-display .nbn-plan-card:not(.filter-hidden) {
        flex: 0 0 calc(33.333% - 0.667rem) !important;
        width: calc(33.333% - 0.667rem) !important;
        min-width: calc(33.333% - 0.667rem) !important;
        max-width: calc(33.333% - 0.667rem) !important;
    }
}

/* 4-up: desktop - all plans visible, no carousel chrome */
@media (min-width: 1200px) {
    html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card:not(.filter-hidden),
    html body .nbn-plugin-wrapper .nbn-plan-card:not(.filter-hidden),
    html body .nbn-plans-display .nbn-plan-card:not(.filter-hidden) {
        flex: 0 0 calc(25% - 0.75rem) !important;
        width: calc(25% - 0.75rem) !important;
        min-width: calc(25% - 0.75rem) !important;
        max-width: calc(25% - 0.75rem) !important;
    }

    body .nbn-plugin-wrapper.nbn-flow .nbn-plans-grid,
    body .nbn-plugin-wrapper .nbn-plans-grid,
    body .nbn-plans-display .nbn-plans-grid {
        padding: 0 2rem 0.5rem !important;
        overflow-x: auto !important;
    }

    /* All four plans fit - hide the carousel arrows (JS auto-disables them
       anyway once scrollWidth == clientWidth; hiding removes the dimmed
       leftovers). A future 5th plan overflows into touch/drag scroll. */
    html body .nbn-plugin-wrapper.nbn-flow .nbn-plans-container .nbn-scroll-arrow,
    html body .nbn-plugin-wrapper .nbn-plans-container .nbn-scroll-arrow,
    html body .nbn-plans-display .nbn-plans-container .nbn-scroll-arrow,
    body .nbn-plans-container .nbn-scroll-arrow,
    body .nbn-scroll-arrow {
        display: none !important;
    }
}

/* ==========================================================================
   3. CONDENSED CARD INTERNALS (both surfaces)
   Replaces the ~770px stacked layout with a ~580px card: single-line spec
   rows, chip-style "ideal for", tight bottom-anchored price block. No markup
   changes. Legacy baseline being overridden: header min-height 200px +
   padding-top 64px, pricing min-height 150px + padding 32px, users-box
   padding 24px 32px + 40px number, actions padding 24px 32px 32px.
   ========================================================================== */

/* Card shell */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card,
body .nbn-plugin-wrapper .nbn-plan-card,
body .nbn-plans-display .nbn-plan-card {
    padding: 0 !important;
    transform: none !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-details,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-details,
body .nbn-plans-display .nbn-plan-card .nbn-plan-details {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Savings banner: slim centred cap strip, rounded to the card radius so it
   reads as part of the card instead of a bolted-on bar */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-savings-badge,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-savings-badge,
body .nbn-plans-display .nbn-plan-card .nbn-savings-badge,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-promotional-badge,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-promotional-badge,
body .nbn-plans-display .nbn-plan-card .nbn-promotional-badge {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    text-align: center !important;
    border-radius: 12px 12px 0 0 !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-promotional-badge .badge-text,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-promotional-badge .badge-text,
body .nbn-plans-display .nbn-plan-card .nbn-promotional-badge .badge-text {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    padding: 0 !important;
}

/* Header (blue block): kill the 200px reserve and 64px top pad */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-header,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-header,
body .nbn-plans-display .nbn-plan-card .nbn-plan-header {
    min-height: 0 !important;
    position: relative !important;
    padding: 2.35rem 1rem 0 !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-header-top,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-header-top,
body .nbn-plans-display .nbn-plan-card .nbn-header-top {
    min-height: 0 !important;
    padding: 0.25rem 0 0.2rem !important;
}

/* POPULAR pill - seated inside the blue header badge zone; every header
   reserves the same 2.35rem top pad so titles align across all cards */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-popular-tag,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-popular-tag,
body .nbn-plans-display .nbn-plan-card .nbn-popular-tag,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-popular-badge,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-popular-badge,
body .nbn-plans-display .nbn-plan-card .nbn-popular-badge {
    position: absolute !important;
    top: 0.55rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 0.25rem 0.9rem !important;
    font-size: 0.7rem !important;
    z-index: 5 !important;
}

/* Homepage exception: its promo banner is position:absolute (z-index 10)
   over the card top, so the badge zone starts taller and the pill drops
   below the banner. Flow keeps the 2.35rem zone (its banner is in-flow). */
body .nbn-plans-display .nbn-plan-card .nbn-plan-header {
    padding-top: 3.7rem !important;
}

body .nbn-plans-display .nbn-plan-card .nbn-popular-tag,
body .nbn-plans-display .nbn-plan-card .nbn-popular-badge {
    top: 2.15rem !important;
    z-index: 11 !important;
}

/* Plan name: uniform two-line slot so every title starts at the same y */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-name,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-name,
body .nbn-plans-display .nbn-plan-card .nbn-plan-name {
    color: #fff !important;
    font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 0 0.1rem !important;
    min-height: 2.3em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-speed-tier,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-speed-tier,
body .nbn-plans-display .nbn-plan-card .nbn-speed-tier {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    margin: 0.1rem 0 0.3rem !important;
}

/* Typical evening speeds: two tight lines instead of a tall block */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-header-bottom,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-header-bottom,
body .nbn-plans-display .nbn-plan-card .nbn-header-bottom {
    padding: 0.25rem 1rem 0.75rem !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-typical-speeds-text,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-typical-speeds-text,
body .nbn-plans-display .nbn-plan-card .nbn-typical-speeds-text {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #fff !important;
    opacity: 0.85 !important;
    line-height: 1.3 !important;
    margin: 0 0 0.15rem !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-typical-speeds-indicators,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-typical-speeds-indicators,
body .nbn-plans-display .nbn-plan-card .nbn-typical-speeds-indicators {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    gap: 0.4em !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* "IDEAL FOR" white stat panel - label, people and recommended devices in
   one high-contrast strip (device counts come from NBN_Constants tier stats,
   same source as the speed-guide table). Old .nbn-users-number markup was
   replaced in both renderers on 2026-07-03. */

/* Kill the legacy chevron decoration that painted the old users block */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-box::before,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-box::before,
body .nbn-plans-display .nbn-plan-card .nbn-users-box::before,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-box::after,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-box::after,
body .nbn-plans-display .nbn-plan-card .nbn-users-box::after {
    display: none !important;
    content: none !important;
}
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-box,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-box,
body .nbn-plans-display .nbn-plan-card .nbn-users-box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem 0.45rem !important;
    margin: auto 0.5rem !important;
    padding: 0.45rem 0.5rem 0.5rem !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: calc(100% - 1rem) !important;
    height: auto !important;
    clip-path: none !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-label,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-label,
body .nbn-plans-display .nbn-plan-card .nbn-users-label {
    font-size: 0.56rem !important;
    flex: 0 0 100% !important;
    text-align: center !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    color: #64748b !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-stat,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-stat,
body .nbn-plans-display .nbn-plan-card .nbn-users-stat {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #1a1a2e !important;
    white-space: nowrap !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-stat strong,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-stat strong,
body .nbn-plans-display .nbn-plan-card .nbn-users-stat strong {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-people,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-people,
body .nbn-plans-display .nbn-plan-card .nbn-users-people {
    padding-right: 0.3rem !important;
    border-right: 1px solid rgba(26, 26, 46, 0.15) !important;
}

/* Legacy fallback: old cached markup still ships .nbn-users-number */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-number,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-number,
body .nbn-plans-display .nbn-plan-card .nbn-users-number {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Selling points lifted from the speed-guide table (families segment) */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-highlights,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-highlights,
body .nbn-plans-display .nbn-plan-card .nbn-plan-highlights {
    list-style: none !important;
    margin: 0.45rem 1.1rem 0.2rem !important;
    padding: 0 !important;
    text-align: left !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-highlights li,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-highlights li,
body .nbn-plans-display .nbn-plan-card .nbn-plan-highlights li {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.14rem 0 !important;
    margin: 0 !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-highlight-check,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-highlight-check,
body .nbn-plans-display .nbn-plan-card .nbn-highlight-check {
    color: #4fd1c5 !important;
    font-weight: 800 !important;
    flex: 0 0 auto !important;
}

/* Pricing: keep the price prominent, drop the 150px reserve + 32px pad.
   margin-top:auto anchors price/tagline/accordion/CTA to the card bottom,
   so unequal header heights absorb into the gap ABOVE the price block and
   header + ideal-for chip stay visually grouped. */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-pricing,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-pricing,
body .nbn-plans-display .nbn-plan-card .nbn-plan-pricing {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 1rem 0.35rem !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-price-value,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-price-value,
body .nbn-plans-display .nbn-plan-card .nbn-price-value {
    font-size: 2.3rem !important;
    line-height: 1.05 !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-price-note,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-price-note,
body .nbn-plans-display .nbn-plan-card .nbn-price-note {
    font-size: 0.72rem !important;
    opacity: 0.8 !important;
    line-height: 1.3 !important;
    margin-top: 0.15rem !important;
}

/* Tagline: single quiet line, no reserved 90px. Colour/weight/alignment
   mirror the flow page look (nbn-flow-v4) so [nbn_plans] matches [nbn_flow]. */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-tagline,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-tagline,
body .nbn-plans-display .nbn-plan-card .nbn-plan-tagline {
    min-height: 2.6em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.3rem 1rem 0.4rem !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.3 !important;
    color: #ff8e53 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

/* Card chrome on BOTH surfaces: teal inner outline, soft elevation, and a
   calm hover lift (border brightens, shadow deepens - no layout jump).
   Homepage previously had no border; flow gets a flat one from nbn-flow-v4. */
body .nbn-plans-display .nbn-plan-card .nbn-plan-details,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-details,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-details {
    border: 2px solid rgba(79, 209, 197, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

body .nbn-plans-display .nbn-plan-card:hover .nbn-plan-details,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card:hover .nbn-plan-details,
body .nbn-plugin-wrapper .nbn-plan-card:hover .nbn-plan-details {
    border-color: rgba(79, 209, 197, 0.55) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Savings banner sits above .nbn-plan-details - keep the pair reading as
   one card by squaring the details' top corners when a banner is present */
body .nbn-plan-card .nbn-savings-badge + .nbn-plan-details,
body .nbn-plan-card .nbn-promotional-badge + .nbn-plan-details {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* DESIGNED FOR accordion: compact closed state, 44px+ tap target kept */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-features,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-features,
body .nbn-plans-display .nbn-plan-card .nbn-plan-features {
    min-height: 0 !important;
    margin: 0.3rem 1rem 0.4rem !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-features-toggle,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-features-toggle,
body .nbn-plans-display .nbn-plan-card .nbn-features-toggle {
    padding: 0.7rem 1rem !important;
    margin: 0 !important;
    font-size: 0.8rem !important;
    min-height: 44px !important;
}

/* CTA row: tighten the 24px/32px action padding */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-actions,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-actions,
body .nbn-plans-display .nbn-plan-card .nbn-plan-actions {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    min-height: 0 !important;
    padding: 0.25rem 1rem 1rem !important;
}

/* CTA: dark navy text on the orange->yellow gradient.
   White fails WCAG here (2.27:1 at the orange end, 1.38:1 at the yellow
   end); #1a1a2e measures 7.5-12.4:1 across the gradient. */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-select-plan,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-select-plan,
body .nbn-plans-display .nbn-plan-card .nbn-select-plan,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .troppo-btn-primary,
body .nbn-plugin-wrapper .nbn-plan-card .troppo-btn-primary,
body .nbn-plans-display .nbn-plan-card .troppo-btn-primary {
    color: #1a1a2e !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(255, 142, 83, 0.35) !important;
    transition: filter 0.2s ease, box-shadow 0.2s ease !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-select-plan:hover,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-select-plan:hover,
body .nbn-plans-display .nbn-plan-card .nbn-select-plan:hover,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .troppo-btn-primary:hover,
body .nbn-plugin-wrapper .nbn-plan-card .troppo-btn-primary:hover,
body .nbn-plans-display .nbn-plan-card .troppo-btn-primary:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 6px 20px rgba(255, 142, 83, 0.5) !important;
}

/* Quieter units in the speeds row - numbers carry the information */
body .nbn-plan-card .nbn-typical-speeds-indicators .nbn-speed-unit {
    opacity: 0.7 !important;
    font-weight: 600 !important;
}

/* Softer corners on the accordion toggle to match the card radius language */
body .nbn-plan-card .nbn-features-toggle {
    border-radius: 10px !important;
}

/* Legacy reserved-space rules neutralised (were in Customizer CSS) */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-description,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-description,
body .nbn-plans-display .nbn-plan-card .nbn-plan-description {
    display: none !important;
    min-height: 0 !important;
}

/* Carousel arrows (visible below 1200px): keep the gradient circles,
   vertically centred on the card body */
html body .nbn-scroll-arrow {
    top: 50% !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
}

/* Critical Information Summary link - quiet footer row on every card */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-cis,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-cis,
body .nbn-plans-display .nbn-plan-card .nbn-plan-cis {
    text-align: center !important;
    padding: 0.15rem 1rem 0.8rem !important;
    margin: 0 !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-cis a,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-cis a,
body .nbn-plans-display .nbn-plan-card .nbn-plan-cis a {
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-cis a:hover,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-cis a:hover,
body .nbn-plans-display .nbn-plan-card .nbn-plan-cis a:hover {
    color: #4fd1c5 !important;
}

/* Custom SVG iconography (inline, brand teal check + navy stat glyphs) */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-highlight-check,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-highlight-check,
body .nbn-plans-display .nbn-plan-card .nbn-highlight-check {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-stat .nbn-svg-stat,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-stat .nbn-svg-stat,
body .nbn-plans-display .nbn-plan-card .nbn-users-stat .nbn-svg-stat {
    display: inline-block !important;
    vertical-align: -2px !important;
    margin-right: 0.12rem !important;
}

/* ==========================================================================
   4. REFERENCE RESTYLE (2026-07-04) - single navy card surface (no blue
   header block), teal benefit one-liner, divider above the price, outlined
   BEST FOR panel (native details/summary, open by default), footnote strip
   under the grid. Supersedes the users-box / tagline / highlights /
   features-accordion modules, which are hidden below but kept in markup.
   ========================================================================== */

/* One card surface: deep navy gradient, kill the blue header panel */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card,
body .nbn-plugin-wrapper .nbn-plan-card,
body .nbn-plans-display .nbn-plan-card {
    background: linear-gradient(180deg, #10315b 0%, #0c2547 100%) !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-details,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-details,
body .nbn-plans-display .nbn-plan-card .nbn-plan-details,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-header,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-header,
body .nbn-plans-display .nbn-plan-card .nbn-plan-header,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-header-top,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-header-top,
body .nbn-plans-display .nbn-plan-card .nbn-header-top,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-header-bottom,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-header-bottom,
body .nbn-plans-display .nbn-plan-card .nbn-header-bottom {
    background: none !important;
    box-shadow: none !important;
}

/* Superseded modules stay in markup for rollback but do not render */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-box,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-box,
body .nbn-plans-display .nbn-plan-card .nbn-users-box,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-tagline,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-tagline,
body .nbn-plans-display .nbn-plan-card .nbn-plan-tagline,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-highlights,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-highlights,
body .nbn-plans-display .nbn-plan-card .nbn-plan-highlights,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-features,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-features,
body .nbn-plans-display .nbn-plan-card .nbn-plan-features,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-description,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-description,
body .nbn-plans-display .nbn-plan-card .nbn-plan-description {
    display: none !important;
}

/* Teal benefit one-liner under the speeds */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-benefit,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-benefit,
body .nbn-plans-display .nbn-plan-card .nbn-plan-benefit {
    color: #4fd1c5 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.35 !important;
    padding: 0.15rem 1rem 0.85rem !important;
    margin: 0 !important;
    min-height: 3.9em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Divider above the price block */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-pricing,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-pricing,
body .nbn-plans-display .nbn-plan-card .nbn-plan-pricing {
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    margin: 0 1.1rem !important;
    padding: 0.85rem 0 0.3rem !important;
}

/* BEST FOR outlined panel */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-best-for,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-best-for,
body .nbn-plans-display .nbn-plan-card .nbn-best-for {
    border: 1.5px solid rgba(79, 209, 197, 0.35) !important;
    border-radius: 12px !important;
    margin: 0.9rem 0.95rem 0.3rem !important;
    padding: 0.6rem 0.9rem 0.8rem !important;
    text-align: left !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-best-for-head,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-best-for-head,
body .nbn-plans-display .nbn-plan-card .nbn-best-for-head {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    color: #4fd1c5 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

body .nbn-plan-card .nbn-best-for-head::-webkit-details-marker {
    display: none !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-best-for-head::after,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-best-for-head::after,
body .nbn-plans-display .nbn-plan-card .nbn-best-for-head::after {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid #4fd1c5 !important;
    border-bottom: 2px solid #4fd1c5 !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease !important;
    margin-right: 2px !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-best-for[open] .nbn-best-for-head::after,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-best-for[open] .nbn-best-for-head::after,
body .nbn-plans-display .nbn-plan-card .nbn-best-for[open] .nbn-best-for-head::after {
    transform: rotate(225deg) !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-best-for-list,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-best-for-list,
body .nbn-plans-display .nbn-plan-card .nbn-best-for-list {
    list-style: none !important;
    margin: 0.6rem 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-best-for-list li,
body .nbn-plugin-wrapper .nbn-plan-card .nbn-best-for-list li,
body .nbn-plans-display .nbn-plan-card .nbn-best-for-list li {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* POPULAR card: bright teal ring + glow, like the reference */
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card.popular,
body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card.nbn-recommended,
body .nbn-plugin-wrapper .nbn-plan-card.popular,
body .nbn-plans-display .nbn-plan-card.nbn-plan-featured {
    border-color: #4fd1c5 !important;
    box-shadow: 0 0 0 1px rgba(79, 209, 197, 0.55), 0 10px 34px rgba(79, 209, 197, 0.16) !important;
}

/* Footnote strip under the grid */
body .nbn-plans-footnotes {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.9rem 2.4rem !important;
    max-width: 1650px !important;
    margin: 1.2rem auto 0 !important;
    padding: 0 2rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

body .nbn-plans-footnotes .nbn-footnote {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    white-space: nowrap !important;
}

body .nbn-plans-footnotes .nbn-footnote svg {
    flex: 0 0 auto !important;
    opacity: 0.8 !important;
}

@media (max-width: 640px) {
    body .nbn-plans-footnotes .nbn-footnote {
        white-space: normal !important;
    }
}

/* ==========================================================================
   5. VERTICAL RHYTHM TIGHTEN (2026-07-04, Derek: "shrink up the gap") -
   later-in-file so these win every equal-specificity collision above.
   ========================================================================== */

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-header,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-header,
html body .nbn-plans-display .nbn-plan-card .nbn-plan-header {
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 1.9rem 1rem 0 !important;
}

/* Homepage promo banner is an absolute overlay; keep the taller zone */
html body .nbn-plans-display .nbn-plan-card .nbn-plan-header {
    padding-top: 3.1rem !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-header-top,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-header-top,
html body .nbn-plans-display .nbn-plan-card .nbn-header-top {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-name,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-name,
html body .nbn-plans-display .nbn-plan-card .nbn-plan-name {
    min-height: 2.15em !important;
    margin: 0 !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-speed-tier,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-speed-tier,
html body .nbn-plans-display .nbn-plan-card .nbn-speed-tier {
    margin: 0.05rem 0 0.2rem !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-header-bottom,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-header-bottom,
html body .nbn-plans-display .nbn-plan-card .nbn-header-bottom {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.15rem 1rem 0.45rem !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-benefit,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-benefit,
html body .nbn-plans-display .nbn-plan-card .nbn-plan-benefit {
    margin: 0 !important;
    padding: 0 1rem 0.55rem !important;
    min-height: 3.2em !important;
}

/* POPULAR pill: hug the banner a touch closer now the zone is slimmer */
html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-popular-badge,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-popular-badge {
    top: 0.4rem !important;
}

/* Savings banner must never wrap: it collides with the seated pill */
html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-savings-badge,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-savings-badge,
html body .nbn-plans-display .nbn-plan-card .nbn-savings-badge,
html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-promotional-badge,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-promotional-badge,
html body .nbn-plans-display .nbn-plan-card .nbn-promotional-badge {
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.03em !important;
    padding: 0.45rem 0.5rem !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-benefit,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-benefit,
html body .nbn-plans-display .nbn-plan-card .nbn-plan-benefit {
    min-height: 3.35em !important;
}

/* ==========================================================================
   6. DEVICE BAR REVIVAL (2026-07-04) - the white stat strip returns as an
   always-visible device anchor between the speeds and the benefit line.
   People stat stays hidden; devices are the concept buyers understand.
   ========================================================================== */

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-box,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-box,
html body .nbn-plans-display .nbn-plan-card .nbn-users-box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: fit-content !important;
    max-width: calc(100% - 1.2rem) !important;
    margin: 0.55rem auto 0.05rem !important;
    padding: 0.38rem 0.85rem !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28) !important;
    clip-path: none !important;
    height: auto !important;
    min-height: 0 !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-people,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-people,
html body .nbn-plans-display .nbn-plan-card .nbn-users-people {
    display: none !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-label,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-label,
html body .nbn-plans-display .nbn-plan-card .nbn-users-label {
    flex: 0 0 auto !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
    white-space: nowrap !important;
}

html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-users-devices,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-users-devices,
html body .nbn-plans-display .nbn-plan-card .nbn-users-devices {
    border: 0 !important;
    padding: 0 !important;
}

/* Benefit line follows the device bar now - trim its slot */
html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-plan-benefit,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-plan-benefit,
html body .nbn-plans-display .nbn-plan-card .nbn-plan-benefit {
    min-height: 3em !important;
    padding: 0.25rem 1rem 0.45rem !important;
}

/* Snappier BEST FOR summary: bigger target, no tap highlight or text select */
html body .nbn-plugin-wrapper.nbn-flow .nbn-plan-card .nbn-best-for-head,
html body .nbn-plugin-wrapper .nbn-plan-card .nbn-best-for-head,
html body .nbn-plans-display .nbn-plan-card .nbn-best-for-head {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    padding: 0.35rem 0 !important;
    margin: -0.35rem 0 !important;
}

html body .nbn-plan-card .nbn-best-for-head::after {
    transition: none !important;
}