/* ==========================================================================
   mailkoo — Lifetime deal page
   Loads after variables.css + marketing.css + marketing-pricing.css
   (it reuses the plan card, matrix and cell-state primitives).
   Scoped to body.mc-page-lifetime.
   ========================================================================== */

/* ---------- Page accent ----------
   The page runs on the brand palette, not a separate "deal" colour.

   An earlier version used amber to signal urgency. It did that job, but it
   read as a different company's page — and on a lifetime purchase, where the
   entire question is "do I trust these people with one large payment", looking
   like your own product matters more than looking like a sale. Urgency is
   carried by the countdown, the price anchor and the copy instead.

   --primary-* rather than --color-teal: the seven [data-color-scheme] palettes
   re-tint --color-teal, so a signed-in customer carrying a custom scheme would
   otherwise see this page in their accent rather than the brand's. */

body.mc-page-lifetime {
    --mcl-accent: var(--primary-600);
    --mcl-accent-soft: var(--primary-400);
    --mcl-accent-bg: color-mix(in srgb, var(--primary-600) 10%, transparent);
    --mcl-accent-brd: color-mix(in srgb, var(--primary-600) 28%, transparent);
    --mcl-ltd-sweep: linear-gradient(120deg, var(--primary-400) 0%, var(--primary-600) 55%, var(--primary-700) 100%);
}

/* On the dark hero panel the 600 shade is too close to the background to read
   as an accent, so the lighter end of the ramp takes over there. */
.mcl-oncontrast {
    --mcl-accent: var(--primary-400);
    --mcl-accent-bg: color-mix(in srgb, var(--primary-400) 16%, transparent);
    --mcl-accent-brd: color-mix(in srgb, var(--primary-400) 40%, transparent);
    --mcl-ltd-sweep: linear-gradient(120deg, #C5B1FF 0%, var(--primary-400) 60%, var(--primary-500) 100%);
}

/* ---------- Sticky offer bar ---------- */

.mcl-offerbar {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-dropdown) + 10);
    background: var(--gray-950);
    color: #F5F7FA;
    font-size: var(--text-sm);
}
.mcl-offerbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-6);
    text-align: center;
}
.mcl-offerbar strong { color: var(--mcl-accent); }

/* Fixed-width digit cells so the countdown does not jitter every second and
   shove the surrounding text sideways. */
.mcl-countdown {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-bold);
}
.mcl-countdown-cell { display: inline-flex; flex-direction: column; align-items: center; }
.mcl-countdown-unit { min-width: 2.4ch; display: inline-block; text-align: center; line-height: 1.1; }
.mcl-countdown-tag {
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    opacity: .6;
    letter-spacing: var(--tracking-wide);
}
.mcl-countdown-sep { opacity: .4; align-self: center; }

/* Inline in the offer bar: digits only, unit letters suppressed. */
.mcl-countdown.is-sm .mcl-countdown-cell { flex-direction: row; align-items: baseline; gap: 1px; }
.mcl-countdown.is-sm .mcl-countdown-tag { font-size: inherit; opacity: .55; }
.mcl-countdown.is-sm .mcl-countdown-sep { align-self: baseline; }

.mcl-countdown.is-md { font-size: var(--text-2xl); }
.mcl-countdown.is-lg { font-size: clamp(2rem, 6vw, var(--text-5xl)); letter-spacing: var(--tracking-tight); }
.mcl-countdown.is-lg .mcl-countdown-tag,
.mcl-countdown.is-md .mcl-countdown-tag { font-size: var(--text-xs); }

/* The hero's large timer. Its own bordered panel so an expired deadline can
   remove the whole block without leaving a gap in the hero's rhythm. */
.mcl-hero-countdown {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-8);
    margin-bottom: var(--space-7);
    border: 1px solid color-mix(in srgb, var(--mcl-accent) 40%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--mcl-accent) 10%, transparent);
    color: var(--mcl-accent);
}
.mcl-hero-countdown-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    opacity: .85;
}
.mcl-hero-countdown.is-compact {
    margin: var(--space-5) 0;
    padding: var(--space-3) var(--space-6);
}

