/* ================================================================
   /secure-ai-agents — the architecture evaluation deck.

   Fifteen scroll-snap pages: hero, foundations, orientation, six
   premise modules, the matrix, the operational run, limits, fit, the
   metaphor, and the decision. Everything structural comes from
   sitewide.css — .pages, .page, .hero-wrap, .eyebrow, .product,
   .teaser, .card, .card-graphite, .card-inner, .btn1, footer, and the
   palette. What lives here is what only this page's argument needs:
   the premise module grammar, the fixed premise navigator, the
   comparison matrix, and the timeline that shows WHEN control is
   applied.

   ONE PAGE PER PREMISE is the constraint that shapes this file, and
   fitting it is not optional: sitewide's .page is height:100dvh with
   overflow:hidden, so a band that does not fit is not scrolled to — it
   paints over the band beneath it. Every vertical measure below is
   therefore driven by vh rather than a fixed rem, so the module scales
   with the viewport instead of spilling out of it, and .pages .page
   relaxes to height:auto/min-height:100dvh as the backstop for the
   sizes where even that is not enough. Each module is composed as three
   bands — their premise, their words, our break — not one long column.

   Below 769px sitewide releases the snap (.pages height:auto), and
   this file follows it back into flow.
   ================================================================ */

:root {
    /* the deck's vertical unit — it has to give on a short laptop */
    --gap-v: clamp(0.5rem, 1.5vh, 1.75rem);
}

/* A snap page cannot scroll its own content, so a band that does not fit does
   not get cut — it paints straight over the band below it, which is what the
   accent break and the rejection line were disappearing under. Two things
   answer that, and both are needed:

   1. Every vertical measure inside a module is driven by vh below, so at 800px
      the module is proportionally smaller rather than the same module spilling.
   2. This rule, as the guarantee. height:auto with a 100dvh floor means a page
      that still cannot fit gets TALLER and scrolls, instead of overlapping.
      Snap points sit at each page start, so the deck still steps page by page;
      an oversized page just scrolls through before the next snap. Nothing is
      ever painted over or silently cut. */
.pages .page {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

/* Pages clear the fixed chrome: the site nav, then the premise
   navigator under it. */
/* 3.1rem is the navigator's own height plus a hair — measured, not
   guessed: the bar is one line of 0.8rem Oxanium in 0.8rem of padding.
   The bottom clears the scroll cue, which is positioned against this box. */
.pages .page {
    position: relative;
    padding: calc(var(--nav-height) + 3.1rem) 0 4.25rem 0;
}

/* Scroll cue — a deck of fifteen viewports needs to say so. The .chevron
   button is sitewide's (same bounce, same 24×14 mark as the home page);
   this only places it. Absolute rather than a flex child: the hero
   distributes its own children with space-evenly, and an extra item in
   that flow would redistribute his lockup. The last page has none —
   nothing follows it. */
.deck-cue {
    position: absolute;
    bottom: 2.6rem;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Hero ───────────────────────────────────────────────────────── */

.secure-hero {
    flex: 1;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--shadow);
}

/* ── Foundations ────────────────────────────────────────────────── */

.premise {
    font-family: "Oxanium", sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 1vw + 1.8rem, 3rem);
    letter-spacing: -0.01em;
    color: var(--soft);
}

.card-inner p {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 0.25vw + 0.95rem, 1.2rem);
    line-height: 1.6;
    color: var(--ice);
}

.secure-premises {
    justify-content: center;
    gap: 3rem;
    background-color: var(--umber);
}

.foundations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: min(1120px, 90vw);
    margin-inline: auto;
}

/* .card-inner centres its children — right for a one-line card, wrong for
   a paragraph a CISO is reading. Left-aligned and padded, here only. */
.foundations .card-inner {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 1rem;
    height: 100%;
    padding: 2rem;
}

.example {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 0.3vw + 1rem, 1.35rem);
    letter-spacing: 0.02em;
    color: var(--ice);
}

/* ── The measure ────────────────────────────────────────────────── */

/* One column on every page: wide enough for the matrix, narrow enough to
   read. It fills the page vertically so each page can distribute its own
   bands rather than stack from the top. */
.sec-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: min(1120px, 100%);
    margin-inline: auto;
    padding-inline: 3rem;
}

