/* DutyTick - single stylesheet
   One light theme. No frameworks, no external requests.
   Newsreader is self-hosted, subset to latin, SIL OFL 1.1 (assets/fonts/OFL.txt). */

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-subset.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colour language. One hue only: the tick green.
       Green means live, done, on duty. Grey means later, off, not yet.
       There is no third colour, and no blue anywhere. */
    --paper: #fbfaf7;        /* page */
    --paper-sunk: #f3f1ea;   /* closing band, inset panels */
    --ink: #16181a;          /* headings, primary text */
    --ink-soft: #4a4b4e;     /* body prose, lead */
    --ink-muted: #7a7c80;    /* labels, captions, "later" */
    --rule: #e4e0d7;         /* hairlines */
    --rule-strong: #cbc6b9;  /* input borders, dormant marks */
    --accent: #1b4a4a;       /* the tick */
    --accent-deep: #123a3a;  /* links, pressed states */
    --accent-wash: #e5eeed;  /* flag chip, focus glow */
    --warn: #8a3324;         /* errors only */

    --measure: 34rem;
    --wide: 60rem;

    --step-1: 0.8125rem;
    --step0: 1rem;
    --step1: 1.1875rem;
    --step2: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    --step3: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --step4: clamp(2.1rem, 1.5rem + 3.2vw, 3.4rem);

    --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --gap: 1rem;
    --band: clamp(3.5rem, 8vw, 6.5rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

::selection {
    background: var(--accent-wash);
}

/* ---------- layout ---------- */

.wrap {
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.band {
    padding-block: var(--band);
    border-top: 1px solid var(--rule);
}

.band:first-of-type {
    border-top: 0;
}

.col {
    max-width: var(--measure);
}

/* Running prose is set in the serif. The sans is kept for labels,
   buttons, form fields and anything tabular. */
.col p {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.58;
    color: var(--ink-soft);
}

.split {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
    .split {
        grid-template-columns: 1fr 1fr;
    }

    .split--lead {
        grid-template-columns: 5fr 7fr;
    }
}

/* The access section stacks its text above the form, and the form
   takes the full row so the product picker stays short and wide. */
.split--stack {
    grid-template-columns: 1fr;
}

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

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

h1 {
    font-size: var(--step4);
    font-weight: 480;
    line-height: 1.08;
    letter-spacing: -0.008em;
}

h2 {
    font-size: var(--step3);
    font-weight: 460;
    line-height: 1.18;
    letter-spacing: -0.004em;
}

h3 {
    font-size: var(--step1);
    font-weight: 520;
}

p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: var(--step2);
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.38;
    color: var(--ink-soft);
}

.note {
    font-size: var(--step-1);
    color: var(--ink-muted);
    line-height: 1.55;
}

a {
    color: var(--accent-deep);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- lists ---------- */

.rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.rows li {
    border-bottom: 1px solid var(--rule);
    padding: 1.15rem 0;
    display: grid;
    gap: 0.15rem;
}

.rows strong {
    font-weight: 600;
}

.rows--wide {
    margin-top: 2.5rem;
}

.rows--wide li {
    padding: 1.35rem 0;
}

@media (min-width: 52rem) {
    .rows--wide li {
        grid-template-columns: 18rem 1fr;
        gap: 2rem;
        align-items: baseline;
    }
}

.rows span {
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

/* ---------- skip link ---------- */

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
}

.skip:focus {
    left: 0.75rem;
    top: 0.75rem;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: 2px;
}

/* ---------- header ---------- */

.masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}

.masthead .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding-block: 1.1rem;
}

/* The tick and the wordmark stand on one hairline. Same device as
   every rule on the page, which is the point. */
.brand {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 450;
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    margin-right: auto;
    padding-bottom: 0.3rem;
}

.brand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--accent);
    opacity: 0.4;
}

.brand img {
    width: 19px;
    height: auto;
    align-self: center;
}

.masthead nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.masthead nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.masthead nav a:hover {
    color: var(--ink);
}

/* used by the 404 page */
.flag {
    display: inline-block;
    font-size: var(--step-1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent-deep);
    background: var(--accent-wash);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
}

/* ---------- section numbering rail ---------- */

.band {
    position: relative;
}

.num {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    display: block;
    margin-bottom: 1.25rem;
}

@media (min-width: 64rem) {
    .band--railed .wrap {
        display: grid;
        grid-template-columns: 4rem 1fr;
        column-gap: 2rem;
    }

    .band--railed .num {
        margin: 0;
        padding-top: 0.4rem;
        border-top: 2px solid var(--accent);
    }
}

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

