/* Site refresh (2026-11): the homepage look carried to every public page.
   Rules: md_files/DESIGN.md. Loaded by head.php on every page but /docs.

   Two scopes:
   - body.home-modern:not(.hm-refresh): every marketing page, the articles and
     Buy. The homepage is left out; css/home-refresh.css styles it.
   - html body .auth-wrap: sign-in, sign-up, trial, forgot / reset password,
     creator application.

   Written with CSS nesting. head.php loads this before each page's own
   stylesheet, so the scope selector is what makes these rules win, not
   load order. A browser without nesting support (pre-2023) drops the nested
   rules and simply shows the previous look. */

/* ============================================================
   Marketing pages
   ============================================================ */
body.home-modern:not(.hm-refresh) {
    /* The page styles' short names, mapped onto the shared tokens. */
    --brand: var(--lq-brand);
    --brand-2: var(--lq-brand-2);
    --ink: var(--lq-ink);
    --muted: var(--lq-muted);
    --line: var(--lq-line);
    --bg-alt: var(--lq-bg-alt);
    --sec-y: var(--lq-sec-y);
    --sec-y-sm: var(--lq-sec-y-sm);

    /* The full-width hero bands below reach past the content box with 100vw,
       which is wider than the page whenever a scrollbar shows. */
    overflow-x: clip;

    /* ---- Type ---- */
    & :is(h1, h2, h3):not(footer *),
    & :is(.hero-btn, .dx-btn, .btn-buy, .btn-pay, .p-price, .amt) {
        font-family: var(--lq-font-display);
    }
    & :is(h1, h2, h3) { text-wrap: balance; }
    & main p, & section p { text-wrap: pretty; }

    & h1:not(footer *) { letter-spacing: -.035em; }
    & :is(h2, h3):not(footer *) { letter-spacing: -.025em; }

    & .lq-title {
        font-size: clamp(2rem, 4.2vw, 3rem);
        font-weight: 800;
        letter-spacing: -.03em;
        line-height: 1.08;
    }
    & .lq-sub { font-size: 1.125rem; line-height: 1.6; color: var(--lq-muted); }

    /* Eyebrows: a label between two short rules, as on the homepage. */
    & :is(.lq-eyebrow, .shop-pill) {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: none;
        border: 0;
        padding: 0;
        border-radius: 0;
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    & :is(.lq-eyebrow, .shop-pill)::before,
    & :is(.lq-eyebrow, .shop-pill)::after {
        content: '';
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, currentColor);
        opacity: .6;
    }
    & :is(.lq-eyebrow, .shop-pill)::after { transform: scaleX(-1); }
    /* Left-aligned heads only get the trailing rule. */
    & :is(.ab-hero, .ct-wrap, .pp-hero, .ab-phi) .lq-eyebrow::before { display: none; }
    & :is(.ab-hero, .ct-wrap, .pp-hero, .ab-phi) .lq-eyebrow::after { transform: none; background: linear-gradient(90deg, currentColor, transparent); }

    /* ---- Buttons ---- */
    & .hero-btn {
        min-height: 50px;
        border-radius: 12px;
        font-weight: 700;
        transition: transform var(--lq-dur-1) var(--lq-ease-out), box-shadow var(--lq-dur-2) var(--lq-ease-out),
                    background-color var(--lq-dur-2), border-color var(--lq-dur-2), color var(--lq-dur-2);
    }
    & .hero-btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px -8px rgba(37,99,235,.6); }
    & .hero-btn.primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 34px -10px rgba(37,99,235,.7); }
    & .hero-btn.ghost { background: #fff; color: var(--lq-ink); border: 1.5px solid #cbd5e1; }
    & .hero-btn.ghost:hover { background: #f5f8ff; color: var(--lq-brand-ink); border-color: var(--lq-brand); }
    & :is(.hero-btn, .dx-btn, .btn-buy, .btn-pay, .ui-cta):active { transform: scale(.97); transition-duration: 80ms; }
    & :is(.hero-btn, .dx-btn) .fa-arrow-right { transition: transform var(--lq-dur-2) var(--lq-ease-out); }
    & :is(.hero-btn, .dx-btn):hover .fa-arrow-right { transform: translateX(3px); }

    & :is(a, button, summary, input, select, textarea):focus-visible { outline: var(--lq-focus); outline-offset: 3px; }

    /* ---- Hero bands: full width, faint grid, fading into the page ---- */
    & :is(.pp-hero, .ab-hero, .ct-wrap, .faq-head, .cl-head, .pt-head, .dx-hero, .ar-head) {
        position: relative;
        isolation: isolate;
    }
    & :is(.pp-hero, .ab-hero, .ct-wrap, .faq-head, .cl-head, .pt-head, .dx-hero, .ar-head)::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        pointer-events: none;
        background:
            linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px) 0 0 / 44px 44px,
            linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px) 0 0 / 44px 44px,
            radial-gradient(55% 80% at 85% 0%, rgba(14,165,233,.13), transparent 62%),
            radial-gradient(45% 70% at 8% 0%, rgba(139,92,246,.10), transparent 60%),
            linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    /* The article head sits inside a narrow column with its own top padding;
       reach up to the nav so the band starts there. */
    & .ar-head::before { top: -34px; }
    & :is(.pp-hero, .ab-hero, .ct-wrap) { padding-top: 80px; }
    & :is(.faq-head, .cl-head, .pt-head) { padding-top: 80px; }
    & :is(.pp-hero, .ab-hero, .ct-wrap, .faq-head, .cl-head, .pt-head) h1 {
        font-size: clamp(2.3rem, 5vw, 3.6rem);
        font-weight: 800;
        line-height: 1.04;
    }
    & :is(.pp-hero, .ab-hero, .ct-wrap) h1 { text-align: left; }

    /* Buy: already a dark band; it gets the grid in white and the new type. */
    & .shop-hero { isolation: isolate; }
    & .shop-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 44px 44px,
            linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 44px 44px;
        -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 80%);
                mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 80%);
    }
    & .shop-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); font-weight: 800; }
    & .shop-pill { color: #7dd3fc; }

    /* ---- Cards ---- */
    & :is(.pp-studio, .pp-card, .ab-mission .card, .pt-card, .p-card, .cart-card, .ar-card, .ct-row, .pp-tbl-wrap) {
        border-radius: var(--lq-r-card);
        box-shadow: var(--lq-sh-1);
    }
    /* Not the Buy cards: their coloured top edge is the edition's colour. */
    & :is(.pp-studio, .pp-card, .ab-mission .card, .pt-card, .ar-card, .ct-row, .pp-tbl-wrap) { border-color: var(--lq-line); }
    & :is(.pp-studio, .pp-card, .ab-mission .card, .pt-card, .p-card, .ar-card, a.ct-row) {
        transition: transform var(--lq-dur-2) var(--lq-ease-out), box-shadow var(--lq-dur-2) var(--lq-ease-out),
                    border-color var(--lq-dur-2);
    }
    & :is(.pp-studio, .ab-mission .card, .pt-card, .ar-card):hover,
    & a.ct-row:hover {
        transform: translateY(-4px);
        box-shadow: var(--lq-sh-3);
        border-color: transparent;
    }
    /* Buy cards hold a quantity box and a select: they lift less, so the
       controls do not slide away under the pointer. */
    & .p-card:hover { transform: translateY(-2px); box-shadow: var(--lq-sh-2); }
    & :is(.pp-studio, .pp-card, .pt-card, .ar-card, .p-card) h3,
    & .ar-card-title { font-family: var(--lq-font-display); font-weight: 700; letter-spacing: -.015em; }
    & .ar-card:hover .ar-card-img img { transform: scale(1.04); }

    /* Prices line up digit for digit. */
    & :is(.p-price, .amt, .c-amt, .c-total .val) { font-variant-numeric: tabular-nums; }
    & :is(.p-price, .pp-tbl .amt) { font-weight: 800; letter-spacing: -.03em; }

    /* Products comparison: the highlighted column gets the gradient edge. */
    & .pp-tbl thead th.hl { box-shadow: inset 0 3px 0 var(--lq-brand); }

    /* ---- Accordions: FAQ, product FAQ, changelog ---- */
    & :is(.faq-item, .cl-item) {
        border-radius: var(--lq-r-md);
        border-color: var(--lq-line);
        box-shadow: var(--lq-sh-1);
        transition: border-color var(--lq-dur-2), box-shadow var(--lq-dur-2) var(--lq-ease-out);
    }
    & :is(.faq-item, .cl-item):hover { border-color: #cbd5e1; box-shadow: var(--lq-sh-2); }
    & :is(.faq-item, .cl-item)[open] { border-color: rgba(37,99,235,.35); box-shadow: var(--lq-sh-2); }
    & .faq-item summary, & .cl-item summary { font-family: var(--lq-font-display); font-weight: 600; letter-spacing: -.01em; }
    & .faq-group h2 { font-family: var(--lq-font-body); letter-spacing: .14em; }
    & .pp-faq details { border-radius: var(--lq-r-md); }
    & :is(.faq-chip, .cl-tabs a, .ar-cats a) { transition: background-color var(--lq-dur-2), border-color var(--lq-dur-2), color var(--lq-dur-2); }

    /* Search fields */
    & :is(.faq-search input, .cl-search input) {
        border-radius: 12px;
        min-height: 48px;
        transition: border-color var(--lq-dur-2), box-shadow var(--lq-dur-2);
    }
    & :is(.faq-search input, .cl-search input):focus { border-color: var(--lq-brand); box-shadow: 0 0 0 4px rgba(37,99,235,.12); outline: none; }

    /* Changelog pager: style.css paints a dark bar behind every pagination
       block; here the buttons sit on the page. */
    & .cl-pager { background: none; box-shadow: none; }

    /* ---- Buy: buttons and form fields ---- */
    & :is(.btn-buy, .btn-pay) {
        background: var(--lq-grad);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -8px rgba(37,99,235,.55);
        transition: transform var(--lq-dur-1) var(--lq-ease-out), box-shadow var(--lq-dur-2), filter var(--lq-dur-2);
    }
    & .btn-buy:hover, & .btn-pay:hover:not(:disabled) { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 28px -10px rgba(37,99,235,.65); }
    & :is(.co-field input, .co-field select, .co-field textarea, .promo-row input, .p-dur) {
        border-radius: 10px;
        transition: border-color var(--lq-dur-2), box-shadow var(--lq-dur-2);
    }
    & :is(.co-field input, .co-field select, .co-field textarea, .promo-row input, .p-dur):focus {
        border-color: var(--lq-brand);
        box-shadow: 0 0 0 4px rgba(37,99,235,.12);
        outline: none;
    }
    & :is(.cmp-banner, .addon-note) { border-radius: var(--lq-r-md); }

    /* ---- Privacy: style.css paints body links yellow (#ffd700), unreadable on white ---- */
    & .pp a { color: var(--lq-brand); font-weight: 600; }
    & .pp a:hover { color: var(--lq-brand-ink); }
    & .pp h1 { font-size: clamp(2.2rem, 4.6vw, 3rem); font-weight: 800; }

    /* ---- Article pages ---- */
    & .dx-btn { border-radius: 12px; font-weight: 700; }
    & .ar-cover img { border-radius: var(--lq-r-lg); }
    & :is(.ar-promo-card, .ar-promo-cta, .ar-promo-ebook) { border-radius: var(--lq-r-card); }
    & .doc-body h2 { font-weight: 800; }

    /* ---- Closing CTA band ---- */
    & .cta-band {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        border-radius: 28px;
        background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #0ea5e9 100%);
    }
    & .cta-band::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 44px 44px,
            linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 44px 44px;
        -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 80%);
                mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 80%);
    }
    & .cta-band h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; }

    /* ---- Motion ----
       Reveal as an animation (fill "backwards"), so once it has played the
       cards' own hover lift works; the old .reveal.in { transform: none }
       outranked every :hover. Grid items stagger by column. */
    & .reveal {
        transform: none;
        transition-property: transform, box-shadow, border-color, background-color;
        transition-duration: var(--lq-dur-2);
        transition-timing-function: var(--lq-ease-out);
    }
    & .reveal:not(.in) { opacity: 0; }
    & .reveal.in {
        opacity: 1;
        animation: lqRise var(--lq-dur-3) var(--lq-ease-out) backwards;
        animation-delay: calc(var(--i, 0) * var(--lq-stagger));
    }
    & :is(.pp-studios, .pp-cards, .p-grid, .pt-grid, .ab-mission, .ar-grid) > :nth-child(4n+2) { --i: 1; }
    & :is(.pp-studios, .pp-cards, .p-grid, .pt-grid, .ab-mission, .ar-grid) > :nth-child(4n+3) { --i: 2; }
    & :is(.pp-studios, .pp-cards, .p-grid, .pt-grid, .ab-mission, .ar-grid) > :nth-child(4n+4) { --i: 3; }

    /* Hover lifts restated after the reveal rules: same weight, later wins. */
    & :is(.pp-studio, .ab-mission .card, .pt-card, .ar-card).reveal:hover,
    & a.ct-row.reveal:hover { transform: translateY(-4px); }
    & .p-card.reveal:hover { transform: translateY(-2px); }
}

