/*
 * Connecter pricing page — interim indigo reskin (page-scoped).
 * Loaded LAST in serversubscriptions.htm; all rules scoped under body.cnnctr-pricing
 * so nothing leaks to other pages. Removable when the full redesign lands.
 */
:root {
    --dc-indigo: #0d0a4c;
    --dc-green: #00FF8C;
}

/* marker: confirms the sheet is wired up (asserted by e2e) */
body.cnnctr-pricing { --dc-pricing-loaded: 1; }

/* ── Page background: indigo wave, scoped to the plans section ONLY ───────────
   The wave lives on .section-dark-plans (not the whole page body). It fades to
   white at the bottom so it blends into the white content that follows (client
   logos, support-features table, FAQ), keeping those sections opaque white.
   NOTE: an earlier variant promoted this to a page-wide fixed body background
   (with translucent white blocks) so the curves showed through the whole page;
   that was reverted on request — the lower sections must stay solid white. */
body.cnnctr-pricing .subscriptions-page .section-dark-plans,
body.cnnctr-pricing.subscriptions-page .section-dark-plans {
    background-color: #0a0a3a;
    background-image: url(../../../img/cnnctr/hero-bg-wave.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

/* ── Plan cards: frosted glass (white @10% + blur) over the indigo bg ─────── */
body.cnnctr-pricing.subscriptions-page-v2 .section-subscriptions-plans .plan,
body.cnnctr-pricing.subscriptions-page-v2 .section-subscriptions-plans .plan.plan-free {
    background-color: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
}

/* ── Tab nav: hover matches selected (white); was coral #f87a6a ───────────── */
body.cnnctr-pricing .subscriptions-tabs .nav-tabs li a:hover,
body.cnnctr-pricing .subscriptions-tabs .nav-tabs li a:focus {
    color: #fff;
    border-top-color: #fff;
    border-bottom-color: #fff;
}

/* ── Plan-details / prepaid / billing dividers: white (was #1a1f26) ───────── */
body.cnnctr-pricing .section-subscriptions-plans .plan-info > div {
    border-top-color: rgba(255, 255, 255, 0.3);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}
body.cnnctr-pricing .section-subscriptions-plans .plan-info > div.plan-info-bottom {
    border-top: none;
    border-bottom: none;
}
/* Tabbed "Plan Details and Billing" + "Prepaid Balance" views: every row inside
   .plan-info draws its own dividers via a grouped rule in subscriptions-v2.css
   (.plan-details, .plan-team, .plan-info-bottom, .payment-details-row — 0,4,0
   specificity) which outranks the plan-card rule above and kept the lines dark
   (#1a1f26). The rows overlap by -2px, so the CREATE TEAM row (.plan-team) top
   border rendered over the .plan-details bottom border — fixing only .plan-details
   left the lower lines dark. Mirror the full group with a higher-specificity
   selector so all horizontal lines on both tabs read white. */
body.cnnctr-pricing.subscriptions-page-v2 .subscriptions-tabs .plan-info .plan-details,
body.cnnctr-pricing.subscriptions-page-v2 .subscriptions-tabs .plan-info .plan-team,
body.cnnctr-pricing.subscriptions-page-v2 .subscriptions-tabs .plan-info .plan-info-bottom,
body.cnnctr-pricing.subscriptions-page-v2 .subscriptions-tabs .plan-info .payment-details-row {
    border-top-color: rgba(255, 255, 255, 0.3);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* ── Basic card: keep title + single-user icon centered & inline ──────────── */
body.cnnctr-pricing .section-subscriptions-plans .plan-free .plan-top {
    text-align: center;
}
body.cnnctr-pricing .section-subscriptions-plans .plan-name .plan-name-icon {
    vertical-align: middle;
    margin-left: 6px;
}

/* ── Paid cards: user icon inline after the title ─────────────────────────── */
body.cnnctr-pricing .section-subscriptions-plans .plan .plan-name img {
    vertical-align: middle;
    margin-left: 6px;
    margin-top: 0;
}

/* ==========================================================================
   Connecter Suite footer (Subscriptions / pricing page)
   Subscriptions.php now renders the shared `suite_footer` block (variant:'suite')
   as `<div class="footer-suite">` inside the shared `<footer class="dl-footer">`.
   This gives the pricing page the same blue Suite footer as the desktop-app page
   (see download-redesign.css), scoped to body.cnnctr-pricing so it overrides the
   legacy dark `footer{background:#222c36}` rules in serversubscriptions/style.css.
   Tokens are hardcoded — the pricing body has no `.dc-redesign` scope, and adding
   it could shift other `var(--dc-*)` fallbacks on the page.
   ========================================================================== */
body.cnnctr-pricing .dl-footer {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 0;                 /* was -160px base / +180px .subscriptions-page */
    min-height: 0;
    padding: 64px 48px 120px;
    background: url(../../../img/cnnctr/download/footer-bg.png) no-repeat center center;
    background-size: cover;
    color: #cfd6ee;                /* was legacy salmon #f17767 */
}

/* Large faint "Connecter" wordmark clipped along the bottom (CSS-only, matches
   the desktop-app suite footer). */
body.cnnctr-pricing .dl-footer::after {
    content: "Connecter";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.18em;
    z-index: 0;
    text-align: center;
    font-family: "Rubik", "LINE Seed JP", sans-serif;
    font-weight: 700;
    font-size: 22vw;
    line-height: 1;
    color: #fff;
    opacity: .06;
    pointer-events: none;
    user-select: none;
}

body.cnnctr-pricing .footer-suite {
    position: relative;
    z-index: 1;                    /* above the ::after watermark */
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 32px;
    row-gap: 28px;
}

body.cnnctr-pricing .footer-suite .fs-logo-link { display: inline-block; justify-self: start; }
body.cnnctr-pricing .footer-suite .fs-logo { height: 72px; width: auto; display: block; }

body.cnnctr-pricing .footer-suite .fs-links,
body.cnnctr-pricing .footer-suite .fs-social {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Reset the legacy `footer ul li{border-left:1px solid #fff;padding:0 10px}`
   pipe separators from serversubscriptions/style.css. */
body.cnnctr-pricing .footer-suite .fs-links li,
body.cnnctr-pricing .footer-suite .fs-social li {
    border: 0;
    padding: 0;
    margin: 0;
}

body.cnnctr-pricing .footer-suite .fs-divider {
    grid-column: 1 / -1;
    height: 1px;
    border: 0;
    margin: 0;
    background: rgba(255, 255, 255, .15);
}

body.cnnctr-pricing .footer-suite .fs-links a {
    font-family: "LINE Seed JP", "Nunito Sans", Arial, sans-serif;
    color: #fff;
    opacity: .9;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
body.cnnctr-pricing .footer-suite .fs-links a:hover,
body.cnnctr-pricing .footer-suite .fs-links a:focus { opacity: 1; }

body.cnnctr-pricing .footer-suite .fs-copyright {
    font-family: "LINE Seed JP", "Nunito Sans", Arial, sans-serif;
    color: #cfd6ee;
    font-size: 13px;
    font-weight: 400;
}

body.cnnctr-pricing .footer-suite .fs-social img {
    height: 24px;
    width: auto;
    display: block;
    /* Icons are inline-extracted SVG (fill=currentColor) → render black as <img>;
       whiten uniformly for the blue bg. MANDATORY. */
    filter: brightness(0) invert(1);
}

/* Mobile: single column, centered, doubled group gap, divider full-width. */
@media screen and (max-width: 900px) {
    body.cnnctr-pricing .dl-footer { padding: 48px 20px 96px; }
    body.cnnctr-pricing .footer-suite {
        grid-template-columns: 1fr;
        row-gap: 40px;
        text-align: center;
    }
    body.cnnctr-pricing .footer-suite .fs-logo-link,
    body.cnnctr-pricing .footer-suite .fs-copyright,
    body.cnnctr-pricing .footer-suite .fs-links,
    body.cnnctr-pricing .footer-suite .fs-social {
        justify-self: center;
    }
    body.cnnctr-pricing .footer-suite .fs-links,
    body.cnnctr-pricing .footer-suite .fs-social {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
}

@media screen and (max-width: 480px) {
    body.cnnctr-pricing .dl-footer { padding: 40px 16px 72px; }
    body.cnnctr-pricing .footer-suite .fs-logo { height: 60px; }
    body.cnnctr-pricing .footer-suite .fs-social { gap: 18px; }
    body.cnnctr-pricing .footer-suite .fs-social a { display: inline-flex; padding: 6px; margin: -6px; }
}

/* ── "All paid plans also come with" icons: brand blue #437DBD ──────────────
   The more_1..7.svg files now carry their own fill="#437DBD". Neutralise the
   legacy orange tint filter from serversubscriptions/style.css so the SVGs'
   own colour renders. */
body.cnnctr-pricing .section-benefits .list-benefits li img {
    filter: none;
}