/* ==========================================================================
   Vestfold — shared design system
   Extracted verbatim from landing.html's inline style so every page draws on
   one source. Page-specific work (the roads layer, the hero, the pinned
   dashboard) stays with the page that owns it.
   Load order: vestfold.css, then vestfold-ui.css, then any page style.
   ========================================================================== */

/* ---------- Type ---------- */
/* WOFF2 builds of the six weights the site actually sets (see assets/fonts).
   The GT America files are trial fonts: swap in licensed files before launch. */
@font-face {
    font-family: 'GTA';
    src: url('fonts/GT-America-Standard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'GTA';
    src: url('fonts/GT-America-Standard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GTA';
    src: url('fonts/GT-America-Standard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'GTA';
    src: url('fonts/GT-America-Standard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'GTAX';
    src: url('fonts/GT-America-Expanded-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'GTAX';
    src: url('fonts/GT-America-Expanded-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    --cream: #EFEBE2;
    --ink: #0B0B0B;
    --blush: #E8D6CB;
    --stone: #B9B2A6;
    --red: #9B1D20;
    --green: #143109;
    --navy: #190E4F;
    --body: #3A3733;
    --muted: #4A4640;
    --label: #5F5A54;   /* 4.8:1 on blush, 5.7:1 on cream */
    --gutter: clamp(20px, 3vw, 44px);
    /* Vertical scale of the roads tile. The drawing is mapped to the page
       width, so a phone gets a tile a quarter the height of a desktop one
       and the motif repeats two and a half times per screen instead of
       once. Stretching it on narrow screens restores the desktop rhythm. */
    --road-stretch: 1;
    --heading: clamp(28px, 3.4vw, 44px);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--cream);
}

body {
    font-family: 'GTA', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
}

/* ---------- Accessibility ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* First tab stop on every page. Off-screen until focused. */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: 100;
    padding: 13px 18px;
    background: var(--ink);
    color: var(--cream);
    font-size: 14px;
    font-weight: 500;
    border-radius: 0 0 6px 6px;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* One focus ring for the whole site, kept outside the element so it reads
   against the cream page even on ink-filled buttons. */
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

.panel--contact :focus-visible {
    outline-color: var(--cream);
}

/* Cells sit inside a clipping frame, so the ring goes inward. */
.framed__cell:focus-visible,
.faq-item summary:focus-visible,
.table-wrap:focus-visible {
    outline-offset: -4px;
}

main:focus,
main:focus-visible {
    outline: none;
}

/* Everything sits on one continuous roads layer that runs the full
   page height; sections float above it as bordered panels. */
.page {
    position: relative;
    background: var(--cream);
}

.band {
    position: relative;
    z-index: 1;
    padding: clamp(30px, 4vw, 56px) var(--gutter);
}

.panel {
    max-width: 1240px;
    margin: 0 auto;
    background: var(--cream);
    box-shadow: inset 0 0 0 2px var(--ink);
    padding: clamp(28px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3vw, 40px);
}

.panel--blush {
    background: var(--blush);
}

.mark {
    width: 26px;
    height: 26px;
    color: var(--ink);
    flex: none;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cream);
    border-bottom: 2px solid var(--ink);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    padding: 22px var(--gutter) 24px;
}

.brand {
    display: flex;
    gap: 11px;
    align-items: center;
}

.brand__name {
    font-family: 'GTAX', 'GTA', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.brand__tag {
    border-left: 1px solid var(--stone);
    padding-left: 11px;
    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1;
    color: var(--label);
    text-transform: uppercase;
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.nav__link {
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24px;
    line-height: 1;
    transition: background .18s ease, color .18s ease;
}

.nav__link:hover {
    background: var(--blush);
}

.nav__cta {
    margin-left: 10px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--cream);
    padding: 11px 18px;
    font-size: 12px;
    letter-spacing: 0.24px;
    line-height: 1;
    transition: background .18s ease;
}

.nav__cta:hover {
    background: var(--body);
    color: var(--cream);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 8px;
    padding: 16px 28px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}

.btn--solid {
    background: var(--ink);
    color: var(--cream);
}

.btn--solid:hover {
    background: var(--body);
    color: var(--cream);
}

.btn--outline {
    background: var(--blush);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}

.btn--outline:hover {
    background: var(--ink);
    color: var(--blush);
}

.btn--light {
    background: var(--cream);
    color: var(--ink);
}

.btn--light:hover {
    background: var(--blush);
    color: var(--ink);
}

.btn--ghost {
    background: transparent;
    color: var(--cream);
    box-shadow: inset 0 0 0 2px var(--cream);
}

.btn--ghost:hover {
    background: var(--cream);
    color: var(--ink);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ---------- Sections ---------- */
.section__head {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-end;
}

.section__head-left {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.43px;
    text-transform: uppercase;
    color: var(--label);
}

.section__title {
    margin: 0;
    font-weight: 900;
    font-size: var(--heading);
    line-height: 0.96;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.section__intro {
    flex: 0 1 400px;
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    text-wrap: pretty;
    color: var(--muted);
}

.section__intro a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section__intro a:hover {
    color: var(--red);
}

.grid {
    display: grid;
    gap: 24px;
}

.grid--services {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--work {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid--quotes {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Hairline grid: cells all carry right/bottom rules; the frame clips the
   trailing ones so any column count wraps cleanly. */
.framed {
    box-shadow: inset 0 0 0 2px var(--ink);
    overflow: hidden;
}

.framed--stack {
    margin-top: 8px;
}

.framed__grid {
    display: grid;
    gap: 0;
    margin: 0 -1px -1px 0;
}

.framed__grid--process {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.framed__grid--faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .framed__grid--faq {
        grid-template-columns: 1fr;
    }
}

.framed__cell {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    display: flex;
    flex-direction: column;
}

/* ---------- Service cards ---------- */
.card {
    background: var(--cream);
    box-shadow: inset 0 0 0 2px var(--ink);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card--blush {
    background: var(--blush);
}

.card__title {
    margin: 0;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.card__body {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    text-wrap: pretty;
    color: var(--body);
}

.card__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--stone);
    padding-top: 16px;
}

.card__list span {
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Case cards ---------- */
.case {
    box-shadow: inset 0 0 0 2px var(--ink);
    display: flex;
    flex-direction: column;
}

.case__head {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 2px solid var(--ink);
}

.case__head>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.case__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: none;
}

.case__client {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.case__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
}

.case__result {
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.03em;
}

.case__meta {
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--label);
    margin-top: 4px;
}

.is-red {
    color: var(--red);
}

.is-green {
    color: var(--green);
}

.is-navy {
    color: var(--navy);
}

/* ---------- Process / FAQ cells ---------- */
.step {
    padding: 26px 24px 32px;
    gap: 12px;
}

/* A list directly under a step eyebrow does not need its own rule. */
.step>.card__list {
    border-top: 0;
    padding-top: 12px;
}

.step__title {
    margin: 0;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.step__body {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    text-wrap: pretty;
    color: var(--body);
}

.faq-item {
    padding: 28px;
    gap: 10px;
}

.faq-item h3 {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.faq-item p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    text-wrap: pretty;
    color: var(--body);
}

/* ---------- Testimonials ---------- */
.quote {
    margin: 0;
    box-shadow: inset 0 0 0 2px var(--ink);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.quote p {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    text-wrap: pretty;
}

.quote__by {
    margin-top: auto;
    border-top: 1px solid var(--stone);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quote__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.quote__role {
    font-size: 11px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--label);
}

/* ---------- Contact ---------- */
.panel--contact {
    background: var(--ink);
    padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 56px);
    gap: 22px;
    align-items: center;
    text-align: center;
    box-shadow: none;
}

.panel--contact .eyebrow {
    color: var(--stone);
}

.contact__title {
    margin: 0;
    font-family: 'GTAX', 'GTA', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 0.96;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--cream);
}

.contact__lede {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--stone);
}

.panel--contact .btn-row {
    margin-top: 6px;
}

.contact__note {
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--stone);
    margin-top: 8px;
}

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    z-index: 1;
    padding: 34px var(--gutter) 44px;
}

.site-footer__panel {
    max-width: 1240px;
    margin: 0 auto;
    background: var(--cream);
    padding: 18px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.site-footer__brand {
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--muted);
}

.site-footer__brand .mark {
    width: 22px;
    height: 22px;
    opacity: 0.7;
    color: var(--muted);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

/* Padded to a 24px hit area without moving the text. */
.site-footer__links a {
    padding: 6px 0;
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--muted);
}

.site-footer__links a:hover {
    color: var(--red);
}

/* ---------- Smooth scroll ---------- */
/* Lenis keeps native scrolling and only interpolates it, so the sticky
   header still behaves. These are its own required rules. */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ---------- Motion ---------- */
/* .js is set only when motion is actually going to run, so no-JS,
   reduced-motion and a failed GSAP load all land on the finished page:
   nothing is hidden and the roads render fully drawn from the markup.
   GSAP owns the transition itself — this rule only prevents the flash
   of un-revealed content before the timeline is built. */
.js [data-fade] {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    /* Belt and braces: if the preference flips mid-session, content
       wins over anything GSAP has left on the element. */
    .js [data-fade] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Interior pages
   Everything below is used by the pages that are not the home page. The home
   page draws its own hero and stat band; these are the equivalents for a
   page whose job is to be read.
   ========================================================================== */

/* ---------- static roads ---------- */
/* The same tile the home page animates, used flat. Interior pages get the
   motif without paying for GSAP, and every block of text still sits on an
   opaque panel so nothing is read through a road. */
.roads-flat {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    background: url('roads-tile.svg') 0 0 / 100% auto repeat-y;
    pointer-events: none;
}

/* vw is safe to measure against here: a phone has no persistent scrollbar,
   so the viewport and this full-bleed layer are the same width. */
@media (max-width: 700px) {
    :root {
        --road-stretch: 1.35;
    }

    .roads-flat {
        background-size: 100vw calc(83.3333vw * var(--road-stretch));
    }
}

/* ---------- page head ---------- */
.page-hero {
    position: relative;
    z-index: 1;
    padding: clamp(44px, 7vw, 96px) var(--gutter) clamp(24px, 3vw, 40px);
}

.page-hero__panel {
    max-width: 1240px;
    margin: 0 auto;
    background: var(--cream);
    box-shadow: inset 0 0 0 2px var(--ink);
    padding: clamp(28px, 4.4vw, 56px);
}

.page-hero__title {
    font-family: 'GTAX', 'GTA', sans-serif;
    font-size: clamp(26px, 4.6vw, 58px);
    /* The expanded face is wide: a single word can outgrow a phone panel.
       Hyphenate before breaking, and never let it push the page sideways. */
    hyphens: auto;
    overflow-wrap: anywhere;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    margin: 10px 0 0;
    max-width: 18ch;
}

.page-hero__lede {
    margin: clamp(16px, 2vw, 22px) 0 0;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.62;
    color: var(--body);
    max-width: 64ch;
    text-wrap: pretty;
}

.page-hero .btn-row {
    margin-top: clamp(20px, 2.6vw, 30px);
}

/* ---------- breadcrumbs ---------- */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--label);
}

.crumbs+.eyebrow,
.crumbs+.page-hero__title {
    display: block;
    margin-top: 20px;
}

.crumbs a {
    /* 24px hit area; the negative margin keeps the row height as designed. */
    padding: 6px 0;
    margin: -6px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}

.crumbs--byline {
    margin: 22px 0 0;
}

.crumbs a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.crumbs span[aria-hidden] {
    color: var(--stone);
}

/* ---------- prose ---------- */
/* One column, measured for reading. Interior pages carry most of the site's
   words, so this is the workhorse. */
.prose {
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.68;
    color: var(--body);
}

.prose>*+* {
    margin-top: 1.05em;
}

.prose h2 {
    font-family: 'GTAX', 'GTA', sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 2em;
    padding-top: 1.1em;
    border-top: 2px solid var(--ink);
    hyphens: auto;
    overflow-wrap: anywhere;
}

.prose h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-top: 1.8em;
}

.prose h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 1.5em;
}

.prose p {
    text-wrap: pretty;
}

.prose strong {
    color: var(--ink);
    font-weight: 700;
}

.prose a {
    color: var(--ink);
    border-bottom: 1px solid var(--stone);
    transition: border-color .2s ease;
}

.prose a:hover {
    border-bottom-color: var(--red);
}

.prose ul,
.prose ol {
    padding-left: 1.1em;
    margin-left: 0;
}

.prose li+li {
    margin-top: .5em;
}

.prose ul {
    list-style: none;
    padding-left: 0;
}

.prose ul>li {
    position: relative;
    padding-left: 22px;
}

/* A short rule instead of a bullet: the page is already full of ruled boxes,
   and a dot would be the only round thing on it. */
.prose ul>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 11px;
    height: 1.5px;
    background: var(--red);
}

.prose blockquote {
    margin: 1.6em 0;
    padding: 18px 22px;
    background: var(--blush);
    box-shadow: inset 0 0 0 1.5px var(--ink);
    font-size: 15px;
}

.prose blockquote p:first-child {
    margin-top: 0;
}

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em;
    background: var(--blush);
    padding: 1px 5px;
}

.prose figure {
    margin: 1.6em 0;
}

.prose figcaption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--label);
}

