/* ONBOORD — ticket-record world.
   Both public surfaces wear this: the landing page and the demo clinic.
   The strip is a run of coupons. Green stock carries the argument, receipt
   stock carries the evidence, carbon copy carries what the machine said.
   Validation red is reserved by law for stamps and struck figures. */

@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2-variations'),
         url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('/assets/fonts/courierprime-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('/assets/fonts/courierprime-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Stocks */
    --stock-green: #0c5140;
    --stock-green-deep: #073a2d;
    --stock-receipt: #f4f1e8;
    --stock-carbon: #14161a;

    /* The printed sheet a coupon's panels are struck on: brighter than the
       receipt stock they sit inside, which is what separates a filled-in panel
       from the coupon body around it. */
    --stock-sheet: #ffffff;

    --ink: #14170f;
    --ink-soft: #4d5347;
    --ink-on-green: #eef4ea;
    --ink-on-green-soft: #a9c9ba;
    --ink-on-carbon: #d8dde3;
    --ink-on-carbon-soft: #9aa4b2;
    --ink-bright: #ffffff;

    /* Signal inks. Never a fill, never decoration. */
    --validation: #c9342b;
    --amber: #e8a33d;
    --signal-ok: #5fd39a;

    --rule: #cfc9b8;
    --rule-on-green: #2c7a63;
    --rule-on-carbon: #2b3038;

    /* Hard offset shadows, zero blur: printed stock lifted off the page, not a
       glow. Two weights, one per stock the lifted thing sits on. */
    --shadow-stub: rgba(0, 0, 0, .22);
    --shadow-control: rgba(0, 0, 0, .28);

    --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono: 'Courier Prime', 'Courier New', Courier, monospace;

    --gap: clamp(3.5rem, 7vw, 7rem);
    --pad: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--stock-receipt);
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ---- coupon strip ------------------------------------------------------- */

/* The coupon itself is the centred column, so every child keeps its own measure
   and they all share one left edge. Centring each child instead gave headings
   and body copy different left edges, which read as a mistake because it was. */
.coupon {
    padding: var(--gap) max(var(--pad), calc((100% - 78rem) / 2));
    position: relative;
}

.coupon--green {
    background-color: var(--stock-green);
    color: var(--ink-on-green);
    /* Guilloché: the fine security ruling on printed ticket stock. */
    background-image:
        repeating-linear-gradient(58deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(-58deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 9px);
}
.coupon--carbon {
    background: var(--stock-carbon);
    color: var(--ink-on-carbon);
}

/* The seam between coupons is the stock change itself: a green band meeting a
   receipt band needs no drawn line, and an earlier `.perf` rule that drew one
   was never placed on a page. Removed rather than left as decoration in waiting. */

/* ---- type --------------------------------------------------------------- */

.label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-stretch: 88%;
    color: var(--ink-soft);
    margin: 0 0 .75rem;
}
.coupon--green .label { color: var(--ink-on-green-soft); }
.coupon--carbon .label { color: var(--ink-on-carbon-soft); }

h1, h2, h3 { margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.035em; }

h1 {
    font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);
    line-height: .96;
    font-stretch: 92%;
    text-wrap: balance;
    max-width: 16ch;
}
h2 {
    font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3.1rem);
    line-height: 1.03;
    text-wrap: balance;
    max-width: 22ch;
}
h3 { font-size: 1.0625rem; letter-spacing: -0.01em; font-weight: 800; }

p { margin: 0 0 1rem; max-width: 68ch; }
.lede { font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3rem); line-height: 1.45; max-width: 52ch; }
.small { font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.coupon--green .small { color: var(--ink-on-green-soft); }

.mono { font-family: var(--mono); font-variant-ligatures: none; }

/* ---- hero --------------------------------------------------------------- */

.masthead {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 1rem var(--pad);
    border-bottom: 2px solid var(--rule-on-green);
    background: var(--stock-green-deep);
    color: var(--ink-on-green);
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.wordmark {
    font-family: var(--sans);
    font-weight: 900;
    font-stretch: 105%;
    letter-spacing: .22em;
    font-size: .95rem;
    text-transform: none;
}
.masthead span { color: var(--ink-on-green-soft); }

.hero { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) {
    .hero { grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr); }
}
.hero__claim { max-width: 46rem; }
.hero .lede { color: var(--ink-on-green); opacity: .92; }

/* The stub torn off the coupon: the product's actual output, in the first
   viewport, before a single claim has been made about it. */
.stub {
    background: var(--stock-receipt);
    color: var(--ink);
    padding: 1.5rem;
    position: relative;
    box-shadow: 10px 10px 0 var(--shadow-stub);
}
.stub::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 -1px;
    width: 2px;
    background-image: repeating-linear-gradient(to bottom, var(--stock-green) 0 6px, transparent 6px 12px);
}
.stub dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1.25rem; font-family: var(--mono); font-size: .8125rem; }
.stub dt { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; align-self: center; }
.stub dd { margin: 0; overflow-wrap: anywhere; }
.stub__stampline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rule); padding-top: 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.btn {
    font-family: var(--sans);
    font-weight: 800;
    font-size: .9375rem;
    letter-spacing: .02em;
    text-decoration: none;
    padding: .85rem 1.5rem;
    border: 2px solid currentColor;
    color: var(--stock-green);
    background: var(--ink-on-green);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 4px 4px 0 var(--stock-green-deep);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--stock-green-deep); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--stock-green-deep); }
