/* ===================================================
   "Compare plans & credits" modal (#plansModal) — templates/blocks/plans_modal.html.
   The "Early Bird Plans Cards" design: hero band, Early-Bird/V2 + Monthly/Annual toggles,
   desktop plan grid, and a compressed mobile card stack with a "+N more" accordion.

   Self-contained overlay (driven by static/js/plans-modal.js), NOT a Bootstrap modal: it is
   shared between Bootstrap pages (pricing calculator on base.html) and V2 pages that load no
   Bootstrap at all (Plan & Usage on base_v2.html) — so the grid, the collapse, and the
   segmented toggles are all hand-rolled here. Hex values are deliberate: V2's base.css tokens
   are not available on the calculator page.
   =================================================== */

/* ---- Overlay + panel chrome (replaces Bootstrap's .modal/.modal-dialog machinery) ----
   Hidden by default; plans-modal.js toggles .open. The panel is centered, capped at the old
   modal-xl width, and scrolls INTERNALLY via .pm-scroll — the close button sits above the
   scroll region, pinned to the panel, so it never scrolls away. */
.pm-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 1080;
    padding: 1.5rem 1rem;
    background: rgba(20, 26, 21, 0.55);
}
.pm-overlay.open { display: flex; }
body.pm-modal-open { overflow: hidden; }
.pm-panel {
    position: relative;
    margin: auto;
    width: 100%; max-width: 1140px;
    max-height: calc(100vh - 3rem);
    display: flex; flex-direction: column;
    background: #ffffff;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(30, 38, 32, 0.28);
    animation: pmPanelIn .18s ease-out both;
}
@keyframes pmPanelIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.pm-scroll { overflow-y: auto; }
.pm-close {
    position: absolute; top: 12px; right: 13px; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: 0; border-radius: 50%; padding: 0;
    background: rgba(20, 26, 21, 0.28); color: rgba(255, 255, 255, 0.9);
    font-size: .85rem; line-height: 1; cursor: pointer;
}
.pm-close:hover, .pm-close:focus-visible { background: rgba(20, 26, 21, 0.45); color: #ffffff; }

/* ---- Launch-tied hero band ---- */
#plansModal .pm-hero {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding: 12px 56px 12px 24px;
    background: linear-gradient(135deg, #b45309, #ef6c00); color: #ffffff;
}
#plansModal .pm-hero-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
#plansModal .pm-hero-copy > i { font-size: clamp(20px, 2.4vw, 24px); flex-shrink: 0; }
#plansModal .pm-hero-title { font-size: clamp(15px, 1.8vw, 19px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
#plansModal .pm-hero-title strong { font-weight: 800; }
#plansModal .pm-hero-sub { font-size: clamp(12px, 1.3vw, 13.5px); opacity: .92; line-height: 1.4; margin-top: 2px; font-weight: 400; }
#plansModal .pm-hero-sub strong { font-weight: 700; }
#plansModal .pm-hero-chip {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .16); border-radius: 9px; padding: 6px 12px;
}
#plansModal .pm-hero-chip > i { font-size: 18px; opacity: .9; }
#plansModal .pm-hero-chip-kicker { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; opacity: .82; font-weight: 600; line-height: 1.15; }
#plansModal .pm-hero-chip-label { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.15; }

/* ---- Header: title + the two segmented toggles ---- */
#plansModal .pm-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px;
    padding: 18px 24px 8px;
}
#plansModal .pm-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: #1e2620; }
#plansModal .pm-toggles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#plansModal .pm-seg { display: inline-flex; background: #f4f6f3; border-radius: 8px; padding: 3px; gap: 2px; }
#plansModal .pm-seg { cursor: pointer; }  /* the whole control is a click target (plans-modal.js) */
#plansModal .pm-seg button {
    border: none; border-radius: 6px; padding: 6px 13px;
    font-size: 12px; font-weight: 500; font-family: inherit; line-height: 1.3;
    cursor: pointer; white-space: nowrap;
    background: transparent; color: #8a938b;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
#plansModal .pm-seg button.on {
    background: #ffffff; color: #1e2620; font-weight: 600;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .12);
}

/* ---- Desktop / tablet plan grid ---- */
#plansModal .pm-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    padding: 20px 24px 26px;
}
@media (min-width: 992px) {
    #plansModal .pm-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
#plansModal .pm-plan {
    position: relative;
    display: flex; flex-direction: column;
    background: #ffffff; border: 1px solid #dfe3de; border-radius: 12px;
    padding: 22px 18px 18px;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
#plansModal .pm-plan:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30, 38, 32, .14); }
#plansModal .pm-plan-featured {
    background: linear-gradient(160deg, #2d5a2e, #1f3f20);
    border-color: #2d5a2e; color: #ffffff;
    box-shadow: 0 16px 40px rgba(30, 38, 32, .28);
}
#plansModal .pm-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: #8bc34a; color: #1f3f20;
    padding: 4px 14px; border-radius: 20px;
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(30, 38, 32, .3);
}

