/* ============================================================================
   Labocine — PLANS (/subscribe/plans), revamped 2026-07 in the homepage's
   cinematic black-OTT design language. The page renders on falconLayout
   (theme.css + Bootstrap + white navbar), so this sheet does two jobs:
   1. page-level dark restyle of the layout chrome (body/nav/footer) — safe
      because this file is only linked by plans.hbs;
   2. a `.px`-scoped system for the content. Every Bootstrap id/class the
      page's jQuery flow depends on (#loader fade, #plan-switch, the four
      buttons, #loginModal, #pro-lead-modal, #accordionExample collapse) is
      kept — only restyled. !important is used where theme.css utilities or
      the FAQ's inline styles would otherwise win.
   ============================================================================ */

html.px-page, body.px-page { background: #07070a !important; }
body.px-page .main { background: transparent; }

/* ── layout chrome: dark translucent navbar (functionality untouched) ─────── */
body.px-page .navbar.bg-white {
    background: rgba(7, 7, 10, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.px-page .navbar .nav-link { color: #e8e8ee !important; }
body.px-page .navbar .nav-link:hover { color: #fff !important; }
body.px-page .navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); }
body.px-page .navbar-light .navbar-toggler-icon { filter: invert(1); }
body.px-page .navbar .dropdown-menu { background: #131318; border: 1px solid rgba(255, 255, 255, 0.12); }
body.px-page .navbar .dropdown-menu .bg-white { background-color: #131318 !important; }
body.px-page .navbar .dropdown-item { color: #e8e8ee; }
body.px-page .navbar .dropdown-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
body.px-page .navbar .dropdown-divider { border-color: rgba(255, 255, 255, 0.1); }
body.px-page footer.bg-black { border-top: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════ SCOPE + TOKENS */
.px {
    --px-bg: #07070a;
    --px-surface: rgba(19, 19, 24, 0.72);
    --px-border: rgba(255, 255, 255, 0.1);
    --px-border-strong: rgba(255, 255, 255, 0.2);
    --px-text: #f3f3f5;
    --px-muted: #b9b9c4;
    --px-muted-2: #8b8b96;
    --px-red: #f40000;
    --px-red-hover: #ff2b2b;
    --px-green: #34e08a;
    --px-radius: 18px;

    position: relative;
    color: var(--px-text);
}
/* promote content above the fixed backdrop — but NEVER touch the backdrop
   itself (a `> *` promotion rule once collapsed the canvas to 0 height) */
.px > *:not(.px__bg) { position: relative; z-index: 1; }

/* ── fixed particle-field backdrop (Three.js, progressively enhanced) ─────── */
.px__bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.px__aurora {
    position: absolute; inset: -12%;
    background:
        radial-gradient(38% 46% at 24% 30%, rgba(244, 0, 0, 0.14), transparent 70%),
        radial-gradient(30% 42% at 78% 22%, rgba(90, 96, 112, 0.22), transparent 70%),
        radial-gradient(46% 52% at 60% 82%, rgba(52, 224, 138, 0.06), transparent 72%);
    filter: blur(30px);
    animation: px-aurora 26s ease-in-out infinite alternate;
}
@keyframes px-aurora {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}
.px__bg #hx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s ease 0.2s; }
html.hx-webgl .px__bg #hx-canvas { opacity: 0.8; }
.px__scrim {
    position: absolute; inset: 0;
    background:
        radial-gradient(70% 55% at 50% 46%, rgba(7, 7, 10, 0.55), rgba(7, 7, 10, 0.78) 70%, rgba(7, 7, 10, 0.9)),
        linear-gradient(180deg, rgba(7, 7, 10, 0.25), transparent 22%, transparent 70%, rgba(7, 7, 10, 0.8));
}

/* ── loader (same #loader/#your-page fade mechanics) ──────────────────────── */
.px #loader { background: #07070a; position: relative; }
.px .loader {
    position: absolute; left: 50%; top: 50%; z-index: 1;
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    border: 3px solid rgba(255, 255, 255, 0.12); border-radius: 50%;
    border-top-color: var(--px-red);
    animation: spin 0.9s linear infinite;
}
.px .loader::after {
    content: ""; position: absolute; inset: 10px; border-radius: 50%;
    border: 3px solid transparent; border-bottom-color: rgba(52, 224, 138, 0.7);
    animation: spin 1.4s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════ CONTENT SHELL */
.px #your-page { background: transparent; padding: 30px 0 90px; }
.px #your-page > .card {
    background: transparent; border: 0; box-shadow: none; color: inherit; margin: 0;
}
.px #your-page > .card > .card-body {
    background: transparent; padding: clamp(16px, 3vw, 40px);
    max-width: 1520px; width: 100%; margin: 0 auto;
}
.px .row, .px .col-12, .px .col-lg-8, .px .col-md { background: transparent; }
/* let the three plan cards breathe wider than Bootstrap's col-lg-8 */
.px #your-page .col-12.col-lg-8 { flex: 0 0 100%; max-width: 1380px; margin: 0 auto; }

/* ── hero header: eyebrow + kinetic title + switch ─────────────────────────── */
.px .px-eyebrow {
    font-size: 0.8rem !important; font-weight: 700; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--px-muted-2) !important;
    margin: 26px 0 14px;
}
.px .px-title {
    font-size: clamp(2.3rem, 5vw, 4rem) !important; line-height: 1.05 !important;
    font-weight: 900 !important; text-transform: uppercase; letter-spacing: -0.015em;
    color: #fff !important; margin-bottom: 20px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85);
}
.px .px-title .px-w {
    display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(1.5deg);
    animation: px-word 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}
.px .px-title .px-w:nth-child(1) { animation-delay: 0.1s; }
.px .px-title .px-w:nth-child(2) { animation-delay: 0.2s; }
.px .px-title .px-w:nth-child(3) { animation-delay: 0.32s; }
@keyframes px-word { to { opacity: 1; transform: none; } }
.px .px-title .font-italic {
    font-style: normal !important; font-weight: 900 !important;
    color: var(--px-red) !important; text-shadow: 0 0 38px rgba(244, 0, 0, 0.4);
}

/* the Monthly/Yearly switch (Bootstrap custom-switch mechanics preserved) */
.px .d-flex.flex-center { display: flex; align-items: center; justify-content: center; gap: 4px; }
.px .d-flex.flex-center label { color: var(--px-muted); font-size: 0.95rem; font-weight: 600; margin-bottom: 0; }
.px .custom-switch { padding-left: 2.6rem; min-height: 1.4rem; }
.px .custom-switch .custom-control-label::before {
    left: -2.6rem; top: 0.05rem; width: 2.1rem; height: 1.2rem; border-radius: 999px;
    background-color: #26262e; border: 1px solid var(--px-border-strong); box-shadow: none !important;
}
.px .custom-switch .custom-control-label::after {
    left: calc(-2.6rem + 3px); top: calc(0.05rem + 3px); width: calc(1.2rem - 6px); height: calc(1.2rem - 6px);
    border-radius: 50%; background-color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.25s ease;
}
.px .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--px-red); border-color: var(--px-red);
}
.px .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(0.9rem); background-color: #fff;
}
.px .custom-control-label { color: var(--px-muted); font-weight: 600; cursor: pointer; }

/* ════════════════════════════════════════════════════════ PLAN CARDS */
.px .border.rounded-soft {
    background: var(--px-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--px-radius) !important;
    overflow: visible !important;          /* the featured ribbon peeks out */
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    position: relative;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.18s ease-out, border-color 0.25s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.px .border.rounded-soft:hover {
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
/* cursor glare */
.px .border.rounded-soft::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(55% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.07), transparent 65%);
    opacity: 0; transition: opacity 0.3s ease; z-index: 0;
}
.px .border.rounded-soft:hover::before { opacity: 1; }
/* assemble on scroll (JS-gated; plan cards only — IO reporting inside the
   clipped/backdrop-filtered accordion proved unreliable, FAQ stays visible) */
html.px-anim .px .border.rounded-soft { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.px-anim .px .border.rounded-soft.is-in { opacity: 1; transform: none; }
html.px-anim .px .col-md:nth-child(2) .border.rounded-soft { transition-delay: 0.12s; }
html.px-anim .px .col-md:nth-child(3) .border.rounded-soft { transition-delay: 0.24s; }

/* featured (Personal) — red ring + ribbon */
.px .px-featured {
    background: linear-gradient(180deg, rgba(244, 0, 0, 0.09), rgba(244, 0, 0, 0.02) 55%), var(--px-surface) !important;
    border-color: rgba(244, 0, 0, 0.65) !important;
    box-shadow: 0 18px 44px -20px rgba(244, 0, 0, 0.45);
}
.px .px-featured:hover { border-color: var(--px-red) !important; }
/* NOTE: kept fully inside the card — Chromium clips pseudo-elements of a
   backdrop-filtered element at its border-box, so a half-out ribbon loses
   its top half */
.px .px-featured::after {
    content: "Most popular"; position: absolute; top: 12px; right: 12px; z-index: 2;
    padding: 4px 12px; border-radius: 999px;
    background: var(--px-red); color: #fff;
    font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    box-shadow: 0 8px 20px -8px rgba(244, 0, 0, 0.8);
}

/* card top: name + price + blurb */
.px .border.rounded-soft > .d-flex { position: relative; z-index: 1; }
.px .text-dark { color: var(--px-text) !important; }
.px .text-800 { color: var(--px-muted) !important; }
.px h3.fs-5 { font-size: 0.95rem !important; font-weight: 800 !important; letter-spacing: 0.14em; text-transform: uppercase; color: #fff !important; }
.px h3.fs-5 .fs--1 { letter-spacing: 0; text-transform: none; font-weight: 400 !important; }
.px .border.rounded-soft h2 { color: #fff !important; margin: 6px 0 4px; }
.px .border.rounded-soft h2 .fs-3 { font-size: 2.5rem !important; font-weight: 900 !important; line-height: 1; }
.px .border.rounded-soft h2 sup { font-size: 1.1rem !important; color: var(--px-muted); top: -1em; }
.px .border.rounded-soft h2 .fs--2 { color: var(--px-muted-2); font-size: 0.85rem !important; }
.px .border.rounded-soft h6 { color: var(--px-muted-2) !important; font-weight: 400 !important; }
/* price pop when the interval switch flips */
.px .px-pulse { animation: px-pulse 0.55s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes px-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.16); text-shadow: 0 0 26px rgba(244, 0, 0, 0.75); }
    100% { transform: scale(1); }
}
/* the paper-plane illustration → soft white silhouette */
.px .border.rounded-soft img[src*="illustrations"] {
    filter: brightness(0) invert(1); opacity: 0.4;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.px .border.rounded-soft:hover img[src*="illustrations"] { opacity: 0.75; transform: translateY(-3px) rotate(-4deg); }

/* feature list + badges */
.px .bg-light { background: rgba(255, 255, 255, 0.03) !important; border-radius: 0 0 var(--px-radius) var(--px-radius); position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.px .bg-light .list-unstyled { flex: 1; }
.px .border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
.px .list-unstyled li { font-size: 0.88rem; color: var(--px-muted); line-height: 1.55; }
.px .list-unstyled li strong, .px .list-unstyled li .font-weight-semi-bold { color: #fff; }
.px .list-unstyled .fa-check { color: var(--px-green); margin-right: 4px; }
.px .badge-soft-primary { background: rgba(52, 224, 138, 0.14); color: var(--px-green); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.66rem; padding: 5px 12px; }

/* ── buttons (ids + delegated jQuery clicks preserved) ─────────────────────── */
.px .btn { border-radius: 999px; font-weight: 700; padding: 0.7rem 1.4rem; transition: background 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease; }
.px .btn-primary {
    background: var(--px-red) !important; border-color: var(--px-red) !important; color: #fff !important;
    box-shadow: 0 14px 34px -14px rgba(244, 0, 0, 0.65);
}
.px .btn-primary:hover, .px .btn-primary:focus {
    background: var(--px-red-hover) !important; border-color: var(--px-red-hover) !important; color: #fff !important;
    transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(244, 0, 0, 0.8);
}
.px .btn-outline-dark {
    background: transparent !important; border: 1px solid var(--px-border-strong) !important; color: var(--px-text) !important;
}
.px .btn-outline-dark:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; transform: translateY(-2px); }
.px .btn:active { transform: translateY(0) scale(0.98); }

/* ── links inside content ──────────────────────────────────────────────────── */
.px a:not(.btn):not(.nav-link):not(.dropdown-item) { color: #fff; border-bottom: 1px solid rgba(244, 0, 0, 0.5); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
.px a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--px-red-hover); border-color: var(--px-red-hover); }

/* ════════════════════════════════════════════════════════ MODALS
   (Bootstrap modal mechanics untouched — dark glass restyle only) */
.px .modal-content {
    background: #131318; color: var(--px-text);
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--px-radius);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}
.px .modal-header { border-bottom: 1px solid var(--px-border); }
.px .modal-title { color: #fff; font-weight: 800; }
.px .modal-body label { color: var(--px-muted); font-size: 0.82rem; font-weight: 600; }
.px .modal-body h5 { color: #fff !important; }
.px .modal-body hr { border-color: var(--px-border); }
.px .form-control {
    background: rgba(255, 255, 255, 0.045); color: var(--px-text);
    border: 1px solid var(--px-border-strong); border-radius: 11px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.px .form-control::placeholder { color: var(--px-muted-2); }
.px .form-control:focus {
    background: rgba(255, 255, 255, 0.07); color: #fff;
    border-color: rgba(244, 0, 0, 0.75); box-shadow: 0 0 0 4px rgba(244, 0, 0, 0.13);
}
.px .btn-outline-google-plus, .px .btn-outline-facebook {
    border-radius: 999px; color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--px-border-strong) !important;
}
.px .btn-outline-google-plus:hover, .px .btn-outline-facebook:hover { background: rgba(255, 255, 255, 0.12) !important; }

/* ════════════════════════════════════════════════════════ FAQ
   (collapse mechanics + ids untouched; !important beats the inline styles)
   Redesigned as a two-column grid of numbered glass tiles. With
   data-parent auto-close only one answer is ever open — and the open
   tile expands to span BOTH columns for a comfortable reading measure. */
.px #your-page > .card > .card-header {
    background: transparent !important; border: 0 !important; padding-top: 40px;
}
.px #your-page > .card > .card-header h4 {
    color: #fff !important; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em;
}
/* red kicker line under the section title */
.px #your-page > .card > .card-header h4::after {
    content: ""; display: block; width: 54px; height: 3px; margin: 14px auto 0;
    border-radius: 3px; background: var(--px-red);
    box-shadow: 0 0 18px rgba(244, 0, 0, 0.6);
}
.px .accordion {
    border: 0 !important; border-radius: 0 !important;
    overflow: visible; background: transparent;
    max-width: 1380px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
.px .accordion > .card {
    background: var(--px-surface) !important; box-shadow: none !important;
    border: 1px solid var(--px-border) !important; border-radius: 14px !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    margin: 0 !important; padding-bottom: 0 !important; overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.px .accordion > .card:hover { border-color: rgba(255, 255, 255, 0.28) !important; }
/* the open tile takes the full row (kept wide while the close animates) */
.px .accordion > .card:has(.card-header button:not(.collapsed)),
.px .accordion > .card:has(.collapsing) {
    grid-column: 1 / -1;
    border-color: rgba(244, 0, 0, 0.55) !important;
    box-shadow: 0 22px 50px -24px rgba(244, 0, 0, 0.35);
}
.px .accordion .card-header { background: transparent !important; border: 0 !important; padding: 0 !important; }
.px .accordion .card-header button {
    display: flex; align-items: center; gap: 14px; width: 100%;
    color: #fff !important; background: transparent; box-shadow: none !important;
    padding: 16px 18px !important; border: 0;
    text-decoration: none !important; transition: color 0.2s ease;
}
.px .accordion .card-header button .text-900,
.px .accordion .card-header button .text-sans-serif,
.px .accordion .font-weight-medium { color: inherit !important; font-size: 0.98rem; order: 1; flex: 1; text-align: left; }
.px .accordion .card-header button:hover { color: var(--px-red-hover) !important; }
.px .accordion .accordion-icon {
    order: 2; flex: none; margin: 0 0 0 auto !important; width: 9px;
    color: var(--px-red); transition: transform 0.25s ease;
}
.px .accordion .card-header button:not(.collapsed) .accordion-icon { transform: rotate(90deg); }
.px .accordion .card-body { background: transparent !important; color: var(--px-muted); padding: 2px 18px 20px !important; }
.px .accordion .pl-4 {
    color: var(--px-muted); font-size: 0.94rem; line-height: 1.8;
    max-width: 78ch; padding-left: 16px !important;
    border-left: 2px solid rgba(244, 0, 0, 0.35);
}
.px .accordion .pl-4 strong { color: #fff; }

/* ── footer clearance: the fixed field shows softly behind everything ─────── */
.px #your-page::after { content: none; }

/* ════════════════════════════════════════ TOUCH DEVICES — SCROLL FOCUS
   No hover on mobile: cards light up + a sheen sweeps across them as
   they cross the center band of the screen (html.px-touch + .is-focus
   set by JS on hover-less devices only). */
@media (hover: none) {
    /* the cursor-glare layer becomes a diagonal sheen band */
    .px .border.rounded-soft::before {
        background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.09) 48%, transparent 64%);
        background-size: 250% 100%; background-position: 130% 0;
    }
}
html.px-touch .px .border.rounded-soft { transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; }
html.px-touch .px .border.rounded-soft.is-focus {
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-4px);
    box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.9);
}
html.px-touch .px .px-featured.is-focus {
    border-color: var(--px-red) !important;
    box-shadow: 0 26px 60px -24px rgba(244, 0, 0, 0.5);
}
html.px-touch .px .border.rounded-soft.is-focus::before { opacity: 1; animation: px-shine 1.1s ease forwards; }
@keyframes px-shine { to { background-position: -80% 0; } }
html.px-touch .px .border.rounded-soft.is-focus h2 { text-shadow: 0 0 26px rgba(244, 0, 0, 0.45); }
/* the plan CTA pulses while centered on screen */
html.px-touch .px .btn-primary.is-focus { animation: px-cta-pulse 1.9s ease-in-out infinite; }
@keyframes px-cta-pulse {
    0%, 100% { box-shadow: 0 14px 34px -14px rgba(244, 0, 0, 0.65); }
    50% { box-shadow: 0 16px 44px -10px rgba(244, 0, 0, 0.95), 0 0 0 7px rgba(244, 0, 0, 0.12); }
}

/* ════════════════════════════════════════════════════════ RESPONSIVE */
@media (max-width: 991px) {
    .px .border.rounded-soft { margin-bottom: 18px !important; height: auto; }
    .px #your-page { padding-top: 12px; }
}
@media (max-width: 900px) {
    .px .accordion { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .px .px-eyebrow { margin-top: 10px; }
    .px #your-page > .card > .card-body { padding: 14px; }
    .px .accordion .card-header button { padding: 13px 14px !important; gap: 10px; }
    /* a comfortable thumb target for the interval switch */
    .px .d-flex.flex-center { transform: scale(1.12); margin: 6px 0 10px; }
}

/* ════════════════════════════════════════════════════════ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .px__aurora { animation: none; }
    .px .px-title .px-w { animation: px-word 0.01s forwards; }
    .px .border.rounded-soft { transform: none; transition: none; }
    .px .px-pulse { animation: none; }
    .px .loader { animation: spin 1.6s linear infinite; }
    .px .loader::after { animation: none; }
}