/* ==========================================================================
   Product page layer, loaded after aero.css.

   Only the components the product pages need and the rest of the site does
   not have: the measurement ledger, the readiness verdict band, and the
   small specification table. Everything else on the page is built from the
   existing .card, .grid, .split, .prose, .tags and .checklist components so
   a product page reads as part of the same site rather than a landing page
   bolted on the side.

   Every colour here resolves through a token declared in aero.css. Nothing
   is half declared: the site is dark in both themes because aero.css pins
   color-scheme, so a rule that only worked under one preference would be a
   rule nobody ever sees.
   ========================================================================== */

/* ------------------------------------------------------- price and rank --- */

/* Stated in the hero rather than on a pricing page, because the whole point
   of publishing it is that a stranger sees it without hunting. */
.hero-price {
    margin: 6px 0 22px;
    font-size: 1rem;
}

.hero-price b {
    color: var(--heading);
    font-weight: 700;
}

.hero-price span {
    color: var(--text-dim);
}

/* The comparison. A table rather than two lists of bullets: the reader is
   comparing across a row, and only a table lets them. */
.scroll-x {
    overflow-x: auto;
}

.cmp {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 30rem;
}

.cmp th,
.cmp td {
    text-align: left;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: var(--text-dim);
}

.cmp tr:first-child th {
    font-size: 0.68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 700;
    border-bottom: 2px solid var(--text-dim);
}

.cmp .l {
    color: var(--heading);
    font-weight: 600;
    width: 34%;
}

/* The right-hand column is the one being argued for, so it is set in the
   body colour while the comparison column stays dimmed. Not colour alone:
   it is also the column the header names. */
.cmp tr td:last-child {
    color: var(--text);
    font-weight: 500;
}

.cmp tr:first-child th:last-child {
    color: var(--eyebrow);
    border-bottom-color: var(--eyebrow);
}

/* ----------------------------------------------------- the sample report --- */

/* The example warning. It has to survive a reader who skims, so it is the
   first thing under the title, it is not a subtle tint, and the sentence
   that matters is bold rather than merely present. */
.warn-band {
    border: 1px solid var(--accent-warm);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--accent-warm) 8%, transparent);
    padding: 16px 20px;
    max-width: 74ch;
    color: var(--text);
    font-size: 0.97rem;
    margin: 0;
}

.warn-band b {
    color: var(--heading);
}

.rpt .pass,
.rpt .fail {
    font-weight: 700;
}

/* Pass and fail are carried by the words themselves, so the colour is
   reinforcement rather than the signal. */
.rpt .pass { color: var(--accent-warm); }
.rpt .fail { color: var(--heading); }
.rpt tr:last-child td { font-weight: 600; color: var(--text); }

.figs-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 28px;
}

.figs-row > div {
    background: var(--surface);
    padding: 18px 20px;
}

.figs-row .n {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
}

.figs-row .l {
    display: block;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.4;
}

/* ------------------------------------------------ the measurement ledger --- */

/* Ten families of measurement, each with the metric names spelled out. A
   grid separated by hairlines rather than ten bordered cards: the families
   are one instrument read together, not ten unrelated features. */
.measures {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.measures > li {
    background: var(--surface);
    padding: 26px 24px 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-content: start;
}

.measures .mx {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--eyebrow);
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}

.measures h3 {
    font-size: 1.06rem;
    color: var(--heading);
    margin: 0 0 8px;
}

.measures p {
    grid-column: 2;
    color: var(--text-dim);
    font-size: 0.95rem;
    margin: 0;
}

.measures .tags {
    grid-column: 2;
    margin-top: 14px;
}

.measures .tags span {
    font-size: 0.76rem;
    padding: 4px 11px;
}

/* --------------------------------------------------------- the verdict --- */

/* The point of the exercise is a decision, so the three answers it can end
   in are stated plainly. Each one is carried by its heading text as well as
   its accent, so the band still reads with colour removed. */
.verdict {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.verdict > li {
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--vd, var(--line));
    border-radius: var(--radius);
    padding: 22px 22px 20px;
}

.verdict .vd-ship { --vd: var(--accent-warm); }
.verdict .vd-fix { --vd: var(--accent-bright); }
.verdict .vd-no { --vd: var(--text-dim); }

.verdict h3 {
    font-size: 1.02rem;
    color: var(--heading);
    margin: 0 0 8px;
}

.verdict p {
    color: var(--text-dim);
    font-size: 0.94rem;
    margin: 0;
}

/* ---------------------------------------------------- specification rows --- */

/* A plain two-column list for the facts a buyer checks before a call: what
   it runs against, what it needs from you, what you keep afterwards. */
.spec {
    border-top: 1px solid var(--line);
    margin: 0;
}

.spec > div {
    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr;
    gap: 10px 28px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.spec dt {
    color: var(--heading);
    font-weight: 600;
    font-size: 0.95rem;
}

.spec dd {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin: 0;
}

@media (max-width: 560px) {
    .spec > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* --------------------------------------------------------- proof links --- */

/* Work someone can read, listed as links rather than described as
   experience. Used on the About page under the founder. */
.linklist {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.linklist li {
    border-bottom: 1px solid var(--line);
}

.linklist a {
    display: block;
    padding: 11px 0;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}

.linklist a:hover,
.linklist a:focus-visible {
    color: var(--link);
}

.linklist a::after {
    content: " \2192";
    color: var(--text-dim);
}

/* --------------------------------------------------------- legal pages --- */

/* One measure, generous spacing, no cards. A privacy policy is read by
   somebody checking a specific thing, so headings have to be findable and
   the prose has to be scannable. */
.legal {
    max-width: 68ch;
}

.legal .lead {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 2rem;
}

.legal h2 {
    font-size: 1.18rem;
    color: var(--heading);
    margin: 2.4rem 0 0.7rem;
}

.legal p,
.legal li {
    color: var(--text-dim);
}

.legal p {
    margin-bottom: 1rem;
}

.legal ul {
    margin: 0 0 1.2rem 1.1rem;
}

.legal li {
    margin-bottom: 0.45rem;
}

.legal strong {
    color: var(--text);
}

.legal .stamp {
    margin-top: 2.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.86rem;
}

/* ------------------------------------------------------------- callout --- */

/* Used for the honest boundaries. A rule and an indent, no tinted panel:
   the site has enough boxes already. */
.note-rule {
    border-left: 3px solid var(--accent-warm);
    padding: 4px 0 4px 20px;
    margin: 26px 0;
    max-width: 68ch;
}

.note-rule p {
    color: var(--text-dim);
    margin-bottom: .8rem;
}

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