#plansModal .pm-plan-head { text-align: center; }
#plansModal .pm-plan-head > i { font-size: 26px; color: #4e964f; }
#plansModal .pm-plan-featured .pm-plan-head > i { color: #a5d66a; }
#plansModal .pm-plan-name { font-size: 17px; font-weight: 800; letter-spacing: .02em; margin-top: 8px; text-transform: uppercase; }
#plansModal .pm-plan-tag { font-size: 12px; color: #8a938b; margin-top: 3px; }
#plansModal .pm-plan-featured .pm-plan-tag { color: rgba(255, 255, 255, .75); }

/* Fixed-height price block so the 4 cards' feature lists start on the same baseline whether
   the face is "$15" or "$1,947". */
#plansModal .pm-price-block {
    text-align: center; padding: 8px 0 2px; margin-top: 14px; height: 62px;
    display: flex; flex-direction: column; justify-content: center;
    border-top: 1px solid #ecefeb;
}
#plansModal .pm-plan-featured .pm-price-block { border-top-color: rgba(255, 255, 255, .15); }
#plansModal .pm-price-num {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 38px; font-weight: 600; letter-spacing: -0.02em; color: #1e2620;
}
#plansModal .pm-plan-featured .pm-price-num { color: #ffffff; }
#plansModal .pm-price-sfx { font-size: 14px; color: #8a938b; }
#plansModal .pm-plan-featured .pm-price-sfx { color: rgba(255, 255, 255, .7); }

/* ---- Feature rows (shared by desktop cards and the mobile stack) ---- */
#plansModal .pm-feats { display: flex; flex-direction: column; margin-top: 12px; flex: 1 1 auto; }
#plansModal .pm-feat { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.3; min-height: 31px; }
#plansModal .pm-feat > i { font-size: 15px; flex-shrink: 0; color: #4e964f; }
#plansModal .pm-plan-featured .pm-feat > i,
#plansModal .pm-mcard-featured .pm-feat > i { color: #a5d66a; }
#plansModal .pm-feat-off > i,
#plansModal .pm-feat-off > span { color: #8a938b; }
#plansModal .pm-feat-off > i { opacity: .6; }
#plansModal .pm-plan-featured .pm-feat-off > i, #plansModal .pm-plan-featured .pm-feat-off > span,
#plansModal .pm-mcard-featured .pm-feat-off > i, #plansModal .pm-mcard-featured .pm-feat-off > span { color: rgba(255, 255, 255, .45); opacity: 1; }
#plansModal .pm-feat-struck > span:first-of-type { text-decoration: line-through; }
#plansModal .pm-qty { margin-left: auto; font-weight: 700; font-size: 12px; white-space: nowrap; letter-spacing: -0.01em; }

/* ---- CTAs: solid (label swaps to "Let's Go" on hover), ghost, and the current-plan stub ---- */
#plansModal .pm-cta {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; margin-top: 20px; padding: 10px;
    border-radius: 6px; text-align: center; text-decoration: none;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35;
    white-space: nowrap;
}
#plansModal .pm-cta-solid {
    position: relative; overflow: hidden;
    background: #4e964f; border: 1px solid #4e964f; color: #ffffff;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#plansModal .pm-plan-featured .pm-cta-solid,
#plansModal .pm-mcard-featured .pm-cta-solid { background: #8bc34a; border-color: #8bc34a; color: #1f3f20; font-weight: 700; }
#plansModal .pm-cta-solid:hover, #plansModal .pm-cta-solid:focus-visible,
#plansModal .pm-plan-featured .pm-cta-solid:hover, #plansModal .pm-plan-featured .pm-cta-solid:focus-visible,
#plansModal .pm-mcard-featured .pm-cta-solid:hover, #plansModal .pm-mcard-featured .pm-cta-solid:focus-visible {
    background: #3d7a3e; border-color: #3d7a3e; color: #ffffff;
}
#plansModal .pm-cta-solid > i { font-size: 10px; position: relative; z-index: 1; }
/* Two stacked labels in a 1-label-tall window; hover slides "Let's Go" into view. */
#plansModal .pm-cta-lbl {
    position: relative; z-index: 1;
    display: inline-block; height: 16px; line-height: 16px; overflow: hidden; vertical-align: middle;
}
#plansModal .pm-cta-lbl > span { display: block; transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
#plansModal .pm-cta-solid:hover .pm-cta-lbl > span,
#plansModal .pm-cta-solid:focus-visible .pm-cta-lbl > span { transform: translateY(-16px); }
#plansModal .pm-cta-get { font-weight: 400; }
#plansModal .pm-plan-featured .pm-cta-get, #plansModal .pm-mcard-featured .pm-cta-get { font-weight: 500; }
#plansModal .pm-cta-plan {
    font-weight: 700;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
