/* The public legal pages (/privacy-policy, /terms-of-use).
   Self-contained, the arrangement about.css and faq.css follow: site.css
   supplies the tokens, the wrap and the section rhythm.

   The body of each document is bare <h2>/<p>/<ul>/<blockquote> from a partial
   under app/Views/legal/documents — the privacy policy is the same file the
   partner panel renders — so everything below styles elements rather than
   classes. A legal text should not have to wear our class names to be legible.

   The measure is deliberately narrower than the site's other prose: this is
   text people read a clause at a time. */

/* --- page band --- */

.gqv2 .gq-lg-band {
    background: var(--gq-sand);
    border-bottom: 1px solid var(--gq-line);
    padding: 46px 0;
}

.gqv2 .gq-lg-band-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gqv2 .gq-lg-band-mark {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 34px;
    font-size: 28px;
    color: #fff;
    background: linear-gradient(135deg, var(--gq-navy), var(--gq-blue-dark));
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45),
                0 18px 34px -12px rgba(18, 59, 99, .5),
                inset 0 2px 0 rgba(255, 255, 255, .22);
}

.gqv2 .gq-lg-band-inner .gqv2-script {
    font-size: 26px;
    line-height: 1;
}

.gqv2 .gq-lg-band-inner h1 {
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 6px 0 8px;
}

.gqv2 .gq-lg-band-inner > div > p {
    color: var(--gq-slate);
    font-size: 16px;
    line-height: 1.6;
    max-width: 720px;
}

.gqv2 .gq-lg-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--gq-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--gq-slate);
}

.gqv2 .gq-lg-updated i {
    font-size: 12px;
    color: var(--gq-blue);
}

/* --- layout --- */

.gqv2 .gq-lg-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
    align-items: start;
}

/* --- contents rail --- */

.gqv2 .gq-lg-side {
    position: sticky;
    /* Clears the site header, which is sticky too. */
    top: calc(var(--gq-header-h) + 20px);
}

.gqv2 .gq-lg-toc h2 {
    font-family: var(--gq-head-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-slate);
    margin: 0 0 14px;
}

.gqv2 .gq-lg-toc {
    border-left: 2px solid var(--gq-line);
    padding-left: 18px;
    max-height: calc(100vh - var(--gq-header-h) - 140px);
    overflow-y: auto;
}

.gqv2 .gq-lg-toc a {
    display: block;
    padding: 7px 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gq-mist);
    transition: color .16s ease, padding .16s ease;
}

.gqv2 .gq-lg-toc a:hover {
    color: var(--gq-blue);
    padding-left: 4px;
}

/* Set by legal.js as the reader passes each heading. */
.gqv2 .gq-lg-toc a.is-current {
    color: var(--gq-navy);
    padding-left: 10px;
    margin-left: -20px;
    border-left: 3px solid var(--gq-navy);
}

.gqv2 .gq-lg-print {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--gq-line);
    background: #fff;
    cursor: pointer;
    font-family: var(--gq-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gq-slate);
    transition: border-color .16s ease, color .16s ease;
}

.gqv2 .gq-lg-print:hover {
    border-color: var(--gq-navy);
    color: var(--gq-navy);
}

.gqv2 .gq-lg-print i {
    color: var(--gq-blue);
}

/* --- the document itself --- */

.gqv2 .gq-lg-doc {
    max-width: 760px;
    color: var(--gq-mist);
    font-size: 15.5px;
    line-height: 1.8;
}

.gqv2 .gq-lg-doc h2 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gq-navy);
    margin: 46px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gq-line);
    position: relative;
    /* The rail's anchors land below the sticky header, not under it. */
    scroll-margin-top: calc(var(--gq-header-h) + 24px);
}

/* The short accent legacy drew under each heading, kept. */
.gqv2 .gq-lg-doc h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 54px;
    height: 2px;
    background: var(--gq-gold);
}

.gqv2 .gq-lg-doc h2:first-child {
    margin-top: 0;
}

.gqv2 .gq-lg-doc p {
    margin: 0 0 18px;
}