.hero {
    position: relative;
    padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 9vw, 7.5rem);
    /* the mark behind the headline hangs past the right edge on
       purpose; without this its overhang widens the page on phones */
    overflow-x: hidden;
    overflow-x: clip;
}

/* The tick mark, huge and faint, sitting behind the headline. */
.hero::before {
    content: "";
    position: absolute;
    top: -6rem;
    right: -6rem;
    width: clamp(26rem, 44vw, 42rem);
    aspect-ratio: 1;
    background: url("../images/mark.svg") no-repeat center / contain;
    opacity: 0.045;
    z-index: 0;
    pointer-events: none;
}

.hero > .wrap {
    position: relative;
    z-index: 1;
}

.hero-head {
    position: relative;
}

.only-wide {
    display: none;
}

@media (min-width: 46rem) {
    .only-wide {
        display: inline;
    }
}

.hero h1 {
    /* the explicit break decides the rag, so balance must not */
    text-wrap: normal;
    max-width: 34ch;
    margin-bottom: 0;
    font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem);
}

.hero-under {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding-top: clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid var(--rule);
    align-items: start;
}

@media (min-width: 52rem) {
    .hero-under {
        grid-template-columns: 1fr 1fr;
    }
}

.hero .lead {
    max-width: 28rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}

.hero-words {
    position: relative;
    z-index: 1;
}

.status {
    margin: 1.75rem 0 0;
    font-size: var(--step-1);
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

/* ---------- the week strip ---------- */

.punch {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.9rem;
}

.punch-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: clamp(160px, 22vw, 210px);
    padding-bottom: 0.1rem;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-align: right;
}

.punch-days {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;
}

/* two faint lines behind the bars, matched to the scale labels.
   The third line is the baseline on each track. */
.punch-days::before,
.punch-days::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule);
    pointer-events: none;
}

.punch-days::before {
    top: 0;
}

.punch-days::after {
    top: calc(clamp(160px, 22vw, 210px) / 2);
}

.punch .day {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.punch .track {
    position: relative;
    height: clamp(160px, 22vw, 210px);
    border-bottom: 1px solid var(--rule-strong);
}

.punch .bar {
    position: absolute;
    left: 24%;
    right: 24%;
    top: var(--in);
    bottom: var(--out);
    background: var(--accent);
    opacity: 0.9;
}

.punch .bar--part {
    background: repeating-linear-gradient(
        135deg,
        var(--accent) 0 3px,
        var(--accent-wash) 3px 6px
    );
}

.punch .bar--off {
    top: 30%;
    bottom: 0;
    background: none;
    opacity: 1;
    border: 1px dashed var(--rule-strong);
    border-bottom: 0;
}

.punch .lbl {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: center;
    padding-top: 0.55rem;
}

.punch .hrs {
    font-size: 0.6875rem;
    color: var(--ink-soft);
    text-align: center;
    padding-top: 0.15rem;
    white-space: nowrap;
}

.punch-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-top: 1.25rem;
    font-size: var(--step-1);
    color: var(--ink-muted);
}

.punch-key span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.punch-key i {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--accent);
}

.punch-key i.part {
    background: repeating-linear-gradient(135deg, var(--accent) 0 3px, var(--accent-wash) 3px 6px);
}

.punch-key i.off {
    background: none;
    border: 1px dashed var(--rule-strong);
}

/* ---------- catalog (what is coming) ---------- */

.catalog {
    list-style: none;
    margin: 2.5rem 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(2rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 46rem) {
    .catalog {
        grid-template-columns: 1fr 1fr;
    }
}

.catalog li {
    position: relative;
    padding: 1.2rem 0 1.35rem 1.6rem;
    border-top: 1px solid var(--rule);
}

.catalog li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.75rem;
    width: 0.62rem;
    height: 0.34rem;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
}

/* Card titles are h4: they sit under the group heading (.cat-head, an h3),
   so they carry the h3 look without taking the h3 level. */
.catalog h4 {
    font-family: var(--serif);
    letter-spacing: -0.005em;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 0.3rem;
    font-size: var(--step1);
    font-weight: 500;
}

.catalog p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 34rem;
}

/* Card titles stay quiet until hovered, like the rest of the page. */
.catalog h4 a {
    color: var(--ink);
    text-decoration: none;
}

/* Group headings inside the catalog section */
.cat-head {
    margin: 3rem 0 0.5rem;
    font-size: var(--step2);
    font-weight: 450;
    font-family: var(--serif);
    letter-spacing: 0.01em;
}