.btn--ghost {
    background: transparent;
    color: var(--ink-on-green);
    box-shadow: 4px 4px 0 var(--shadow-control);
}
.btn--ghost:hover { box-shadow: 6px 6px 0 var(--shadow-control); }

a { color: inherit; }
:where(a, .btn, summary):focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

/* ---- the two answers ---------------------------------------------------- */

.answers {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    border: 2px solid var(--rule);
    background: var(--stock-sheet);
}
@media (min-width: 56rem) {
    .answers { grid-template-columns: 1fr 1fr; }
    .answers > * + * { border-left: 2px dashed var(--rule); border-top: 0; }
}
.answers > * + * { border-top: 2px dashed var(--rule); }

.answer { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; }
.answer__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.answer__quote {
    font-family: var(--mono);
    font-size: .875rem;
    line-height: 1.65;
    white-space: pre-wrap;
    margin: 0 0 1rem;
    max-width: none;
}
.answer__note { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rule); }
.answer__head .label,
.answer__note .small { margin: 0; }

/* Carbon coupon inverts the ink; the stock decides, not the element. */
.coupon--carbon h2 { color: var(--ink-bright); }
.coupon--carbon .lede { color: var(--ink-on-carbon); }
.coupon--carbon .note-fine { color: var(--ink-on-carbon-soft); }
.note-fine { margin-top: 1.25rem; max-width: 60ch; }
.note-loose { margin-top: 1rem; }

.struck {
    text-decoration: line-through;
    text-decoration-color: var(--validation);
    text-decoration-thickness: 3px;
    color: var(--ink-soft);
}
.flag {
    font-family: var(--sans);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--validation);
    border: 1.5px solid var(--validation);
    padding: .15rem .4rem;
    white-space: nowrap;
}
.flag--ok { color: var(--stock-green); border-color: var(--stock-green); }

/* ---- stamp -------------------------------------------------------------- */

.stamp {
    font-family: var(--sans);
    font-weight: 900;
    font-size: clamp(1rem, 2.6vw, 1.5rem);
    letter-spacing: .16em;
    color: var(--validation);
    border: 4px double var(--validation);
    padding: .4rem 1rem;
    display: inline-block;
    transform: rotate(-4deg);
    opacity: .92;
}
@media (prefers-reduced-motion: no-preference) {
    .stamp--drop { animation: stampDown .5s cubic-bezier(.16, 1, .3, 1) both; }
    @keyframes stampDown {
        from { transform: rotate(-14deg) scale(1.5); opacity: 0; filter: blur(3px); }
        to   { transform: rotate(-4deg) scale(1); opacity: .92; filter: blur(0); }
    }
}

/* ---- segments (what an agent can do) ------------------------------------ */

.segments { border-top: 2px solid var(--rule-on-green); }
.segment {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1.5rem;
    align-items: baseline;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule-on-green);
}
@media (min-width: 48rem) {
    .segment { grid-template-columns: 3.5rem 15rem 1fr; }
}
.segment__seq { font-family: var(--mono); font-size: 1.5rem; color: var(--ink-on-green-soft); }
.segment__code {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--ink-on-green);
    grid-column: 2 / -1;
}
@media (min-width: 48rem) { .segment__code { grid-column: auto; } }
.segment__what { margin: 0; max-width: 46ch; grid-column: 1 / -1; }
@media (min-width: 48rem) { .segment__what { grid-column: auto; } }

/* ---- conditions (the refusals) ------------------------------------------ */

.conditions { display: grid; gap: 0; counter-reset: cond; }
@media (min-width: 52rem) { .conditions { grid-template-columns: 1fr 1fr; } }
.condition {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-top: 2px solid var(--rule);
}
@media (min-width: 52rem) {
    .condition:nth-child(odd) { border-right: 2px solid var(--rule); }
}
.condition h3 { text-transform: uppercase; letter-spacing: .04em; font-stretch: 88%; }
.condition p { margin-bottom: 0; }

/* ---- record (proof) ----------------------------------------------------- */

.record {
    background: var(--stock-carbon);
    color: var(--ink-on-carbon);
    font-family: var(--mono);
    font-size: .8125rem;
    line-height: 1.75;
    padding: clamp(1.25rem, 3vw, 2rem);
    overflow-x: auto;
    border: 2px solid var(--rule-on-carbon);
}
.record b { color: var(--amber); font-weight: 700; }
.record .ok { color: var(--signal-ok); }
.record dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .1rem 1.5rem; margin: 0; }
.record dt { color: var(--ink-on-carbon-soft); }
.record dd { margin: 0; }

