/* Hallmark · shape: Banner, Article, Table, FAQ rows, Index · genre: editorial · theme: brand · redesign: full · copy: verbatim
 * paper: oklch(1 0 0) · accent: oklch(0.77 0.2 135) · display: Literata · body: Hanken Grotesk · hero: Banner · nav: kept · footer: kept · signature: the weight-loss pages join the ticket 23 family — dose and comparison tables with tabular numerals, FAQs as side-by-side rows, contact and guide lists as Index rows
 * axes: light/roman-serif/chromatic-green · posture: Banner · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, one sheet serves five pages; the pilot and the comparison-table page were reviewed in screenshots at three widths, the rest at 1280 */
/* Hallmark · answered F1 · copy: verbatim, the pages keep their own apostrophes, rupee signs and the comparison table's check marks */
/* Weight-loss pages only (ticket 25). Tokens, controls and chrome come from
   ../shell/shell.css; the Banner, Article and Index compositions come from
   ./article.css, which this sheet relies on and never edits. This sheet adds
   the Table and FAQ compositions from site/design.md, and Index rows that
   carry no link. */

/* Banner: these pages carry no hero picture, so the head stands on its own
   and the long GLP-1 head wraps with balance. */

.hm-banner h1 {
    max-width: 18ch;
    text-wrap: balance;
}

/* Table: full width, hairline rows, tabular numerals, the header row one step
   heavier in the body face. The wrapper scrolls on a phone so the page itself
   never does. */

.wl-table-wrap + p {
    margin-top: 24px;
}

.wl-table-wrap {
    overflow-x: auto;
    margin-top: 0;
    -webkit-overflow-scrolling: touch;
}

.wl-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 17px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

/* A table of three columns or fewer fits a phone; wider comparison tables keep
   their minimum width and scroll inside the wrapper. */

@media (max-width: 599px) {
    .wl-table:not(:has(th:nth-child(4))) {
        min-width: 0;
        font-size: 15px;
    }

    .wl-table:not(:has(th:nth-child(4))) th,
    .wl-table:not(:has(th:nth-child(4))) td {
        padding: 12px 12px 12px 0;
    }
}

.wl-table th,
.wl-table td {
    padding: 16px 24px 16px 0;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
    vertical-align: top;
}

.wl-table thead th {
    font-size: 15px;
    font-weight: 600;
}

.wl-table tbody td:first-child {
    font-weight: 600;
}

/* FAQ: rows parted by hairlines, question left and answer right from 800px,
   stacked below it. */

.wl-faq {
    border-top: 1px solid var(--hairline);
}

.wl-faq-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
}

.wl-faq-item h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
}

.wl-faq-item p {
    margin: 0;
    color: var(--graphite);
    font-size: 17px;
    line-height: 1.55;
}

@media (min-width: 800px) {
    .wl-faq-item {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 64px;
        align-items: baseline;
        padding: 32px 0;
    }
}

/* Index rows without a link (the cost breakdown, the areas served): the same
   row as .hm-index a, with the border on the row itself. */

.wl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
}

@media (min-width: 800px) {
    .wl-row {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 64px;
        align-items: baseline;
        padding: 32px 0;
    }
}

.wl-row address {
    font-style: normal;
}

.wl-row .hm-index-desc p {
    margin: 8px 0 0;
}

/* A row's tag line under its description: small, quiet, untracked. */

.wl-tags {
    display: block;
    margin-top: 8px;
    color: var(--graphite);
    font-size: 14px;
    line-height: 1.5;
}

/* Video: the page's own embed, square-edged, no frame. */

.wl-video {
    display: block;
    width: 100%;
    max-width: 820px;
    aspect-ratio: 16 / 9;
    border: 0;
    background: var(--mist);
}