.cat-head:first-of-type {
    margin-top: 2rem;
}

/* Quiet status words, not chips */
.soon {
    color: var(--ink-muted);
    font-style: italic;
}

/* ---------- trio ---------- */

.trio {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
    border-top: 1px solid var(--rule);
}

.trio > div {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 52rem) {
    .trio {
        grid-template-columns: repeat(3, 1fr);
        border-bottom: 1px solid var(--rule);
    }

    .trio > div {
        padding: 2rem clamp(1.25rem, 3vw, 2rem);
        border-bottom: 0;
        border-left: 1px solid var(--rule);
    }

    .trio > div:first-child {
        border-left: 0;
        padding-left: 0;
    }
}

.trio .idx {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--accent);
    font-weight: 600;
    display: block;
    margin-bottom: 0.9rem;
}

.trio h3 {
    font-size: var(--step2);
    margin-bottom: 0.5rem;
}

.trio p {
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

/* ---------- oversized inline list ---------- */

.bigline {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem);
    line-height: 1.25;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 2rem;
    max-width: 22ch;
}

.bigline em {
    font-style: normal;
    color: var(--ink-muted);
}

/* ---------- definition table ---------- */

.deftable {
    margin-top: 2.5rem;
    border-top: 1px solid var(--ink);
}

.deftable > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem 2rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 52rem) {
    .deftable > div {
        grid-template-columns: 14rem 1fr;
    }
}

.deftable dt {
    font-weight: 600;
    margin: 0;
}

.deftable dd {
    margin: 0;
    color: var(--ink-soft);
}

.deftable .tag {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0.3rem;
}

/* ---------- questions ---------- */

.qa {
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--ink);
}

.qa > div {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
}

.qa dt {
    font-family: var(--serif);
    font-size: var(--step1);
    font-weight: 520;
    color: var(--ink);
    margin: 0 0 0.4rem;
}

.qa dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.58;
    color: var(--ink-soft);
}

/* ---------- closing band ---------- */

.band--sunk {
    background: var(--paper-sunk);
    border-top: 1px solid var(--rule);
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--accent-deep);
    border-radius: 2px;
    background: var(--accent-deep);
    color: #fff;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}

.btn--quiet:hover {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.link-arrow {
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 2px;
}

.link-arrow:hover {
    border-color: var(--ink);
}

/* ---------- form ---------- */

.form {
    max-width: 26rem;
}

.form.form--wide {
    max-width: none;
}

.field {
    margin-bottom: 1.15rem;
}

.field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.field .req {
    color: var(--warn);
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
}

.field textarea {
    resize: vertical;
}

.field input:not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.field input:not([type="checkbox"])::placeholder {
    color: #a3a29c;
}

/* The Turnstile widget. Its interior is a cross-origin iframe and cannot be
   styled at all, so this is only about how it sits: a slightly wider gap above
   it than between two fields, since it is a different kind of thing from the
   inputs, and a guard so its fixed 300px cannot push the page sideways at
   narrow widths. The light theme is set on the element itself in the markup,
   because the site has one theme and does not follow the system setting. */
.field--turnstile {
    margin-top: 1.6rem;
}

.field--turnstile .cf-turnstile {
    max-width: 100%;
    overflow-x: auto;
}

/* Sits between the verification widget and the submit button, so the answer
   to pressing that button appears where the button is. */
.form-message {
    display: none;
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: 0.7rem 0.85rem;
    margin-bottom: 1rem;
    border-left: 2px solid;
    background: var(--paper-sunk);
    margin-top: 1rem;
}

.form-message.info,
.form-message.error,
.form-message.success {
    display: block;
}

.form-message.info {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.form-message.error {
    border-color: var(--warn);
    color: var(--warn);
}

.form-message.success {
    border-color: var(--accent);
    color: var(--accent-deep);
}

/* Product checkboxes, three groups side by side. */
.products-field {
    border: 0;
    padding: 0;
    margin-bottom: 1.15rem;
    min-width: 0;
}

.products-field legend {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.25rem;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0.9rem 1rem;
}

@media (min-width: 46rem) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.products-group {
    min-width: 0;
}

.products-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin: 0 0 0.4rem;
}

.products-group .check {
    display: block;
    font-size: 0.875rem;
    padding: 0.35rem 0;
    cursor: pointer;
}

.products-group .check input {
    margin-right: 0.5rem;
    accent-color: var(--accent);
}

.consent {
    font-size: var(--step-1);
    color: var(--ink-muted);
    line-height: 1.55;
    margin-top: 1rem;
}

/* ---------- modal ---------- */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    padding: 1.25rem;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(25, 26, 28, 0.45);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 26rem;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--ink-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--ink);
}

