/* LexyBooster — paywall.
 *
 * Built on the Soft Card design system (public/css/soft-card.css), the same one
 * the rest of the app uses. It previously carried its own dark indigo palette,
 * inherited from an app shell that no longer exists — a purple modal landing on
 * a cream-and-green product, which reads as somebody else's page and is a bad
 * place to be asking for money.
 *
 * EVERY COLOUR HERE IS A TOKEN. Nothing is hardcoded, which is what makes dark
 * mode work for free: soft-card redefines the same variables under
 * [data-theme="dark"], so the paywall follows the app instead of needing a
 * parallel set of rules that will drift.
 *
 * Sizing uses dynamic viewport units. On mobile Safari the paywall is nearly
 * full height and `vh` is famously wrong while the URL bar animates.
 */

.lexy-paywall-open { overflow: hidden; }

.lexy-pw-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Tinted with the ink colour rather than plain black: over a warm cream
     * background a neutral scrim looks grey and dirty. */
    background: color-mix(in srgb, var(--sc-ink) 55%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-y: auto;
    animation: lexy-pw-fade 160ms ease-out;
}

/* color-mix is recent enough that a fallback is worth having: without it the
 * declaration is dropped entirely and the overlay becomes transparent, leaving
 * the paywall floating over readable content. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .lexy-pw-overlay { background: rgba(22, 34, 26, 0.55); }
}

@keyframes lexy-pw-fade { from { opacity: 0; } to { opacity: 1; } }

.lexy-pw-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px 26px 22px;
    border-radius: var(--sc-r-xl, 24px);
    background: var(--sc-surface, #fff);
    border: 1px solid var(--sc-line, #DCE5DE);
    box-shadow: var(--sc-shadow-lg, 0 4px 16px rgba(20, 40, 28, 0.08));
    color: var(--sc-ink, #16221A);
    font-family: var(--sc-font, 'Inter', system-ui, sans-serif);
    animation: lexy-pw-rise 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes lexy-pw-rise {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.lexy-pw-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1;
    color: var(--sc-muted, #6F7E73);
    background: transparent;
    border: 0;
    border-radius: var(--sc-r-sm, 12px);
    cursor: pointer;
}
.lexy-pw-overlay .lexy-pw-close { color: var(--sc-muted, #6F7E73) !important; }
.lexy-pw-close:hover,
.lexy-pw-overlay .lexy-pw-close:hover {
    color: var(--sc-ink, #16221A) !important;
    background: var(--sc-surface-alt, #F5F8F5);
}
.lexy-pw-close:focus-visible {
    outline: 2px solid var(--sc-accent, #3F8A5C);
    outline-offset: 2px;
}

.lexy-pw-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sc-accent, #3F8A5C);
}

.lexy-pw-title {
    margin: 0 0 8px;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 600;
    padding-right: 32px; /* clear of the close button */
}

.lexy-pw-sub {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--sc-ink-soft, #3F4D44);
}

/* Typography reset — REQUIRED, not cosmetic.
 *
 * soft-card-overrides.css is injected by a script at runtime (index.html), so
 * it always lands after this file and paints every h1/h2 with
 * `color: var(--sc-ink) !important` plus a display font and letter-spacing of
 * its own. A plain class selector loses to !important, so these have to match
 * it; they stay scoped to the overlay so nothing outside is touched.
 *
 * The colour is now the same token the override wants, so this is no longer
 * fighting it — but it is kept explicit because -webkit-text-fill-color beats
 * `color` in WebKit, and a future override that sets one without the other
 * would silently blank the headings again. That already happened once.
 */