.gqv2 .gq-lg-doc a {
    color: var(--gq-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The opening paragraph, before the first heading. */
.gqv2 .gq-lg-doc .gq-lg-lead {
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--gq-slate);
    margin-bottom: 34px;
}

/* A line the document sets above a heading rather than in it. */
.gqv2 .gq-lg-doc .gq-lg-kicker {
    margin: 46px 0 -8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-gold);
}

.gqv2 .gq-lg-doc .gq-lg-kicker + h2 {
    margin-top: 14px;
}

.gqv2 .gq-lg-doc ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.gqv2 .gq-lg-doc li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}

.gqv2 .gq-lg-doc li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gq-blue);
}

/* --- the "key point" callouts ---
   Part of the document, not decoration: legacy set one beside several sections
   and they say things the prose does not repeat. */

.gqv2 .gq-lg-doc .gq-lg-key {
    margin: 0 0 22px;
    padding: 18px 22px;
    border: 0;
    border-left: 4px solid var(--gq-blue);
    border-radius: 0 12px 12px 0;
    background: var(--gq-blue-tint);
}

.gqv2 .gq-lg-doc .gq-lg-key b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gq-blue-dark);
    margin-bottom: 6px;
}

.gqv2 .gq-lg-doc .gq-lg-key p {
    margin: 0;
    font-size: 15px;
    font-style: italic;
    color: var(--gq-slate);
}

.gqv2 .gq-lg-doc .gq-lg-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--gq-radius);
    background: var(--gq-cloud);
    border: 1px solid var(--gq-line);
    font-weight: 600;
}

/* --- see also --- */

.gqv2 .gq-lg-also {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 50px;
    padding-top: 26px;
    border-top: 1px solid var(--gq-line);
}

.gqv2 .gq-lg-also span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gq-slate);
    margin-right: 6px;
}

.gqv2 .gq-lg-also a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--gq-line);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gq-navy);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease;
}

.gqv2 .gq-lg-also a:hover {
    transform: translateY(-2px);
    border-color: var(--gq-blue);
}

.gqv2 .gq-lg-also a i {
    font-size: 13px;
    color: var(--gq-blue);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1000px) {
    .gqv2 .gq-lg-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* Above the text rather than beside it, and no longer sticky — a rail
       pinned to a phone screen is a rail covering the document. */
    .gqv2 .gq-lg-side {
        position: static;
    }

    .gqv2 .gq-lg-toc {
        max-height: 260px;
    }

    .gqv2 .gq-lg-doc {
        max-width: none;
    }
}

@media (max-width: 720px) {
    .gqv2 .gq-lg-band {
        padding: 34px 0;
    }

    .gqv2 .gq-lg-band-inner {
        gap: 16px;
    }

    .gqv2 .gq-lg-band-mark {
        width: 56px;
        height: 56px;
        border-radius: 26px;
        font-size: 22px;
    }

    .gqv2 .gq-lg-doc h2 {
        font-size: 19px;
        margin-top: 38px;
    }
}

/* ==================== PRINT ====================
   What the "save as PDF" button produces. The document and nothing else: the
   chrome, the rail and the closing band are all navigation. */

@media print {
    .gqv2 .gqv2-header,
    .gqv2 .gqv2-footer,
    .gqv2 .gqv2-band,
    .gqv2 .gq-lg-side,
    .gqv2 .gq-lg-also,
    .gqv2 .gq-modal,
    .gqv2 .gqv2-gm {
        display: none !important;
    }

    .gqv2 .gq-lg-band {
        background: none;
        padding: 0 0 20px;
    }

    .gqv2 .gq-lg-band-mark {
        display: none;
    }

    .gqv2 .gq-lg-layout {
        display: block;
    }

    .gqv2 .gq-lg-doc {
        max-width: none;
        color: #000;
        font-size: 11pt;
    }

    .gqv2 .gq-lg-doc h2 {
        /* A clause and its heading should not be split across a page. */
        break-after: avoid;
        margin-top: 24pt;
    }

    .gqv2 .gq-lg-doc .gq-lg-key {
        break-inside: avoid;
    }
}