/* Hallmark · macrostructure: Long Document · nav: family (wordmark + anchors + CTA) · footer: dark-grain family
 * theme: studied-DNA (source: https://hada.farm) · paper #faf8f4 · accent copper #976029 + sage #7b8b6f
 * display: Cormorant Garamond 600 (roman) · body: DM Sans · labels: DM Sans caps .15em · mono: system stack
 * studied: yes · DNA-source: url (user-owned: Had A Farm LLC)
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 * Portable token reference: resources/css/redesign-tokens.css
 */
:root {
    --color-warm-white: #fdfcfa;
    --color-cream: #faf8f4;
    --color-cream-dark: #f0ede6;
    --color-charcoal: #2d2a26;
    --color-charcoal-light: #4a4640;
    --color-muted: #716c62;
    --color-earth: #1c1917;
    --color-copper: #976029;
    --color-copper-light: #c17a34;
    --color-copper-dark: #7a4e21;
    --color-copper-tint: #f5ede1;
    --color-sage: #7b8b6f;
    --color-sage-dark: #5a6b4e;
    --color-sage-light: #edf1e8;
    --color-wheat: #b28a24;
    --color-wheat-dark: #6e5a18;
    --color-wheat-tint: #f5eed9;
    --color-bark-tint: #eceae6;
    --color-on-dark: #cfc9bd;
    --color-on-dark-dim: #a49e93;
    --color-cli-ok: #a8bd98;
    --color-cli-warn: #d9a545;
    --color-cli-fail: #d99575;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --rule-sage: 1px solid color-mix(in srgb, var(--color-sage) 45%, transparent);
    --rule-dark: 1px solid color-mix(in srgb, var(--color-cream) 14%, transparent);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-quick: 0.25s;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
    margin: 0;
    background: var(--color-cream);
    color: var(--color-charcoal);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible {
    outline: 2px solid var(--color-copper-dark);
    outline-offset: 3px;
    border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--color-copper-light); }

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100%;
    z-index: 50;
    background: var(--color-earth);
    color: var(--color-cream);
    padding: var(--space-2) var(--space-4);
    border-radius: 4px;
    font-size: 0.8125rem;
    text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

.container {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: var(--space-6);
}
@media (min-width: 768px) {
    .container { padding-inline: var(--space-8); }
}
.measure { max-width: 44rem; }

/* ---------- Nav ---------- */
.site-nav {
    border-bottom: var(--rule-sage);
    background: var(--color-cream);
}
.site-nav .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-4);
}
.wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1;
    color: var(--color-charcoal);
    text-decoration: none;
    white-space: nowrap;
}
.wordmark small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-charcoal-light);
    margin-top: var(--space-1);
}
.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-left: auto;
}
.nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-charcoal-light);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-quick) var(--ease-out);
}
.nav-link:hover { color: var(--color-copper-dark); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-copper-dark); color: var(--color-warm-white); }
.btn--primary:hover { background: var(--color-copper); }
.btn--earth { background: var(--color-earth); color: var(--color-cream); }
.btn--earth:hover { background: var(--color-charcoal); }
.btn--on-dark { background: var(--color-copper-light); color: var(--color-earth); }
.btn--on-dark:hover { background: var(--color-cream); }
.btn--nav { padding: 0.625rem 1.25rem; min-height: 36px; font-size: 0.75rem; }
.text-cta {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-sage-dark);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--color-sage);
    white-space: nowrap;
    transition: color var(--dur-quick) var(--ease-out);
}
.text-cta:hover { color: var(--color-copper-dark); text-decoration-color: var(--color-copper); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(4.5rem, 11vw, 8.5rem); background: var(--color-cream); }
.eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-6);
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: var(--space-8);
    height: 1px;
    background: var(--color-sage);
    margin-right: var(--space-3);
    vertical-align: middle;
}
.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3rem, 8.5vw, 6.75rem);
    line-height: 1.03;
    letter-spacing: -0.01em;
    color: var(--color-charcoal);
    max-width: 14ch;
}
.hero .lede {
    margin-top: var(--space-8);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-charcoal-light);
    max-width: 40rem;
}
.hero-ctas {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}
.microtext {
    margin-top: var(--space-4);
    font-size: 0.8125rem;
    color: var(--color-charcoal-light);
}
.trust-strip {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: var(--rule-sage);
    font-size: 0.8125rem;
    color: var(--color-charcoal-light);
    max-width: 40rem;
}
.trust-strip a { color: var(--color-copper-dark); text-underline-offset: 3px; }