/* ---------- article shell ---------- */
.article {
    position: relative;
    z-index: 1;
    padding: clamp(24px, 3vw, 44px) var(--gutter);
}

.article__panel {
    max-width: 1240px;
    margin: 0 auto;
    background: var(--cream);
    box-shadow: inset 0 0 0 2px var(--ink);
    padding: clamp(26px, 4vw, 52px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 52px);
}

@media (min-width: 981px) {
    .article__panel--toc {
        grid-template-columns: minmax(0, 1fr) 248px;
    }
}

/* ---------- table of contents ---------- */
.toc {
    align-self: start;
    position: sticky;
    top: 104px;
    border-left: 2px solid var(--ink);
    padding-left: 18px;
}

.toc__label {
    display: block;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--label);
    margin-bottom: 12px;
}

.toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}

.toc li {
    counter-increment: toc;
}

.toc li+li {
    margin-top: 2px;
}

.toc a {
    display: flex;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--muted);
    transition: color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.toc a::before {
    content: counter(toc, decimal-leading-zero);
    flex: none;
    width: 26px;
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--stone);
}

.toc a:hover,
.toc a.is-current {
    color: var(--ink);
    transform: translateX(3px);
}

.toc a.is-current::before {
    color: var(--red);
}

@media (max-width: 980px) {
    .toc {
        position: static;
        border-left: 0;
        border-top: 2px solid var(--ink);
        padding: 18px 0 0;
        order: -1;
    }
}