/* Pages whose content is shorter than the viewport centre it; the modules
   distribute their three bands instead (below). */
.pg-mid .sec-wrap {
    justify-content: center;
    gap: var(--gap-v);
}

.sec-label {
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--accent);
}

.sec-head {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: clamp(1.3rem, 2.4vh, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ice);
    max-width: 26ch;
}

.sec-lede {
    max-width: 68ch;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.55vh, 1.1rem);
    line-height: 1.55;
    color: var(--soft);
}

/* The label that names each part of a premise module. Deliberately quiet —
   it is scaffolding for the reader, not a heading in the argument. */
.part-label {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: clamp(0.35rem, 0.9vh, 0.75rem);
}

/* ── Orientation ────────────────────────────────────────────────── */

.secure-orientation {
    background-color: var(--hairline);
}

.axis-q {
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 1.8vw + 1.35rem, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ice);
    max-width: 20ch;
}

.axis-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: var(--card-border);
}

.axis-cell {
    padding: 1.5rem 1.4rem;
    border-left: var(--card-border);
}

.axis-cell:first-child {
    border-left: 0;
}

.axis-cell--nomenon {
    background: var(--graphite);
}

.axis-who {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.axis-cell--nomenon .axis-who {
    color: var(--accent);
}

.axis-says {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ice);
}

/* ── Premise navigator ──────────────────────────────────────────── */

/* Fixed, not sticky. The deck snaps one page at a time, so a bar stuck to
   the top of a section would leave the screen with that section. It is a
   way in, not the argument — the deck reads straight through if it is
   never touched. */
.premise-nav {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 6;
    background: var(--shadow);
    border-top: var(--card-border);
    border-bottom: var(--card-border);
}

.premise-nav ol {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: min(1120px, 100%);
    margin-inline: auto;
    padding: 0 3rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.premise-nav ol::-webkit-scrollbar {
    display: none;
}

.premise-nav a {
    display: block;
    padding: 0.8rem 0.25rem;
    font-family: "Oxanium", sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
    border-bottom: 1px solid transparent;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.premise-nav a:hover {
    color: var(--accent);
}

.premise-nav a.is-current {
    color: var(--ice);
    border-bottom-color: var(--accent);
}

.pn-n {
    color: var(--slate);
    margin-right: 0.5rem;
}

.premise-nav a.is-current .pn-n {
    color: var(--accent);
}

/* ── The premise module — one page, three bands ─────────────────── */

/* Band 1 names the premise, band 2 holds it up (their reasoning on the
   left, their words on the right), band 3 is the break. The bands are
   spaced apart rather than stacked so the page reads as a whole
   composition at a glance, which is what a snap page has to do. */
.mod .sec-wrap {
    justify-content: space-between;
    gap: var(--gap-v);
}

.mod-n {
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: clamp(0.35rem, 0.9vh, 0.75rem);
}

/* The premise itself carries the module — a sentence, not a title. */
.mod .premise {
    font-size: clamp(1.15rem, 2.1vh, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ice);
    max-width: 30ch;
}

.held-by {
    margin-top: clamp(0.3rem, 0.8vh, 0.6rem);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.mod-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    min-height: 0;
}

.mod-left {
    display: flex;
    flex-direction: column;
    gap: var(--gap-v);
    min-height: 0;
}

/* Causal chain — the mechanism, drawn. Stacked inside a module column,
   because a five-step chain across half a page is five cramped words per
   step. The arrow is generated, never typed. */
.chain {
    list-style: none;
    border: var(--card-border);
}

.chain li {
    position: relative;
    padding: clamp(0.3rem, 0.85vh, 0.55rem) 0.9rem clamp(0.3rem, 0.85vh, 0.55rem)
        2.1rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.78rem, 1.45vh, 0.95rem);
    line-height: 1.4;
    color: var(--soft);
    border-top: var(--card-border);
}

.chain li:first-child {
    border-top: 0;
}

.chain li::after {
    content: "↓";
    position: absolute;
    top: 50%;
    left: 0.8rem;
    transform: translateY(-50%);
    font-family: "Oxanium", sans-serif;
    font-size: 0.9rem;
    color: var(--slate);
}

.chain li:last-child::after {
    content: none;
}

/* The consequence chain is the same diagram on NOMENON's side of the
   break: same construction, lit instead of quiet. */
.chain--nomenon {
    border-color: var(--slate);
    background: var(--graphite);
}

.chain--nomenon li {
    color: var(--ice);
    border-top-color: var(--slate);
}

.chain--nomenon li::after {
    color: var(--accent);
}

/* The shortcoming — one plain sentence, on the emphasis surface. */
.mod-left .card-graphite {
    padding: clamp(0.6rem, 1.4vh, 1rem) 1.1rem;
}

.mod-left .card-graphite .part-label {
    margin-bottom: 0.5rem;
}

.shortcoming {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.82rem, 1.6vh, 1.15rem);
    line-height: 1.45;
    color: var(--ice);
}