/* ---------- Word band divider ---------- */
/* Static: the word sequence overfills any viewport and clips evenly at both
   edges, so browser width decides how many words show. No motion. */
.word-band {
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-block: 1px solid color-mix(in srgb, var(--color-muted) 70%, transparent);
    padding-block: var(--space-4);
    background: var(--color-warm-white);
}
.word-band-track {
    display: flex;
    flex-shrink: 0;
    width: max-content;
}
.word-band-group { display: flex; align-items: center; }
.word-band-group span.word {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--color-muted);
    margin-inline: var(--space-8);
    white-space: nowrap;
}
.word-band-group span.dot { color: var(--color-muted); margin-inline: var(--space-4); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-24); }
@media (min-width: 1024px) {
    .section { padding-block: var(--space-32); }
}
.bg-sagelight { background: var(--color-sage-light); }
.bg-warmwhite { background: var(--color-warm-white); }
.bg-creamdark { background: var(--color-cream-dark); }
.bg-earth { background: var(--color-earth); }

.section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-8);
}
.section-label::before {
    content: "";
    display: inline-block;
    width: var(--space-8);
    height: 1px;
    background: var(--color-sage);
    margin-right: var(--space-3);
    vertical-align: middle;
}
.heading-serif {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--color-charcoal);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
}
.section-lede {
    margin-top: var(--space-6);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-charcoal-light);
}
.pull-line {
    margin-top: var(--space-8);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-sage-dark);
}

/* ---------- Hairline grids (family pattern) ---------- */
.hairline-grid {
    display: grid;
    gap: 1px;
    background: var(--color-sage);
    border: 1px solid var(--color-sage);
    border-radius: 1rem;
    overflow: hidden;
    margin-top: var(--space-12);
}
.hairline-grid > div {
    background: var(--color-warm-white);
    padding: var(--space-8);
    min-width: 0;
}
.grid-steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .grid-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid-steps > div { padding: var(--space-12) var(--space-8); }
.grid-steps h3 { font-size: 1.625rem; }
.grid-steps p { font-size: 1rem; }
.grid-thirds { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step-number {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--color-muted);
}
.hairline-grid h3 {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3125rem;
    color: var(--color-charcoal);
}
.hairline-grid p {
    margin-top: var(--space-3);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-charcoal-light);
}

/* ---------- Engines ---------- */
.engine { margin-top: var(--space-16); }
.engine:first-of-type { margin-top: var(--space-12); }
.engine h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--color-charcoal);
}
.engine-mark {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 999px;
    margin-right: var(--space-3);
    vertical-align: 0.125rem;
}
.mark-sage { background: var(--color-sage); }
.mark-bark { background: var(--color-charcoal-light); }
.mark-copper { background: var(--color-copper); }
.mark-wheat { background: var(--color-wheat); }
.engine > p {
    margin-top: var(--space-4);
    max-width: 60ch;
    color: var(--color-charcoal-light);
}
.chips {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.chip {
    font-size: 0.75rem;
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    white-space: nowrap;
}
.chip--sage { background: var(--color-sage-light); color: var(--color-sage-dark); border: 1px solid color-mix(in srgb, var(--color-sage) 40%, transparent); }
.chip--bark { background: var(--color-bark-tint); color: var(--color-charcoal); border: 1px solid color-mix(in srgb, var(--color-charcoal-light) 30%, transparent); }
.chip--copper { background: var(--color-copper-tint); color: var(--color-copper-dark); border: 1px solid color-mix(in srgb, var(--color-copper) 35%, transparent); }
.chip--wheat { background: var(--color-wheat-tint); color: var(--color-wheat-dark); border: 1px solid color-mix(in srgb, var(--color-wheat) 40%, transparent); }
.engine-link {
    display: inline-block;
    margin-top: var(--space-6);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-copper-dark);
    text-underline-offset: 4px;
}
.engine-link:hover { color: var(--color-copper); }

