/*
|--------------------------------------------------------------------------
| COMPONENTS — every reusable piece in /components and /includes
|--------------------------------------------------------------------------
|
| WHAT THIS FILE IS
|   One block per component, in the same order you meet them on a page:
|   buttons → tags → cards → hero → navigation → tables → tiers → SLA →
|   stats → notices → forms → FAQ → CTA band → editorial blocks.
|
| HOW TO FIND A RULE
|   Search this file for the class you see in the HTML. Every component's
|   PHP file names its own classes, so components/faq.php uses .faq-*,
|   components/tier-cards.php uses .tier-*, and so on.
|
| MOBILE FIRST
|   These are the small-screen rules. Wider layouts live in responsive.css.
*/

/* ===============================================================
 | BUTTONS
 |   primary  ink fill        — the main action
 |   accent   blue fill       — a second action of equal weight
 |   outline  white + border  — secondary
 |   invert / ghost-invert    — for use on the dark bands
 =============================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;                 /* touch target */
    padding: 0.7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--text-invert);
}

.btn-primary:hover {
    background: #1c242c;
    color: var(--text-invert);
}

.btn-accent {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--text-invert);
}

.btn-accent:hover {
    background: #167ab4;
    color: var(--text-invert);
}

.btn-outline {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.btn-outline:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.btn-invert {
    background: var(--surface);
    border-color: var(--surface);
    color: var(--ink);
}

.btn-invert:hover {
    background: #eef1f4;
    color: var(--ink);
}

.btn-ghost-invert {
    background: transparent;
    border-color: var(--line-invert);
    color: var(--text-invert);
}

.btn-ghost-invert:hover {
    border-color: var(--text-invert);
    color: var(--text-invert);
}

.btn-sm {
    min-height: 38px;
    padding: 0.45rem 0.95rem;
    font-size: var(--fs-xs);
}

.btn-lg {
    min-height: 52px;
    padding: 0.95rem 1.75rem;
    font-size: var(--fs-base);
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

/* A text link with an arrow that nudges on hover. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.link-arrow::after {
    content: "→";
    transition: transform var(--t-fast);
}

.link-arrow:hover::after {
    transform: translateX(3px);
}

.link-list {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
}

/* ===============================================================
 | TAGS, CHIPS AND PILL BADGES
 =============================================================== */
.tag,
.chip,
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--canvas);
    color: var(--slate);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Mobile-first: a long label (Spanish runs ~20% longer than English) is
       allowed to wrap onto a second line rather than push the page sideways.
       nowrap comes back at 768px in responsive.css, where there is room. */
    max-width: 100%;
    overflow-wrap: break-word;
}

.pill-accent {
    border-color: transparent;
    background: var(--blue-tint);
    color: var(--blue);
}

.tag-included {
    border-color: transparent;
    background: var(--blue-tint);
    color: var(--blue);
}

/* Case studies awaiting client sign-off are labelled, never hidden. */
.tag-draft {
    border-color: transparent;
    background: var(--warn-tint);
    color: var(--warn);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
}

.chip-list li + li {
    margin-top: 0;
}

/* ===============================================================
 | CARDS
 =============================================================== */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: border-color var(--t-fast), transform var(--t-fast);
}

.card-canvas { background: var(--canvas); box-shadow: none; }
.card-tint   { background: var(--blue-tint); border-color: transparent; box-shadow: none; }
.card-ink    { background: var(--ink); border-color: transparent; color: var(--text-invert-soft); }
.card-ink .card-title { color: var(--text-invert); }

.card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.card-head-split {
    justify-content: space-between;
    align-items: center;
}

/* The blue-tinted square that holds a card's icon. */
.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--blue-tint);
    color: var(--blue);
}

.card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.card-sub,
.card-meta,
.card-note {
    margin: 0;
    color: var(--slate-soft);
    font-size: var(--fs-sm);
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-xs);
}

.card-body {
    margin: 0;
    font-size: var(--fs-sm);
}

.card-sublist {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    font-size: var(--fs-sm);
}

.card-sublist li + li { margin-top: 0; }

.card-sublist a {
    color: var(--slate);
    text-decoration: none;
}

.card-sublist a:hover {
    color: var(--blue);
    text-decoration: underline;
}

/*
| Whole-card links. The <a> inside .card-link stretches to cover the card, so
| the entire panel is clickable while the accessible name stays on the real
| link text. Anything that must stay separately clickable (a sublist link)
| is lifted above it with position:relative.
*/
.card-link {
    color: var(--ink);
    text-decoration: none;
}

.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-md);
}

.card-link:hover {
    color: var(--blue);
}

.card:has(.card-link:hover) {
    border-color: var(--blue);
}