#plansModal .pm-cta-ghost { background: transparent; border: 1px solid #dfe3de; color: #3d7a3e; }
#plansModal .pm-cta-ghost:hover, #plansModal .pm-cta-ghost:focus-visible { background: #f2f8f2; border-color: #4e964f; color: #3d7a3e; }
#plansModal .pm-current {
    display: block; width: 100%; margin-top: 20px; padding: 10px;
    background: transparent; border: 1px solid #dfe3de; border-radius: 6px;
    color: #8a938b; text-align: center;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35;
    white-space: nowrap;
}
#plansModal .pm-mcard-featured .pm-current { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .75); }

/* ---- Mobile card stack (recommended plan first; marketing rows behind the accordion) ---- */
#plansModal .pm-stack { display: none; padding: 14px 16px 22px; }
#plansModal .pm-mcard {
    position: relative;
    background: #ffffff; border: 1px solid #dfe3de; border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(30, 38, 32, .06);
}
#plansModal .pm-mcard + .pm-mcard { margin-top: 12px; }
#plansModal .pm-mcard-featured {
    background: linear-gradient(160deg, #2d5a2e, #1f3f20);
    border-color: #2d5a2e; color: #ffffff;
    box-shadow: 0 12px 30px rgba(30, 38, 32, .24);
}
#plansModal .pm-badge-m { left: 14px; top: -9px; transform: none; padding: 3px 11px; font-size: 9px; }
#plansModal .pm-mhead { display: flex; align-items: center; gap: 12px; }
#plansModal .pm-micon { font-size: 22px; color: #4e964f; flex-shrink: 0; }
#plansModal .pm-mcard-featured .pm-micon { color: #a5d66a; }
#plansModal .pm-mtitle { flex: 1; min-width: 0; }
#plansModal .pm-mtitle .pm-plan-name { font-size: 15px; margin-top: 0; line-height: 1.1; }
#plansModal .pm-mtitle .pm-plan-tag { font-size: 11px; margin-top: 1px; }
#plansModal .pm-mcard-featured .pm-plan-tag { color: rgba(255, 255, 255, .7); }
#plansModal .pm-mprice { text-align: right; flex-shrink: 0; }
#plansModal .pm-mprice .pm-price-num { font-size: 26px; }
#plansModal .pm-mcard-featured .pm-price-num { color: #ffffff; }
#plansModal .pm-mprice .pm-price-sfx { font-size: 12px; }
#plansModal .pm-mcard-featured .pm-price-sfx { color: rgba(255, 255, 255, .7); }
#plansModal .pm-mfeats { margin-top: 10px; }
#plansModal .pm-mfeats .pm-feat { min-height: 0; padding: 5px 0; gap: 8px; }
#plansModal .pm-mfeats .pm-feat > i { font-size: 14px; }
/* Collapsible marketing rows: a 0fr->1fr grid-row tween (the animatable stand-in for
   height:auto), with the inner wrapper clipping overflow while the track grows/shrinks. */
#plansModal .pm-mextra {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
#plansModal .pm-mextra.open { grid-template-rows: 1fr; }
#plansModal .pm-mextra-inner { overflow: hidden; min-height: 0; }
#plansModal .pm-more {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; border: none; border-top: 1px dashed #dfe3de;
    margin-top: 8px; padding: 9px 0 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #3d7a3e; cursor: pointer; font-family: inherit;
}
#plansModal .pm-mcard-featured .pm-more { color: #a5d66a; border-top-color: rgba(255, 255, 255, .2); }
#plansModal .pm-more > i { font-size: 11px; transition: transform .2s ease; }
#plansModal .pm-more[aria-expanded="true"] > i { transform: rotate(180deg); }
#plansModal .pm-more .pm-more-close { display: none; }
#plansModal .pm-more[aria-expanded="true"] .pm-more-open { display: none; }
#plansModal .pm-more[aria-expanded="true"] .pm-more-close { display: inline; }
#plansModal .pm-mcard .pm-cta, #plansModal .pm-mcard .pm-current { margin-top: 12px; padding: 11px; }

/* ---- The desktop/mobile swap (Bootstrap's d-md-* equivalents, hand-rolled) ---- */
@media (max-width: 767.98px) {
    /* Full-screen takeover: the overlay's floating-panel padding goes away and the panel fills
       the viewport edge-to-edge (dvh so mobile browser chrome collapsing doesn't leave a gap),
       with the card chrome (radius/shadow) dropped since no backdrop remains visible. */
    .pm-overlay { padding: 0; }
    .pm-panel {
        max-width: none; height: 100dvh; max-height: none;
        border-radius: 0; box-shadow: none;
    }
    #plansModal .pm-grid { display: none; }
    #plansModal .pm-stack { display: block; }
    #plansModal .pm-hero { padding-right: 52px; }
    #plansModal .pm-head { padding: 14px 16px 6px; }
    #plansModal .pm-title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-panel { animation: none; }
    #plansModal .pm-plan { transition: none; }
    #plansModal .pm-plan:hover { transform: none; }
    #plansModal .pm-cta-lbl > span, #plansModal .pm-more > i { transition: none; }
    #plansModal .pm-mextra { transition: none; }
    #plansModal .pm-seg button { transition: none; }
}