/* =========================================================
   Flowcore: stylesheet

   Organized by component so each block maps to a future
   partial (header / hero / cards / row / prose / footer).
   Each section is self-contained, including its own
   responsive rules, so it can be lifted out verbatim.

   1. Tokens   :root design tokens (the single source of truth)
   2. Base     reset + document
   3. Header   .topbar  -> header partial
   4. Hero     .hero    -> hero partial
   5. Cards    .cards   -> six-pack / features partial
   6. Row      .row     -> image + text partial
   7. Prose    .prose   -> content partial
   8. Footer   .footer  -> footer partial
   ========================================================= */

/* ============================ 1. TOKENS ============================ */
:root {
    /* Type */
    --font-serif: Georgia, "Times New Roman", serif;
    --font-sans:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    --font-mono:
        ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Brand palette: the single source of brand colour. Change a value here
       and it updates everywhere, including the inline SVG illustrations. */
    --brand-green: #10cf9c; /* bright, tasty green: SVG main + gradients */
    --brand-blue: #077ab2; /* calming blue: logo, hero highlight, gradients */
    --brand-dark: #062425; /* dark grey-green: footer, buttons, body text */
    --brand-teal: #2e765e; /* deeper green: eyebrows, links, focus (readable) */
    --brand-tint: #eef4f1; /* pale wash: image panels */
    --svg-light: #d6d7d9; /* light grey: minor illustration details */

    /* Brand gradient: decorative hero haze behind the headline. */
    --brand-blob: linear-gradient(
        120deg,
        var(--brand-green),
        var(--brand-blue),
        var(--brand-teal)
    ); /* decorative hero haze */

    /* Color: light surfaces */
    --ink: var(--brand-dark); /* primary text + dark fills (dark grey-green) */
    --ink-rgb: 6, 36, 37; /* = --brand-dark, for rgba() shadows */
    --ink-soft: #3f3f46;
    --muted: #52525b;
    --surface: #ffffff;
    --surface-sunken: #fafafa; /* recessed bands */
    --border: #e4e4e7;
    --hairline: #ececec;
    --accent: var(--brand-teal); /* eyebrows / links / focus (Teal Green) */

    /* Color: on dark (footer, pills) */
    --on-dark: #fafafa;
    --on-dark-muted: #a1a1aa;
    --on-dark-faint: #71717a;

    /* Layout */
    --container: 72rem;
    --gutter: 1.5rem;
    --radius-pill: 9999px;
}

/* ============================ 2. BASE ============================= */
* {
    box-sizing: border-box;
}
html {
    scrollbar-gutter: stable; /* reserve scrollbar so it can't shift layout */
}
body {
    margin: 0;
    min-width: 300px; /* never narrower than this; below it the page scrolls */
}

/* Visually hidden, but available to screen readers (e.g. section headings
   that keep the h1 -> h2 -> h3 order without showing a visible title). */
.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;
}

/* Consistent breathing room between the last content block and the footer,
   whichever section ends the page (prose ends short, rows end tall). Higher
   specificity than the section rules, so it overrides their bottom padding. */
main > :last-child {
    padding-bottom: 5rem;
}

/* =========================== 3. HEADER ===========================
   Dark band, same anchor colour as the footer, so the page sits between
   two dark bars. Pill shadows here are black-based: ink-based rgba()
   shadows vanish on the dark background. */
.topbar {
    width: 100%;
    height: 5.5rem;
    background-color: var(--ink); /* = footer */
}
.topbar-inner {
    max-width: var(--container);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem; /* floor the logo↔actions distance to the button gap (no bumping) */
}

/* Wordmark: serif, echoing the hero headline; preceded by the brand mark */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--on-dark);
    text-decoration: none;
}
.logo-mark {
    height: 3.25rem; /* taller than the pills; the detailed mark needs the size */
    aspect-ratio: 285 / 339; /* the SVG's viewBox; width follows the height */
    flex: none;
}
.logo-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Drop the wordmark (keeping the disk) before it can crowd the language pill;
   the link's aria-label keeps its accessible name. */