/* Evidence — their words, presented as documents rather than
   testimonials. The rule down the left is the citation marker. */
.mod-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.evidence {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 1.1vh, 1.1rem);
}

.quote {
    padding-left: 1.1rem;
    border-left: 2px solid var(--slate);
}

.quote blockquote {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.76rem, 1.5vh, 1rem);
    line-height: 1.42;
    color: var(--ice);
}

.quote figcaption {
    margin-top: clamp(0.2rem, 0.5vh, 0.4rem);
    font-family: "Oxanium", sans-serif;
    font-weight: 400;
    font-size: clamp(0.6rem, 1.15vh, 0.72rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The source is the link. A citation a buyer cannot open is a claim, so
   every quote that has a public primary source carries one. */
.q-src {
    color: var(--soft);
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

a.q-src:hover,
a.q-src:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.q-sep {
    color: var(--slate);
    padding-inline: 0.4rem;
}

/* Marks a citation that is NOT the vendor's own words — an analyst or a
   reporter characterising them. Stated on the page rather than blurred,
   because the method is that the middle column is their words. */
.q-tag {
    margin-left: 0.6rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--slate);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: var(--muted);
}

/* The break. Everything above it is their premise; everything below is a
   different architecture. The accent rule is the only place the page
   raises its voice. */
.mod-turn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding-top: clamp(0.65rem, 1.4vh, 1.1rem);
    border-top: 2px solid var(--accent);
}

.reject-line {
    align-self: center;
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.95vh, 1.7rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ice);
}

.mod-consequence {
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 0.9vh, 0.75rem);
}

.outcome {
    padding-left: 1.1rem;
    border-left: 2px solid var(--accent);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.45vh, 1.1rem);
    line-height: 1.45;
    color: var(--soft);
}

/* ── Comparison matrix ──────────────────────────────────────────── */

/* Construction copied from the manifesto's comparison table — fixed
   layout, hairline row rules, Oxanium heads over IBM Plex cells — with
   this page's tokens rather than that page's older palette. */
.matrix-scroll {
    overflow-x: auto;
    border: var(--card-border);
}

.matrix {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.matrix col:nth-child(1) {
    width: 26%;
}

.matrix col:nth-child(2) {
    width: 20%;
}

.matrix col:nth-child(3) {
    width: 30%;
}

.matrix col:nth-child(4) {
    width: 24%;
}

.matrix thead th {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--soft);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--slate);
}

.matrix tbody td {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.78rem, 1.5vh, 0.9rem);
    line-height: 1.45;
    color: var(--ice);
    padding: clamp(0.5rem, 1.1vh, 0.9rem) 1rem;
    border-bottom: var(--card-border);
    vertical-align: top;
}

.matrix tbody td:first-child {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soft);
}

.matrix tbody tr:last-child td {
    border-bottom: 0;
}

.matrix tbody tr.is-nomenon td {
    background: var(--graphite);
    color: var(--ice);
}

.matrix tbody tr.is-nomenon td:first-child {
    color: var(--accent);
}

/* ── Operational run: when control is applied ───────────────────── */

/* One incident, run through every premise. The columns are time; the mark
   is where that architecture gets to act; the bar is what remains
   possible until it does. */
.run {
    border: var(--card-border);
}

.run-head,
.run-row {
    display: grid;
    grid-template-columns: 10rem repeat(5, 1fr) 15rem;
    align-items: center;
}