/* ---------- Hero ---------- */

/* Light, brand-tinted, and deliberately quiet: the loudest thing in the hero
   should be the price and the button, not the background. The wash is two soft
   brand-hue ellipses over the page background, so it re-tints itself in dark
   mode instead of needing a second set of rules. */
.mcl-ltd-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-20) 0 var(--space-16);
    text-align: center;
    background: var(--color-page-bg);
}
.mcl-ltd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% -10%, color-mix(in srgb, var(--primary-500) 16%, transparent), transparent 72%),
        radial-gradient(ellipse 45% 40% at 88% 12%, color-mix(in srgb, var(--primary-400) 12%, transparent), transparent 70%);
    pointer-events: none;
}
/* A 1px grid, masked to fade out well before the edges. It gives the light
   panel enough texture that it does not read as an empty white band, without
   competing with the screenshot. */
.mcl-ltd-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 15%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 15%, transparent 75%);
    pointer-events: none;
}
.mcl-ltd-hero > * { position: relative; z-index: 1; }

/* Sales tag. Carries the price as well as the label, so the offer is legible
   from the eyebrow alone — the one line a scanner reads before deciding whether
   to read the headline. */
.mcl-ltd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--mcl-accent) 10%, var(--color-card-bg));
    border: 1px solid color-mix(in srgb, var(--mcl-accent) 30%, transparent);
    color: var(--mcl-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    margin-bottom: var(--space-6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.mcl-ltd-eyebrow .mc-icon { flex: 0 0 auto; }
.mcl-ltd-eyebrow-sep {
    width: 1px;
    align-self: stretch;
    background: color-mix(in srgb, var(--mcl-accent) 25%, transparent);
}
.mcl-ltd-eyebrow-price {
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--mcl-gradient-cta);
    color: #FFFFFF;
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-xs);
    font-weight: var(--weight-black);
}

.mcl-ltd-hero h1 {
    font-size: clamp(2.25rem, 5.5vw, var(--text-5xl));
    line-height: 1.08;
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
}

.mcl-sweep {
    background: var(--mcl-ltd-sweep);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.mcl-ltd-sub {
    max-width: 620px;
    margin: 0 auto var(--space-7);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

/* Price anchor — the single line that does most of the persuading. */
.mcl-anchor {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    margin-bottom: var(--space-7);
}
.mcl-anchor-strike { text-decoration: line-through; color: var(--color-text-muted); }
.mcl-anchor-now { font-size: var(--text-2xl); font-weight: var(--weight-black); color: var(--mcl-accent); }

.mcl-ltd-ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* The single conversion button, used everywhere on this page.
   White on the --primary-500→700 ramp is ~5.3:1; white on --primary-400 would
   be ~3.4:1, which is why the button keeps the darker ramp even inside the
   .mcl-oncontrast panel where the rest of the accent lightens. */
.mcl-btn-accent {
    background: var(--mcl-gradient-cta);
    color: #FFFFFF;
    border-color: transparent;
    font-weight: var(--weight-bold);
    box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--primary-600) 65%, transparent);
}
.mcl-btn-accent:hover {
    background: var(--mcl-gradient-cta-hover);
    color: #FFFFFF;
    box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--primary-600) 75%, transparent);
}