/* What the agent said back, set as a hanging quotation rather than a tinted
   rail: the mark belongs to the text, not to a container. */
.said {
    margin: 1.25rem 0 0;
    padding-left: 1.75rem;
    text-indent: -1.75rem;
    color: var(--ink-on-carbon);
}
.said::before { content: '“'; color: var(--amber); font-size: 1.6em; line-height: 0; padding-right: .35rem; }

/* ---- status ------------------------------------------------------------- */

.status { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .status { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.status ul { list-style: none; margin: 0; padding: 0; }
.status li {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: .5rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: .9375rem;
}
.status li::before {
    font-family: var(--mono);
    font-weight: 700;
    content: '✓';
    color: var(--stock-green);
}
.status--not li::before { content: '×'; color: var(--validation); }

/* ---- footer ------------------------------------------------------------- */

.foot {
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-on-green-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    justify-content: space-between;
    padding-top: 2rem;
    border-top: 1px solid var(--rule-on-green);
}

/* ---- demo clinic surface ------------------------------------------------ */

.panel { border: 2px solid var(--rule); background: var(--stock-sheet); padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 1.5rem; }
.panel h2 { font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; font-stretch: 88%; margin-bottom: 1rem; max-width: none; }

.status-line { font-family: var(--mono); font-weight: 700; margin: 0 0 .5rem; }
.status-pending { color: var(--ink-soft); }
.status-on { color: var(--stock-green); }
.status-off { color: var(--validation); }

.help ol { margin: .5rem 0 .75rem 1.1rem; padding: 0; }
.help li { margin: .25rem 0; font-size: .9375rem; }

.tools { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tools li {
    font-family: var(--mono);
    font-size: .8125rem;
    border: 1.5px solid var(--stock-green);
    color: var(--stock-green);
    padding: .2rem .6rem;
}

table.services { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.services th, table.services td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.services th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-stretch: 88%; }
table.services td:first-child { font-family: var(--mono); }
tr.unpriced td:last-child { color: var(--validation); }

.activity { list-style: none; margin: .75rem 0 0; padding: 0; }
.event { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.activity .event:last-child { border-bottom: 0; }
.event strong { font-family: var(--mono); font-size: .8125rem; }
.event-ok strong { color: var(--stock-green); }
.event-error strong { color: var(--validation); }
.event-called strong { color: var(--ink-soft); }
.event pre {
    margin: .35rem 0 0;
    font-family: var(--mono);
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink-soft);
    max-height: 12rem;
    overflow: auto;
}

.muted { color: var(--ink-soft); font-size: .875rem; }
code {
    font-family: var(--mono);
    font-size: .875em;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    padding: .1em .35em;
}
[hidden] { display: none !important; }

/* ---- scan report -------------------------------------------------------- */

table.matrix { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.matrix th {
    text-align: left;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-stretch: 88%;
    color: var(--ink-on-green-soft);
    padding: .5rem .5rem;
    border-bottom: 2px solid var(--rule-on-green);
}
table.matrix td { padding: .6rem .5rem; border-bottom: 1px solid var(--rule-on-green); vertical-align: top; }
table.matrix td.mark { font-family: var(--mono); font-weight: 700; width: 1.5rem; }
table.matrix td.status, table.matrix td.runs { font-size: .75rem; white-space: nowrap; color: var(--ink-on-green-soft); }
table.matrix td.why { color: var(--ink-on-green-soft); font-size: .875rem; }
table.matrix tr.ok td.mark { color: var(--signal-ok); }
table.matrix tr.bad td.mark { color: var(--amber); }
table.matrix tr.unsure td.mark, table.matrix tr.untested td.mark { color: var(--ink-on-green-soft); }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: .4rem 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist.ok li::before { content: '✓ '; color: var(--stock-green); font-family: var(--mono); font-weight: 700; }
.checklist.bad li::before { content: '✕ '; color: var(--validation); font-family: var(--mono); font-weight: 700; }
.checklist li.muted::before { content: ''; }

details.run { border-bottom: 1px solid var(--rule-on-carbon); padding: .6rem 0; }
details.run summary { cursor: pointer; font-size: .9375rem; }
details.run .ok { color: var(--signal-ok); }
details.run .bad { color: var(--amber); }
details.run .unsure, details.run .untested { color: var(--ink-on-carbon-soft); }
details.run p { color: var(--ink-on-carbon-soft); }
.flagline { color: var(--amber); }
ul.evidence { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .8125rem; }
ul.evidence li { padding: .25rem 0; color: var(--ink-on-carbon); }
.tag {
    font-size: .6875rem;
    border: 1px solid var(--rule-on-carbon);
    padding: .05rem .35rem;
    color: var(--ink-on-carbon-soft);
    margin-right: .4rem;
}
.coupon--carbon .muted { color: var(--ink-on-carbon-soft); }