/* ---------- tier / pricing cards ---------- */
.tiers {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
}

.tier {
    position: relative;
    background: var(--cream);
    box-shadow: inset 0 0 0 2px var(--ink);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

.tier:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 2px var(--ink), 0 20px 38px -26px rgba(11, 11, 11, .6);
}

.tier--featured {
    background: var(--blush);
}

.tier__flag {
    position: absolute;
    top: -1px;
    right: 22px;
    background: var(--red);
    color: var(--cream);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 10px;
}

.tier__name {
    margin: 0;
    font-family: 'GTAX', 'GTA', sans-serif;
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.tier__price {
    display: block;
    font-family: 'GTAX', 'GTA', sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

.tier__price small {
    display: block;
    margin-top: 6px;
    font-family: 'GTA', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--label);
}

.tier__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--body);
}

.tier__list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--stone);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--muted);
}

.tier__list span {
    position: relative;
    padding-left: 18px;
}

.tier__list span::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 1.5px;
    background: var(--red);
}

/* The list's own heading: no rule, no indent. */
.tier__list .tier__list-label {
    padding-left: 0;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--label);
}

.tier__list .tier__list-label::before {
    display: none;
}

/* ---------- comparison table ---------- */
.table-wrap {
    overflow-x: auto;
    box-shadow: inset 0 0 0 2px var(--ink);
}