/* ---------- CLI output (content preserved verbatim) ---------- */
.cli-output-block {
    margin-top: var(--space-8);
    background: var(--color-earth);
    border: 1px solid color-mix(in srgb, var(--color-charcoal-light) 70%, transparent);
    border-radius: 0.75rem;
    overflow: hidden;
    max-width: 100%;
}
.cli-head {
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--rule-dark);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-on-dark-dim);
}
.cli-body {
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.75;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cli-body > div { white-space: nowrap; }
.cli-dim { color: var(--color-on-dark-dim); }
.cli-ok { color: var(--color-cli-ok); }
.cli-warn { color: var(--color-cli-warn); }
.cli-fail { color: var(--color-cli-fail); }
.cli-gap { margin-top: var(--space-3); }

/* ---------- Founder quote ---------- */
.founder-quote {
    margin: var(--space-16) 0 0;
    padding-left: var(--space-8);
    border-left: 2px solid var(--color-sage);
    max-width: 46rem;
}
.founder-quote p {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--color-charcoal);
}
.founder-quote footer {
    margin-top: var(--space-4);
    font-size: 0.8125rem;
    color: var(--color-charcoal-light);
}

/* ---------- Pricing ---------- */
/* NOTE: rules are prefixed with .pricing-grid so they outrank the generic
   .hairline-grid h3 / .hairline-grid p sizing rules (class+element specificity).
   Column steps skip a 3-col stage so the 5 cards never leave an empty sage cell. */
.pricing-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-grid > div:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
    .pricing-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pricing-grid > div:last-child { grid-column: auto; }
}
.pricing-grid > div { padding: var(--space-6); }
.pricing-grid .plan-name {
    margin-top: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-charcoal);
}
.plan-tag {
    display: inline-block;
    margin-left: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-sage-dark);
}
.pricing-grid .plan-price {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.75rem;
    line-height: 1;
    color: var(--color-charcoal);
}
.pricing-grid .plan-price small {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-charcoal-light);
}
.pricing-grid .plan-desc {
    margin-top: var(--space-4);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-charcoal-light);
}
.plan-features {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-charcoal-light);
}
.plan-features li {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-1);
}
.plan-features .tick { color: var(--color-sage-dark); }
.plan-features li.excluded, .plan-features .cross { color: var(--color-muted); }
.plan-cta {
    display: inline-block;
    margin-top: var(--space-6);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-copper-dark);
    text-underline-offset: 4px;
    white-space: nowrap;
}
.plan-cta:hover { color: var(--color-copper); }

/* Billing toggle (CSS-only switch; checkbox drives sibling selectors) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.billing-row {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.billing-label { transition: color var(--dur-quick) var(--ease-out); }
.lbl-monthly { color: var(--color-charcoal); }
.lbl-yearly { color: var(--color-muted); }
.billing-track {
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--color-sage);
    position: relative;
    cursor: pointer;
    transition: background-color var(--dur-quick) var(--ease-out);
}
.billing-track::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    background: var(--color-warm-white);
    transition: transform var(--dur-quick) var(--ease-out);
}
.billing-input:checked ~ .billing-row .billing-track { background: var(--color-sage-dark); }
.billing-input:checked ~ .billing-row .billing-track::after { transform: translateX(1.25rem); }
.billing-input:checked ~ .billing-row .lbl-monthly { color: var(--color-muted); }
.billing-input:checked ~ .billing-row .lbl-yearly { color: var(--color-charcoal); }
.billing-input:focus-visible ~ .billing-row .billing-track {
    outline: 2px solid var(--color-copper-dark);
    outline-offset: 3px;
}
.price-y, .cta-y { display: none; }
.billing-input:checked ~ .pricing-grid .price-m { display: none; }
.billing-input:checked ~ .pricing-grid .price-y { display: inline; }
.billing-input:checked ~ .pricing-grid .cta-m { display: none; }
.billing-input:checked ~ .pricing-grid .cta-y { display: inline-block; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: var(--space-12); max-width: 50rem; }
.faq-item { border-top: var(--rule-sage); padding-block: var(--space-8); }
.faq-item:last-child { border-bottom: var(--rule-sage); }
.faq-item h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4375rem;
    color: var(--color-charcoal);
}
.faq-item p {
    margin-top: var(--space-3);
    color: var(--color-charcoal-light);
    max-width: 65ch;
}

/* ---------- Closing / footer ---------- */
.on-dark .section-label { color: var(--color-on-dark-dim); }
.on-dark .section-label::before { background: var(--color-sage); }
.on-dark .heading-serif { color: var(--color-cream); }
.on-dark .section-lede { color: var(--color-on-dark); }
.on-dark .microtext { color: var(--color-on-dark); }

