/* Public homepage — editorial layout. Token-only; see assets/css/tokens.css. */

.lp-wrap,
.lp-hero,
.lp-story,
.lp-close-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: 2rem;
}

.lp-measure {
    max-width: 660px;
    margin: 0 auto;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.lp-hero {
    padding-block: 6rem 4.5rem;
    text-align: center;
}

.lp-kicker {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--graphite);
}

.lp-headline {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-hero);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 1.5rem auto 1.75rem;
    max-width: 16ch;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}

.lp-headline em {
    font-style: italic;
    font-weight: 400;
}

.lp-lede {
    font-size: 1.25rem;
    color: var(--graphite);
    max-width: 38ch;
    margin: 0 auto 2.5rem;
    text-wrap: balance;
}

/* The second line is its own statement, not a clause: a block rather than a
   <br>, so each half still wraps on its own at narrow widths. */
.lp-lede span {
    display: block;
}

.lp-check {
    display: flex;
    max-width: 560px;
    margin: 0 auto;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0.375rem 0.375rem 0.375rem 1.5rem;
    background: var(--surface);
}

.lp-check-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1.0625rem;
    color: var(--ink);
    outline: none;
}

.lp-check-input::placeholder {
    color: var(--quiet);
}

.lp-note {
    margin: 0.875rem 0 0;
    font-size: 0.8125rem;
    color: var(--graphite);
}

/* Inline validation, no script: :user-invalid only matches once the visitor
   has typed and left the field, so the page never opens on an error. An
   empty field is left to the browser's own "required" prompt on submit. */
.lp-note-error {
    display: none;
    color: var(--fail);
    font-weight: 600;
}

.lp-check:has(.lp-check-input:user-invalid:not(:placeholder-shown)) {
    border-color: var(--fail);
}

.lp-check:has(.lp-check-input:user-invalid:not(:placeholder-shown)) + .lp-note .lp-note-ok {
    display: none;
}

.lp-check:has(.lp-check-input:user-invalid:not(:placeholder-shown)) + .lp-note .lp-note-error {
    display: inline;
}

/* ── schematic band ───────────────────────────────────────────────────── */

.schem {
    margin: 0;
}

/* V2's own band: paper, ruled top and bottom. The dark inset read as a
   distinct object, but this is the original and the tokens make the swap
   six declarations rather than a recolour of the whole drawing. */
.schem-band {
    background: var(--paper-2);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: 2.5rem 1.5rem;
}

.schem-svg {
    display: block;
    width: 100%;
    max-width: 1136px;
    height: auto;
    margin: 0 auto;
    font-family: var(--font-mono);
}

.schem-svg--tall {
    display: none;
    max-width: 380px;
}

.schem-node rect {
    fill: none;
    stroke: var(--hair-strong);
    stroke-width: 1.5;
}

.schem-node--hot rect {
    stroke: var(--ink);
}

.schem-node--bad rect {
    stroke: var(--fail);
}

/* Where mail arrives: green along the top and left, red along the right and
   bottom. The same message is either thing until something checks it, and a
   single-colour edge here would answer the question the drawing exists to ask. */
.schem-edge {
    fill: none;
    stroke-width: 1.5;
}

.schem-edge--ok { stroke: var(--pass); }
.schem-edge--bad { stroke: var(--fail); }

/* Where legitimate mail starts and ends: the same colour as its wire. */
.schem-node--ok rect {
    stroke: var(--pass);
}

.schem-node--us rect {
    stroke: var(--pass);
}

