/* Legal pages design layer — /privacy, /terms, /disclaimer, /cookies, /refund.
 *
 * The presentation layer for the five policy pages. Those pages have no .razor
 * of their own: they are rows in webpages.page_html, edited in the back office
 * (Admin → Webpages) and rendered verbatim by Components/Pages/ContentPage.razor.
 * So this sheet is the whole design, and the stored markup carries nothing but
 * the text and the class names below. Keep it that way — a colour or a spacing
 * value typed into page_html is a value no editor can find and no page can
 * share.
 *
 * Global CSS, linked from App.razor, so the two rules every sibling page sheet
 * calls out apply here as well:
 *
 * 1. Nothing confines these rules to these five pages, so every selector is
 *    qlg- prefixed or a descendant of one. No bare element selectors at the top
 *    level — an unlayered `h2` here would repaint every page on the site.
 * 2. @keyframes names are global too, hence the prefix on those: they must not
 *    collide with the compiled Tailwind bundle or with the qh-, qc-, qp-, qans-
 *    animations the other page sheets declare.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. That is what lets the pages be styled
 * entirely from here rather than from utility classes: the bundle wwwroot
 * serves is a Next.js build artefact containing only the utilities that build
 * emitted, so a class invented in stored markup would not exist at runtime.
 * The old page_html was authored against exactly that gap, which is why the
 * five pages had drifted into five different hero gradients.
 *
 * PALETTE. The logo ramp shared with the pricing, help-centre and answers
 * sheets — #a22dea (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue), primary
 * #4f46e5 → #7c3aed. No hue from outside that ramp appears here: a policy page
 * has no status to signal, so nothing earns a second colour. Ticks and step
 * numerals are indigo for that reason, not green.
 *
 * READING ORDER the layout is built around: a light hero that names the
 * document, then one reading column of cards — one card per clause — narrow
 * enough (68ch) to read a paragraph of legal prose without losing the line.
 * The cards overlap the hero so the page opens on content rather than on a
 * band of empty gradient.
 *
 * ContentPage wraps stored markup in `style="color:#1a1a1a;line-height:1.8"`,
 * which cascades into everything below that does not set its own. Every text
 * rule here sets both, so the pages do not depend on that inline style.
 */

/* ── page field ─────────────────────────────────────────────────────── */
.qlg-page {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 38%, #f5f3fd 100%);
    /* The stored markup is emitted inside ContentPage's flex/`min-w-0` nesting;
       claiming the full row keeps the hero full-bleed rather than boxed. */
    width: 100%;
}

/* The site's container ladder, copied from the compiled bundle's
   `.boxed-container` (100% → 1200px → 1400px → 1600px, with its gutters), so
   the hero, the cards, the header and the footer share one set of margins at
   every breakpoint. Declared here rather than by using .boxed-container itself
   because these pages must not depend on a class the bundle happens to emit. */