@media (max-width: 29rem) {
    .logo-text {
        display: none;
    }
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Language switcher: ghost outline pill (an <a>) on the dark bar */
.lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--on-dark);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* resting lift */
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}
.lang-switch:active {
    /* light pill has no dark mass, so a growing shadow reads as "lifting".
       Sink it instead: nudge down + shrink the shadow = pressed in. */
    transform: scale(0.96) translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* CTA: compact light pill (inverted; a dark pill sinks into the dark bar) */
.topbar-button {
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* keep "Contact us" on one line */
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    background-color: var(--on-dark);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45); /* resting lift */
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}
.topbar-button:active {
    transform: scale(0.96) translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* sink on press */
}

/* ============================ 4. HERO ============================ */
.hero {
    width: 100%;
    min-height: 30rem; /* min- not fixed: grows under text-zoom instead of clipping */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem var(--gutter);
    background-color: var(--surface);
    overflow: hidden; /* clip the blurred blob so it can't cause horizontal scroll */
}

/* Compact header variant: same look, shorter for content pages.
   On the landing the bottom edge comes from the six-pack below; here the
   header meets plain prose, so it carries its own hairline + soft shadow. */
.hero--page {
    min-height: 22rem;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 8px 16px -10px rgba(var(--ink-rgb), 0.15);
}

/* Text block (with gradient blob behind it) */
.hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

/* Background blob: scoped to the text block */
.hero-content::before {
    content: "";
    position: absolute;
    inset: -3rem -5rem;
    z-index: 0;
    background: var(--brand-blob);
    filter: blur(80px) saturate(1.2);
    opacity: 0.55;
    pointer-events: none;
}

/* Content above the blob */
.hero-content > * {
    position: relative;
    z-index: 1;
}

.hero-title {
    margin: 0;
    max-width: 60rem;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2rem, 8vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ink);
}
/* Highlighted word: solid calming brand blue (clean + readable on white) */
.hero-title .accent {
    color: var(--brand-blue);
}

.hero-subtitle {
    margin: 0;
    max-width: 34rem;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.5;
    color: var(--muted);
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.6rem;
    border-radius: var(--radius-pill);
    background-color: var(--ink);
    color: var(--on-dark);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    /* resting lift: tight contact + soft ambient */
    box-shadow:
        0 2px 4px rgba(var(--ink-rgb), 0.22),
        0 8px 18px rgba(var(--ink-rgb), 0.2);
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}
.hero-button:active {
    transform: scale(0.97) translateY(1px); /* sink on press */
    box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.24);
}

/* Page head: lightweight title band for utility / content pages (contact,
   legal, 404). No gradient blob; same grounded bottom edge as .hero--page. */
.page-head {
    padding: 3.5rem var(--gutter) 2.5rem;
    text-align: center;
    background-color: var(--surface);
    /* separator + shadow at the TOP only; no bottom edge, so the header reads
       as flowing down into the page rather than as a boxed-off band. */
    box-shadow: inset 0 8px 11px -9px rgba(var(--ink-rgb), 0.16);
}
.page-head-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.page-head-subtitle {
    margin: 1rem auto 0;
    max-width: 34rem;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    line-height: 1.5;
    color: var(--muted);
}

/* =========================== 5. CARDS ===========================
   Recessed band: sunken surface so the inset shadow reads against the
   white page; cards sit white above it. */
.cards {
    padding: 4rem var(--gutter);
    background-color: var(--surface-sunken);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 3px 8px rgba(var(--ink-rgb), 0.05);
}
.cards-inner {
    /* grid keeps all cards equal width (flex stretched the last row unevenly) */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--container);
    margin: 0 auto;
}
.card {
    padding: 1.75rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.card-title {
    margin: 0 0 0.6rem;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
}
.card-text {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--muted);
}

@media (max-width: 56rem) {
    .cards-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 34rem) {
    .cards-inner {
        grid-template-columns: 1fr;
    }
}

/* ============================ 6. ROW ============================
   Flat white section; the image block is RAISED (drop shadow) so it lifts
   off the page: the deliberate opposite of the recessed six-pack. */
