:root {
    /* One content column, used by every block on the page so nothing steps in
       or out. ~52rem keeps running text near 75 characters at 17px. */
    --measure: 52rem;
    /* Brand green is #00693e. It only clears 2.9:1 on near-black, so headings
       and eyebrows on dark grounds use this lighter tint of the same hue
       (8.2:1). The previous value here was Tailwind's stock green-400, taken
       from a stale handoff doc for a hero treatment that no longer exists. */
    --green-on-dark: #66b691;
}

/* ============================================================================
   pages.css — styles for the content pages built by _build/.
   Loaded after site.css, so it can rely on the existing tokens and only adds.

   Brand: primary #00693e, off-white #f4f4f2, near-black #0a0a0a.
   Rules held to throughout: nothing below 14px, and every text/background pair
   clears WCAG AA (4.5:1 body, 3:1 large). The live footer currently fails at
   3.01-4.41:1 with 10px labels; the values below are the corrected ones.
   ========================================================================= */

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #00693e;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
}

/* Pages built from the template always have a solid nav, so the body needs to
   clear the fixed header. The homepage overrides this with its hero. */
.page-body {
    padding-top: 3rem;
}
@media (min-width: 768px) {
    .page-body { padding-top: 5rem; }
}

/* ------------------------------------------------------------ nav addition */