.modal-content h3 {
    font-family: var(--serif);
    font-size: var(--step2);
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding-right: 2rem;
}

.modal-description {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
}

.modal-hint {
    font-size: var(--step-1);
    color: var(--ink-muted);
    margin-bottom: 1.25rem;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.modal-actions .btn {
    flex: 1 1 8rem;
}

/* ---------- prose pages ---------- */

.doc {
    max-width: 54rem;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.doc h1 {
    font-size: var(--step3);
    margin-bottom: 0.35rem;
}

.doc h2 {
    font-size: var(--step1);
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

/* In the documents an h3 is a category label above a set of terms,
   not a heading in its own right. */
.doc h3 {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    margin: 2.25rem 0 0.9rem;
}

.doc p,
.doc li,
.doc dd {
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.58;
    color: var(--ink-soft);
}

.doc .stamp {
    font-family: var(--sans);
    font-size: var(--step-1);
}

.doc ul,
.doc ol {
    margin: 0 0 1.1em;
    padding-left: 1.15rem;
}

.doc li {
    margin-bottom: 0.5rem;
}

.doc dl {
    margin: 0 0 1.1em;
}

.doc dt {
    font-weight: 600;
    margin-top: 1rem;
}

.doc dd {
    margin: 0.15rem 0 0;
    color: var(--ink-soft);
}

.stamp {
    font-size: var(--step-1);
    color: var(--ink-muted);
    margin-bottom: 2.5rem;
}

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

.footer {
    border-top: 1px solid var(--rule);
    background: var(--paper-sunk);
    padding-block: clamp(2.5rem, 6vw, 4rem);
    font-size: 0.9375rem;
}

.footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

.footer h4 {
    font-size: var(--step-1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin: 0 0 0.9rem;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer li {
    margin-bottom: 0.5rem;
}

/* Product links sit in three labeled groups instead of one long list. */
.footer-prod-groups {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
    .footer-prod-groups {
        grid-template-columns: repeat(4, 1fr);
    }

    /* The add-ons group is the long one; it spans two columns and
       splits its own list in two. */
    .footer-addons {
        grid-column: span 2;
    }

    .footer-addons ul {
        columns: 2;
        column-gap: 1.5rem;
    }

    .footer-addons li {
        break-inside: avoid;
    }
}

.footer h5 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin: 0 0 0.5rem;
}

/* Homepage section links, kept short under the brand block. */
.footer-site {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin-top: 0.9rem;
}

.footer-site li {
    margin-bottom: 0;
}

/* Under the products: brand block left, company menu right. */
.footer-under {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
    .footer-under {
        grid-template-columns: 1.6fr 1fr;
    }
}

.footer a {
    color: var(--ink-soft);
    text-decoration: none;
}

.footer a:hover {
    color: var(--ink);
}

.footer address {
    font-style: normal;
    color: var(--ink-muted);
    line-height: 1.6;
}

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    color: var(--ink-muted);
    font-size: var(--step-1);
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- print ----------
   The legal pages are the ones that get printed or filed as PDF. */

@media print {
    .masthead nav,
    .skip,
    .modal,
    .hero-actions,
    .form,
    .punch,
    .punch-key,
    .footer ul {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
        line-height: 1.45;
    }

    .wrap {
        max-width: none;
        padding-inline: 0;
    }

    .band,
    .doc {
        padding-block: 1rem;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .doc a[href^="http"]::after,
    .doc a[href^="mailto"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    h1,
    h2,
    h3,
    h4 {
        break-after: avoid;
    }

    .doc h2 {
        margin-top: 1.4rem;
        padding-top: 0.8rem;
    }

    .footer {
        background: none;
        border-top: 1px solid #000;
    }

    @page {
        margin: 18mm;
    }
}

/* four steps read as a 2x2, so the rail sits between the columns
   and a hairline separates the two rows */
@media (min-width: 46rem) {
    .trio--four {
        grid-template-columns: repeat(2, 1fr);
        border-bottom: 1px solid var(--rule);
    }

    .trio--four > div {
        padding: 2rem clamp(1.25rem, 3vw, 2rem);
        border-bottom: 0;
        border-left: 1px solid var(--rule);
    }

    .trio--four > div:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .trio--four > div:nth-child(n + 3) {
        border-top: 1px solid var(--rule);
    }
}