/* Set by script only when the table is actually wider than its frame. The
   hint sticks to the left edge so it stays readable mid-scroll. */
.table-wrap.is-scrollable::before {
    content: "Scroll sideways for the full table \2192";
    position: sticky;
    left: 0;
    display: block;
    padding: 8px 14px;
    border-bottom: 1px solid var(--ink);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--label);
}

.cmp {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 620px;
}

.cmp th,
.cmp td {
    padding: 12px 14px;
    text-align: left;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    vertical-align: top;
}

.cmp tr>*:last-child {
    border-right: 0;
}

.cmp tbody tr:last-child>* {
    border-bottom: 0;
}

.cmp thead th {
    background: var(--ink);
    color: var(--cream);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    border-right-color: rgba(239, 235, 226, .25);
}

.cmp tbody th {
    font-weight: 500;
    color: var(--ink);
    background: rgba(232, 214, 203, .35);
}

.cmp tbody tr:hover td {
    background: rgba(232, 214, 203, .3);
}

.cmp .yes {
    color: var(--green);
    font-weight: 700;
}

.cmp .no {
    color: var(--label);
}

/* ---------- definition list (glossary) ---------- */
.terms {
    display: grid;
    gap: 0;
    box-shadow: inset 0 0 0 2px var(--ink);
}