.mcl-ltd-reassure {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---------- Hero proof chips ----------
   The three things a lifetime buyer is actually buying, stated as facts rather
   than sold as benefits. Directly under the CTA because they answer the
   objection that arrives the moment the price is read. */

.mcl-ltd-points {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}
.mcl-ltd-point {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.mcl-ltd-point .mc-icon { color: var(--mcl-accent); flex: 0 0 auto; }

/* ---------- Dashboard mockup ----------
   The hero's focal point: a real screenshot of the product in a browser frame.
   A hand-drawn abstraction would re-theme for free, but on a page asking for a
   single large payment, seeing the actual interface is worth more than the
   convenience. It is a dark capture because .mcl-oncontrast is dark in BOTH
   site themes, so one image matches everywhere — CSS cannot swap an img src on
   a data-theme toggle. */

.mcl-mockup-wrap {
    position: relative;
    margin-top: var(--space-12);
    /* Bleeds past the narrow container the hero copy uses. */
    margin-inline: auto;
    max-width: 1080px;
    padding-inline: var(--space-4);
}

/* Glow behind the frame, so it sits in the hero rather than on top of it.
   Softer than the dark hero's version: on a light panel a strong glow turns
   into a visible smudge instead of reading as light. */
.mcl-mockup-wrap::before {
    content: '';
    position: absolute;
    inset: 14% 6% -4% 6%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary-500) 26%, transparent), transparent 72%);
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.mcl-mockup {
    position: relative;
    z-index: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);

    /* Layered shadow rather than one large blur: a tight contact shadow keeps
       the frame's edge crisp, and the wide soft one lifts it off the page.
       On a light background a single big blur just looks like grey haze. */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 12px 24px -8px rgba(16, 24, 40, .12),
        0 48px 80px -24px rgba(16, 24, 40, .28),
        /* Hairline along the inside of the border. It is what separates a
           window from a rectangle with a screenshot in it — real glass catches
           light on its top edge. */
        inset 0 1px 0 rgba(255, 255, 255, .7);

    /* A shallow tilt reads as depth without distorting the UI. Removed below
       1200px and under reduced motion — on a phone it only costs legibility. */
    transform: perspective(2200px) rotateX(4deg) scale(.99);
    transform-origin: center top;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.mcl-mockup-wrap:hover .mcl-mockup {
    transform: perspective(2200px) rotateX(0deg) scale(1);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 16px 32px -8px rgba(16, 24, 40, .14),
        0 60px 96px -24px rgba(16, 24, 40, .32);
}

/* Safari window chrome. The toolbar is a real element rather than part of the
   screenshot, so it stays sharp at any scale and re-themes with the page. */
.mcl-mockup-chrome {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-text) 4%, var(--color-card-bg)),
        color-mix(in srgb, var(--color-text) 7%, var(--color-card-bg)));
    border-bottom: 1px solid var(--color-border);
}

/* macOS traffic lights, hard against the left corner. Fixed hex values on
   purpose: these three are a system signature, and a red that shifts with the
   theme stops reading as a close button. */
.mcl-mockup-dots { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.mcl-mockup-dots i {
    width: 12px; height: 12px; border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12);
}
.mcl-mockup-dots .is-close { background: #FF5F57; }
.mcl-mockup-dots .is-min   { background: #FEBC2E; }
.mcl-mockup-dots .is-max   { background: #28C840; }

.mcl-mockup-nav {
    display: inline-flex;
    gap: var(--space-2);
    flex: 0 0 auto;
    color: var(--color-text-disabled);
}

.mcl-mockup-url {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-width: 320px;
    margin-inline: auto;
    padding: 5px var(--space-4);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-text) 7%, var(--color-card-bg));
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
/* Balances the dots + nav on the left so the address pill sits optically
   centred, the way Safari's does. */
.mcl-mockup-chrome::after {
    content: '';
    flex: 0 0 auto;
    width: 92px;
}

.mcl-mockup picture { display: block; }
.mcl-mockup img {
    display: block;
    width: 100%;
    height: auto;
    /* The source is a 2x capture rendered at roughly half size. Telling the
       browser to favour quality stops Chrome dropping to a cheap box filter,
       which is what makes downscaled UI screenshots look soft. */
    image-rendering: -webkit-optimize-contrast;
}

/* Fades the screenshot's lower edge into the hero instead of cutting it. */
.mcl-mockup-fade {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 28%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--color-page-bg) 92%);
}

@media (prefers-reduced-motion: reduce) {
    .mcl-mockup,
    .mcl-mockup-wrap:hover .mcl-mockup { transform: none; }
}

/* ---------- Savings meter ---------- */

/* A card, not two bars floating on the page background. The comparison is the
   payoff of the section above it, so it needs the same visual weight as the
   cards making the argument. */
.mcl-meter {
    display: grid;
    gap: var(--space-5);
    max-width: 760px;
    margin: var(--space-8) auto 0;
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
}