.card-sublist,
.card-meta,
.card-arrow {
    position: relative;
    z-index: 1;
}

.card-arrow {
    align-self: flex-end;
    margin-top: auto;
    color: var(--blue);
    font-size: var(--fs-md);
}

/* Service, article and case-study cards are all .card with a little extra. */
.service-card .card-title,
.article-card .card-title,
.study-card .card-title {
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
}

.study-metrics {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.study-metric dt,
.study-metric dd { margin: 0; }

.metric-value {
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.metric-label {
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

/* ===============================================================
 | HERO
 =============================================================== */
.hero {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}

.hero-inner {
    max-width: 60rem;
}

.hero-centered .hero-inner {
    margin-inline: auto;
    text-align: center;
}

.hero-centered .hero-actions,
.hero-centered .hero-facts {
    justify-content: center;
}

.hero-compact {
    padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hero-title {
    margin-bottom: var(--space-4);
    max-width: 20ch;
}

.hero-compact .hero-title {
    font-size: clamp(2rem, 4.2vw, 3rem);
    max-width: 26ch;
}

.hero-lead {
    max-width: 58ch;
    font-size: 1.0625rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    color: var(--slate-soft);
    font-size: var(--fs-sm);
}

.hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.hero-facts .icon { color: var(--blue); }

.hero-note {
    margin-top: var(--space-4);
    color: var(--slate-soft);
    font-size: var(--fs-xs);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 46ch;
}

.hero-note .icon {
    flex: none;
    margin-top: 0.15em;
}

/* ===============================================================
 | DESKTOP NAVIGATION (shown from 1024px — see responsive.css)
 =============================================================== */
.nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list li + li { margin-top: 0; }

.nav-item { position: relative; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--slate);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
    background: var(--canvas);
    color: var(--ink);
}

/* The single sharp red mark: the active page. */
.nav-link.is-active {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 var(--red);
    border-radius: var(--r-sm);
}

.nav-caret {
    width: 7px;
    height: 7px;
    border-right: 1.75px solid currentColor;
    border-bottom: 1.75px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--t-fast);
}

[aria-expanded="true"] > .nav-caret {
    transform: translateY(1px) rotate(-135deg);
}

/* The dropdown / mega panel. */
.nav-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-menu);
    min-width: 16rem;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-float);
}

.nav-panel[hidden] { display: none; }

/* The wide Services panel is centred on the header, not on its little nav
   button — anchored to the button it would hang off the left of the screen.
   `position: static` on the <li> hands the containing block up to
   .site-header (which is sticky, therefore positioned). */
.nav-item-mega { position: static; }

.nav-panel-mega {
    width: min(66rem, calc(100vw - 3rem));
    left: 50%;
    transform: translateX(-50%);
}