.term {
    padding: 20px clamp(18px, 2.4vw, 26px);
    border-bottom: 1px solid var(--ink);
    transition: background-color .3s ease;
}

.term:last-child {
    border-bottom: 0;
}

.term:hover {
    background: rgba(232, 214, 203, .38);
}

.term__name {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    scroll-margin-top: 110px;
}

.term__def {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body);
    max-width: 78ch;
}

/* ---------- related / next links ---------- */
.next-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.next-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    box-shadow: inset 0 0 0 2px var(--ink);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}

.next-card:hover {
    transform: translateY(-4px);
    background: var(--blush);
}

.next-card__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.next-card__body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--body);
}

.next-card__go {
    margin-top: auto;
    padding-top: 12px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--label);
}

/* ==========================================================================
   Header — mobile menu
   The desktop header wrapped onto three lines on a phone. Below 860px the
   links move into a panel behind a toggle, and the header stays one line.
   ========================================================================== */
.nav__toggle {
    display: none;
    width: 40px;
    height: 34px;
    padding: 0;
    margin-left: auto;
    background: none;
    border: 0;
    box-shadow: inset 0 0 0 2px var(--ink);
    cursor: pointer;
    position: relative;
}

.nav__toggle i {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 1.8px;
    background: var(--ink);
    display: block;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}

.nav__toggle i:nth-child(1) {
    top: 12px;
}

.nav__toggle i:nth-child(2) {
    top: 20px;
}

.nav__toggle[aria-expanded="true"] i:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] i:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

.nav__panel {
    display: none;
}

@media (max-width: 860px) {
    .site-header {
        flex-wrap: nowrap;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .nav {
        display: none;
    }

    .nav__toggle {
        display: block;
    }

    .nav__panel {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cream);
        border-bottom: 2px solid var(--ink);
        overflow: hidden;
        height: 0;
    }

    /* Closed by default with no JS too: the attribute is in the markup, so a
       phone without scripting gets a header that is merely a header. */
    .nav__panel[hidden] {
        display: none;
    }

    .nav__panel a {
        display: block;
        padding: 15px var(--gutter);
        border-top: 1px solid var(--stone);
        font-size: 15px;
        font-weight: 500;
    }

    .nav__panel a:first-child {
        border-top: 0;
    }

    .nav__panel a:active {
        background: var(--blush);
    }

    .brand__tag {
        display: none;
    }
}

/* The header needs to be the positioning context for the panel. */
.site-header {
    position: sticky;
}

/* ---------- portrait ---------- */
/* Used on the about page. Framed like everything else on the site rather
   than rounded off, so a photograph reads as another panel. */
.portrait {
    margin: 0;
    max-width: 280px;
    flex: none;
}

.portrait img {
    width: 100%;
    height: auto;
    box-shadow: inset 0 0 0 2px var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: -2px;
    filter: grayscale(1) contrast(1.04);
    transition: filter .5s ease;
}

.portrait:hover img {
    filter: grayscale(0) contrast(1);
}

.portrait figcaption {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--label);
}

.page-hero__split {
    display: flex;
    gap: clamp(22px, 3.4vw, 46px);
    align-items: flex-start;
}

.page-hero__split>div {
    min-width: 0;
}

@media (max-width: 720px) {
    .page-hero__split {
        flex-direction: column-reverse;
    }

    .portrait {
        max-width: 190px;
    }
}