/* Label and amount ride above their own bar rather than sitting in fixed side
   columns: the number belongs to the bar it measures, and the layout needs no
   separate mobile rule to stay readable. */
.mcl-meter-row { display: grid; gap: var(--space-2); }
.mcl-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}
.mcl-meter-label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.mcl-meter-row.is-deal .mcl-meter-label {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}
.mcl-meter-track {
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--color-active-bg);
    overflow: hidden;
}
.mcl-meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-md);
    /* The "expensive" bar. Muted so the deal bar wins the comparison, but
       solid enough to read as a filled bar rather than an empty track —
       --color-border-strong on --color-active-bg was almost invisible. */
    background: var(--color-text-disabled);
    /* Animated from 0 by the reveal observer. The custom property is set
       inline per-row so one rule serves both bars. */
    width: 0;
    transition: width 700ms cubic-bezier(.32, .72, 0, 1);
}
.mcl-meter.is-in .mcl-meter-fill { width: var(--meter-w, 0); }
.mcl-meter-fill.is-deal { background: var(--mcl-ltd-sweep); }
.mcl-meter-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mcl-meter-row.is-deal .mcl-meter-value { color: var(--mcl-accent); }

/* The conclusion, tinted as a result rather than another paragraph. The
   saving no longer jumps two type sizes mid-sentence — it is set apart by
   colour and weight, which does not disturb the line. */
.mcl-meter-delta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-text-primary);
    text-align: center;
    font-size: var(--text-base);
}
/* The wrapper span is the flex item, not the svg inside it. */
.mcl-meter-delta .mc-icon { flex: none; color: var(--color-success); }
.mcl-meter-delta strong { color: var(--color-success); font-weight: var(--weight-bold); }

/* ---------- Stacking explainer ---------- */

.mcl-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.mcl-stack-chip {
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--mcl-accent-brd);
    border-radius: var(--radius-lg);
    background: var(--mcl-accent-bg);
    text-align: center;
    min-width: 140px;
}
.mcl-stack-chip strong { display: block; font-size: var(--text-base); }
.mcl-stack-chip span { font-size: var(--text-sm); color: var(--color-text-muted); }
.mcl-stack-chip.is-popular { border-color: var(--mcl-accent); box-shadow: var(--shadow-sm); }

/* Upgrade step between two tiers: an arrow with the price difference under it.
   Deliberately not a "+" — that would read as "add the two prices together",
   which is code stacking, not the pay-the-difference upgrade this offers. */
.mcl-stack-step {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mcl-stack-arrow { font-size: var(--text-xl); color: var(--color-text-muted); line-height: 1; }
.mcl-stack-diff {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-success);
    white-space: nowrap;
}

/* ---------- Tier cards ---------- */

.mcl-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}
.mcl-tiers.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 1px gradient border via a padded wrapper — border-image cannot follow a
   border-radius. */
.mcl-tier-wrap {
    padding: 1px;
    border-radius: calc(var(--radius-lg) + 1px);
    background: var(--color-border);
}
.mcl-tier-wrap.is-popular { background: var(--mcl-ltd-sweep); }

.mcl-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
}

/* Corner ribbon on the recommended tier. */
.mcl-tier-ribbon {
    position: absolute;
    top: var(--space-5);
    inset-inline-end: calc(var(--space-7) * -1);
    transform: rotate(45deg);
    transform-origin: center;
    padding: 4px var(--space-8);
    background: var(--mcl-accent);
    color: var(--gray-950);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.mcl-tier-wrap.is-popular { overflow: hidden; }

.mcl-tier-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--mcl-accent);
}
.mcl-tier-name { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-top: var(--space-1); }
.mcl-tier-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); min-height: 2.6em; }

.mcl-tier-price { margin: var(--space-5) 0 var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.mcl-tier-amount { font-size: var(--text-4xl); font-weight: var(--weight-black); line-height: 1; font-variant-numeric: tabular-nums; }
.mcl-tier-once { font-size: var(--text-sm); color: var(--color-text-muted); }

.mcl-tier-cycle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
}