.site-footer {
    position: relative;
    background: var(--color-earth);
    padding-block: var(--space-16);
    border-top: var(--rule-dark);
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 29px, var(--color-sage) 29px, var(--color-sage) 30px),
        repeating-linear-gradient(-45deg, transparent, transparent 29px, var(--color-sage) 29px, var(--color-sage) 30px);
}
.site-footer .container { position: relative; }
.footer-wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    color: var(--color-cream);
    text-decoration: none;
}
.footer-credit {
    margin-top: var(--space-4);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-on-dark);
    max-width: 40rem;
}
.footer-credit a { color: var(--color-copper-light); text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--color-cream); }
.footer-links {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
}
.footer-links a {
    font-size: 0.8125rem;
    color: var(--color-on-dark);
    text-decoration: none;
    white-space: nowrap;
}
.footer-links a:hover { color: var(--color-copper-light); text-decoration: underline; text-underline-offset: 4px; }
.footer-fine {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: var(--rule-dark);
    font-size: 0.75rem;
    color: var(--color-on-dark-dim);
}
.footer-fine a { text-underline-offset: 3px; }
.footer-fine a:hover { color: var(--color-copper-light); }

/* ---------- Subpage patterns ---------- */
.page-hero { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--color-cream); }
.page-hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.75rem, 6.5vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--color-charcoal);
    max-width: 20ch;
}
.page-hero .lede {
    margin-top: var(--space-6);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-charcoal-light);
    max-width: 40rem;
}

.flow { max-width: 44rem; }
.flow > * + * { margin-top: var(--space-4); }
.flow p { font-size: 1.0625rem; line-height: 1.75; color: var(--color-charcoal-light); }
.flow strong, .flow .callout { font-weight: 500; color: var(--color-charcoal); }
.flow a { color: var(--color-copper-dark); text-underline-offset: 3px; }
.flow a:hover { color: var(--color-copper); }
.flow em { font-style: italic; }

.contact-dl { margin: 0; max-width: 44rem; }
.contact-dl dt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3125rem;
    color: var(--color-charcoal);
    margin-top: var(--space-8);
}
.contact-dl dd { margin: var(--space-2) 0 0; font-size: 1rem; line-height: 1.7; color: var(--color-charcoal-light); }
.contact-dl a { color: var(--color-copper-dark); text-underline-offset: 3px; }
.contact-dl a:hover { color: var(--color-copper); }

/* Stat cards (feature pages) — big serif figure over label + body */
.stat-figure {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--color-charcoal);
}
.stat-label {
    margin-top: var(--space-2);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-charcoal-light);
}

/* Comparison cards (Traditional SEO vs GEO/AIO) */
.compare-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.compare-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
}
.compare-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.compare-list li {
    padding-block: var(--space-2);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-charcoal-light);
    border-top: var(--rule-sage);
}

/* Trust row on dark CTA sections */
.trust-row {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    font-size: 0.8125rem;
    color: var(--color-on-dark);
}
.trust-row span::before { content: "\2713\00a0"; color: var(--color-cli-ok); }

/* Per-engine accents for section-label dashes and chips on feature pages */
.accent-wheat .section-label::before { background: var(--color-wheat); }
.accent-copper .section-label::before { background: var(--color-copper); }

/* 4-card sets: 1 → 2 → 4 columns, never 3 (avoids orphan + empty sage cells) */
.grid-quads { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-quads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1152px) { .grid-quads { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Learn + tools ---------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-charcoal-light);
    margin-bottom: var(--space-6);
}
.breadcrumb a { color: inherit; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--color-copper-dark); }
.breadcrumb .sep { color: var(--color-muted); }

