/* =====================================================================
   coursematter — pricing page (Views/Home/Pricing.cshtml)
   Loaded after co-home.css and uses its tokens, buttons, top bar, FAQ and
   footer. Everything is scoped under .cmx-pricing.

   The one loud moment is the sale receipt in the hero: drag the course
   price and every line recomputes. The plan cards and comparison table
   stay deliberately plain and conventional so prices are easy to scan.
   ===================================================================== */

.cmx-pricing .visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.cmx-pricing .cmx-inline-link { color: var(--violet-ink) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- hero ---------- */
.cmx-price-hero { position: relative; padding: 56px 0 96px; }
.cmx-price-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(79,48,224,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(79,48,224,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 45% 70% at 75% 50%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 45% 70% at 75% 50%, #000 30%, transparent 80%);
}
.cmx-price-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.cmx-price-hero h1 { font-size: clamp(40px, 5vw, 70px); line-height: .98; font-weight: 700; letter-spacing: -0.04em; max-width: 12ch; text-wrap: balance; }
.cmx-price-hero .cmx-lede { font-size: 19px; margin-top: 24px !important; max-width: 31em; }
.cmx-price-hero .cmx-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.cmx-currency { display: inline-flex; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 999px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.cmx-currency a { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.cmx-currency a:hover { color: var(--ink); }
.cmx-currency a[aria-current] { background: var(--ink); color: #fff; }

/* ---------- the sale receipt ---------- */
.cmx-receipt {
    --tear: 10px;
    position: relative; max-width: 460px; justify-self: center; width: 100%;
    padding: 28px 30px calc(30px + var(--tear));
    background: #fff; color: var(--ink);
    border-radius: 14px 14px 0 0;
    transform: rotate(1.5deg);
    filter: drop-shadow(0 40px 50px rgba(28,22,70,.22)) drop-shadow(0 0 1px rgba(28,22,70,.25));
    /* torn-off bottom edge */
    -webkit-mask: radial-gradient(var(--tear) at 50% 100%, #0000 98%, #000) 50% / calc(2 * var(--tear)) 100% repeat-x;
    mask: radial-gradient(var(--tear) at 50% 100%, #0000 98%, #000) 50% / calc(2 * var(--tear)) 100% repeat-x;
}
.cmx-receipt-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1.5px dashed var(--line); }
.cmx-receipt-head img { height: 20px; width: auto; }
.cmx-receipt-head span { font-size: 14px; color: var(--muted); }

.cmx-receipt-slider { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 22px 0 10px; font-size: 15px; color: var(--ink-2); }
.cmx-receipt-slider output { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.cmx-receipt input[type="range"] {
    --fill: 10%;
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; margin: 0;
    background: linear-gradient(to right, var(--violet) 0 var(--fill), var(--wash) var(--fill) 100%);
    cursor: pointer;
}
.cmx-receipt input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 3px solid var(--violet); box-shadow: 0 4px 10px rgba(28,22,70,.25);
}
.cmx-receipt input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--violet); box-shadow: 0 4px 10px rgba(28,22,70,.25);
}
.cmx-receipt input[type="range"]:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 6px; }

.cmx-receipt-lines { margin: 22px 0 0; padding: 0; }
.cmx-receipt-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 15.5px; }
.cmx-receipt-lines dt { font-weight: 400; color: var(--ink-2); }
.cmx-receipt-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmx-receipt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 10px; padding-top: 16px; border-top: 1.5px dashed var(--line); }
.cmx-receipt-total span { font-size: 17px; font-weight: 600; }
.cmx-receipt-total strong { font-size: clamp(34px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.03em; color: var(--mint); font-variant-numeric: tabular-nums; }
.cmx-receipt-foot { margin-top: 14px !important; font-size: 14px; color: black !important; }

/* ---------- plan cards ---------- */
.cmx-plans { padding: 110px 0 40px; background: var(--wash); scroll-margin-top: 72px; }
.cmx-plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.cmx-plan-card { position: relative; display: flex; flex-direction: column; padding: 34px 32px 36px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cmx-plan-card h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.cmx-plan-for { margin-top: 8px !important; font-size: 16px; min-height: 3.2em; }
.cmx-plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 26px; }
.cmx-plan-price strong { font-size: clamp(44px, 4.4vw, 58px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cmx-plan-price span { font-size: 16px; color: var(--muted); }
.cmx-plan-was { margin-top: 10px !important; min-height: 1.6em; font-size: 15px; color: var(--muted) !important; display: flex; align-items: center; gap: 10px; }
.cmx-plan-was s { color: var(--muted); }
.cmx-plan-was em { font-style: normal; font-weight: 600; font-size: 13.5px; padding: 3px 10px; border-radius: 999px; background: #dff3ea; color: #0b6b52; }
.cmx-plan-card .cmx-btn { margin-top: 26px; width: 100%; }
.cmx-plan-card ul { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.cmx-plan-card li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; color: var(--ink); line-height: 1.4; }
.cmx-plan-card li .bi { color: var(--mint); flex: 0 0 auto; }

.cmx-plan-card.is-featured { background: linear-gradient(125deg, #5b3fc4 0%, #7a58d6 45%, #9370db 100%); box-shadow: 0 50px 80px -50px rgba(28,22,70,.8); }
.cmx-plan-card.is-featured h3, .cmx-plan-card.is-featured li, .cmx-plan-card.is-featured .cmx-plan-price strong { color: #fff; }
.cmx-plan-card.is-featured .cmx-plan-for { color: rgba(255,255,255,.85); }
.cmx-plan-card.is-featured .cmx-plan-price span, .cmx-plan-card.is-featured .cmx-plan-was, .cmx-plan-card.is-featured .cmx-plan-was s { color: rgba(255,255,255,.75) !important; }
.cmx-plan-card.is-featured .cmx-plan-was em { background: rgba(134,230,201,.16); color: #86e6c9; }
.cmx-plan-card.is-featured ul { border-top-color: rgba(255,255,255,.14); }
.cmx-plan-card.is-featured li .bi { color: #86e6c9; }
.cmx-plan-flag { position: absolute; top: 26px; right: 48px; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--violet); color: #fff; }

/* ---------- comparison table ---------- */
.cmx-compare { padding: 70px 0 30px; background: linear-gradient(to bottom, var(--wash) 0 90px, #fff 90px); scroll-margin-top: 72px; }
.cmx-compare .cmx-h2 { margin-bottom: 30px; margin-top: 50px; }
.cmx-compare-scroll { overflow-x: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); background: #fff; }
.cmx-compare-scroll:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 3px; }
.cmx-compare-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
.cmx-compare-table th, .cmx-compare-table td { padding: 16px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmx-compare-table thead th {
    position: sticky; top: 0; z-index: 1; background: #fff;
    font-size: 19px; font-weight: 700; color: var(--ink); padding-top: 22px; padding-bottom: 18px;
}
.cmx-compare-table thead th small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--muted); }
.cmx-compare-table thead th:first-child, .cmx-compare-table tbody th { width: 34%; }
.cmx-compare-table tbody th { font-weight: 600; color: var(--ink); }
.cmx-compare-table tbody th small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; color: var(--muted); line-height: 1.4; }
.cmx-compare-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmx-compare-table .is-featured { background: #f6f4ff; }
.cmx-compare-table thead th.is-featured { background: #f6f4ff; color: var(--violet-ink); box-shadow: inset 0 3px 0 var(--violet); }
.cmx-compare-group th { padding: 26px 22px 10px !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--violet-ink) !important; background: #fff !important; border-bottom-color: var(--line); }
.cmx-compare-table tbody:last-child tr:last-child th, .cmx-compare-table tbody:last-child tr:last-child td { border-bottom: 0; }
.cmx-yes { color: var(--mint); font-size: 18px; }
.cmx-no { color: #b9b6c8; }

/* ---------- closing band ---------- */
.cmx-pricing .cmx-contact { padding-top: 10px; }
.cmx-price-band { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px; border-radius: var(--r-lg); background: var(--violet); }
.cmx-price-band h2 { color: #fff !important; }
.cmx-price-band p { margin-top: 12px !important; color: #e4ddff !important; max-width: 32em; font-size: 17px; }
.cmx-price-band-ctas { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.cmx-price-band .cmx-btn { background: #fff; color: var(--violet-ink) !important; }
.cmx-price-band .cmx-btn:hover { background: var(--violet-soft); }
.cmx-price-band .cmx-btn.cmx-btn-line { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.55); }
.cmx-price-band .cmx-btn.cmx-btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
    .cmx-price-hero-grid { grid-template-columns: 1fr; gap: 56px; }
    .cmx-receipt { justify-self: start; }
    .cmx-plan-cards { grid-template-columns: 1fr; max-width: 560px; }
    .cmx-plan-for { min-height: 0; }
    .cmx-price-band { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}
@media (max-width: 640px) {
    .cmx-price-hero { padding: 32px 0 72px; }
    .cmx-price-hero .cmx-lede { font-size: 18px; }
    .cmx-price-hero .cmx-hero-ctas .cmx-btn { flex: 1 1 100%; }
    .cmx-receipt { transform: none; padding: 24px 22px calc(26px + var(--tear)); }
    .cmx-receipt-lines div { font-size: 14.5px; }
    .cmx-plans { padding-top: 80px; }
    .cmx-plan-card { padding: 28px 24px 30px; }
    .cmx-plan-flag { right: 40px; top: 22px; }
    .cmx-price-band-ctas .cmx-btn { flex: 1 1 100%; }
    .cmx-receipt-total span { white-space: nowrap; }
    /* on phones the table scrolls sideways; keep the feature names pinned */
    .cmx-compare-table { min-width: 640px; }
    .cmx-compare-table tbody tr:not(.cmx-compare-group) th, .cmx-compare-table thead th:first-child {
        position: sticky; left: 0; z-index: 2; width: 180px; min-width: 180px; background: #fff;
        box-shadow: 1px 0 0 var(--line);
    }
    .cmx-compare-table th, .cmx-compare-table td { padding: 14px 16px; }
    .cmx-compare-group th span { position: sticky; left: 16px; }
}

/* featured card is medium purple now: the violet button would sink into it, so it goes white */
.cmx-plan-card.is-featured .cmx-btn { background: #fff !important; color: #4f30e0 !important; box-shadow: 0 14px 28px -16px rgba(40,20,110,.7); }
.cmx-plan-card.is-featured .cmx-btn:hover { background: #f1ecff !important; }
.cmx-plan-card.is-featured .cmx-plan-flag { background: #fff; color: #4f30e0; }