.mcl-tier-limits { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.mcl-tier-limits li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.mcl-tier-limits dt { color: var(--color-text-muted); }
.mcl-tier-limits dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; text-align: end; }

/* "+2,500" — what this tier adds over the one below. Lifetime buyers pick by
   delta, so the increment is given more visual weight than the total. */
.mcl-tier-delta {
    display: inline-block;
    margin-inline-start: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-success);
}

.mcl-tier-cta { margin-top: var(--space-2); }
.mcl-tier-cta .mcl-btn[aria-disabled="true"],
.mcl-tier-cta-foot .mcl-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- Included features, inside the card ----------
   The comparison table used to live in its own section below the cards. Moving
   it in means the price and what it buys are read together, which is the
   decision being made — but it also makes the card tall, hence the repeated
   button at the foot. */

.mcl-tier-features {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.mcl-tier-features-head {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.mcl-tier-features-group {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--mcl-accent);
    margin: var(--space-4) 0 var(--space-2);
}
.mcl-tier-features-group:first-of-type { margin-top: 0; }

.mcl-tier-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mcl-tier-features li {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.mcl-tier-features .mc-icon { color: var(--color-success); flex: 0 0 auto; margin-top: 2px; }

.mcl-tier-cta-foot { margin-top: var(--space-6); }

/* ---------- Guarantee seal ---------- */

.mcl-guarantee {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--mcl-accent-brd);
    border-radius: var(--radius-lg);
    background: var(--mcl-accent-bg);
    max-width: 720px;
    margin-inline: auto;
}
.mcl-guarantee-copy { flex: 1 1 320px; }
.mcl-guarantee-copy strong { display: block; font-size: var(--text-lg); margin-bottom: var(--space-1); }
.mcl-guarantee-copy p { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ---------- Reality-check tiles ---------- */

.mcl-reality { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.mcl-reality-item {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
}
.mcl-reality-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.mcl-reality-item p { color: var(--color-text-secondary); font-size: var(--text-base); }

/* ---------- AppSumo redeem strip ----------
   Deliberately quiet: neutral surface, no amber, no gradient. It must not
   compete with the buy CTA, because most visitors are here to purchase and
   only a minority arrive holding a code. */
.mcl-redeem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
}
.mcl-redeem-steps { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-3); }
.mcl-redeem-step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.mcl-redeem-step i {
    width: 20px; height: 20px; border-radius: var(--radius-full);
    background: var(--color-active-bg); color: var(--color-text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 11px; font-weight: var(--weight-bold);
}

/* ---------- The maths of monthly ---------- */

.mcl-maths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.mcl-maths-item {
    position: relative;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.mcl-maths-item:hover {
    border-color: var(--mcl-accent-brd);
    box-shadow: var(--shadow-sm);
}
/* Icon beside the heading, not stacked above it. Stacked, the three cards
   spent a whole row on decoration before any of them said anything. */
.mcl-maths-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.mcl-maths-icon {
    display: inline-flex;
    flex: none;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--mcl-accent-bg);
    color: var(--mcl-accent);
}
.mcl-maths-item h3 { font-size: var(--text-lg); margin: 0; }
.mcl-maths-item p { color: var(--color-text-secondary); font-size: var(--text-base); margin: 0; }

/* ---------- Six pillars ---------- */

.mcl-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.mcl-pillar {
    padding: var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
}
.mcl-pillar h3 { font-size: var(--text-xl); margin: var(--space-4) 0 var(--space-2); }
.mcl-pillar-long { color: var(--color-text-secondary); }
.mcl-pillar-points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.mcl-pillar-points li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-secondary); }
.mcl-pillar-points .mc-icon { color: var(--color-success); flex: 0 0 auto; margin-top: 1px; }

/* ---------- Numbers ---------- */

