/* ===================================
   Trust pages - /remote and /promises

   These two pages get their own, more generous setting. They are read under
   stress, often aloud over the phone, sometimes by someone who is worried
   they are being scammed right now. So: larger type than the rest of the
   site, near-black on white for maximum contrast, a narrower measure, and
   nothing that moves.

   Deliberately absent: any code entry box (a text field asking for numbers
   is the scam's visual signature), any hosted installer, any QR code, any
   pop-up, and any urgency.
   =================================== */

.trust-page {
    max-width: 46rem;
    margin: 0 auto;
    padding: 48px 20px 72px;
    font-size: 1.1em;     /* 21px against the 19px body -- em, not rem:
                             rem would resolve against the 16px root and
                             silently give 17.6px */
    line-height: 1.7;
    color: #111111;       /* 18.9:1 on white - well past AAA */
}

.trust-page h1 {
    font-size: 2.4em;
    line-height: 1.15;
    color: var(--brand);
    margin: 0 0 20px;
}

.trust-page h2 {
    font-size: 1.5em;
    line-height: 1.25;
    color: var(--brand);
    margin: 48px 0 14px;
}

.trust-page h3 {
    font-size: 1.2em;
    line-height: 1.3;
    color: #111111;
    margin: 0 0 10px;
}

.trust-page p {
    max-width: 60ch;
    margin: 0 0 18px;
}

.trust-page section {
    margin-bottom: 8px;
}

.lede {
    font-size: 1.12em;
    color: #111111;
}

.muted {
    color: var(--ink-soft);
}

.emphasis {
    font-weight: 700;
}

.trust-page a {
    color: var(--brand);
    text-underline-offset: 3px;
}

/* --- the stop box ------------------------------------------------------- */
/* Sober rather than alarming. A red slab with a siren would read as the very
   thing it is warning about. */
.stop {
    border: 3px solid #a02c12;
    border-radius: var(--radius);
    background: #fdf5f2;
    padding: 24px 26px;
    margin: 32px 0 40px;
}

.trust-page .stop-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.35em;
    line-height: 1.25;
    color: #8f2710;   /* 7.2:1 on #fdf5f2 */
    margin: 0 0 14px;
}

.trust-page .stop-title .icon {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.15em;
    stroke-width: 2;
}

.stop p {
    color: #111111;
    margin-bottom: 12px;
}

.stop p:last-child {
    margin-bottom: 0;
}

.stop-action {
    font-weight: 700;
    font-size: 1.08em;
}

.stop a {
    color: #8f2710;
}

/* --- numbered steps ----------------------------------------------------- */
ol.bigsteps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 24px 0 32px;
}

ol.bigsteps > li {
    counter-increment: step;
    position: relative;
    padding: 0 0 0 62px;
    margin-bottom: 30px;
}

ol.bigsteps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.25em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

ol.bigsteps p {
    margin-bottom: 10px;
}

/* Marks the button that is not switched on yet, so nobody is left pressing
   something that does nothing. */
.pending {
    background: var(--surface-sunken);
    border-left: 4px solid var(--ink-floor);
    padding: 12px 16px;
    color: var(--ink-soft);
    font-style: italic;
}

/* --- reassurance panels ------------------------------------------------- */
.reassure {
    background: var(--brand-tint);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 32px 0;
}

.reassure h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--brand);
}

.reassure h3 .icon {
    width: 1.3em;
    height: 1.3em;
}

.reassure p:last-child {
    margin-bottom: 0;
}

.family h3 {
    align-items: flex-start;
}

/* --- lists -------------------------------------------------------------- */
ul.never {
    list-style: none;
    padding: 0;
    margin: 20px 0 28px;
}

ul.never > li {
    position: relative;
    padding: 14px 0 14px 34px;
    border-bottom: 1px solid var(--rule);
    max-width: 62ch;
}

ul.never > li:last-child {
    border-bottom: 0;
}

ul.never > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45em;
    width: 18px;
    height: 3px;
    background: #a02c12;
    border-radius: 2px;
}

ul.checks {
    list-style: none;
    padding: 0;
    margin: 20px 0 28px;
}

ul.checks > li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    max-width: 62ch;
}

ul.checks > li:last-child {
    border-bottom: 0;
}

ul.checks .icon {
    width: 1.5em;
    height: 1.5em;
    color: var(--brand);
    margin-top: 0.15em;
}

/* --- the closing call line ---------------------------------------------- */
.callout-line {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--rule);
    font-size: 1.1em;
}

.bignum {
    display: inline-block;
    font-size: 1.35em;
    font-weight: 700;
    white-space: nowrap;
}

/* --- small screens ------------------------------------------------------ */
@media (max-width: 480px) {
    .trust-page {
        padding: 32px 16px 56px;
    }

    .trust-page h1 {
        font-size: 1.9em;
    }

    ol.bigsteps > li {
        padding-left: 56px;
    }
}

/* --- printed, this page becomes the card by the phone ------------------- */
@media print {
    .header,
    footer {
        display: none;
    }

    .trust-page {
        max-width: none;
        font-size: 12pt;
        color: #000;
        padding: 0;
    }

    .stop {
        border: 2pt solid #000;
        background: #fff;
    }

    .reassure,
    .pending {
        background: #fff;
        border: 1pt solid #666;
    }

    a[href^="tel:"]::after {
        content: "";
    }

    section {
        break-inside: avoid;
    }
}