.card-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    margin-top: var(--space-8);
}
.entry-card {
    display: block;
    border: var(--rule-sage);
    border-radius: 0.75rem;
    background: var(--color-warm-white);
    padding: var(--space-6);
    text-decoration: none;
    transition: border-color var(--dur-quick) var(--ease-out);
}
.entry-card:hover { border-color: var(--color-copper); }
.entry-card h3 {
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-charcoal);
}
.entry-card p { margin-top: var(--space-2); font-size: 0.875rem; line-height: 1.6; color: var(--color-charcoal-light); }
.entry-card .read-more {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-copper-dark);
}

.meta-row {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    font-size: 0.8125rem;
    color: var(--color-charcoal-light);
}
.wcag-note {
    margin-top: var(--space-6);
    max-width: 44rem;
    background: var(--color-sage-light);
    border: var(--rule-sage);
    border-radius: 0.75rem;
    padding: var(--space-4) var(--space-6);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-charcoal-light);
}
.wcag-note a { color: var(--color-sage-dark); text-underline-offset: 3px; }
.wcag-note a:hover { color: var(--color-copper-dark); }

.definition-callout {
    margin-top: var(--space-8);
    max-width: 44rem;
    border-left: 2px solid var(--color-sage);
    padding-left: var(--space-6);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--color-charcoal);
}

.stat-quotes { margin-top: var(--space-8); max-width: 44rem; }
.stat-quotes figure { margin: 0; padding-block: var(--space-4); border-top: var(--rule-sage); }
.stat-quotes blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--color-charcoal); }
.stat-quotes figcaption { margin-top: var(--space-2); font-size: 0.8125rem; color: var(--color-charcoal-light); }
.stat-quotes figcaption a { color: var(--color-copper-dark); text-underline-offset: 3px; }

.fix-steps { list-style: none; margin: var(--space-8) 0 0; padding: 0; max-width: 44rem; counter-reset: fix; }
.fix-steps li {
    counter-increment: fix;
    position: relative;
    padding: var(--space-4) 0 var(--space-4) var(--space-16);
    border-top: var(--rule-sage);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-charcoal-light);
}
.fix-steps li::before {
    content: counter(fix, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--space-3);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-muted);
}

.code-pair { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 900px) { .code-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.code-pair .cli-output-block { margin-top: var(--space-2); }
.code-pair pre {
    margin: 0;
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-on-dark);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.chip--clay { background: #f6e7de; color: #8c3f22; border: 1px solid color-mix(in srgb, #b25a38 35%, transparent); }

.data-table-wrap { margin-top: var(--space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 0.9375rem; }
.data-table th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-charcoal-light);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1.5px solid var(--color-sage);
}
.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--rule-sage);
    color: var(--color-charcoal-light);
    line-height: 1.6;
}
.data-table td:first-child { color: var(--color-charcoal); font-weight: 500; }

/* ---------- Legal documents ---------- */
.legal-doc { max-width: 44rem; }
.legal-doc h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.625rem;
    color: var(--color-charcoal);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: var(--rule-sage);
}
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1875rem;
    color: var(--color-charcoal);
    margin-top: var(--space-8);
}
.legal-doc p { margin-top: var(--space-4); font-size: 1rem; line-height: 1.75; color: var(--color-charcoal-light); }
.legal-doc ul { margin: var(--space-4) 0 0; padding-left: 1.25rem; color: var(--color-charcoal-light); line-height: 1.75; }
.legal-doc li { margin-top: var(--space-2); }
.legal-doc li::marker { color: var(--color-sage); }
.legal-doc strong { font-weight: 600; color: var(--color-charcoal); }
.legal-doc a { color: var(--color-copper-dark); text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--color-copper); }

/* Links inside running text always carry a non-color cue (WCAG 1.4.1 / axe
   link-in-text-block). Explicit because pages that embed Tailwind-styled
   components (e.g. the crawler audit tool) load Tailwind preflight, which
   strips the UA's default link underline. */
.footer-credit a, .footer-fine a, .flow a, .contact-dl a, .wcag-note a,
.legal-doc a, .stat-quotes figcaption a, .trust-strip a, .faq-item p a {
    text-decoration: underline;
}