/* Without scripting the reveal never fires; head.php only adds .js when it
   runs, so without it everything stays visible. */
html:not(.js) body.home-modern:not(.hm-refresh) .reveal { opacity: 1; animation: none; }

@media (max-width: 900px) {
    body.home-modern:not(.hm-refresh) {
        & :is(.pp-hero, .ab-hero, .ct-wrap, .faq-head, .cl-head, .pt-head) { padding-top: 48px; }
    }
}
@media (max-width: 640px) {
    body.home-modern:not(.hm-refresh) {
        --sec-y: var(--lq-sec-y-sm);
        & .cta-band { border-radius: 22px; }
    }
}
@media (prefers-reduced-motion: reduce) {
    body.home-modern:not(.hm-refresh) {
        & *, & *::before, & *::after { animation-delay: 0s !important; }
        & :is(.pp-studio, .ab-mission .card, .pt-card, .ar-card, .p-card, a.ct-row):hover { transform: none; }
    }
}

/* ============================================================
   Sign-in pages (member/auth.css): the card sits on the same
   faint-grid band as the page heroes.
   ============================================================ */
html body .auth-wrap {
    position: relative;
    isolation: isolate;
    padding-top: 64px;
    padding-bottom: 80px;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px) 0 0 / 44px 44px,
            linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px) 0 0 / 44px 44px,
            radial-gradient(50% 70% at 80% 0%, rgba(14,165,233,.14), transparent 62%),
            radial-gradient(45% 60% at 15% 10%, rgba(139,92,246,.11), transparent 60%),
            linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
        -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    }

    & .card.auth-card {
        border-radius: var(--lq-r-lg);
        border-color: rgba(226,232,240,.9);
        box-shadow: var(--lq-sh-3);
        font-family: var(--lq-font-body);
    }
    & .card.auth-card:hover { box-shadow: var(--lq-sh-3); }
    & .auth-head h1,
    & .auth-done h1 {
        font-family: var(--lq-font-display);
        font-size: 28px;
        letter-spacing: -.03em;
        color: var(--lq-ink);
    }
    & .card.auth-card .auth-head p { color: var(--lq-muted); }

    & .auth-card .form-group input,
    & .auth-card .form-group select,
    & .auth-card .form-group textarea {
        border-radius: 12px;
        border-color: #d5dce6;
        transition: border-color var(--lq-dur-2), box-shadow var(--lq-dur-2);
    }
    & .auth-card .form-group input:focus,
    & .auth-card .form-group select:focus,
    & .auth-card .form-group textarea:focus {
        border-color: var(--lq-brand);
        box-shadow: 0 0 0 4px rgba(37,99,235,.12);
        outline: none;
    }

    & .auth-btn {
        min-height: 50px;
        border-radius: 12px;
        font-family: var(--lq-font-display);
        transition: transform var(--lq-dur-1) var(--lq-ease-out), box-shadow var(--lq-dur-2),
                    background-color var(--lq-dur-2), border-color var(--lq-dur-2), color var(--lq-dur-2), filter var(--lq-dur-2);
    }
    & .auth-btn:active { transform: scale(.97); transition-duration: 80ms; }
    & .auth-btn--primary {
        background: var(--lq-grad);
        border-color: transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px -8px rgba(37,99,235,.6);
    }
    & .auth-btn--primary:hover {
        background: var(--lq-grad);
        border-color: transparent;
        filter: brightness(1.05);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 32px -10px rgba(37,99,235,.7);
    }
    & :is(a, button, input, select, textarea):focus-visible { outline: var(--lq-focus); outline-offset: 2px; }
    & .auth-done-icon { background: linear-gradient(135deg, #eff6ff, #e0f2fe); box-shadow: var(--lq-sh-2); }
}
@media (prefers-reduced-motion: reduce) {
    html body .auth-wrap .auth-btn:active { transform: none; }
}