.qlg-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 639px) {
    .qlg-shell {
        padding: 0 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .qlg-shell {
        padding: 0 2rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .qlg-shell {
        max-width: 1200px;
        padding: 0 2.5rem;
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    .qlg-shell {
        max-width: 1400px;
        padding: 0 3rem;
    }
}

@media (min-width: 1536px) {
    .qlg-shell {
        max-width: 1600px;
        padding: 0 4rem;
    }
}

/* The document runs the full container width — same as every other page on the
   site. What keeps it readable at 1600px is not a narrow column but the rows:
   lists and tiles below break into as many columns as the width affords, so a
   six-word item never spans a metre of screen. */
.qlg-shell--reading {
    max-width: 100%;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .qlg-shell--reading {
        max-width: 1200px;
    }
}

@media (min-width: 1280px) and (max-width: 1535px) {
    .qlg-shell--reading {
        max-width: 1400px;
    }
}

@media (min-width: 1536px) {
    .qlg-shell--reading {
        max-width: 1600px;
    }
}

/* ── hero ───────────────────────────────────────────────────────────── */
.qlg-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 96px;
    background: linear-gradient(180deg, #f6f4ff 0%, #f3f1fe 52%, #efedfb 100%);
}

.qlg-hero__aurora,
.qlg-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qlg-hero__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    animation: qlg-drift 28s ease-in-out infinite;
}

.qlg-hero__aurora i:nth-child(1) {
    width: 620px;
    height: 620px;
    top: -330px;
    right: -140px;
    background: radial-gradient(circle, rgba(162, 45, 234, .38), transparent 68%);
}

.qlg-hero__aurora i:nth-child(2) {
    width: 520px;
    height: 520px;
    bottom: -320px;
    left: -160px;
    background: radial-gradient(circle, rgba(91, 93, 226, .34), transparent 68%);
    animation-delay: -13s;
}

/* Faint graph paper. Legal copy is dense; the ruling gives the hero a texture
   that survives being mostly empty without adding another colour. */
.qlg-hero__grid {
    background-image:
        linear-gradient(rgba(79, 70, 229, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 34%, #000 25%, transparent 78%);
}

.qlg-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qlg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(79, 70, 229, .22);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 1px 2px rgba(23, 18, 58, .05);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    color: #4f46e5;
}

.qlg-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a22dea, #4f46e5);
}

.qlg-title {
    margin: 22px 0 0;
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.022em;
    color: #17123a;
}

.qlg-title__accent {
    background: linear-gradient(135deg, #a22dea 0%, #7b5ee5 48%, #5b5de2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qlg-lead {
    margin: 18px 0 0;
    max-width: 1000px;
    font-size: 1.06rem;
    line-height: 1.75;
    color: #565b78;
}

/* ── hero call to action ────────────────────────────────────────────── */
.qlg-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 30px;
}

.qlg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: .95rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.qlg-btn--primary {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(79, 70, 229, .85);
}

.qlg-btn--ghost {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(79, 70, 229, .26);
    color: #4338ca;
}

.qlg-btn:hover {
    transform: translateY(-2px);
}

.qlg-btn--primary:hover {
    box-shadow: 0 16px 30px -14px rgba(79, 70, 229, .95);
}

.qlg-btn--ghost:hover {
    background: #fff;
    border-color: rgba(79, 70, 229, .45);
}

.qlg-btn:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 3px;
}

/* ── document column ────────────────────────────────────────────────── */
.qlg-body {
    position: relative;
    /* Negative pull is what makes the first card break the hero's lower edge. */
    padding: 0 0 84px;
    margin-top: -48px;
}

.qlg-doc {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── part divider ───────────────────────────────────────────────────── */
/* The two long documents need this. /privacy is four documents in sequence (a
   plain summary, then Parts I, II and III); /terms is twenty-two clauses in one
   run, grouped into four parts here. Either way a wall of sibling clause cards
   gives a reader no way to tell which part they are standing in. The divider is
   the one break in the column — a rule, a part number, a name — so the parts
   are visible while scrolling without adding a second column or a sticky rail.
   Sized above the card titles, so the two never read as the same level. */
.qlg-part {
    margin: 28px 0 4px;
    padding-top: 30px;
    border-top: 1px solid rgba(79, 70, 229, .16);
    text-align: center;
}

.qlg-doc > .qlg-part:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.qlg-part__label {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(162, 45, 234, .1), rgba(79, 70, 229, .1));
    border: 1px solid rgba(79, 70, 229, .18);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1;
    color: #4f46e5;
}

.qlg-part__title {
    margin: 16px 0 0;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.018em;
    color: #17123a;
}

.qlg-part__text {
    margin: 12px auto 0;
    max-width: 78ch;
    font-size: 1rem;
    line-height: 1.75;
    color: #565b78;
}

/* ── clause card ────────────────────────────────────────────────────── */
.qlg-card {
    position: relative;
    padding: 32px clamp(24px, 3vw, 44px);
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(79, 70, 229, .12);
    box-shadow: 0 1px 2px rgba(23, 18, 58, .04), 0 18px 38px -30px rgba(79, 70, 229, .55);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.qlg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, .26);
    box-shadow: 0 1px 2px rgba(23, 18, 58, .04), 0 26px 46px -30px rgba(79, 70, 229, .6);
}

/* The opening card of a document carries the summary paragraph, so it is
   tinted rather than white — it reads as part of the hero's statement. */
.qlg-card--intro {
    background: linear-gradient(135deg, #fbfaff 0%, #f6f4ff 100%);
    border-color: rgba(79, 70, 229, .2);
}

.qlg-card__title {
    position: relative;
    margin: 0 0 14px;
    padding-left: 16px;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #17123a;
}

/* The ramp as a clause marker. Gradient rather than a flat rule so the five
   pages share one mark, and no page needs a colour of its own. */
.qlg-card__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    bottom: .16em;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #a22dea 0%, #7b5ee5 50%, #5b5de2 100%);
}

/* A clause that runs to several named topics needs one level below the card
   title — no bar of its own, so the title keeps the only clause marker. */
.qlg-card__sub {
    margin: 26px 0 12px;
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.45;
    color: #2f2a55;
}

.qlg-card__sub:first-child {
    margin-top: 0;
}

.qlg-p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.78;
    color: #4b5069;
}

.qlg-p + .qlg-p {
    margin-top: 14px;
}

.qlg-p--strong {
    font-weight: 600;
    color: #2f2a55;
}

.qlg-p + .qlg-list,
.qlg-p + .qlg-bullets,
.qlg-p + .qlg-checks,
.qlg-p + .qlg-grid,
.qlg-list + .qlg-p,
.qlg-bullets + .qlg-p,
.qlg-checks + .qlg-p {
    margin-top: 18px;
}

.qlg-link {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(79, 70, 229, .35);
    transition: color .16s ease, border-color .16s ease;
}

.qlg-link:hover {
    color: #7c3aed;
    border-color: #7c3aed;
}