.lexy-pw-overlay h1,
.lexy-pw-overlay h2,
.lexy-pw-overlay .lexy-pw-title {
    color: var(--sc-ink, #16221A) !important;
    -webkit-text-fill-color: var(--sc-ink, #16221A) !important;
    font-family: var(--sc-font-display, 'Fraunces', Georgia, serif) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
    background: none !important;
}

/* Dark-mode button reset — REQUIRED, not cosmetic.
 *
 * style.css (~line 427) carries a rule that paints EVERY <button> on the page
 * in dark mode with a gradient background and a coloured border, excluding only
 * five app-specific classes. Inside the paywall that hits: the close X (it
 * renders as a filled pill and reads as the primary action, so people dismiss
 * instead of subscribing), the plan cards, the CTA, and the Terms / Privacy /
 * Restore links at the bottom.
 *
 * Five :not() clauses put that selector at specificity (0,6,1); a class rule
 * here is (0,1,0) and loses. Hence !important, scoped to the overlay so nothing
 * outside is affected — and the components below restate their own borders for
 * the same reason.
 *
 * The real fix is retiring that rule from style.css, which cannot be done
 * safely without auditing every button in the app. */
.lexy-pw-overlay button {
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Backgrounds have to be restated, not just the gradient removed.
 *
 * The global rule uses the `background` SHORTHAND, which also resets
 * background-color to transparent — and it outranks these class selectors. So
 * killing background-image alone leaves the CTA with no fill at all: a green
 * button becomes bare text on the card. (It did, exactly once, between two
 * deploys.) */
.lexy-pw-overlay .lexy-pw-cta {
    background-color: var(--sc-accent, #3F8A5C) !important;
}
.lexy-pw-overlay .lexy-pw-plan {
    background-color: var(--sc-surface-alt, #F5F8F5) !important;
}
.lexy-pw-overlay .lexy-pw-plan.is-selected {
    background-color: var(--sc-accent-soft, #DDEDE3) !important;
}
.lexy-pw-overlay .lexy-pw-close,
.lexy-pw-overlay .lexy-pw-link {
    background-color: transparent !important;
}
.lexy-pw-overlay .lexy-pw-close:hover {
    background-color: var(--sc-surface-alt, #F5F8F5) !important;
}

.lexy-pw-benefits { margin: 20px 0; padding: 0; list-style: none; }
.lexy-pw-benefits li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 28px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--sc-ink-soft, #3F4D44);
}
.lexy-pw-benefits li::before {
    content: '';
    position: absolute;
    left: 0; top: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--sc-accent-soft, #DDEDE3);
    /* The tick is drawn with currentColor so it inherits the accent in both
     * themes; an SVG with a baked-in stroke would vanish in dark mode. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.4' stroke='%233F8A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.lexy-pw-proof {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--sc-muted, #6F7E73);
}

/* Trial timeline ------------------------------------------------------- */

.lexy-pw-timeline { margin: 22px 0 24px; padding: 0 0 0 22px; list-style: none; }
.lexy-pw-timeline li {
    position: relative;
    padding-bottom: 20px;
    border-left: 2px solid var(--sc-line, #DCE5DE);
    padding-left: 18px;
    margin-left: 4px;
}
.lexy-pw-timeline li:last-child { padding-bottom: 4px; border-left-color: transparent; }
.lexy-pw-timeline li::before {
    content: '';
    position: absolute;
    left: -7px; top: 3px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--sc-accent, #3F8A5C);
    box-shadow: 0 0 0 4px var(--sc-accent-soft, #DDEDE3);
}
.lexy-pw-timeline strong {
    display: block;
    font-size: 14px;
    color: var(--sc-ink, #16221A);
    margin-bottom: 2px;
}
.lexy-pw-timeline span { font-size: 13.5px; color: var(--sc-ink-soft, #3F4D44); }

/* Plans ----------------------------------------------------------------- */

.lexy-pw-plans { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

.lexy-pw-plan {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 15px 16px;
    text-align: left;
    color: inherit;
    font-family: inherit;
    background: var(--sc-surface-alt, #F5F8F5);
    border: 2px solid var(--sc-line, #DCE5DE);
    border-radius: var(--sc-r-md, 16px);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
/* Border restated with !important: the global dark-mode rule above would
 * otherwise give every plan card a purple outline. */
.lexy-pw-overlay .lexy-pw-plan {
    border: 2px solid var(--sc-line, #DCE5DE) !important;
}
.lexy-pw-overlay .lexy-pw-plan:hover,
.lexy-pw-overlay .lexy-pw-plan.is-selected {
    border-color: var(--sc-accent, #3F8A5C) !important;
}

.lexy-pw-plan:hover { border-color: var(--sc-accent, #3F8A5C); }
.lexy-pw-plan:focus-visible {
    outline: 2px solid var(--sc-accent, #3F8A5C);
    outline-offset: 2px;
}
.lexy-pw-plan.is-selected {
    border-color: var(--sc-accent, #3F8A5C);
    background: var(--sc-accent-soft, #DDEDE3);
}

.lexy-pw-plan-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--sc-muted, #6F7E73);
}

.lexy-pw-badge {
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--sc-accent-ink, #fff);
    background: var(--sc-accent, #3F8A5C);
    border-radius: var(--sc-r-pill, 999px);
}

.lexy-pw-plan-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--sc-ink, #16221A);
}
.lexy-pw-compare {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--sc-muted, #6F7E73);
    text-decoration: line-through;
}

.lexy-pw-plan-meta {
    display: flex; gap: 10px;
    font-size: 13px;
    color: var(--sc-ink-soft, #3F4D44);
}
.lexy-pw-trial { color: var(--sc-accent, #3F8A5C); font-weight: 600; }

/* CTA ------------------------------------------------------------------- */

.lexy-pw-cta {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 15px 18px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    color: var(--sc-accent-ink, #fff);
    background: var(--sc-accent, #3F8A5C);
    border: 0;
    border-radius: var(--sc-r-pill, 999px);
    /* wins over the global dark-mode button rule; see the reset above */
    background-image: none;
    cursor: pointer;
    transition: transform 100ms ease, opacity 120ms ease, filter 120ms ease;
}
/* Text colour restated for the same reason as the borders: the global
 * dark-mode rule forces white, which happens to look fine but leaves the CTA
 * depending on a rule we are otherwise neutralising. */
.lexy-pw-overlay .lexy-pw-cta { color: var(--sc-accent-ink, #fff) !important; }

.lexy-pw-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.lexy-pw-cta:active { transform: translateY(0); }
.lexy-pw-cta:focus-visible {
    outline: 2px solid var(--sc-ink, #16221A);
    outline-offset: 2px;
}
.lexy-pw-cta:disabled, .lexy-pw-cta.is-busy {
    opacity: 0.6; cursor: default; transform: none; filter: none;
}

.lexy-pw-fine {
    margin: 10px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--sc-muted, #6F7E73);
}

.lexy-pw-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 16px 0 0;
}

.lexy-pw-link {
    padding: 0;
    font-size: 12px;
    font-family: inherit;
    color: var(--sc-muted, #6F7E73);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}
.lexy-pw-overlay .lexy-pw-link { color: var(--sc-muted, #6F7E73) !important; }
.lexy-pw-overlay .lexy-pw-link:hover { color: var(--sc-ink, #16221A) !important; }
.lexy-pw-link:hover { color: var(--sc-ink, #16221A); }
.lexy-pw-decline { display: block; width: 100%; margin-top: 14px; text-align: center; }

.lexy-pw-toast {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    text-align: center;
    color: var(--sc-warm, #C77A2A);
    background: color-mix(in srgb, var(--sc-warm, #C77A2A) 12%, transparent);
    border-radius: var(--sc-r-sm, 12px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .lexy-pw-toast { background: rgba(199, 122, 42, 0.12); }
}

/* Small phones ---------------------------------------------------------- */

@media (max-width: 380px) {
    .lexy-pw-card { padding: 26px 18px 18px; }
    .lexy-pw-title { font-size: 22px; }
    .lexy-pw-plan-price { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .lexy-pw-overlay, .lexy-pw-card { animation: none; }
    .lexy-pw-cta:hover { transform: none; }
}