/* "Pre-order now" sits in the nav as a button rather than a text link. */
.nav-cta {
    background: #00693e;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-cta:hover { background: #005231; transform: translateY(-1px); }
.nav-cta:active { transform: translateY(0); }
.nav-cta:focus-visible { outline: 2px solid #00693e; outline-offset: 3px; }

/* ------------------------------------------------------------- breadcrumbs */

.breadcrumbs {
    background: transparent;
    padding: 1.1rem 0 0;
}
/* Hand-written pages pad <main> to clear the fixed header, but the crumbs sit
   above <main>, so they need the offset themselves. Header is h-12 / md:h-20. */
.breadcrumbs-offset { padding-top: calc(3rem + 1.1rem); }
@media (min-width: 768px) { .breadcrumbs-offset { padding-top: calc(5rem + 1.1rem); } }
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;      /* 14px floor */
    font-weight: 600;
}
.breadcrumbs li { color: #4b5563; }
.breadcrumbs li + li::before {
    content: '/';
    margin-right: 0.5rem;
    color: #9ca3af;
}
.breadcrumbs a {
    color: #00693e;           /* 6.4:1 on #f4f4f2 */
    text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs a:focus-visible { outline: 2px solid #00693e; outline-offset: 2px; border-radius: 2px; }
.breadcrumbs [aria-current='page'] { color: #111; }

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

/* Was 10px at rgba(255,255,255,0.4) = 3.66:1 and below our 14px floor. */
.footer-heading {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
/* Was rgba(255,255,255,0.7); #d6d6d6 gives 11.6:1 on black. */
.footer-link {
    color: #d6d6d6;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* Was 12px at 0.45 alpha (4.41:1) and 0.35 alpha (3.01:1) — both failed. */
.footer-blurb,
.footer-legal {
    color: #b8b8b8;           /* 8.6:1 on black */
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}
.footer-blurb { max-width: 18rem; }

/* -------------------------------------------------------------- page shell */

.page-hero {
    background: #fff;
    color: #0a0a0a;
    padding: 2.5rem 0 2.25rem;
}
.page-hero .eyebrow {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #00693e;              /* 6.8:1 on white */
    margin-bottom: 0.85rem;
}
.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3.15rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.page-hero .lede {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: #4b5563;           /* 7.6:1 on white */
    font-weight: 500;
    margin: 0;
    max-width: 46rem;         /* matches .prose, so intros line up */
}

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

.prose {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #374151;
    font-weight: 500;
    /* The shell is full site width, so cap the line length here. Centred:
       left-aligned it sat 736px hard against the left of a 1280px shell with
       half the page empty, and nothing lined up with the full-width hero. */
    max-width: 46rem;
    margin-inline: auto;
}
/* Anything that wants the whole column opts back out. */
.prose > .data-table-wrap,
.prose > .card-grid { max-width: none; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #000;
    line-height: 1.15;
    margin-top: 2.75rem;
    text-wrap: balance;
}
.prose h3 {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #000;
    margin-top: 2rem;
}
.prose strong { color: #000; font-weight: 800; }
.prose a {
    color: #00693e;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0, 105, 62, 0.4);
}
.prose a:hover { text-decoration-color: #00693e; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: 0.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

/* ------------------------------------------------------------------ tables */

.data-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e5e1;
    border-radius: 6px;
    background: #fff;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-width: 34rem;
}
.data-table th,
.data-table td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #ececE8;
    vertical-align: top;
}
.data-table thead th {
    background: #00693e;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: none;
}
.data-table tbody tr:nth-child(even) { background: #faf9f6; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 700;
}
.data-table .is-galvbike {
    background: #e0ece5 !important;
}
.data-table .is-galvbike td { font-weight: 700; color: #003520; }

/* ------------------------------------------------------------------- cards */

.card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
    background: #fff;
    border: 1px solid #e5e5e1;
    border-radius: 6px;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
a.card:hover { border-color: #00693e; transform: translateY(-2px); }
a.card:focus-visible { outline: 2px solid #00693e; outline-offset: 2px; }
.card h3 {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #000;
    margin: 0 0 0.4rem;
}
.card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4b5563;
    font-weight: 500;
    margin: 0;
}
.card /* Image slot for cards that have one. Bleeds to the card edges by cancelling
   the card's own padding, so the photo sits flush under the border radius. */
.card-media {
    display: block;
    margin: -1.25rem -1.35rem 1.1rem;
}
.card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

.card-meta {
    font-size: 0.875rem;
    font-weight: 700;
    color: #00693e;
    /* auto, not a fixed gap: card bodies run to different line counts, and
       without this the links sit at ragged heights across a row. */
    margin-top: auto;
    padding-top: 0.85rem;
}

/* ------------------------------------------------------------- key figures */

.figure-row {
    display: grid;
    gap: 1px;
    background: #e5e5e1;
    border: 1px solid #e5e5e1;
    border-radius: 6px;
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.figure {
    background: #fff;
    padding: 1.1rem 1.25rem;
}
.figure .v {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #00693e;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.figure .l {
    font-size: 0.875rem;
    color: #4b5563;
    font-weight: 600;
    margin-top: 0.3rem;
    line-height: 1.45;
}

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

.callout {
    background: #f4f4f2;
    border-left: 3px solid #00693e;
    padding: 1.15rem 1.35rem;
    border-radius: 0 4px 4px 0;
}
.callout p { margin: 0; font-size: 1rem; line-height: 1.7; color: #374151; font-weight: 500; }
.callout p + p { margin-top: 0.75rem; }
.callout strong { color: #000; font-weight: 800; }
.callout .callout-label {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #00693e;
    margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------- honest-cut
   Used where we tell someone this bike is not right for them. Deliberately
   styled to look like a warning, not a sales box — it reads as more credible
   when it doesn't look like marketing. */

.honest {
    background: #fdf6ec;
    border: 1px solid #e0b573;
    padding: 1.15rem 1.35rem;
    border-radius: 4px;
}
.honest .callout-label { color: #8a5a10; }
.honest p { margin: 0; font-size: 1rem; line-height: 1.7; color: #4a3a22; font-weight: 500; }
.honest p + p { margin-top: 0.75rem; }
.honest strong { color: #2e2413; font-weight: 800; }

/* --------------------------------------------------------------------- FAQ */

.faq-list { border-top: 1px solid #e5e5e1; }
.faq-item { border-bottom: 1px solid #e5e5e1; }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    font-weight: 800;
    font-size: 1.0625rem;
    color: #000;
    letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #00693e; }
.faq-item summary:focus-visible { outline: 2px solid #00693e; outline-offset: -3px; border-radius: 3px; }
.faq-item summary::after {
    content: '+';
    font-weight: 900;
    font-size: 1.35rem;
    color: #00693e;
    line-height: 1;
    flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .answer {
    padding: 0 0 1.35rem;
    font-size: 1rem;
    line-height: 1.75;
    color: #4b5563;
    font-weight: 500;
    max-width: 44rem;
}
.faq-item .answer p + p { margin-top: 0.75rem; }

/* ------------------------------------------------------------------ CTA end */

/* Same image-backed treatment as the homepage's closing CTA — a flat green
   band read as a footer bar rather than an invitation. */
.page-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #00512f;
    color: #fff;
    padding: 4rem 0 3.75rem;
}
.page-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: image-set(
        url('/brand_assets/opt/bike-workshop-1400.avif') type('image/avif'),
        url('/brand_assets/opt/bike-workshop-1400.webp') type('image/webp'),
        url('/brand_assets/opt/bike-workshop-1400.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center 40%;
}
.page-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,58,34,0.93) 0%, rgba(0,45,26,0.95) 100%);
}
/* Copy left, button hard right. All 45 CTA blocks are div > h2 + p + a with no
   wrapper around the text, so the two-column split is done with explicit grid
   placement rather than by adding a div to 45 pages. Stacks on small screens. */
.page-cta .shell {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem 3.5rem;   /* h2 -> p stays tight; the button gets its own margin below */
    align-items: center;
}
@media (min-width: 800px) {
    .page-cta .shell { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 3.5rem; }
    .page-cta h2 { grid-column: 1; grid-row: 1; }
    .page-cta p  { grid-column: 1; grid-row: 2; }
    .page-cta .btn-white { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}
.page-cta h2 {
    font-size: clamp(1.85rem, 4.5vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0 0 0.6rem;
    text-wrap: balance;
}
.page-cta p {
    font-size: clamp(1.0625rem, 2vw, 1.2rem);
    color: #d5e8de;           /* 11.3:1 on the overlay */
    font-weight: 500;
    margin: 0;
    max-width: 40rem;
}
/* Mobile only. Unscoped, this sits later in the file at equal specificity to
   the desktop justify-self:end and silently wins, leaving the button adrift
   mid-row instead of flush right. */
@media (max-width: 799px) {
    .page-cta .btn-white { justify-self: start; margin-top: 1.3rem; }
}
.btn-white {
    background: #fff;
    color: #00693e;
    font-weight: 900;
    font-size: 1rem;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-white:hover { background: #eef2ef; transform: translateY(-1px); }
.btn-white:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --------------------------------------------------------------- utilities */

.section { padding: 3rem 0; }
.section-tight { padding: 2rem 0; }
.shell { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .shell { padding: 0 1.5rem; } }
.shell-narrow { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .shell-narrow { padding: 0 1.5rem; } }
.bg-offwhite { background: #f4f4f2; }

/* Small print under tables and figures. #4b5563 clears 4.5:1 on both #fff and
   the #f4f4f2 section background; the lighter grey-500 we reached for first
   measured 4.39:1 on off-white, which fails. */
.note-text {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.6;
    color: #4b5563;
    margin: 1rem 0 0;
}
.section-intro {
    color: #4b5563;
    font-weight: 500;
    margin: 0 auto 1.5rem;
}
.section-title {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #000;
    margin: 0 0 0.6rem;
    text-wrap: balance;
}

/* Callouts share the reading column so they line up with the prose. */


@media (prefers-reduced-motion: reduce) {
    .nav-cta, .card, .btn-white { transition: none; }
    a.card:hover, .nav-cta:hover, .btn-white:hover { transform: none; }
}

/* ---------------------------------------------------------- mid-page CTA
   Sits between two white sections, so it runs on black to actually register as
   a break. Leads with the Fieldays sell-through rather than the price — the
   reader is already warm by this point in the page. */

.mid-cta { background: #0a0a0a; color: #fff; padding: 3.25rem 0; }
.mid-cta-inner {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 900px) { .mid-cta-inner { grid-template-columns: 1.5fr auto; gap: 3rem; } }
.mid-cta-eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #66b691;              /* 8.2:1 on #0a0a0a */
    margin-bottom: 0.7rem;
}
.mid-cta h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}
.mid-cta-note {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    color: #c9cec9;              /* 10.4:1 on #0a0a0a */
    max-width: 34rem;
}
.mid-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mid-cta-btn, .mid-cta-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mid-cta-btn { background: #fff; color: #0a0a0a; }
.mid-cta-btn:hover { background: #66b691; color: #06301d; }
.mid-cta-ghost { border: 1px solid rgba(255,255,255,0.45); color: #fff; }
.mid-cta-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.mid-cta-btn:focus-visible, .mid-cta-ghost:focus-visible { outline: 2px solid #66b691; outline-offset: 3px; }

/* --------------------------------------------------------- spec gallery */

.spec-gallery-wrap { background: #fff; padding: 3rem 0 0; }
.spec-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.spec-gallery figure { margin: 0; }
.spec-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.spec-gallery figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 600;
    color: #4b5563;
}
@media (max-width: 820px) { .spec-gallery { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Reading measures for the hand-written pages, left-aligned so their edge
   matches the breadcrumbs and every other page. */
.page-measure { max-width: 46rem; }
.page-measure-wide { max-width: 64rem; }

/* --------------------------------------------------------- product shot */

.product-shot { background: #fff; padding: 3.5rem 0; }
.product-shot-inner {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 900px) { .product-shot-inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
/* Was a white-ground cut-out render sitting flush; now a photograph, so it
   gets the same soft corner as every other image on the site. */
.product-shot picture { display: block; }
.product-shot img { display: block; width: 100%; height: auto; border-radius: 2px; }
.product-shot-eyebrow {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00693e;
    margin: 0 0 0.8rem;
}
.product-shot-copy h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #000;
    margin: 0 0 0.9rem;
    text-wrap: balance;
}
.product-shot-copy p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #4b5563;
    font-weight: 500;
    margin: 0 0 1.25rem;
    max-width: 34rem;
}
/* Balances the column against a near-square render, and key specs beside a
   product shot is what a buyer is looking for anyway. */
.product-shot-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 0 0 1.5rem;
    border-top: 1px solid #e5e5e1;
}
.product-shot-specs > div {
    padding: 0.85rem 0;
    border-bottom: 1px solid #e5e5e1;
}
.product-shot-specs > div:nth-child(odd) { padding-right: 1.5rem; }
.product-shot-specs dt {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 0.2rem;
}
.product-shot-specs dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #000;
    font-variant-numeric: tabular-nums;
}
.product-shot-link { font-size: 1rem; font-weight: 800; color: #00693e; text-decoration: none; }
.product-shot-link:hover { text-decoration: underline; }
.product-shot-link:focus-visible { outline: 2px solid #00693e; outline-offset: 3px; }

/* Sits directly under the order button — the moment the hesitation happens. */
.pay-reassure {
    margin: 0.9rem 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #00693e;
}

/* ------------------------------------------------------------ about page
   Chronological: 2014, the years after, 2026. Alternating rows so the photo
   changes side down the page, rather than one tall image with the copy
   stranded beside it. */

.about-intro { padding: 1rem 0 2.5rem; }
.about-eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #00693e;
    margin-bottom: 1rem;
}
.about-intro h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.03;
    color: #000;
    margin: 0 0 1rem;
    max-width: 22ch;
    text-wrap: balance;
}
.about-lede {
    font-size: clamp(1.0625rem, 2vw, 1.3rem);
    line-height: 1.6;
    color: #4b5563;
    font-weight: 500;
    margin: 0;
    max-width: 46rem;
}

.about-timeline { padding: 1rem 0 0; }
.tl-item {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding: 2.75rem 0;
    border-top: 1px solid #e5e5e1;
}
@media (min-width: 900px) {
    .tl-item { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .tl-item--flip .tl-copy { order: 2; }
    .tl-item--flip .tl-media { order: 1; }
    .tl-item--plain { grid-template-columns: 1fr; }
    .tl-item--plain .tl-copy { max-width: 46rem; }
}
.tl-year {
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #00693e;
    margin-bottom: 0.7rem;
}
.tl-copy h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #000;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.tl-copy p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #374151;
    font-weight: 500;
    margin: 0;
}
.tl-media { margin: 0; }
.tl-media picture { display: block; border-radius: 12px; overflow: hidden; background: #f4f4f2; }
.tl-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 40%;
}
.tl-media figcaption {
    margin-top: 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

.about-quote { padding: 3rem 0 0; border-top: 1px solid #e5e5e1; margin-top: 2.75rem; }
.about-quote blockquote {
    margin: 0 0 1.75rem;
    border-left: 4px solid #00693e;
    padding-left: 1.75rem;
    max-width: 52rem;
}
.about-quote blockquote p {
    margin: 0;
    font-size: clamp(1.125rem, 2.2vw, 1.4rem);
    line-height: 1.5;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.015em;
}
.about-closing {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #374151;
    font-weight: 500;
    margin: 0;
    max-width: 46rem;
}
.about-sign {
    margin: 1.5rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #00693e;
}
.about-stats { margin-top: 3.5rem; }
.about-stats .section-title { margin-bottom: 1.75rem; }
.about-stats .stat-grid { border-top: 1px solid #d9d9d4; }

/* --------------------------------------------------------- compare grid
   One card style. The three category comparisons span two columns and carry a
   small label, rather than being a different colour — two card styles on one
   page read as two pages stitched together. */

.compare-grid {
    /* 12 columns so the category cards can genuinely be wider than the model
       cards — on a 6-column grid both ended up spanning 2 and matched. */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}
.compare-grid .card { grid-column: span 3; }          /* 4 per row */
.compare-grid .card--wide { grid-column: span 4; }    /* 3 per row, wider */
@media (max-width: 1100px) {
    .compare-grid .card { grid-column: span 4; }      /* 3 per row */
    .compare-grid .card--wide { grid-column: span 6; }/* 2 per row */
}
@media (max-width: 700px) {
    .compare-grid { grid-template-columns: 1fr; }
    .compare-grid .card, .compare-grid .card--wide { grid-column: span 1; }
}
.card-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #00693e;
    margin-bottom: 0.55rem;
}
.card--wide h3 { font-size: 1.1875rem; }

/* --------------------------------------------------------------- page image */

.page-image { padding: 0 0 0.5rem; }
.page-image picture { display: block; max-width: 1100px; }
.page-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

/* ------------------------------------------------------------ spec notes
   The "what these numbers mean on a farm" block. Term on the left, what it
   changes about the day on the right — the shape of a machinery data sheet.
   Previously nine h3-and-paragraph pairs stacked in one column, which gave the
   reader no way to scan for the spec they cared about. */

.spec-notes-section { background: #fff; }

/* The three carrying the most weight. Photo first, then the spec label, then
   the benefit — so the eye gets an image, a number and a promise in that order. */
.spec-leads {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    margin-top: 2.5rem;
}
.spec-lead img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin-bottom: 1.15rem;
}
.spec-lead h3 {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #000;
    margin: 0 0 0.65rem;
    text-wrap: balance;
}
.spec-lead p {
    font-size: 0.9375rem;
    line-height: 1.65;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
}
@media (max-width: 900px) { .spec-leads { grid-template-columns: 1fr; gap: 2.25rem; } }

.spec-notes {
    margin-top: 3rem;
    border-top: 1px solid #d9d9d4;
}
/* Spec label and benefit on the left, the detail on the right. The three
   photo-led items above carry the visual weight; these read as a data sheet.
   Placement is explicit rather than wrapping the left pair in a div, so the
   markup stays flat and matches the leads. */
.spec-note {
    display: grid;
    grid-template-columns: 21rem 1fr;
    column-gap: 3.5rem;
    padding: 1.65rem 0 1.75rem;
    border-bottom: 1px solid #d9d9d4;
    align-items: start;
}
.spec-note > .spec-note-token { grid-column: 1; grid-row: 1; }
.spec-note > h3               { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.spec-note > p                { grid-column: 2; grid-row: 1 / span 2; }
/* The benefit is the headline; the spec is a label above it. The reader cares
   what it does for them first — the number is the evidence, not the point. */
.spec-note-token {
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #00693e;
    margin-bottom: 0.6rem;
}
.spec-note h3 {
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.028em;
    line-height: 1.18;
    color: #000;
    margin: 0 0 0.65rem;
    text-wrap: balance;
}
.spec-note p {
    font-size: 0.9375rem;
    line-height: 1.65;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
}
@media (max-width: 820px) {
    .spec-note { grid-template-columns: 1fr; row-gap: 0.55rem; }
    .spec-note > h3 { grid-row: auto; }
    .spec-note > p  { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------------------------- stat grid
   The homepage "why farmers choose it" block. Deliberately not .card: bordered
   white cards with pale rounded icon tiles read as a SaaS pricing page, which
   is the wrong register for a galvanised machine sold to farmers. Here the
   number carries the point and hairline rules do the dividing — closer to
   machinery literature than a feature grid. */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.5rem;
    border-top: 1px solid #d9d9d4;
}
.stat {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 0 1.9rem;
    border-bottom: 1px solid #d9d9d4;
    text-decoration: none;
    color: inherit;
}
.stat-figure {
    display: block;
    font-size: clamp(2.5rem, 3.6vw, 3.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #00693e;            /* 8.6:1 on white */
    margin-bottom: 0.9rem;
}
.stat h3 {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #000;
    margin: 0 0 0.45rem;
}
.stat p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4b5563;
    font-weight: 500;
    margin: 0;
}
.stat-meta {
    font-size: 0.875rem;
    font-weight: 700;
    color: #00693e;
    /* auto so the links sit on one line across a row regardless of copy length */
    margin-top: auto;
    padding-top: 0.95rem;
}
.stat:hover h3 { color: #00693e; }
.stat:hover .stat-meta { text-decoration: underline; }
.stat:focus-visible { outline: 2px solid #00693e; outline-offset: 4px; }

@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
@media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr; }
    .stat { padding: 1.4rem 0 1.5rem; }
    .stat-figure { font-size: 2.5rem; margin-bottom: 0.6rem; }
}

/* ---------------------------------------------------------- press strip
   Credibility row under the hero. Rural print is rated in the top three
   influences on a machinery purchase by around 82% of NZ farmers, and none of
   this coverage was visible on the site.

   Runs on the publishers' real logos, each recoloured to one neutral at source
   so the row reads as a row rather than six competing brand palettes. */

.press-strip {
    background: #ffffff;
    border-top: 1px solid #e5e5e1;
    border-bottom: 1px solid #e5e5e1;
    padding: 2.25rem 0;
}
.press-label {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #79817b;
    margin: 0 0 1.5rem;
}
.press-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.press-row li {
    display: flex;
    align-items: center;
    margin: 0;
}
/* Hairline between items, not after the last */
.press-row li + li::before {
    content: '';
    width: 1px;
    height: 1.1rem;
    background: #dcdad2;
    margin-right: 2.25rem;
    flex-shrink: 0;
}
.press-row a { text-decoration: none; }

.press-row a:focus-visible { outline: 2px solid #00693e; outline-offset: 4px; border-radius: 3px; }

.press-logo {
    display: block;
    width: auto;
    opacity: 0.74;
    transition: opacity 0.15s ease;
}
.press-row a:hover .press-logo { opacity: 1; }

/* Heights are per logo, not shared. Farmers Weekly's masthead is nearly 12:1
   where RNZ's block lockup is under 3:1 — one height would render the first a
   hairline and the second a slab. Balanced by eye for optical weight instead. */
.press-logo--farmersweekly { height: 0.95rem; }
.press-logo--rnz           { height: 1.2rem; }
.press-logo--stuff         { height: 1.3rem; }
.press-logo--odt           { height: 1.55rem; }
.press-logo--fieldays      { height: 1.4rem; }

.press-stat {
    text-align: center;
    margin: 1.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4b5563;
}
.press-stat strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #00693e;
    letter-spacing: -0.01em;
}
.press-stat span { font-weight: 500; }

@media (max-width: 640px) {
    .press-strip { padding: 1.75rem 0; }
    /* The row wraps to two lines here, which leaves a hairline orphaned at the
       start of the second line. Spacing alone separates them well enough. */
    .press-row { gap: 1.1rem 1.75rem; }
    .press-row li + li::before { display: none; }
    /* Same proportions, scaled ~15% so five logos still fit a 375px screen. */
    .press-logo--farmersweekly { height: 0.8rem; }
    .press-logo--rnz           { height: 1rem; }
    .press-logo--stuff         { height: 1.1rem; }
    .press-logo--odt           { height: 1.3rem; }
    .press-logo--fieldays      { height: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .press-logo { transition: none; }
}

/* ------------------------------------------------------- card icons + grid */

.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
@media (min-width: 1024px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    background: #e0ece5;
    color: #00693e;
    margin-bottom: 0.9rem;
    flex-shrink: 0;
}
.card-icon svg { width: 1.4rem; height: 1.4rem; }

/* ----------------------------------------------------------- news carousel
   Scroll-snap rather than a JS carousel — it keeps keyboard and touch
   behaviour native, and degrades to a plain scroller if anything fails. */

.news-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.news-nav { display: flex; gap: 0.5rem; flex-shrink: 0; }
.news-arrow {
    width: 2.75rem;
    height: 2.75rem;           /* 44px — comfortable pointer and touch target */
    display: grid;
    place-items: center;
    border: 1px solid #d9d9d4;
    border-radius: 999px;
    background: #fff;
    color: #00693e;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.news-arrow svg { width: 1.25rem; height: 1.25rem; }
.news-arrow:hover:not(:disabled) { border-color: #00693e; background: #00693e; color: #fff; }
.news-arrow:focus-visible { outline: 2px solid #00693e; outline-offset: 2px; }
.news-arrow:disabled { opacity: 0.35; cursor: default; }
/* Touch devices scroll the rail by swiping, so the buttons are redundant there
   and would crowd the heading on a narrow screen. */
@media (max-width: 640px) {
    .news-nav { display: none; }
    .news-head { margin-bottom: 1.5rem; }
}

.news-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
}
.news-rail:focus-visible { outline: 2px solid #00693e; outline-offset: 4px; }
.news-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    /* No inset padding here. The rail now sits inside the page's normal
       max-w-7xl container, so it aligns with the heading by construction.
       The previous version bled full-width and faked the inset with
       padding-inline — which never showed, because `scroll-snap-align: start`
       snapped the first card to the scrollport edge on load and scrolled
       straight past that padding. */
}
.news-card {
    scroll-snap-align: start;
    flex: 0 0 26rem;           /* ~1.55x the old card width */
    max-width: 82vw;
    background: #fff;
    border: 1px solid #e5e5e1;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.news-card:hover {
    border-color: #00693e;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 105, 62, 0.10);
}
.news-card a { display: block; text-decoration: none; color: inherit; height: 100%; }
.news-card a:focus-visible { outline: 2px solid #00693e; outline-offset: 3px; }
.news-img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 298; object-fit: cover; background: #eceae3; }
.news-body { padding: 1.15rem 1.35rem 1.4rem; }
.news-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
}
.news-source {
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #00693e;
    text-transform: uppercase;
    font-size: 0.875rem;
}
.news-meta time { color: #6b7280; font-weight: 600; }
.news-card h3 {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #000;
    margin: 0 0 0.5rem;
}
.news-card p { font-size: 0.9375rem; line-height: 1.6; color: #4b5563; font-weight: 500; margin: 0 0 0.9rem; }
.news-more { font-size: 0.9375rem; font-weight: 800; color: #00693e; }

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

.site-footer { background: #0a0a0a; color: #fff; padding: 3.5rem 0 2rem; }
.footer-top {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-contact {
    margin: 0.9rem 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
}
.footer-contact a { color: #66b691; text-decoration: none; }  /* 8.2:1 on #0a0a0a */
.footer-contact a:hover { text-decoration: underline; }
.footer-contact a:focus-visible { outline: 2px solid #66b691; outline-offset: 3px; }
/* The signup column carries three controls on one line, so it gets the larger
   share. The brand column only holds a logo and two lines of copy — giving it
   the wider half left a dead gap beneath the blurb. */
@media (min-width: 900px) { .footer-top { grid-template-columns: 1fr 1.35fr; gap: 3.5rem; } }
.footer-logo { height: 1.9rem; width: auto; opacity: 0.95; margin-bottom: 1rem; }
.site-footer .footer-blurb { max-width: 28rem; }
.footer-signup form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.footer-signup input {
    /* min-width:0 lets the two inputs shrink far enough for the button to stay
       on the same line instead of wrapping under them. */
    flex: 1 1 9rem;
    min-width: 0;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
}
.footer-signup input::placeholder { color: #9ca29c; }
.footer-signup input:focus { outline: 2px solid #66b691; outline-offset: 1px; border-color: transparent; }
.footer-signup button {
    background: #00693e;
    color: #fff;
    font-weight: 800;
    font-size: 0.9375rem;
    padding: 0.7rem 1.4rem;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.footer-signup button:hover { background: #00814c; }
.footer-signup button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.footer-signup button:disabled { background: #0d4f31; cursor: default; }
/* Full-width flex item so status sits under the row, not in it. The reserved
   height stops the footer jumping when a message appears. */
.sub-msg {
    flex: 1 0 100%;
    margin: 0.15rem 0 0;
    min-height: 1.3rem;
    font-size: 0.875rem;
    font-weight: 700;
}
.sub-msg.is-ok { color: #66b691; }      /* 8.2:1 on #0a0a0a */
.sub-msg.is-error { color: #ff8a80; }   /* 8.6:1 on #0a0a0a */

.footer-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2.5rem 0;
}
/* Five columns: the bike, compare, guides, on the farm, company. Two at
   phone width, three at tablet, five once there is room. */
@media (min-width: 700px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.footer-base {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255,255,255,0.14);
}
@media (min-width: 640px) { .footer-base { flex-direction: row; align-items: center; justify-content: space-between; } }

@media (prefers-reduced-motion: reduce) {
    .news-card { transition: none; }
    .news-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- final CTA
   Image-backed rather than a flat band — the bike is the argument, and a photo
   of the machine does more work here than a block of colour. Deep green
   overlay keeps the type at 12:1 while the frame stays readable underneath. */

.final-cta {
    position: relative;
    isolation: isolate;
    padding: 4.5rem 1.5rem 4rem;
    text-align: center;
    overflow: hidden;
    background: #00512f;
}
.final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: image-set(
        url('/brand_assets/opt/bike-workshop-1400.avif') type('image/avif'),
        url('/brand_assets/opt/bike-workshop-1400.webp') type('image/webp'),
        url('/brand_assets/opt/bike-workshop-1400.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center 40%;
}
.final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,58,34,0.93) 0%, rgba(0,45,26,0.95) 100%);
}
.final-cta-inner { max-width: 46rem; margin: 0 auto; }
.final-cta-eyebrow {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7fcfaa;
    margin: 0 0 0.9rem;
}
.final-cta h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 0.75rem;
    text-wrap: balance;
}
.final-cta-lede {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    color: #d5e8de;
    font-weight: 500;
    margin: 0 0 2rem;
}
.final-cta-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    overflow: hidden;
    list-style: none;
    margin: 0 0 2.25rem;
    padding: 0;
}
@media (min-width: 640px) { .final-cta-points { grid-template-columns: repeat(4, 1fr); } }
.final-cta-points li {
    background: rgba(0, 45, 26, 0.55);
    padding: 1rem 0.75rem;
    margin: 0;
}
.final-cta-points strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.final-cta-points span {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9fd0b8;
    margin-top: 0.25rem;
}
.final-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    color: #00512f;
    font-weight: 900;
    font-size: 1.0625rem;
    padding: 1rem 2.4rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease;
}
.final-cta-btn:hover { background: #eaf3ee; transform: translateY(-2px); }
.final-cta-btn:focus-visible { outline: 3px solid #7fcfaa; outline-offset: 3px; }
.final-cta-note {
    font-size: 0.9375rem;
    color: #b9d8c8;
    font-weight: 500;
    margin: 1.25rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .final-cta-btn { transition: none; }
    .final-cta-btn:hover { transform: none; }
}

/* Group heading above a card grid on hub pages (e.g. the blog hub's
   "Choosing a farm bike" / "Living with an electric farm bike").
   Without this the h2 inherits the reset's 16px/400 and renders SMALLER
   than the .card h3s beneath it, which reads as inverted hierarchy. */
.group-heading {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #000;
    line-height: 1.15;
    margin: 0 0 1.75rem;
}
.group-heading + .card-grid {
    margin-top: 0;
}

/* ── Blog ─────────────────────────────────────────────────────────────────
   The hub reads as a magazine index (one lead story, then titled lists) and
   each post gets a byline and a "keep reading" foot, both injected by
   layout.mjs. Deliberately no thumbnail per list item: there are only eight
   distinct photos on the site and repeating them down a list is exactly the
   repetition we pulled off the other hubs. */

.post-lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding-bottom: 3rem;
    border-bottom: 1px solid #e5e5e1;
}
@media (min-width: 860px) {
    .post-lead { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
}
.post-lead-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}
.post-lead-body h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #000;
    margin: 0.85rem 0 0.85rem;
}
.post-lead-body p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 1.25rem;
}
.post-lead:hover h2 { color: var(--green, #0a6b3d); }

.blog-rule { margin-top: 3.5rem; }


/* Byline under a post title */
.post-meta {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #6b7280;
    padding-bottom: 1.75rem;
}
.post-meta .post-cat { color: var(--green, #0a6b3d); }
.post-meta .post-dot { margin: 0 0.5rem; }

.post-related { border-top: 1px solid #e5e5e1; }

/* Blog index cards. The four "Choosing a bike" posts get real photography —
   they are the ones doing the SEO work and the ones a cold visitor lands on.
   The shorter reference posts below are text cards: there are only eight
   distinct photos on the site, and putting them on all twelve would repeat
   images down the page, which is what we pulled off the other hubs. */
.post-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 2rem;
}
@media (min-width: 760px) {
    .post-cards { grid-template-columns: repeat(2, 1fr); }
}
/* Flex column + auto margin on the meta so "6 min read" sits on a common
   baseline across a row, whatever the blurb wraps to. */
.post-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.post-card .post-card-meta { margin-top: auto; }
.post-mini { display: flex; flex-direction: column; }
.post-mini .post-card-meta { margin-top: auto; }
.post-card-media {
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 1rem;
    aspect-ratio: 16 / 9;
    background: #f4f4f2;
}
.post-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card h3 {
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: #000;
    margin: 0.6rem 0 0.5rem;
}
.post-card p {
    font-size: 1rem;
    line-height: 1.55;
    color: #4b5563;
    margin: 0 0 0.75rem;
}
.post-card:hover h3 { color: var(--green, #0a6b3d); }

.post-minis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 700px) { .post-minis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-minis { grid-template-columns: repeat(4, 1fr); } }
.post-mini {
    text-decoration: none;
    color: inherit;
    padding-top: 1.15rem;
    border-top: 2px solid #111;
}
.post-mini h3 {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #000;
    margin: 0.5rem 0 0.4rem;
}
.post-mini p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4b5563;
    margin: 0 0 0.6rem;
}
.post-mini:hover h3 { color: var(--green, #0a6b3d); }

.post-card-meta {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #6b7280;
}


/* ── Article blocks ───────────────────────────────────────────────────────
   A small set of components so a post is not 19 paragraphs and 6 headings in
   a row. Each post picks a different subset (see BLOCKS in blog-brands.mjs),
   which is where the variability comes from — the styling stays constant so
   the site still reads as one thing.

   Colour discipline: body copy is always on white. Only two blocks carry a
   background — .answer-box (bone) and .stat-band (ink) — and a post uses at
   most one of each, so the page never strobes between fills. */

/* 1. The short answer. Opens a post with the conclusion. */
.answer-box {
    background: #f4f4f2;
    border-left: 3px solid var(--green, #00693e);
    padding: 1.5rem 1.75rem;
    margin: 0 0 2.5rem;
    border-radius: 0 2px 2px 0;
}
.answer-box h2 {
    font-size: 0.875rem !important;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green, #00693e);
    margin: 0 0 0.6rem !important;
}
.answer-box p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #1f2937; }
.answer-box p + p { margin-top: 0.75rem; }

/* 2. Pull quote. Breaks a long run of prose. */
.pull-quote {
    margin: 2.75rem 0;
    padding: 0;
    border: 0;
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;
    padding: 1.5rem 0;
}
.pull-quote p {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #000;
}

/* 3. Stat band. Three figures, full column width, dark. */
.stat-band {
    background: #111;
    color: #fff;
    border-radius: 2px;
    padding: 2rem 1.75rem;
    margin: 2.75rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) { .stat-band { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.stat-band .sb-fig {
    display: block;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #7ddba5;
}
.stat-band .sb-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #d7dbd8;
    font-weight: 500;
}

/* 4. Caveat / aside. For the things we could not verify. */
.note-callout {
    border: 1px solid #d8d8d4;
    border-radius: 2px;
    padding: 1.25rem 1.5rem;
    margin: 2.5rem 0;
    background: #fff;
}
.note-callout p { margin: 0; font-size: 1rem; line-height: 1.6; color: #4b5563; }
.note-callout strong { color: #111; }

/* 5. Heading left, detail right. The pattern from the specs page. */
.split-point {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid #e5e5e1;
}
@media (min-width: 760px) {
    .split-point { grid-template-columns: 15rem 1fr; gap: 2.5rem; }
}
.split-point h3 {
    margin: 0 !important;
    font-size: 1.0625rem !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #000;
}
.split-point p { margin: 0; }
.split-group { margin: 2.5rem 0; }
.split-group .split-point:last-child { border-bottom: 1px solid #e5e5e1; }

/* 6. Two columns of contrast. For "X vs Y" content, where two adjacent
   bullet lists is exactly the monotony these blocks exist to break. */
.versus {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin: 2.5rem 0;
}
@media (min-width: 700px) { .versus { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.versus-col { border-top: 2px solid #111; padding-top: 1.15rem; }
.versus-col h3 {
    margin: 0 0 0.85rem !important;
    font-size: 1.0625rem !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #000;
}
.versus-col ul { margin: 0; padding-left: 1.1rem; }
.versus-col li { margin-bottom: 0.6rem; font-size: 1rem; line-height: 1.55; }

/* Separator for two consecutive white sections. Replaces the white/grey
   zebra this page used to run — eight background changes top to bottom, none
   of them meaning anything. Now only the price table is tinted (it is
   reference data, so the panel earns it), one dark stat band, one green CTA. */
.section-ruled { border-top: 1px solid #e5e5e1; }
.section-lead { margin-top: 0 !important; }
.section-ruled .prose { margin-bottom: 2rem; }
.table-subhead {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin: 2.5rem 0 0.75rem;
}
@media (min-width: 640px) {
    .stat-band--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .stat-band--four { grid-template-columns: repeat(4, 1fr); }
}


/* Centred prose is right for a blog post — a single column of text with a
   centred hero above it shares one axis. It is wrong for a page that mixes
   prose with full-width blocks (cards, stat bands, split rows): those sit at
   the shell edge, so a centred heading floats ~270px right of the content it
   introduces. On mixed pages the prose goes flush left and everything shares
   one left edge. */
.prose--flush { margin-inline: 0; }


/* Section-level two-column. Prose-only sections were the weak point: flush
   left they filled 736px of a 1280px shell and left the right half dead, but
   centring them put the heading 270px off the blocks in neighbouring
   sections. Splitting heading from body fills the width, keeps one left edge,
   and keeps the line length readable. Same idea as .split-point, section scale. */
.section-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 900px) {
    .section-split { grid-template-columns: 20rem 1fr; gap: 4rem; align-items: start; }
}
.section-split > h2 {
    margin: 0 !important;
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #000;
    text-wrap: balance;
}
.section-split .prose { max-width: none; margin-inline: 0; }
.section-split .prose > *:first-child { margin-top: 0; }

/* Opening block: the short answer beside the intro copy. */
.intro-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 900px) {
    .intro-split { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
}
.intro-split .answer-box { margin: 0; }
.intro-split .prose { max-width: none; margin-inline: 0; }
.intro-split .prose > p:first-child { margin-top: 0; }

/* FAQ: questions beside a standing aside. The accordion stays at a readable
   measure instead of stretching, and the right-hand gap carries a route out
   for anyone whose question is not on the page. */
.faq-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 900px) {
    .faq-layout { grid-template-columns: 19rem 1fr; gap: 4rem; align-items: start; }
    .faq-aside { position: sticky; top: 7rem; }
}
.faq-aside {
    background: #f4f4f2;
    border-left: 3px solid var(--green, #00693e);
    padding: 1.5rem 1.6rem;
    border-radius: 0 2px 2px 0;
}
.faq-aside h2 {
    font-size: 1.0625rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0 0 0.6rem;
}
.faq-aside p { font-size: 0.9375rem; line-height: 1.6; color: #4b5563; margin: 0 0 1rem; }
.faq-aside-link { font-size: 0.9375rem; font-weight: 800; color: var(--green, #00693e); }
.faq-aside-note { margin: 1.1rem 0 0 !important; padding-top: 1rem; border-top: 1px solid #dededa; }
.faq-aside-note a { color: var(--green, #00693e); font-weight: 700; }

/* Prose that opens a section before the first heading — sits flush with the
   section-splits beneath it rather than centring on its own axis. */
.prose--wide { max-width: none; margin-inline: 0; }