.run-head {
    border-bottom: 1px solid var(--slate);
}

.run-head span {
    padding: clamp(0.35rem, 0.85vh, 0.6rem) 0.5rem;
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.run-row {
    border-top: var(--card-border);
}

.run-row:first-child {
    border-top: 0;
}

.run-name {
    padding: clamp(0.4rem, 1.1vh, 1rem) 1rem;
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soft);
}

/* The bar starts in the first time column and runs to the point of
   control. .to-t1 … .to-t5 say where that is; the mark is its end cap. */
.run-bar {
    position: relative;
    height: 2px;
    background: var(--slate);
    margin-inline: 0.5rem;
}

.run-bar::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 9px;
    height: 9px;
    transform: translateY(-50%);
    background: var(--ice);
}

.to-t1 {
    grid-column: 2 / 3;
}
.to-t2 {
    grid-column: 2 / 4;
}
.to-t3 {
    grid-column: 2 / 5;
}
.to-t4 {
    grid-column: 2 / 6;
}
.to-t5 {
    grid-column: 2 / 7;
}

/* Always the last column. Without this the note is auto-placed into
   whatever cell the bar stopped short of, and every row is a different
   height. */
.run-note {
    grid-column: 7 / 8;
    padding: clamp(0.4rem, 0.9vh, 0.6rem) 1rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.72rem, 1.35vh, 0.8rem);
    line-height: 1.4;
    color: var(--muted);
}

/* NOMENON's row is not an empty row. The determination is made before the
   line starts, so the bar spans the whole of it and carries the accent. */
.run-row.is-nomenon {
    background: var(--graphite);
    border-top-color: var(--slate);
}

.run-row.is-nomenon .run-name {
    color: var(--accent);
}

.run-row.is-nomenon .run-bar {
    background: var(--accent);
}

.run-row.is-nomenon .run-bar::after {
    left: -1px;
    right: auto;
    background: var(--accent);
}

.run-row.is-nomenon .run-note {
    color: var(--soft);
}

/* ── Limits, fit, metaphor, and the close ───────────────────────── */

.claims {
    border: var(--card-border);
}

.claims div {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 1.5rem;
    padding: clamp(0.55rem, 1.2vh, 1rem) 1.25rem;
    border-top: var(--card-border);
}

.claims div:first-child {
    border-top: 0;
}

.claims dt {
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft);
}

.claims dd {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(0.78rem, 1.45vh, 0.95rem);
    line-height: 1.5;
    color: var(--ice);
}

.claims-close {
    padding-left: 1.25rem;
    border-left: 2px solid var(--accent);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.2rem);
    line-height: 1.5;
    color: var(--soft);
    max-width: 62ch;
}

.open-questions {
    padding: 1.25rem;
    border: 1px solid var(--slate);
    background: var(--graphite);
}

.open-questions ul {
    padding-left: 1.1rem;
    color: var(--soft);
}

.open-questions li {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.7;
}

.metaphor-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.metaphor-text p {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 0.35vw + 0.95rem, 1.25rem);
    line-height: 1.65;
    color: var(--ice);
}

.metaphor-text p + p {
    margin-top: 1.25rem;
}

.choose {
    border-top: var(--card-border);
}

.choose li {
    list-style: none;
    padding: clamp(0.55rem, 1.2vh, 1rem) 0;
    border-bottom: var(--card-border);
    font-family: "Oxanium", sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.3rem);
    color: var(--soft);
}

.choose li:last-child {
    color: var(--ice);
    font-weight: 600;
}

.terms {
    font-family: "Oxanium", sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 1.2vw + 1.1rem, 2.3rem);
    letter-spacing: -0.01em;
    color: var(--ice);
}

.close-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.close-cta p {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: var(--muted);
}

/* The footer is fixed site-wide; the deck scrolls under it, so it needs
   the page's own surface behind it. */
/* ── Footer ─────────────────────────────────────────────────────── */

/* Same model as index: the shared fixed footer stays OFF the deck until the
   last page. A footer under page 3 of 15 reads as "end of page" and kills the
   handoff to the next premise. This overrides sitewide's timed accentIn;
   js/secure.js drives the class off the last page's intersection, exactly as
   js/index.js does for the home deck. Desktop only — below 769px sitewide
   hides the footer on every page anyway. */