.row {
    padding: 4rem var(--gutter);
    background-color: var(--surface);
}
/* collapse the doubled gap between adjacent rows so they read as a pair */
.row + .row {
    padding-top: 0;
}
.row-inner {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    max-width: var(--container);
    margin: 0 auto;
}
.row--reverse .row-inner {
    flex-direction: row-reverse;
}

/* Banded row: a full-width tinted band with hairline edges, to set a lone
   image+text block apart from the prose around it (content pages). */
.row--band {
    background-color: var(--brand-tint);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.row--band .row-media {
    background: var(--surface); /* white panel pops against the tinted band */
}

/* Raised image panel: square box (matches the 1000×1000 illustrations);
   the box is reserved via aspect-ratio so there's no layout shift. */
.row-media {
    flex: 1 1 50%;
    max-width: 22rem; /* keep the square from ballooning on wide screens */
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    padding: 2rem;
    background: var(--brand-tint);
    box-shadow:
        0 18px 40px rgba(var(--ink-rgb), 0.16),
        0 4px 10px rgba(var(--ink-rgb), 0.08);
}
/* Inline illustration fills its panel; colours come from the brand tokens. */
.row-media > svg,
.row-media > img {
    display: block;
    width: 100%;
    height: 100%;
}
.row-media > img {
    object-fit: contain;
}
.row-media svg .sg {
    fill: var(--brand-green);
}
.row-media svg .sd {
    fill: var(--brand-dark);
}
.row-media svg .sl {
    fill: var(--svg-light);
}

.row-text {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}
.row-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.row-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.row-body {
    margin: 0;
    max-width: 32rem;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--muted);
}
.row-link {
    margin-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
}

/* MOBILE: stack rows, image on top (both rows, even the reversed one) */
@media (max-width: 48rem) {
    .row-inner,
    .row--reverse .row-inner {
        flex-direction: column;
        gap: 2rem;
    }
    .row-text {
        flex-basis: auto;
        width: 100%;
    }
    .row-media {
        flex-basis: auto;
        width: 100%;
        margin-inline: auto; /* centre the capped square when stacked */
    }
}

/* =========================== 7. PROSE ===========================
   Single centered reading column (supplementary pages). */
.prose {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3.5rem var(--gutter) 1.5rem;
    font-family: var(--font-sans);
    color: var(--ink-soft);
}
.prose > h2 {
    /* hairline divider + breathing room makes each section a clear block */
    margin: 3rem 0 1rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.prose > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.prose > h3 {
    margin: 2rem 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}
.prose p {
    margin: 0 0 1.15rem;
    font-size: 1.0625rem;
    line-height: 1.7;
}
.prose .lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--muted);
}
.prose ul {
    margin: 0 0 1.15rem;
    padding-left: 1.25rem;
}
.prose li {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    line-height: 1.6;
}
/* Two-column lists on wider screens: uses the width, shortens the page,
   adds rhythm. Items never split across columns. */
@media (min-width: 48rem) {
    .prose ul {
        columns: 2;
        column-gap: 2.5rem;
    }
    .prose li {
        break-inside: avoid;
    }
}
.prose strong {
    color: var(--ink);
}
.prose a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border);
}

/* Legal pages (terms, privacy): many short numbered clauses, so the airy
   marketing rhythm reads as oversized + sparse. Tighten it into a denser,
   document-like block: smaller headings, narrower column, less air. Equal
   specificity to the .prose rules above, so source order wins. */
.prose--legal {
    max-width: 46rem;
    padding-top: 2.25rem;
    color: var(--ink-soft);
}
.prose--legal > h2 {
    margin: 1.75rem 0 0.5rem;
    padding-top: 1.4rem;
    font-size: 1.2rem;
    line-height: 1.25;
}
.prose--legal > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}
.prose--legal > h3 {
    margin: 1.4rem 0 0.4rem;
    font-size: 1.02rem;
}
.prose--legal p {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    line-height: 1.6;
}
.prose--legal .lead {
    font-size: 1.05rem;
    line-height: 1.55;
}
.prose--legal li {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =========================== 8. FOOTER ==========================
   Dark anchor at the bottom of the page. */
.footer {
    width: 100%;
    background-color: var(--ink);
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: 4rem var(--gutter) 3rem;
}

/* Brand block */
.footer-brand {
    max-width: 20rem;
}
.footer-logo {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--on-dark);
    text-decoration: none;
}
.footer-tagline {
    margin: 0.75rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--on-dark-muted);
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--gutter);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--on-dark-faint);
}
.footer-legal {
    display: flex;
    gap: 1.5rem;
}
.footer-legal a {
    color: var(--on-dark-faint);
    text-decoration: none;
}