/* ── numbered rows ──────────────────────────────────────────────────── */
/* Grid rather than a stack: at the container's full width a five-word item
   would otherwise run the whole screen with its badge marooned on the left.
   auto-fit collapses to one column below ~380px of room, so narrow screens
   still read as a list. */
.qlg-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The auto-fit grid above is sized for the short enumerations the other four
   pages carry. /privacy also has lists whose items are full paragraphs, and at
   1600px those fit three to a row — three columns of ragged legal prose. This
   modifier holds them to one column; the rule for choosing is the item, not
   the page: stack it once an item runs past a line or two. */
.qlg-list--stack,
.qlg-bullets--stack {
    grid-template-columns: 1fr;
}

.qlg-list__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fbfaff;
    border: 1px solid rgba(79, 70, 229, .1);
    transition: background-color .18s ease, border-color .18s ease;
}

.qlg-list__item:hover {
    background: #f6f4ff;
    border-color: rgba(79, 70, 229, .22);
}

.qlg-list__n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

/* The circle above is sized for one or two characters. /terms numbers its
   restrictions clause (i) to (viii) as the source document does, and "viii"
   does not fit a 24px round badge. This lets the badge grow into a pill and
   keeps the numbering the clause was written with. */
.qlg-list__n--roman {
    width: auto;
    min-width: 24px;
    padding: 0 7px;
    border-radius: 999px;
}

.qlg-list__text {
    font-size: 1rem;
    line-height: 1.7;
    color: #4b5069;
}

/* Matches .qlg-bullet strong — the named lead-in of an item ("Account signup:")
   carries the same weight and ink whichever list shape holds it. */
.qlg-list__text strong,
.qlg-check__text strong {
    color: #2f2a55;
    font-weight: 650;
}

/* ── tick rows ──────────────────────────────────────────────────────── */
.qlg-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qlg-check {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fbfaff;
    border: 1px solid rgba(79, 70, 229, .1);
}

/* The tick is the character the stored copy already carried; it is styled as
   the bullet rather than left inline, so the row wraps against the text. */
.qlg-check__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 8px;
    background: rgba(79, 70, 229, .11);
    color: #4f46e5;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}

.qlg-check__text {
    font-size: 1rem;
    line-height: 1.7;
    color: #4b5069;
}

/* ── plain bullets ──────────────────────────────────────────────────── */
.qlg-bullets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 12px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qlg-bullet {
    position: relative;
    padding-left: 26px;
    font-size: 1rem;
    line-height: 1.72;
    color: #4b5069;
}

.qlg-bullet::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a22dea, #4f46e5);
}

.qlg-bullet strong {
    color: #2f2a55;
    font-weight: 650;
}

/* ── tile grid ──────────────────────────────────────────────────────── */
.qlg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.qlg-tile {
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfaff 0%, #f7f5ff 100%);
    border: 1px solid rgba(79, 70, 229, .12);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.qlg-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, .28);
    box-shadow: 0 16px 30px -26px rgba(79, 70, 229, .8);
}

.qlg-tile__title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #17123a;
}

.qlg-tile__text {
    margin: 0;
    font-size: .94rem;
    line-height: 1.66;
    color: #565b78;
}

/* ── closing note ───────────────────────────────────────────────────── */
.qlg-note {
    margin: 4px 0 0;
    padding-top: 18px;
    border-top: 1px dashed rgba(79, 70, 229, .22);
    text-align: center;
    font-size: .9rem;
    line-height: 1.6;
    color: #6b708c;
}

/* ── motion ─────────────────────────────────────────────────────────── */
@keyframes qlg-drift {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-26px, 22px, 0) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qlg-hero__aurora i {
        animation: none;
    }

    .qlg-card,
    .qlg-btn,
    .qlg-tile {
        transition: none;
    }

    .qlg-card:hover,
    .qlg-btn:hover,
    .qlg-tile:hover {
        transform: none;
    }
}

/* ── narrow screens ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Gutters come from the container ladder above — not repeated here. */
    .qlg-hero {
        padding: 56px 0 76px;
    }

    .qlg-body {
        padding-bottom: 64px;
    }

    .qlg-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .qlg-card__title {
        font-size: 1.16rem;
    }

    .qlg-btn {
        width: 100%;
    }
}

/* ── print ──────────────────────────────────────────────────────────── */
/* A policy is a document people file. Printed, it should read as one. */
@media print {
    .qlg-page {
        background: #fff;
    }

    .qlg-hero {
        background: #fff;
        padding: 0 0 18px;
    }

    .qlg-hero__aurora,
    .qlg-hero__grid,
    .qlg-cta {
        display: none;
    }

    .qlg-body {
        margin-top: 18px;
        padding-bottom: 0;
    }

    .qlg-card,
    .qlg-list__item,
    .qlg-check,
    .qlg-tile {
        border-color: #d7d5e6;
        box-shadow: none;
        break-inside: avoid;
    }

    .qlg-card {
        background: #fff;
    }
}