.nav-panel-inner {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nav-panel-simple {
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.nav-col-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.nav-col-title:hover { color: var(--blue); }

.nav-col-blurb {
    margin: var(--space-2) 0 0;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

.nav-sublist {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.nav-sublist li + li { margin-top: 0; }

.nav-sublist a {
    display: block;
    padding: 0.3rem 0;
    color: var(--slate);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.nav-sublist a:hover,
.nav-sublist a[aria-current="page"] {
    color: var(--blue);
}

.nav-panel-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

/* ===============================================================
 | MOBILE DRAWER
 =============================================================== */
.mobile-menu {
    position: fixed;
    inset: 0;
    /* Deliberately below --z-header: the drawer fills the screen, and the
       header (with the close button) has to stay visible on top of it. */
    z-index: var(--z-drawer);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    padding-top: 4.25rem;               /* clears the sticky header */
}

.mobile-menu[hidden] { display: none; }

.mobile-menu-inner {
    padding: var(--space-5) var(--gutter) var(--space-8);
}

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

.mnav-item {
    border-bottom: 1px solid var(--line);
}

.mnav-list li + li { margin-top: 0; }

.mnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.mnav-link {
    display: block;
    flex: 1;
    padding: 0.95rem 0;
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
}

.mnav-link[aria-current="page"] { color: var(--blue); }

.mnav-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--slate);
}

.mnav-sublist {
    margin: 0;
    padding: 0 0 var(--space-4) var(--space-4);
    list-style: none;
}

.mnav-sublist[hidden] { display: none; }

.mnav-sublist a {
    display: block;
    padding: 0.5rem 0;
    color: var(--slate);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.mnav-sublist a:hover { color: var(--blue); }

.mnav-subhead > a {
    color: var(--ink);
    font-weight: 600;
}

.mnav-actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.mnav-lang {
    justify-self: center;
    color: var(--slate);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* ===============================================================
 | TABLES: data, price and labor
 |   .table-scroll keeps a wide table usable on a phone by making it
 |   scroll horizontally, with a keyboard-focusable region.
 =============================================================== */
.table-scroll,
.price-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.table-scroll:focus-visible,
.price-table-wrap:focus-visible {
    outline: 3px solid var(--blue);
}

.data-table,
.price-table {
    min-width: 42rem;
    background: var(--surface);
}

.data-table caption,
.price-table caption,
.table-caption,
.price-caption {
    padding: var(--space-4) var(--space-4) 0;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
    text-align: left;
}

.data-table thead th,
.price-table thead th {
    position: sticky;
    top: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.data-table tbody tr:hover,
.price-table tbody tr:hover {
    background: var(--canvas);
}

.price-name,
.labor-name {
    font-weight: 600;
    color: var(--ink);
}

.price-name a { text-decoration: none; }
.price-name a:hover { text-decoration: underline; }

.price-blurb {
    color: var(--slate);
    max-width: 42ch;
}

.price-col,
.rate-col {
    text-align: right;
    white-space: nowrap;
}

.price-amount {
    color: var(--ink);
    font-weight: 700;
}

.price-unit,
.rate-unit {
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

.price-plus { color: var(--slate-soft); }

.price-period {
    display: block;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

.price-included {
    color: var(--blue);
    font-weight: 600;
}

/* An asterisk marking an estimated price. It carries a title attribute, so
   it must show it is hoverable. */
.price-est {
    color: var(--red);
    cursor: help;
    text-decoration: none;
}

.price-footnote,
.price-disclaimer,
.table-note {
    margin: var(--space-4) 0 0;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

.rate-na { color: var(--slate-soft); }

.rate-free {
    color: var(--ok);
    font-weight: 600;
}

.labor-title {
    display: block;
    color: var(--ink);
}

.labor-detail {
    display: block;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
    font-weight: 400;
}

/* ===============================================================
 | PLAN TIER CARDS
 =============================================================== */
.tier-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-top: 3px solid var(--slate-soft);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

/* The metal on the top edge is the only difference between the tiers. */
.tier-platinum { border-top-color: #8E9AA6; }
.tier-gold     { border-top-color: #C89B3C; }
.tier-silver   { border-top-color: #A8B2BC; }
.tier-bronze   { border-top-color: #A9714B; }
.tier-alacarte { border-top-color: var(--blue); }

.tier-head { display: grid; gap: var(--space-2); }

.tier-name {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
}

.tier-tagline {
    margin: 0;
    color: var(--slate);
    font-size: var(--fs-sm);
}

.tier-subhead {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--slate-soft);
}

.tier-count { color: var(--slate-soft); font-weight: 400; }

.tier-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.tier-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
}

.tier-list .icon { color: var(--blue); margin-top: 3px; }

.tier-m365 {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
}

.tier-foot { margin-top: auto; }

.tier-body { display: block; }

/* The small "from $x/user" teaser used on the home page. */
.tier-teaser {
    display: grid;
    gap: var(--space-4);
}

.tier-teaser-card {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.tier-teaser-price { text-align: right; }

.tier-teaser-amount {
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 800;
}

.tier-teaser-unit {
    display: block;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

/* ===============================================================
 | SLA CARDS
 =============================================================== */
.sla-list {
    display: grid;
    gap: var(--space-4);
}

.sla-card {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-left: 4px solid var(--slate-soft);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

/* Tone maps to urgency: red is reserved for a business-down incident. */
.sla-critical { border-left-color: var(--red); }
.sla-high     { border-left-color: var(--warn); }
.sla-normal   { border-left-color: var(--blue); }
.sla-low      { border-left-color: var(--slate-soft); }

.sla-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.sla-priority {
    margin: 0;
    font-size: var(--fs-md);
}

.sla-response {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-sm);
}

.sla-response-label {
    margin-right: var(--space-2);
    color: var(--slate-soft);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.sla-description { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }

.sla-cadence {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

.sla-subhead {
    margin: 0 0 var(--space-2);
    color: var(--slate-soft);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.sla-examples {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.sla-examples li {
    margin: 0;
    padding-left: var(--space-4);
    position: relative;
}

.sla-examples li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--slate-soft);
}

/* ===============================================================
 | STAT STRIP
 =============================================================== */
.stat-strip {
    padding-block: var(--section-y-tight);
    background: var(--ink);
    color: var(--text-invert-soft);
}

.stat-grid { margin: 0; }

.stat { text-align: center; }

.stat-value {
    margin: 0;
    color: var(--text-invert);
    font-size: var(--fs-xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.stat-label {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
}

.metric-band {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--r-md);
    background: var(--canvas);
}

/* ===============================================================
 | NOTICES AND ALERTS
 =============================================================== */
.notice,
.alert {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-sm);
}

.notice-title,
.alert-title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-base);
}

.notice-body { margin: 0; }

.notice-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.notice-list li {
    padding-left: var(--space-4);
    position: relative;
}

.notice-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--blue);
}

.notice-info    { border-left-color: var(--blue); background: var(--blue-tint); border-color: transparent; }
.notice-warn,
.notice-warning { border-left-color: var(--warn); background: var(--warn-tint); border-color: transparent; }

.alert-success {
    border-left-color: var(--ok);
    background: var(--ok-tint);
    border-color: transparent;
}

.alert-error {
    border-left-color: var(--red);
    background: var(--red-tint);
    border-color: transparent;
}

.alert-error a { color: var(--ink); }

.disclaimer {
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

/* ===============================================================
 | FORMS
 =============================================================== */
.site-form {
    display: grid;
    gap: var(--space-5);
}

.form-card {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.form-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.form-field { display: block; }

.field-hint {
    margin: var(--space-2) 0 0;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

.field-error {
    margin: var(--space-2) 0 0;
    color: var(--red);
    font-size: var(--fs-xs);
    font-weight: 600;
}

[aria-invalid="true"] {
    border-color: var(--red) !important;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.form-note {
    margin: 0;
    color: var(--slate-soft);
    font-size: var(--fs-xs);
}

/*
| The honeypot. It is not display:none, because some bots skip hidden fields;
| it is simply moved out of sight. Real visitors never see or tab into it.
*/
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.search-form {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.search-form input { flex: 1; }

.search-row {
    display: flex;
    gap: var(--space-3);
}

/* ===============================================================
 | FAQ (native <details>, so it works with JavaScript off)
 =============================================================== */
.faq-list {
    display: grid;
    gap: var(--space-3);
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-marker {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
}

.faq-marker::before,
.faq-marker::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: var(--blue);
    transition: transform var(--t-fast);
}

.faq-marker::after { transform: rotate(90deg); }

.faq-item[open] .faq-marker::after { transform: rotate(0deg); }

.faq-a {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--fs-sm);
}

/* ===============================================================
 | CTA BAND — closes every page
 =============================================================== */
.cta-band {
    padding-block: var(--section-y-tight);
    background: var(--ink);
    color: var(--text-invert-soft);
}

.cta-inner {
    display: grid;
    gap: var(--space-5);
    align-items: center;
}

.cta-heading {
    margin: 0 0 var(--space-3);
    color: var(--text-invert);
    font-size: var(--fs-lg);
}

.cta-body { margin: 0; max-width: 52ch; }

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ===============================================================
 | EDITORIAL BLOCKS: bullets, prose, quotes, deliverables, pledge
 =============================================================== */
.bullet-block + .bullet-block { margin-top: var(--space-5); }

.bullet-heading {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-base);
}

.bullet-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
}

.bullet-list .icon { margin-top: 3px; }

.icon-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
}

.prose-block > * + * { margin-top: var(--space-4); }

.pull-quote,
.rb-quote {
    margin: var(--space-5) 0;
    padding-left: var(--space-5);
    border-left: 3px solid var(--blue);
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.45;
}

.pull-quote p,
.rb-quote p { margin: 0; }

.rich-body > * + * { margin-top: var(--space-4); }

.rb-h2 {
    margin-top: var(--space-7);
    font-size: var(--fs-lg);
}

.rb-p { font-size: 1.0625rem; }

.rb-list {
    display: grid;
    gap: var(--space-2);
    padding-left: var(--space-5);
    list-style: disc;
}

.rb-list li { margin: 0; }

.deliverable {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
    margin: 0;
}

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

.deliverable-number {
    color: var(--blue);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.deliverable-title {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-base);
}

.deliverable-body {
    margin: 0;
    font-size: var(--fs-sm);
}

/* The documentation-portal pledge: a dark panel with the points beside it. */
.pledge-panel {
    display: grid;
    gap: var(--space-6);
    padding: clamp(1.5rem, 4vw, var(--space-7));
    border-radius: var(--r-md);
    background: var(--ink);
    color: var(--text-invert-soft);
}

.pledge-panel .section-title { color: var(--text-invert); }

.pledge-body { max-width: 52ch; }

.pledge-points {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.pledge-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
}

.pledge-points .icon { color: var(--blue-deep); margin-top: 3px; }

.pledge-attestation {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-invert);
    font-size: var(--fs-xs);
}

/* Numbered process steps. */
.process-step {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.process-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--r-full);
    background: var(--blue-tint);
    color: var(--blue);
    font-size: var(--fs-sm);
    font-weight: 700;
}