.schem-lbl {
    fill: var(--ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.schem-node--us .schem-lbl {
    fill: var(--pass);
}

/* 11px, not the 10px of the dark original: the same grey carries less
   perceived contrast on paper than it did on ink. */
.schem-sub,
.schem-note {
    fill: var(--graphite);
    font-size: 11px;
}

.schem-wire {
    fill: none;
    stroke: var(--hair-strong);
    stroke-width: 1.2;
}

.schem-wire--ok {
    stroke: var(--pass);
}

.schem-wire--bad {
    stroke: var(--fail);
    stroke-dasharray: 5 4;
}

.schem-wire--report {
    stroke: var(--hair-strong);
}

/* Neutral until DMARC has ruled: the packet carries no verdict on the way in. */
.schem-pkt {
    fill: var(--graphite);
    offset-rotate: 0deg;
}

.schem-pkt--ok { fill: var(--pass); }
.schem-pkt--bad { fill: var(--fail); }
.schem-pkt--report { fill: var(--hair-strong); }

/* One message, run twice on one eight-second clock: it passes in the first
   half and fails in the second, so the drawing shows both outcomes without
   two senders. Every phase is a window on the same clock, which is what keeps
   the handovers — split, merge, verdict — landing on the same frame.

   Pass:  lead 0-4%, branches 4-20%, wires green 18-32%, DMARC green 20-32%,
          core 21-31%, delivered 32-46%.
   Fail:  lead 50-54%, branches 54-70%, SPF blinks 70-78%, DKIM blinks 78-86%,
          DMARC red 69-88%, refused 88-99%. */
.schem-pkt--lead { animation: schem-lead 8s linear infinite; }
.schem-pkt--branch { animation: schem-branch 8s linear infinite; }
.schem-pkt--core { animation: schem-core 8s linear infinite; }
.schem-pkt--ok { animation: schem-out-ok 8s linear infinite; }
.schem-pkt--bad { animation: schem-out-bad 8s linear infinite; }
.schem-pkt--report { animation: schem-report 8s linear infinite; }

@keyframes schem-lead {
    0% { offset-distance: 0%; opacity: 1; }
    4% { offset-distance: 100%; opacity: 1; }
    4.01%, 50% { offset-distance: 0%; opacity: 0; }
    50.01% { offset-distance: 0%; opacity: 1; }
    54% { offset-distance: 100%; opacity: 1; }
    54.01%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes schem-branch {
    0%, 4% { offset-distance: 0%; opacity: 0; }
    4.01% { offset-distance: 0%; opacity: 1; }
    20% { offset-distance: 100%; opacity: 1; }
    20.01%, 54% { offset-distance: 0%; opacity: 0; }
    54.01% { offset-distance: 0%; opacity: 1; }
    70% { offset-distance: 100%; opacity: 1; }
    70.01%, 100% { offset-distance: 100%; opacity: 0; }
}

/* The merged packet only crosses DMARC on the run that passes. */
@keyframes schem-core {
    0%, 21% { offset-distance: 0%; opacity: 0; }
    21.01% { offset-distance: 0%; opacity: 1; }
    31% { offset-distance: 100%; opacity: 1; }
    31.01%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes schem-out-ok {
    0%, 32% { offset-distance: 0%; opacity: 0; }
    32.01% { offset-distance: 0%; opacity: 1; }
    46% { offset-distance: 100%; opacity: 1; }
    46.01%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes schem-out-bad {
    0%, 88% { offset-distance: 0%; opacity: 0; }
    88.01% { offset-distance: 0%; opacity: 1; }
    99% { offset-distance: 100%; opacity: 1; }
    99.01%, 100% { offset-distance: 100%; opacity: 0; }
}

/* Reported either way: a refusal is as much a verdict as a delivery. */
@keyframes schem-report {
    0%, 32% { offset-distance: 0%; opacity: 0; }
    32.01% { offset-distance: 0%; opacity: 1; }
    46% { offset-distance: 100%; opacity: 1; }
    46.01%, 88% { offset-distance: 0%; opacity: 0; }
    88.01% { offset-distance: 0%; opacity: 1; }
    99% { offset-distance: 100%; opacity: 1; }
    99.01%, 100% { offset-distance: 100%; opacity: 0; }
}

/* Each check's answer reaching DMARC: both green together when the message
   passes; red one after the other when it does not, so you can see that the
   two checks are read separately. */
.schem-wire--merge-spf { animation: schem-merge-spf 8s linear infinite; }
.schem-wire--merge-dkim { animation: schem-merge-dkim 8s linear infinite; }
/* The last stretch into DMARC carries whatever the two checks handed over,
   so it takes the verdict's colour and holds it while the box is filled. */
.schem-wire--stem { animation: schem-stem 8s linear infinite; }

@keyframes schem-stem {
    0%, 18% { stroke: var(--hair-strong); }
    18.01%, 32% { stroke: var(--pass); }
    32.01%, 70% { stroke: var(--hair-strong); }
    70.01%, 88% { stroke: var(--fail); }
    88.01%, 100% { stroke: var(--hair-strong); }
}

@keyframes schem-merge-spf {
    0%, 18% { stroke: var(--hair-strong); }
    18.01%, 32% { stroke: var(--pass); }
    32.01%, 70% { stroke: var(--hair-strong); }
    70.01%, 71.5% { stroke: var(--fail); }
    71.51%, 73% { stroke: var(--hair-strong); }
    73.01%, 74.5% { stroke: var(--fail); }
    74.51%, 76% { stroke: var(--hair-strong); }
    76.01%, 78% { stroke: var(--fail); }
    78.01%, 100% { stroke: var(--hair-strong); }
}

@keyframes schem-merge-dkim {
    0%, 18% { stroke: var(--hair-strong); }
    18.01%, 32% { stroke: var(--pass); }
    32.01%, 78% { stroke: var(--hair-strong); }
    78.01%, 79.5% { stroke: var(--fail); }
    79.51%, 81% { stroke: var(--hair-strong); }
    81.01%, 82.5% { stroke: var(--fail); }
    82.51%, 84% { stroke: var(--hair-strong); }
    84.01%, 86% { stroke: var(--fail); }
    86.01%, 100% { stroke: var(--hair-strong); }
}

/* The verdict box fills for a second when it rules, and its words flip to
   paper so they stay readable against it. */
.schem-node--verdict rect { animation: schem-verdict 8s linear infinite; }

.schem-node--verdict .schem-lbl { animation: schem-verdict-lbl 8s linear infinite; }
.schem-node--verdict .schem-sub { animation: schem-verdict-sub 8s linear infinite; }

@keyframes schem-verdict {
    0%, 20% { fill: transparent; stroke: var(--ink); }
    20.01%, 32% { fill: var(--pass); stroke: var(--pass); }
    32.01%, 69% { fill: transparent; stroke: var(--ink); }
    69.01%, 88% { fill: var(--fail); stroke: var(--fail); }
    88.01%, 100% { fill: transparent; stroke: var(--ink); }
}

@keyframes schem-verdict-lbl {
    0%, 20% { fill: var(--ink); }
    20.01%, 32% { fill: var(--paper); }
    32.01%, 69% { fill: var(--ink); }
    69.01%, 88% { fill: var(--paper); }
    88.01%, 100% { fill: var(--ink); }
}

@keyframes schem-verdict-sub {
    0%, 20% { fill: var(--graphite); }
    20.01%, 32% { fill: var(--paper); }
    32.01%, 69% { fill: var(--graphite); }
    69.01%, 88% { fill: var(--paper); }
    88.01%, 100% { fill: var(--graphite); }
}

/* ── chapters ─────────────────────────────────────────────────────────── */

.lp-chapter {
    padding-block: 7rem;
}

.lp-chapter + .lp-chapter {
    border-top: 1px solid var(--hair);
}

.lp-num {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--graphite);
}

.lp-chapter h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.875rem 0 1.75rem;
}

.lp-chapter p {
    margin-bottom: 1.25rem;
    color: var(--graphite);
}

.lp-lede-sm {
    font-size: 1.3125rem;
    color: var(--ink) !important;
    line-height: 1.5;
}

/* ── interactive DMARC record ─────────────────────────────────────────── */

.lp-record {
    position: relative;
    max-width: 1000px;
    margin: 4.5rem auto 0;
    /* Room for the explanation panel, which sits in this padding. */
    padding-bottom: 7rem;
    font-family: var(--font-mono);
    /* Sized so the six short tags fit one line of the 1000px record. */
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.lp-record-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3em 0.4em;
}

.lp-record-line + .lp-record-line {
    margin-top: 0.3em;
}

/* Each tag looks like what it is, a button: the copy says "select a tag",
   and underlined text did not say it could be pressed. */
.lp-tag {
    display: inline-block;
    padding: 0 0.3em;
    margin: 0;
    border: 1px solid var(--hair);
    border-radius: 0.25em;
    background: var(--surface);
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    word-break: break-word;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.1s ease;
}

.lp-tag.is-policy { color: var(--fail); }
.lp-tag.is-report { color: var(--pass); }

.lp-tag:hover {
    border-color: currentColor;
}

.lp-tag:active {
    transform: scale(0.97);
}

/* The selected tag. Until one is touched, p=reject stands selected, so the
   section reads complete before anyone interacts with it. */
.lp-tag:focus,
.lp-record:not(:has(.lp-tag:hover, .lp-tag:focus)) .lp-tag.is-default {
    border-color: currentColor;
    background: var(--paper-2);
}

/* One place for every explanation: centred under the record, so it never
   covers the lines below the tag that opened it. */
.lp-tag-note {
    position: absolute;
    left: 50%;
    top: calc(100% - 6.25rem);
    z-index: 2;
    width: max-content;
    max-width: min(26rem, 100%);
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--hair);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
    font: 500 0.875rem/1.45 var(--font-body);
    letter-spacing: 0;
    color: var(--graphite);
    text-align: center;
    opacity: 0;
    translate: -50% 0;
    transform: scale(0.97);
    transform-origin: 50% 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

/* :focus rather than :focus-visible — a touch device has no hover, and a tap
   gives the button focus, so this is what makes the tags work on a phone. */
.lp-tag:hover .lp-tag-note,
.lp-record:not(:has(.lp-tag:hover)) .lp-tag:focus .lp-tag-note,
.lp-record:not(:has(.lp-tag:hover, .lp-tag:focus)) .lp-tag.is-default .lp-tag-note {
    opacity: 1;
    transform: none;
}

.lp-legend {
    display: flex;
    gap: 1.75rem;
    justify-content: center;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--graphite);
}

.lp-legend-key::before {
    content: "";
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.lp-legend-key--policy::before { background: var(--fail); }
.lp-legend-key--report::before { background: var(--pass); }

/* ── parsed report ────────────────────────────────────────────────────── */

.lp-report {
    max-width: 860px;
    margin: 3.5rem auto 0;
    padding: 2rem;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lp-report header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.875rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--hair);
    font-size: 0.75rem;
    color: var(--graphite);
}

.lp-report-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.5fr;
    gap: 1rem;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px dashed var(--hair);
}

.lp-report-row:last-child {
    border-bottom: 0;
}

.lp-report-ip {
    font-size: 0.8125rem;
}

.lp-report-who {
    font-size: 0.8125rem;
    color: var(--graphite);
}

.lp-report-vol {
    font-size: 0.875rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lp-verdict {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.lp-verdict--pass { background: var(--pass-bg); color: var(--pass); }
.lp-verdict--fail { background: var(--fail-bg); color: var(--fail); }
.lp-verdict--warn { background: var(--warn-bg); color: var(--warn); }

/* ── policy journey ───────────────────────────────────────────────────── */

.lp-journey {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3rem;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    overflow: hidden;
}

.lp-journey > div {
    padding: 2rem 1.75rem;
    background: var(--surface);
}

.lp-journey > div + div {
    border-left: 1px solid var(--hair);
}

.lp-journey h3 {
    font-size: 1.375rem;
    font-weight: 500;
    margin-bottom: 0.625rem;
}

.lp-journey p {
    font-size: 0.9375rem;
    margin: 0;
}

.lp-journey .is-goal {
    background: var(--ink-surface);
    color: var(--ink-surface-text);
}

.lp-journey .is-goal p {
    color: var(--ink-surface-quiet);
}

.lp-teaser {
    max-width: 660px;
    margin: 3rem auto 0;
    font-size: 0.9375rem;
    text-align: center;
}

.lp-teaser a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

/* ── closing ──────────────────────────────────────────────────────────── */

.lp-close {
    background: var(--ink-surface);
    color: var(--ink-surface-text);
    padding-block: 7rem;
    text-align: center;
}

.lp-close h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-h1);
    line-height: 1;
    letter-spacing: -0.02em;
    max-width: 18ch;
    margin: 0 auto 1.25rem;
}

.lp-close p {
    color: var(--ink-surface-quiet);
    font-size: 1.1875rem;
    max-width: 40ch;
    margin: 0 auto 2.25rem;
}

.lp-close-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-pill--invert {
    background: var(--ink-surface-text);
    border-color: var(--ink-surface-text);
    color: var(--ink-surface);
}

.btn-pill--invert:hover {
    color: var(--ink-surface);
}

.btn-pill--invert-ghost {
    background: transparent;
    border-color: var(--ink-surface-hair);
    color: var(--ink-surface-text);
}

.btn-pill--invert-ghost:hover {
    color: var(--ink-surface-text);
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .lp-hero,
    .lp-story,
    .lp-close-inner {
        padding-inline: 1.25rem;
    }

    .lp-hero {
        padding-block: 3.5rem 3rem;
    }

    .lp-check {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius);
        padding: 1rem;
        gap: 0.75rem;
    }

    .lp-check .btn-pill {
        justify-content: center;
    }

    /* A 1136-wide viewBox scaled to a phone renders its 11px labels at about
       4px, so the phone gets its own drawing rather than a smaller one. */
    .schem-svg--wide {
        display: none;
    }

    .schem-svg--tall {
        display: block;
    }

    .schem-band {
        padding: 1.5rem 1rem;
    }

    .lp-chapter {
        padding-block: 4rem;
    }

    .lp-record {
        font-size: 1rem;
        line-height: 1.9;
    }

    /* The panel spans the record on a phone; the record wraps to more
       lines there, so the panel gets more room below it too. */
    .lp-record {
        padding-bottom: 8rem;
    }

    .lp-tag-note {
        top: calc(100% - 7.25rem);
        width: 100%;
        max-width: none;
    }

    .lp-report {
        padding: 1.25rem;
    }

    .lp-report-row {
        grid-template-columns: 1fr auto;
        row-gap: 0.5rem;
    }

    .lp-report-vol {
        grid-column: 2;
        text-align: right;
    }

    .lp-journey {
        grid-template-columns: 1fr;
    }

    .lp-journey > div + div {
        border-left: 0;
        border-top: 1px solid var(--hair);
    }

    .lp-legend {
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
    }

    .lp-close {
        padding-block: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Park one packet partway along each wire so the diagram still reads as
       a flow. The lead and core packets stay hidden: parked together with the
       others they would read as a queue of five dots rather than one message.
       Stop every transition on the page too. */
    .schem-pkt {
        animation: none;
        opacity: 0;
    }

    .schem-pkt--branch,
    .schem-pkt--ok,
    .schem-pkt--report {
        opacity: 1;
        offset-distance: 55%;
    }

    /* No blinking, no filled verdict: the wires and the box hold their
       resting state so the drawing is a diagram rather than a performance. */
    .schem-wire--merge-spf,
    .schem-wire--merge-dkim,
    .schem-wire--stem,
    .schem-node--verdict rect,
    .schem-node--verdict .schem-lbl,
    .schem-node--verdict .schem-sub {
        animation: none;
    }

    .lp-tag,
    .lp-tag-note,
    .btn-pill {
        transition: none;
    }

    .lp-tag:active,
    .lp-tag-note {
        transform: none;
    }
}

/* ── MCP pill ─────────────────────────────────────────────────────────────
   A translucent card in the bottom corner, shown by landing.js from the
   first frame; --mcp-lift raises it above the cookie bar while that is open.
   It rises from the edge it sits on and leaves the same way; below the
   modals (1050) and clear of the sticky header. */
.lp-mcp {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + var(--mcp-lift, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 1030;
    width: min(25rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 1.125rem;
    align-items: center;
    padding: 1.25rem 2.5rem 1.25rem 1.125rem;
    border: 1px solid var(--hair);
    border-radius: 1.25rem;
    background: var(--paper-glass);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(1rem);
    /* No transition on bottom: landing.js measures the pill where it lands. */
    transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The class sets display, which would otherwise outrank [hidden]. */
.lp-mcp[hidden] {
    display: none;
}

.lp-mcp.is-shown {
    opacity: 1;
    transform: none;
}

/* Folded, while the full card would cover the hero's domain field: one
   question and the link. */
.lp-mcp.is-compact {
    width: max-content;
    max-width: calc(100% - 2rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
}

.lp-mcp.is-compact :is(.lp-mcp-thumb, .lp-mcp-kicker, .lp-mcp-q + .lp-mcp-q, .lp-mcp-t) {
    display: none;
}

.lp-mcp.is-compact .lp-mcp-q {
    font-size: 1.0625rem;
}

/* Even folded it would cover the field: out of the way until it scrolls off. */
.lp-mcp.is-aside {
    opacity: 0;
    pointer-events: none;
}

/* A phone in miniature: the question, then a failing row among passing ones. */
.lp-mcp-thumb {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    height: 8.5rem;
    padding: 0.85rem 0.45rem;
    border: 0.25rem solid var(--ink-surface);
    border-radius: 0.9rem;
    background: var(--surface-solid);
}

.lp-mcp-thumb i {
    display: block;
    height: 0.4rem;
    border-radius: 0.25rem;
    background: var(--hair);
}

.lp-mcp-thumb .is-ask {
    width: 70%;
    justify-self: end;
    background: var(--ink);
}

.lp-mcp-thumb .is-fail {
    height: 0.7rem;
    background: var(--fail-bg);
    box-shadow: inset 2px 0 0 var(--fail);
}

.lp-mcp-body {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.lp-mcp-kicker {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--graphite);
}

.lp-mcp-q {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.2;
    text-wrap: balance;
}

.lp-mcp-t {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--graphite);
}

.lp-mcp-link {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.lp-mcp-link:hover {
    color: var(--accent-strong);
}

.lp-mcp-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--graphite);
    font-size: 0.75rem;
    cursor: pointer;
}

.lp-mcp-close:hover {
    background: var(--paper-2);
    color: var(--ink);
}

@media (max-width: 600px) {
    /* Full width on a phone, so it sits above the cookie-settings icon in
       the bottom-left corner rather than over it. */
    .lp-mcp {
        right: 1rem;
        bottom: calc(5rem + var(--mcp-lift, 0px) + env(safe-area-inset-bottom, 0px));
        grid-template-columns: minmax(0, 1fr);
        padding-left: 1rem;
    }

    .lp-mcp-thumb {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-mcp {
        transform: none;
        transition: opacity 0.2s ease;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lp-mcp {
        background: var(--surface-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}