footer {
    background: var(--shadow);
}

@media (min-width: 769px) {
    footer {
        animation: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s ease;
    }

    body.on-last-page footer {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Short ──────────────────────────────────────────────────────── */

/* A snap page cannot scroll, so on a short desktop window the densest
   three pages — the run, the limits, the fit questions — have to give.
   Only the parts whose minimum is a fixed rem are touched; everything
   else is already viewport-relative. */
@media screen and (min-width: 770px) and (max-height: 720px) {
    :root {
        --gap-v: 0.6rem;
    }

    /* the cue tucks closer to the edge so the page keeps the height */
    .pages .page {
        padding-bottom: 2.75rem;
    }

    .secure-premises {
        gap: 1.5rem;
    }

    .deck-cue {
        bottom: 1.5rem;
    }

    .sec-head {
        font-size: clamp(1.3rem, 1vw + 1.05rem, 1.8rem);
    }

    .sec-lede {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .run-note,
    .claims dd,
    .open-questions li {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .claims div {
        padding-block: 0.45rem;
    }

    .open-questions {
        padding: 0.9rem 1.1rem;
    }

    .run-head span,
    .run-name,
    .run-note {
        padding-block: 0.4rem;
    }

    /* four citations on one page (Authority, Timing) are what run closest to
       the edge here */
    .evidence {
        gap: 0.5rem;
    }

    .quote blockquote {
        line-height: 1.4;
    }

    .quote figcaption {
        margin-top: 0.25rem;
    }
}

/* ── Narrow ─────────────────────────────────────────────────────── */

/* sitewide releases the snap below 769px — .pages goes height:auto and
   the document scrolls. The deck follows it back into flow: pages stop
   being viewports, the two-column bands stack, and the navigator goes
   back to sticky, since there are no snap boundaries left to escape. */
@media screen and (max-width: 769px) {
    /* The navigator is in flow here and carries the clearance for the fixed
       mobile bar itself, so the pages only owe each other rhythm. */
    .pages .page {
        padding: 2rem 1.25rem 2.5rem 1.25rem;
        scroll-margin-top: calc(var(--nav-bar-mob) + 3rem);
    }

    /* No snap, no viewports to step through — the document just scrolls,
       exactly as the home page drops its chevron on a phone. */
    .deck-cue {
        display: none;
    }

    .sec-wrap {
        padding-inline: 0;
        gap: 1.5rem;
    }

    .pg-mid .sec-wrap,
    .mod .sec-wrap {
        justify-content: flex-start;
    }

    /* space-evenly does the spacing on a full-viewport page; in flow the
       hero's four blocks would otherwise sit on top of each other. */
    .secure-hero {
        gap: 1.25rem;
    }

    .foundations {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 1.25rem;
    }

    .foundations .card-inner {
        padding: 1.5rem;
    }

    .premise-nav {
        position: sticky;
        top: var(--nav-bar-mob);
        margin-top: var(--nav-bar-mob);
    }

    .premise-nav ol {
        justify-content: flex-start;
        gap: 1.5rem;
        padding-inline: 1.25rem;
    }

    .axis-row {
        grid-template-columns: 1fr;
    }

    .axis-cell {
        border-left: 0;
        border-top: var(--card-border);
    }

    .axis-cell:first-child {
        border-top: 0;
    }

    .mod-body,
    .mod-turn,
    .metaphor-body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* The timeline stops being a timeline on a phone: the label, the point
       of control, and what remains possible read as a stack. Block layout
       drops grid-column, and a bar that is always full width says nothing
       — the length IS the argument, so the same five stops become width. */
    .run-head {
        display: none;
    }

    .run-row,
    .run-row.is-nomenon {
        display: block;
        padding: 1rem 1rem 1.25rem;
    }

    .run-name,
    .run-note {
        padding: 0;
    }

    .run-bar {
        margin: 0.9rem 0;
    }

    .to-t1 {
        width: 20%;
    }
    .to-t2 {
        width: 40%;
    }
    .to-t3 {
        width: 60%;
    }
    .to-t4 {
        width: 80%;
    }
    .to-t5 {
        width: 100%;
    }

    .claims div {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}