/* ===================== 9. LOGIN DROPDOWN ========================
   CSS-only via a hidden checkbox (so a close ✕ and a tap-outside backdrop can
   also flip it: a <details> can only be toggled by its own summary). The
   panel overlays content; it never reflows the page. */
.login {
    position: relative;
}
/* toggle state lives in a visually-hidden but keyboard-focusable checkbox */
.login-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* the visible "Login" pill: brand blue */
.login-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    background-color: var(--brand-blue);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45); /* black: sits on the dark topbar */
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}
.login-toggle:active {
    transform: scale(0.96) translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.login-check:focus-visible ~ .login-toggle {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
/* backdrop (tap-outside to close) + panel show only when checked */
.login-backdrop {
    display: none;
}
.login-check:checked ~ .login-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
}
.login-panel {
    display: none;
    /* drop straight down, centred on the toggle that opens it */
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: min(
        18rem,
        calc(100vw - 2rem)
    ); /* cap so it can't overflow narrow screens */
    padding: 1.25rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow:
        0 18px 40px rgba(var(--ink-rgb), 0.16),
        0 4px 10px rgba(var(--ink-rgb), 0.08);
}
.login-check:checked ~ .login-panel {
    display: block;
}
/* On small screens present login as a centred modal instead of a dropdown
   pinned under the button. Centre via inset + margin:auto (not top/transform)
   so it doesn't drift when the page has horizontal overflow below min-width. */
@media (max-width: 30rem) {
    .login-panel {
        position: fixed;
        inset: 0;
        margin: auto;
        height: max-content;
        transform: none;
    }
    .login-check:checked ~ .login-backdrop {
        background-color: rgba(var(--ink-rgb), 0.35);
    }
}
/* Below the min width the page is in horizontal-scroll territory where a fixed
   modal can't sit right: drop the (stub) login entirely there. */
@media (max-width: 299.98px) {
    .login {
        display: none;
    }
}

/* ===================== 10. FORMS ===============================
   Shared by the login dropdown and the contact page. */
.form,
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
}
.form {
    margin: 0 auto; /* centre the contact form within the wider prose column */
}
.login-form {
    gap: 0.85rem;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.field > span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.field input,
.field textarea {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--ink);
}
.field textarea {
    resize: vertical;
}
.field input:focus,
.field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* Submit: dark pill, matching the header/hero buttons */
.btn {
    align-self: center;
    padding: 0.65rem 1.3rem;
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--ink);
    color: var(--on-dark);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(var(--ink-rgb), 0.24);
    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}
.login-form .btn {
    align-self: stretch;
    text-align: center;
}
.btn:active {
    transform: scale(0.97) translateY(1px);
    box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.26);
}

/* Form messages */
.form-error,
.form-errors {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background-color: #fee2e2;
    color: #991b1b;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.45;
}
.form-errors {
    list-style: none;
    max-width: 32rem;
    margin: 0 auto 1.25rem; /* match the centred contact form */
}
.form-error {
    font-size: 0.85rem;
}
.form-success {
    max-width: 32rem;
    margin: 0 auto 1.25rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    background-color: #d1fae5;
    color: #065f46;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}
/* The contact messages live inside .prose, so beat the prose list/paragraph
   rules: single column, no list indent, re-centred box, centred text. */
.prose .form-errors {
    margin: 0 auto 1.25rem;
    padding-left: 0.75rem;
    columns: 1;
    text-align: center;
}
.prose .form-success {
    margin: 0 auto 1.25rem;
    text-align: center;
}

/* Honeypot: present in the DOM, hidden from people */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}