.mcl-numbers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .mcl-tiers.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mcl-reality { grid-template-columns: 1fr; }
    .mcl-maths { grid-template-columns: 1fr; }
    .mcl-pillars { grid-template-columns: 1fr; }
    .mcl-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The meter stacks label-over-bar at every width, so it needs no
       breakpoint of its own — only tighter padding on small screens. */
    .mcl-meter { padding: var(--space-5); }

    /* Same rule as /pricing: below this width the table stops being readable
       at any zoom, so it is replaced by the one-column list rather than
       squeezed or pinch-zoomed. */
    .mcl-matrix-desktop { display: none; }
    .mcl-matrix-mobile { display: block; }
}

.mcl-matrix-mobile { display: none; }

@media (max-width: 1199px) {
    /* The tilt costs legibility on a smaller screen and buys nothing. */
    .mcl-mockup,
    .mcl-mockup-wrap:hover .mcl-mockup { transform: none; }
}

@media (max-width: 767px) {
    .mcl-tiers, .mcl-tiers.is-3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
    .mcl-ltd-hero { padding: var(--space-12) 0 var(--space-10); }
    .mcl-redeem { flex-direction: column; align-items: flex-start; text-align: start; }
    .mcl-stack { flex-direction: column; }
    .mcl-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-5); }
    .mcl-offerbar-inner { gap: var(--space-2); font-size: var(--text-xs); }

    /* Countdown: full width, and the digits shrink so d:h:m:s stays on one
       line at 360px rather than wrapping mid-timer. */
    .mcl-hero-countdown { padding: var(--space-4); width: 100%; }
    .mcl-countdown.is-lg { font-size: clamp(1.6rem, 11vw, 2.4rem); }
    .mcl-countdown { gap: 2px; }

    /* Anchor stacks: at this width the strike-through line and the price sat
       on one row and the price fell off the edge. */
    .mcl-anchor { flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4); }

    .mcl-ltd-ctas { flex-direction: column; }
    .mcl-ltd-ctas .mcl-btn { width: 100%; }
    .mcl-ltd-points { gap: var(--space-2); }
    .mcl-ltd-point { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }

    /* The whole screenshot, scaled to fit. It previously rendered at 160% width
       inside a 320px-tall box, which cropped the right-hand half of the
       dashboard and cut the chart off mid-column — the frame showed a fragment
       and read as broken rather than as a window onto a real product. */
    .mcl-mockup-wrap { margin-top: var(--space-8); padding-inline: var(--space-4); }
    .mcl-mockup { max-height: none; border-radius: 10px; }
    .mcl-mockup img { width: 100%; max-width: 100%; }

    /* Only the traffic lights survive at this width — the address pill and the
       back/forward pair are what push the toolbar into wrapping, and the dots
       alone are enough to read the frame as a window. */
    .mcl-mockup-url,
    .mcl-mockup-nav,
    .mcl-mockup-chrome::after { display: none; }
    .mcl-mockup-chrome { padding: 7px var(--space-3); gap: var(--space-2); }
    .mcl-mockup-dots { gap: 5px; }
    .mcl-mockup-dots i { width: 8px; height: 8px; }

    /* Shadow scaled to the smaller frame: the desktop values are cast by a
       1000px object and look like fog under a 340px one. */
    .mcl-mockup,
    .mcl-mockup-wrap:hover .mcl-mockup {
        box-shadow:
            0 1px 2px rgba(16, 24, 40, .05),
            0 8px 16px -6px rgba(16, 24, 40, .10),
            0 24px 40px -16px rgba(16, 24, 40, .20);
    }
    .mcl-mockup-wrap::before { inset: 18% 10% 2% 10%; filter: blur(46px); }

    /* The bottom fade is sized for a frame that is cropped short. Over the full
       image it would swallow the sending chart, which is the most persuasive
       part of the screenshot. */
    .mcl-mockup-fade { height: 12%; }

    /* The price chip is the part worth keeping legible; the label can shrink. */
    .mcl-ltd-eyebrow { font-size: 10px; gap: var(--space-2); }

    /* At --text-lg the subtitle ran to seven lines and pushed the CTA most of a
       screen below the headline. Dropping a step keeps the whole argument —
       headline, price, button — inside the first viewport. */
    .mcl-ltd-sub { font-size: var(--text-base); margin-bottom: var(--space-6); }
    .mcl-anchor-strike { font-size: var(--text-sm); }
}