/*

blocks.css - modular page section styles for AI/page-builder assembled content

================================================================================
CSS ARCHITECTURE (READ THIS FIRST)
================================================================================

NAMING CONVENTIONS
- l-   = Layout / structural containers (grid, flow, wrappers, regions)
- c-   = Reusable components (cards, buttons, nav items, forms, media objects)
- u-   = Utilities (single-purpose overrides: spacing, display, text, alignment)
- is-/has- = State classes (applied by JS/template): is-open, has-error, etc.

FILE ARCHITECTURE
1) base.css  — FOUNDATION
    - Design tokens (CSS variables): color, type, spacing, radius, shadows, z-index
    - Resets/normalization + base element styles (html/body/a/p/img/button/form)
    - Global utilities + low-level layout primitives used everywhere
    - A11y/motion rules (focus styles, reduced motion, visually-hidden patterns)
    - MUST NOT contain page/template-specific styling

2) shell.css — SITE CHROME + TEMPLATE LAYOUTS (NOT AI-ASSEMBLED CONTENT)
    - Persistent site frame: header, nav, footer, mobile menu, breadcrumbs, etc.
    - Site wrappers: page shells, global grid scaffolds, sidebars, mastheads
    - Template layouts for content types: articles/blog, portfolio/case studies, team
    - System pages: archives, search/results, taxonomy listings
    - OK to rely on WordPress/template context (post meta, archive structure, etc.)
    - SHOULD NOT contain modular “sales/landing” sections intended for assembly

3) blocks.css — MODULAR PAGE SECTIONS (AI/PAGE-BUILDER ASSEMBLABLE)
    - Portable content sections (“blocks”): heroes, feature grids, pricing, FAQ,
        steps/process, testimonials, logo bands, comparison tables, CTA bands, etc.
    - Contact page sections are BLOCKS if they are modular (form section, map, etc.)
    - Blocks must be drop-in reusable and not depend on shell template context
    - Blocks should not style header/footer/nav or other persistent site chrome

DECISION RULES (QUICK TRIAGE)
- If it’s a universal default/token/utility → base.css
- If it’s persistent site frame OR editorial/system templates → shell.css
- If it’s a portable content section an LLM could choose + assemble → blocks.css

DEPENDENCY RULES (KEEP IT CLEAN)
- base.css may be used by everything.
- shell.css may use base utilities/tokens; should not reach into block internals.
- blocks.css may use base utilities/tokens; should not style shell chrome.

*/

/* ========== Shared Block Utilities ========== */
/* Note: These component eyebrows extend the base .u-eyebrow utility pattern from base.css */

.c-block__eyebrow,
.c-card-grid__eyebrow,
.c-pricing-grid__eyebrow,
.c-media-split__eyebrow,
.c-card__eyebrow,
.c-stat__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.c-block--card,
.c-card,
.c-pricing-card {
    background: var(--color-card-bg);
    border-radius: 0;
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-soft);
}

/* ========== Generic Block Wrapper ========== */

.c-block {
    margin-block: 1.5rem;
}

.c-block--loose {
    margin-block: 3.5rem;
}

/* Consistent top spacing for first block on pages without breadcrumbs */
.l-main > .c-block:first-of-type,
.l-main > section.c-block:first-child {
    margin-top: 0;
}

.c-block--narrow {
    max-width: 680px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 3rem);
}

.c-block--wide {
    max-width: 1440px;
    margin-inline: auto;
}

.c-block--centered {
    margin-inline: auto;
    text-align: center;
}

/* Body copy in a centered block has no grid column to constrain its measure,
   so it would run the full --wide 1440px and orphan its last word. Cap it to a
   readable line length and center it. Only direct children — the 2-col
   c-media-split usages get their measure from the column. */
.c-block--centered > .c-media-split__body {
    max-width: 640px;
    margin-inline: auto;
}

.c-block--align-left {
    text-align: left;
}

.c-block--card {
    padding: 1.75rem 1.9rem;
}

@media (max-width: 720px) {
    .c-block--card {
        padding: 1.35rem 1.25rem;
    }
}

/* On phones, blocks that center via `margin-inline: auto` (--wide/--narrow/
   --centered) lose flex `align-items: stretch` — cross-axis auto margins disable
   it — so they shrink-wrap to their *content's* width inside the `.l-content`
   flex column. A wide child (the Pulse terminal's white-space:pre output, a
   fixed-width demo widget) then drags the whole section past the viewport, where
   body's overflow-x:clip silently cuts it off. Force them to fill the column so
   wide children overflow/scroll *themselves* instead of the page. Desktop keeps
   the centered max-width behavior (this only applies ≤768px). */
@media (max-width: 768px) {
    .c-block--wide,
    .c-block--narrow,
    .c-block--centered {
        width: 100%;
    }
}

.c-block__inner {
    width: 100%;
}

/* ========== Hero Title ========== */

.c-hero-title {
    font-size: clamp(2em, 6vw, 4em);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    font-weight: var(--fw-regular);
}

/* ========== Intro Text Block ========= */
.c-text-intro {
    max-width: 1440px;
}

/* ========== Text Blocks ========== */

.c-text-intro__eyebrow {
    margin-bottom: 0.35rem;
}

.c-text-intro__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    margin-bottom: 0.6rem;
}

.c-text-intro__lead {
    font-size: 1.05rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    padding-top: 1.5rem;
}

.c-text-section__heading {
    font-size: var(--fs-h2);
    margin-bottom: 0.4rem;
}

.c-text-section__body {
    font-size: 1rem;
    color: var(--color-text);
}

.c-faq {
    margin-top: 1.5rem;
}

.c-faq__question {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.c-faq__question:first-child {
    margin-top: 0;
}

.c-faq__answer {
    color: var(--color-text-muted);
}

.c-text-columns {
    display: grid;
    gap: 1.75rem;
}

.c-text-columns__heading {
    font-size: 1.05rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 0.35rem;
}

.c-text-columns__body {
    font-size: 0.98rem;
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

@media (min-width: 768px) {
    .c-text-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3-up variant — for sections with three equal items (no 2+1 orphan) */
    .c-text-columns--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== Feature Lists ========== */

.c-feature-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.c-feature-list__item {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.96rem;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.c-feature-list__item::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0.15em;
    line-height: 1;
    font-size: 1rem;
    color: var(--color-text-muted);
    opacity: 0.7;
}

.c-feature-list--muted .c-feature-list__item {
    color: var(--color-text-muted);
}

.c-feature-list--muted .c-feature-list__item::before {
    opacity: 0.55;
}

/* Icon variants */
.u-list-fa .c-feature-list__item::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85rem;
    top: 0.15rem;
    color: var(--brightgreen);
    opacity: 1;
}

.u-list-check .c-feature-list__item::before  { content: "\f00c"; }
.u-list-times .c-feature-list__item::before  { content: "\f057"; color: var(--danger); }
.u-list-dash  .c-feature-list__item::before  { content: "\f068"; font-size: 0.7rem; top: 0.35rem; color: var(--color-text-muted); }
.u-list-arrow .c-feature-list__item::before  { content: "\f061"; font-size: 0.75rem; top: 0.25rem; color: var(--color-link); }
.u-list-angles .c-feature-list__item::before { content: "\f101"; font-size: 0.75rem; top: 0.25rem; }

.c-feature-list--muted.u-list-fa .c-feature-list__item::before {
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* ========== Media / Image Blocks ========== */

.c-media-block__figure {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-soft);
    background: var(--color-surface);
}

.c-media-block__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.c-media-block__caption {
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
    color: var(--color-text-muted);
}

.c-media-split {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

.c-media-split__figure {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--color-card-border);
    background: var(--color-surface);
}

.c-media-split__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.c-media-split__eyebrow {
    margin-bottom: 0.5rem;
}

.c-media-split__heading {
    font-size: var(--fs-h3);
    margin-bottom: 0.4rem;
}

.c-media-split__body {
    font-size: 0.98rem;
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .c-media-split {
        grid-template-columns: 1.1fr 1fr;
    }

    .c-media-split--reverse {
        grid-template-columns: 1fr 1.1fr;
    }

    .c-media-split--reverse .c-media-split__figure {
        order: 2;
    }

    .c-media-split--reverse .c-media-split__content {
        order: 1;
    }
}

/* ========== Info Card Grids ========== */

.c-card-grid__header {
    margin-bottom: 1.25rem;
}

.c-card-grid__eyebrow {
    margin-bottom: 0.35rem;
}

.c-card-grid__title {
    font-size: var(--fs-h2);
    margin-bottom: 0.35rem;
}

.c-card-grid__subhead {
    max-width: 700px;
    margin-inline: auto;
    margin-top: 0.5rem;
}

.c-card-grid__body {
    font-size: 0.96rem;
    color: var(--color-text-muted);
    /* Cap the measure like __subhead (700px), but NO auto-margin — every
       c-card-grid__header sits in a left-aligned c-block--wide section, so the
       intro stays left-aligned under the title instead of running ~150 chars. */
    max-width: 700px;
}

.c-card-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .c-card-grid--4up {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .c-card-grid--2up {
        grid-template-columns: repeat(2, 1fr);
    }

    .c-card-grid--3up {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .c-card-grid--4up {
        grid-template-columns: repeat(4, 1fr);
    }
}

.c-card {
    height: 100%;
    padding: 1.4rem 1.5rem;
}

.c-card__eyebrow {
    margin-bottom: 0.3rem;
}

.c-card__title {
    font-size: var(--fs-h3);
    margin-bottom: 0.4rem;
}

.c-card__body {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* Card icon (used in icon-card layouts) */

/* Panel — card visuals (bg, border, radius, shadow) without hover effects */
.c-panel {
    background: var(--color-card-bg);
    border-radius: 0;
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem 1.9rem;
}

/* Card hover — applied selectively via .c-step-cards, NOT globally */

/* Featured card - glass morphism compatible */
.c-card--featured {
    position: relative;
    isolation: isolate;
    border-color: var(--green);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    background: radial-gradient(circle at top left, rgba(83, 212, 137, 0.15), transparent 50%);   /* lint-ok — ambient glow: fades to transparent, not a surface fill */
    overflow: visible;
}

.c-card--featured:hover {
    border-color: var(--brightgreen);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(83, 212, 137, 0.12);
}

/* Backdrop blur layer */
.c-card--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.03);
    z-index: -1;
    pointer-events: none;
}

/* ========== Split Card (Before/After) ========== */

.c-card--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    overflow: hidden;
}

.c-card--split .c-card__half {
    padding: 2rem 2.25rem;
}

.c-card--split .c-card__half--before {
    border-right: 1px solid var(--color-border-subtle);
}

.c-card--split .c-card__half--after {
    background: radial-gradient(circle at top right, rgba(83, 212, 137, 0.1), transparent 60%);   /* lint-ok — ambient glow: fades to transparent, not a surface fill */
}

/* Disable whole-card hover on split cards; use per-half hover instead */
.c-card--split:hover {
    border-color: var(--color-card-border);
    box-shadow: var(--shadow-soft);
}

.c-card--split .c-card__half {
    transition: background-color var(--t-fast);
}

.c-card--split .c-card__half--before:hover {
    background-color: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
}

.c-card--split .c-card__half--after:hover {
    background: radial-gradient(circle at top right, rgba(83, 212, 137, 0.18), transparent 60%);   /* lint-ok — ambient glow: fades to transparent, not a surface fill */
}

@media (max-width: 680px) {
    .c-card--split {
        grid-template-columns: 1fr;
    }
    .c-card--split .c-card__half--before {
        border-right: none;
        border-bottom: 1px solid var(--color-border-subtle);
    }
}

/* Layered depth — card visually extends past band's bottom edge */
.c-card--layered {
    position: relative;
    z-index: 2;
    transform: translateY(4rem);
    background: var(--color-card-bg-opaque);
}

/* ========== Option Split (This-or-That parallel choices) ========== */
/* Two equal, valid options side-by-side with a center OR divider. Use when
   the content is this-or-that (Self-serve vs Managed, Plan A vs Plan B) where
   neither side is structurally "worse." If one side is the problem and the
   other is the solution, use c-card--split instead. Optional --recommended
   modifier flags one half without breaking the underlying symmetry. */

.c-option-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.c-option-split__option {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg-opaque);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 2rem 2.25rem;
    box-shadow: var(--shadow-soft);
    /* Grid item: allow shrink below content min-content, and break the long mono
       domain in the feature list (domains.silverservers.com) so it doesn't push
       the card past the phone viewport. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.c-option-split__eyebrow {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
}

.c-option-split__title {
    font-size: var(--fs-h3);
    margin: 0 0 1rem;
    line-height: var(--lh-tight);
}

.c-option-split__body {
    margin: 0 0 1rem;
    color: var(--color-text);
}

.c-option-split__cta {
    margin-top: auto;
    padding-top: 0.5rem;
}

.c-option-split__cta--secondary {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 0.75rem;
    padding-top: 0;
}

.c-option-split__divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-option-split__divider::before,
.c-option-split__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border-subtle);
}

.c-option-split__or {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-subtle);
    /* --r-full: genuinely circular, which the radius role rule exempts. Using
       the token rather than a literal 999px also means a future "kill the pills"
       sweep cannot flatten it by accident — the same protection the quote
       button's --radius-pill already gives it. */
    border-radius: var(--r-full);
    padding: 0.25rem 0.9rem;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0.75rem;
}

/* Recommended modifier — symmetry preserved, visible emphasis via green border + tag */

@media (min-width: 768px) {
    .c-option-split {
        grid-template-columns: 1fr auto 1fr;
        gap: 0;
    }

    .c-option-split__divider {
        flex-direction: column;
        padding: 0 1.25rem;
    }

    .c-option-split__divider::before,
    .c-option-split__divider::after {
        width: 1px;
        height: auto;
        flex: 1;
        background: var(--color-border-subtle);
    }

    .c-option-split__or {
        margin: 0.75rem 0;
    }
}

/* ========== Step Cards (Process slider highlight) ========== */

.c-step-cards .c-card {
    transition: opacity var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.c-step-cards:hover .c-card {
    opacity: 0.55;
    border-color: transparent;
}

.c-step-cards .c-card:hover {
    opacity: 1;
    border-color: var(--color-accent-border);
    box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--color-accent-border) 30%, transparent);
}

/* ========== Icon Feature List (Technical Foundation) ========== */

.c-icon-features {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.c-icon-feature {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0 1rem;
    align-items: start;
}

.c-icon-feature__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-accent-text) 12%, transparent);
    color: var(--color-accent-text);
    font-size: 1.1rem;
    grid-row: span 2;
}

.c-icon-feature__title {
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    margin: 0;
    line-height: var(--lh-tight);
}

.c-icon-feature__desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0.15rem 0 0;
    grid-column: 2;
}

/* ========== Pricing Tables ========== */

.c-pricing-grid__header {
    margin-bottom: 1.75rem;
}

.c-pricing-grid__eyebrow {
    margin-bottom: 0.35rem;
}

.c-pricing-grid__title {
    font-size: var(--fs-h2);
    margin-bottom: 0.4rem;
}

.c-pricing-grid__body {
    font-size: 0.96rem;
    color: var(--color-text-muted);
}

.c-pricing-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .c-pricing-grid--2up {
        grid-template-columns: repeat(2, 1fr);
    }

    .c-pricing-grid--3up {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }
}

.c-pricing-card {
    position: relative;
    height: 100%;
    padding: 1.9rem 1.8rem;
    border-radius: 0;
}

.c-pricing-card__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.7rem;
    padding: 0.1rem 0.65rem;
    border-radius: var(--r-sm);
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.04);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.c-pricing-card__name {
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.c-pricing-card__price {
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 0.25rem;
}

.c-pricing-card__tagline {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 0.7rem;
}

/* Featured pricing - glass morphism compatible */
.c-pricing-card--featured {
    position: relative;
    isolation: isolate;
    border-color: var(--green);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    background: radial-gradient(circle at top left, rgba(83, 212, 137, 0.2), transparent 55%);   /* lint-ok — ambient glow: fades to transparent, not a surface fill */
}

/* Backdrop blur layer */
.c-pricing-card--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.04);
    z-index: -1;
    pointer-events: none;
}

/* ========== Meta / Stats Blocks ========== */

.c-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem 1.8rem;
    margin-top: 0.75rem;
}

.c-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.c-stat__value {
    font-size: 0.98rem;
    font-weight: var(--fw-semibold);
}

/* ========== Reusable CTA Row ========== */

.c-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    margin-top: 1.1rem;
}

.c-cta-row--center {
    justify-content: center;
}
/* ========== Partnerships CTA ========== */

/* ========== Layout Containers ========== */

/* ========== CONTACT PAGE COMPONENTS ========== */

/* Contact Form Card */
.c-contact-form-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.c-contact-form-card__header {
    padding: 1.25rem 1.5rem;
    background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent);
    border-bottom: 1px solid var(--color-card-border);
}

.c-contact-form-card__header--split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.c-contact-form-card__header-main {
    flex: 1;
    min-width: 200px;
}

.c-contact-form-card__body {
    padding: 1.75rem 1.5rem;
}
/* ========== PAYMENT PAGE LAYOUT ========== */

/* ========== IP Card ========== */
/* Click-to-copy IP display with hover glow effect */

.c-ip-card {
    padding: 2.5rem 3rem;
    border: 2px solid var(--green);
    background: radial-gradient(ellipse at 50% 0%, rgba(83, 212, 137, 0.08) 0%, transparent 70%), var(--color-card-bg); /* lint-ok: ambient glow that fades to transparent over a flat token surface — a keeper by the rule's own test, not a gradient fill */
    width: min(100%, 38rem);
    margin-inline: auto;
    text-align: center;
    border-radius: 0;
    position: relative;
    cursor: pointer;
    user-select: none;
    box-shadow:
        0 0 20px rgba(83, 212, 137, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition:
        transform var(--t),
        box-shadow var(--t-fast),
        border-color var(--t-fast);
}

.c-ip-card:hover,
.c-ip-card:focus-visible {
    transform: scale(1.02);
    border-color: var(--color-accent-border);
    box-shadow:
        0 0 0 1px var(--color-accent-border),
        0 0 30px rgba(83, 212, 137, 0.25),
        0 0 60px rgba(83, 212, 137, 0.15),
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.c-ip-card:focus-visible {
    outline: 2px solid var(--color-accent-border);
    outline-offset: 3px;
}

.c-ip-card:active {
    transform: scale(0.98);
}

.c-ip-card__notice {
    position: absolute;
    top: -0.75rem;
    right: 1.25rem;
    background: var(--green-gradient);
    color: var(--white);
    padding: 0.3rem 0.75rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--r);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--t-fast), transform var(--t);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(23, 183, 90, 0.4);
}

.c-ip-card__notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.c-ip-card__value {
    font-family: var(--font-mono);
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    color: var(--color-accent-text);
    display: block;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-shadow: 0 0 20px rgba(83, 212, 137, 0.3);
    transition: color var(--t-fast), text-shadow var(--t-fast);
}

/* Narrow phones: keep long IPv4/IPv6 values from clipping the card edge */
@media (max-width: 480px) {
    .c-ip-card {
        padding: 2rem 1.25rem;
    }
    .c-ip-card__value {
        font-size: clamp(1.4rem, 7.5vw, 2.25rem);
        letter-spacing: 0.04em;
        overflow-wrap: anywhere;
    }
}

.c-ip-card:hover .c-ip-card__value,
.c-ip-card:focus-visible .c-ip-card__value {
    color: var(--color-text);
    text-shadow:
        0 0 10px rgba(83, 212, 137, 0.5),
        0 0 30px rgba(83, 212, 137, 0.3);
}

/* ========== Social Share Icons ========== */

.social-share-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
}

/* Honor the hidden attribute (set by share.js when native share replaces the icons) —
   needed because the .social-share-icons display:flex rule otherwise wins over [hidden]. */
.social-share-icons[hidden] { display: none; }

.social-share-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 2.75rem;
    width: 2.75rem;
    font-size: 1.125rem;
    color: var(--color-social-text);
    text-decoration: none;
    background: var(--color-social-bg);
    border: 1px solid var(--color-social-border);
    border-radius: var(--r);
    transition: border-color var(--t-fast), color var(--t-fast), transform var(--t);
}

.social-share-icons a:hover {
  color: var(--color-social-hover-text);
  border-color: var(--color-social-hover-border);
  transform: translateY(-2px);
}

.social-share-icons a:active {
  transform: translateY(0);
}

/* Native Web Share button — hidden until JS confirms navigator.share support */
.share-native {
  align-items: center;
  gap: 0.45rem;
  height: 2.75rem;
  padding: 0 1.1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-social-text);
  background: var(--color-social-bg);
  border: 1px solid var(--color-social-border);
  border-radius: var(--r);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t);
}
.share-native:not([hidden]) { display: inline-flex; }
.share-native:hover {
  color: var(--color-social-hover-text);
  border-color: var(--color-social-hover-border);
  transform: translateY(-2px);
}

.share-copy.tooltip-trigger {
  position: relative;
}

.share-copy.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.375rem 0.625rem;
  border-radius: var(--r);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 9999;
}

.share-copy.tooltip-trigger::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.125rem);
  left: 50%;
  transform: translateX(-50%);
  border: 0.25rem solid transparent;
  border-top-color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 9999;
}

.share-copy.tooltip-trigger.tooltip-visible::after,
.share-copy.tooltip-trigger.tooltip-visible::before {
  opacity: 1;
}

/* ========== Service Category Grid (Services Page) ========== */

/* Service categories grid: balances 3+ categories into equal columns at
   desktop, drops to 2 then 1 as viewport narrows. Three categories now
   render side-by-side at desktop instead of leaving an orphan row. */
.c-block>.c-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2.5rem;
    align-items: start;
    position: relative;
}

/* ── THE BACKDROP, one field across the whole grid ───────────────────────────
   ONE backdrop on the page, not one per column: three separate coloured fields
   would read as three panels rather than as a page the cards are sitting on.

   Recipe is the card lab's: wide accent washes PLUS the weave at double the
   bands' ink. Both halves are load-bearing. The washes give it colour; the
   weave gives the blur something to act on — a blur over a soft gradient
   returns the same gradient, which is exactly why a wash-only backdrop went
   "bloaty and dull". You see the weave crisp in the gutters and dissolved
   inside each pane, and that contrast IS the glass.

   Masked to fade out at the field's edges so it does not run to the page
   margins as wallpaper — the failure mode recorded for the 120px grid. */
.c-block>.c-service-grid::before {
    content: "";
    position: absolute;
    inset: -2.5rem -2rem;
    z-index: 0;
    pointer-events: none;
    background-image: /* lint-ok: ambient washes that fade to transparent over the weave — the backdrop the panes read through, not a decorative fill */
        radial-gradient(58% 62% at 18% 22%, rgba(27, 148, 75, 0.26), transparent 70%),
        radial-gradient(52% 58% at 84% 74%, rgba(83, 212, 137, 0.15), transparent 70%),
        var(--tex-hatch-strong);
    background-size: auto, auto, 6px 6px;
    background-repeat: no-repeat, no-repeat, repeat;
    -webkit-mask-image: radial-gradient(76% 82% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.85) 58%, transparent 92%);
    mask-image: radial-gradient(76% 82% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.85) 58%, transparent 92%);
}

/* the columns ride above the backdrop; no negative z-index, which would drop
   the layer behind the section's own opaque background and lose it */
.c-block>.c-service-grid>.c-service-category {
    position: relative;
    z-index: 1;
}

.c-block>.c-service-grid+.c-service-grid {
    padding-top: 4em;
}

@media (max-width: 900px) {
    .c-block>.c-service-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.c-service-category {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    transition:
        box-shadow var(--t-fast),
        background var(--t-fast);
}

@media (min-width: 901px) {
    .c-service-category {
        padding: 1.25rem;
        margin: -1.25rem;
    }
}

@media (max-width: 900px) {
    .c-service-category {
        padding: 1rem;
    }
}

/* Highlighted state when section is targeted via anchor link */
.c-service-category:target {
    box-shadow: 0 0 0 2px var(--green);
    background: color-mix(in srgb, var(--green) 5%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.c-service-category:target .c-service-category__header > i {
    color: var(--trueblack);
    background: var(--lightgreen);
}

.c-service-category__header {
    padding-bottom: 1rem;
}

.c-service-category__header > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
    color: var(--color-bg);
    background: var(--color-text-muted);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.c-service-category__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: 0.75rem;
}

.c-service-category__desc {
    font-size: 0.95rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    margin: 0;
}

.c-service-category__list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1.25rem;
}

/* GLASS PANES over the grid backdrop above.

   Not the plate: a bevel needs a big face to rake across and these are ~245x80
   — "the emboss thing really only works on big, BIG cards."

   ⚠ NO `isolation` and no stacking context on a pane. An isolated element
   becomes its own backdrop root, so it has nothing behind it to sample and the
   glass silently goes flat. For the same reason the weave lives on the BACKDROP
   and not on the card — on the card it would sit on top of the pane instead of
   being read through it.

   ⚠ border-radius was 0.6rem = 9.6px, BELOW radius/no-big-radius's 10px floor
   and below probe_radius.py's census threshold, so twelve rounded cards
   survived the whole sharp-corners cutover without either check seeing them —
   the same blind spot recorded for the prefooter thumbnails' hardcoded 8px.
   Squared to match every other card on the site. Say the word and it goes back.

   Hover THINS the pane (0.55 -> 0.42) so more of the backdrop resolves. */
.c-service-item {
    display: block;
    padding: 1rem 1.25rem;
    background: rgba(22, 28, 37, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    text-decoration: none;
    transition:
        background var(--t-fast),
        border-color var(--t-fast),
        transform var(--t);
}

.c-service-item:hover {
    background: rgba(22, 28, 37, 0.42);
    border-color: rgba(83, 212, 137, 0.45);
    transform: translateY(-2px);
}

.c-service-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent);
    outline-offset: 2px;
}

.c-service-item__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0 0 0.35rem;
}

.c-service-item__desc {
    font-size: 0.9rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    margin: 0;
}

/* A service that lives off-site (Social Media Management → social.silverservers.com).
   Same card, plus an outbound glyph in the title and the destination host named
   in the description, so the new tab is signalled twice before the click. */
.c-service-item__ext {
    font-size: 0.7em;
    margin-left: 0.4em;
    opacity: 0.5;
    transition: opacity var(--t-fast);
    vertical-align: middle;
}

.c-service-item--external:hover .c-service-item__ext {
    opacity: 1;
}

.c-service-item__host {
    font-family: var(--font-mono);
    font-size: 0.95em;
    color: var(--color-text);
    white-space: nowrap;
}

/* Services Pages Links */

/* Visit CTA */
.c-visit-cta {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 1.5rem;
    max-width: 900px;
    margin-inline: auto;
}

/* The card is 900px but centered body copy reads better on a tighter measure —
   cap it so lines don't run ~110 chars edge-to-edge. */
.c-visit-cta__body {
    max-width: 620px;
    margin-inline: auto;
}

/* ========== Legal Pages (Privacy Policy, Terms & Conditions) ========== */

.c-legal-content h2 {
    border-top: 1px dashed var(--color-text-muted);
    padding-top: 1.25em;
    margin-top: 1.5em;
    font-size: 20px;
    font-weight: 600;
}

.c-legal-content h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.c-legal-content h3 {
    margin-top: 1em;
}

.c-legal-content ul,
.c-legal-content ol {
    margin: 0.5em 0 1em 1.5em;
    padding: 0;
}

.c-legal-content ul ul,
.c-legal-content ul ol,
.c-legal-content ol ul,
.c-legal-content ol ol {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.c-legal-content li {
    margin-bottom: 0.35em;
}

.c-legal-content p:last-child {
    margin-bottom: 0;
}

.c-legal-last-edited {
    border-top: 1px dotted var(--color-text-muted);
    padding-top: 1em;
    margin-top: 2em;
    font-style: italic;
    color: var(--color-text-muted);
}

/* ========== Component: Text Highlight ========== */

.c-highlight {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.15em 0.3em;
    margin: 0 -0.15em;
    background: rgba(255, 224, 102, 0.45);
    box-shadow:
        0 0 2px 1px rgba(255, 224, 102, 0.4),
        0 0 4px 2px rgba(255, 224, 102, 0.25),
        0 0 6px 3px rgba(255, 224, 102, 0.1);
    border-radius: 0.2em;
    mix-blend-mode: multiply;
    display: inline;
}

/* Color variants */
.c-highlight--green {
    background: rgba(83, 212, 137, 0.4);
    box-shadow:
        0 0 2px 1px rgba(83, 212, 137, 0.35),
        0 0 4px 2px rgba(83, 212, 137, 0.2),
        0 0 6px 3px rgba(83, 212, 137, 0.1);
}

/* Was two theme-conditional copies of the same declaration — one under
   `@media (prefers-color-scheme: dark)`, one under `:root[data-theme="dark"]`.
   Midnight is the only theme now, so the condition is always true. */
.c-highlight {
    mix-blend-mode: screen;
}

/* ========== Pricing Card — Spec-sheet variant ==========
   Uniform card shell that matches the site's ambient card surface (c-panel
   et al.). All three cards share identical geometry, background, border,
   and shadow. Tier rank is signalled only by the rank indicator text: on
   the top tier the `03` portion picks up the brand green. No edge borders,
   no glow, no heavy hover — the cards behave like surrounding cards. */

.c-pricing-card--spec {
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

/* Tier rank — typography only, confined to the rank indicator */
.c-pricing-card--tier-3 .c-pricing-card__rank {
    color: var(--color-accent-text);
}

/* Header region — inline with content, no visual seam */
.c-pricing-card--spec .c-pricing-card__header {
    display: block;
    padding: 1.75rem 1.75rem 1.25rem;
    background: none;
    border-radius: 0;
    text-align: left;
}

.c-pricing-card__rank {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
}

.c-pricing-card--spec .c-pricing-card__eyebrow {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
}

.c-pricing-card--spec .c-pricing-card__name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    line-height: var(--lh-tight);
    margin: 0 0 0.9rem;
}

.c-pricing-card--spec .c-pricing-card__price {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: var(--fw-medium);
    color: var(--color-text);
    line-height: 1;
    margin: 0;
    letter-spacing: -0.01em;
}

.c-pricing-card__price-unit {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
    margin-left: 0.25rem;
    letter-spacing: 0;
}

.c-pricing-card--spec .c-pricing-card__tagline {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0.5rem 0 0;
}

/* Content region — separated by a hairline, not by color */
.c-pricing-card--spec .c-pricing-card__content {
    padding: 0 1.75rem 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.c-pricing-card--spec .c-pricing-card__content::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--color-border-subtle);
    margin-bottom: 1.25rem;
}

.c-pricing-card--spec .c-pricing-card__content .c-feature-list {
    flex: 1;
    margin-bottom: 1rem;
}

.c-pricing-card--spec .c-pricing-card__content > p:last-child {
    margin-top: auto;
    margin-bottom: 0;
}

/* ========== Recent Articles Slider ========== */

.c-recent-articles {
    margin-block: 3rem;
}

.c-recent-articles__header {
    margin-bottom: 1.5rem;
}

.c-recent-articles__eyebrow {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.c-recent-articles__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    margin: 0;
}

/* Slider wrapper - positions arrows and feather gradients */
.c-recent-articles__slider-wrap {
    position: relative;
    padding: 0;
}

/* Feather gradient overlays */
.c-recent-articles__slider-wrap::before,
.c-recent-articles__slider-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4rem;
    z-index: 5;
    pointer-events: none;
    transition: opacity var(--t-fast);
}

.c-recent-articles__slider-wrap::before {
    left: 0rem;
    background: linear-gradient(to right, var(--color-bg), transparent);   /* lint-ok — scroll/edge scrim: fades to transparent, not a surface fill */
}

.c-recent-articles__slider-wrap::after {
    right: 0rem;
    background: linear-gradient(to left, var(--color-bg), transparent);   /* lint-ok — scroll/edge scrim: fades to transparent, not a surface fill */
}

/* Hide left feather when at start */
.c-recent-articles__slider-wrap[data-at-start="true"]::before {
    opacity: 0;
}

/* Hide right feather when at end */
.c-recent-articles__slider-wrap[data-at-end="true"]::after {
    opacity: 0;
}

/* Scroll rail */
.c-recent-articles__rail {
    display: flex;
    gap: 1.25rem;
    padding: 0.5rem 0 1rem;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.c-recent-articles__rail::-webkit-scrollbar {
    display: none;
}

/* Cards in the slider - 4-up on desktop */
.c-recent-articles__card {
    flex: 0 0 calc(30% - 0.9375rem);
    min-width: calc(30% - 0.9375rem);
    scroll-snap-align: start;
}

/* Arrow navigation buttons */
.c-recent-articles__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-card-border);
    border-radius: 50%;
    background: var(--color-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition:
        border-color var(--t-fast),
        background var(--t-fast),
        transform var(--t),
        opacity var(--t-fast);
}

.c-recent-articles__arrow:hover:not(:disabled) {
    border-color: var(--green);
    transform: translateY(-50%) scale(1.05);
}

.c-recent-articles__arrow:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent);
    outline-offset: 2px;
}

.c-recent-articles__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.c-recent-articles__arrow--prev {
    left: -3rem;
}

.c-recent-articles__arrow--next {
    right: -3rem;
}

/* Footer link */
.c-recent-articles__footer {
    margin-top: 1.5rem;
    text-align: center;
}

.c-recent-articles__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-link);
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: color var(--t-fast);
}

/* Titles rest at --ink, so hovering them to --color-link-hover (also --ink
   since 2026-08-04) changed nothing — a dead hover on every article title in
   these lists. Caught on .c-related-post__title by audit_dead_hover.py; the
   others share the defect but hide from that audit, because it pairs a :hover
   rule with a base rule for the SAME selector and these are written as
   `.x__link:hover .x__title`, which has no resting twin to compare against.

   The direction differs from a body link ON PURPOSE. A green body link
   brightens toward white; a white card title tints toward the accent. Both move
   along the same axis, from opposite ends. */
.c-recent-articles__link:hover {
    color: var(--accent-text);
}

.c-recent-articles__link i {
    transition: transform var(--t);
}

.c-recent-articles__link:hover i {
    transform: translateX(4px);
}

/* Responsive: Large tablet - 3 cards */
@media (max-width: 1100px) {
    .c-recent-articles__card {
        flex: 0 0 calc(33.333% - 0.833rem);
        min-width: calc(33.333% - 0.833rem);
    }
}

/* Responsive: Tablet - 2 cards */
@media (max-width: 800px) {
    .c-recent-articles__slider-wrap {
        padding: 0 2.5rem;
    }

    .c-recent-articles__slider-wrap::before {
        left: 2.5rem;
        width: 3rem;
    }

    .c-recent-articles__slider-wrap::after {
        right: 2.5rem;
        width: 3rem;
    }

    .c-recent-articles__card {
        flex: 0 0 calc(50% - 0.625rem);
        min-width: calc(50% - 0.625rem);
    }
}

/* Responsive: Mobile */
@media (max-width: 600px) {
    .c-recent-articles__slider-wrap {
        padding: 0;
    }

    .c-recent-articles__slider-wrap::before,
    .c-recent-articles__slider-wrap::after {
        display: none;
    }

    .c-recent-articles__card {
        flex: 0 0 85%;
        min-width: 85%;
    }

    .c-recent-articles__arrow {
        display: none;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .c-recent-articles__rail {
        scroll-behavior: auto;
    }

    .c-recent-articles__arrow,
    .c-recent-articles__link i {
        transition: none;
    }
}

/* ========== Fullstack Section (Visual + Text 2-column) ========== */

.ss-fullstack-section__grid {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 980px) {
    .ss-fullstack-section__grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 2.5rem;
    }
}

/* Visual: Layered Stack */
.ss-fullstack-section__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem;
}

.ss-stack {
    position: relative;
    width: 100%;
    max-width: 512px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-stack__layer {
    position: absolute;
    width: 100%;
    height: 325px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;

    transition: transform var(--t);
}

.ss-stack__layer--back {
    background: color-mix(in srgb, var(--lightgreen) 12%, var(--color-card-bg) 92%);
    border-color: color-mix(in srgb, var(--green) 20%, var(--color-card-border));
    box-shadow:
        0 20px 40px rgba(0,0,0,0.12),
        0 8px 16px rgba(0,0,0,0.08);
    transform: translateY(55px) translateX(-18px) rotate(-3deg);
    z-index: 1;
    backdrop-filter: blur(24px);
}

.ss-stack__layer--front {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    box-shadow:
        0 28px 60px rgba(0,0,0,0.16),
        0 12px 24px rgba(0,0,0,0.12);
    transform: translateY(-12px) translateX(16px) rotate(2deg);
    z-index: 2;
}

/* Hover state: swap the cards (front goes back, back comes front) */
.ss-stack:hover .ss-stack__layer--back {
    transform: translateY(-18px) translateX(22px) rotate(2deg);
    z-index: 3;
}

.ss-stack:hover .ss-stack__layer--front {
    transform: translateY(65px) translateX(-25px) rotate(-4deg);
    z-index: 1;
}

/* Mobile/tap state: same swap effect with a toggle class */
.ss-stack.is-swapped .ss-stack__layer--back {
    transform: translateY(-18px) translateX(22px) rotate(2deg);
    z-index: 3;
}

.ss-stack.is-swapped .ss-stack__layer--front {
    transform: translateY(65px) translateX(-25px) rotate(-4deg);
    z-index: 1;
}

/* Make stack tappable on touch devices */
@media (hover: none) and (pointer: coarse) {
    .ss-stack {
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* DELETED 2026-07-31 (style cutover), not converted. This was a theme-
   conditional "invert front card to light" rule, and it never rendered: an
   @media nested inside a SELECTOR LIST resolves against `&`, so the first
   branch computed to `.ss-stack__layer--front .ss-stack__layer--front` — an
   element inside itself, which cannot match. Measured on /services/websites/
   before removal: the front layer computes rgb(22,28,37) = --surface-card, the
   ordinary dark card, not var(--white).

   Collapsing it to its dark branch (Midnight is now the only theme) would have
   ACTIVATED a white card that has never once appeared on the site. Turning on a
   rule nobody has seen is not a colour cutover, so it goes. If a light-inverted
   front layer is actually wanted, it should be asked for and designed. */

/* Back-End Graphics: Database */
.ss-backend-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.ss-database {
    position: relative;
    width: 80px;
    height: 90px;
}

.ss-database__top,
.ss-database__middle,
.ss-database__bottom {
    position: absolute;
    width: 100%;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-link) 35%, var(--color-card-bg));
    border: 2px solid color-mix(in srgb, var(--color-link) 60%, transparent);
}

.ss-database__top {
    top: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ss-database__middle {
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
}

.ss-database__bottom {
    bottom: 0;
}

.ss-database::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    right: 0;
    background: linear-gradient(   /* lint-ok — cylinder shading, a depiction of a 3D object, not a surface fill */
        to bottom,
        color-mix(in srgb, var(--color-link) 25%, var(--color-card-bg)) 0%,
        color-mix(in srgb, var(--color-link) 20%, var(--color-card-bg)) 100%
    );
    border-left: 2px solid color-mix(in srgb, var(--color-link) 60%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--color-link) 60%, transparent);
}

.ss-server-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ss-server-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-link) 70%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-link) 40%, transparent);
}

/* Front-End Graphics: Browser Window */
.ss-frontend-graphic {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Browser window - transparent with borders/lines only */
.ss-browser {
    width: 100%;
    height: 100%;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 0 3px var(--color-text-muted);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ss-browser__chrome {
    display: flex;
    gap: 0.45rem;
    padding: 0.75rem 0.85rem;
    background-color: var(--color-btn-secondary-border);
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
}

.ss-browser__chrome span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.ss-browser__chrome span:nth-child(1) {
    background: #ff5f57;   /* lint-ok — macOS traffic-light buttons, a depiction of real UI */
}

.ss-browser__chrome span:nth-child(2) {
    background: #febc2e;   /* lint-ok — macOS traffic-light buttons, a depiction of real UI */
}

.ss-browser__chrome span:nth-child(3) {
    background: var(--lightgreen);
}

.ss-browser__content {
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

/* UI placeholder bars - just borders */
.ss-stack-element {
    height: 14px;
    border-radius: 7px;
    background: var(--color-text-muted);
}

.ss-stack-element--1 {
    width: 70%;
}

.ss-stack-element--2 {
    width: 85%;
}

.ss-stack-element--3 {
    width: 60%;
    background: var(--green);
}

.ss-stack-row {
    display: flex;
    gap: 0.5rem;
}

.ss-stack-element--4 {
    width: 45%;
}

.ss-stack-element--5 {
    width: 35%;
    background: var(--lightgreen);
}

/* Content */
.ss-fullstack-section__content {
    padding-inline: clamp(1rem, 1.8vw, 1.5rem);
}

.ss-fullstack-section__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    margin-bottom: 0.85rem;
}

.ss-fullstack-section__body {
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

.ss-fullstack-section__body p {
    margin-bottom: 0;
}

/* ========== Service Hero with Icon Grid ========== */

.c-service-hero {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 900px) {
    .c-service-hero {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

.c-service-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.c-service-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    font-weight: var(--fw-regular);
}

.c-service-hero__lead {
    font-size: 1.05rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    margin: 0;
}

.c-service-hero__links {
    margin: 0.25rem 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* Service Divider */
.c-service-divider {
    border: none;
    border-top: 1px solid var(--color-card-border);
    margin: 3rem 0;
}

/* Icon Grid — top-of-page category nav cards. Compact tiles, capped width
   so they don't stretch when there are only 3 categories. justify-content
   right-aligns them in the hero's right column so the hero copy can breathe. */
.c-service-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 11rem));
    justify-content: end;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .c-service-icon-grid {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        justify-content: stretch;
    }
}

.c-service-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.1rem 0.75rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0.45rem;
    text-decoration: none;
    text-align: center;
    transition:
        border-color var(--t-fast),
        transform var(--t),
        box-shadow var(--t-fast);
}

.c-service-icon-card:hover {
    border-color: var(--green);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.c-service-icon-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent);
    outline-offset: 2px;
}

.c-service-icon-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    font-size: 1.25rem;
    transition: background var(--t-fast);
}

.c-service-icon-card:hover .c-service-icon-card__icon {
    background: var(--green-gradient);
    color: var(--white);
}

.c-service-icon-card__label {
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    color: var(--color-text);
    line-height: 1.25;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .c-service-icon-card {
        transition: none;
    }
}

/* ========== Action Hero (Two-column with action cards) ========== */

.c-action-hero {
    display: grid;
    gap: 2rem;
    align-items: start;
}

/* Grid items default to min-width:auto; without this an unbreakable token in a
   child (e.g. the email address in a quick-action card) sets a min-content wider
   than the phone column and pushes the grid past the viewport. */
.c-action-hero > * {
    min-width: 0;
}

@media (min-width: 900px) {
    .c-action-hero {
        grid-template-columns: 1.1fr 1fr;
        gap: 2.5rem;
    }

}

.c-action-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.c-action-hero__eyebrow {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin: 0;
}

.c-action-hero__title {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    font-weight: var(--fw-regular);
}

.c-action-hero__lead {
    font-size: 1.05rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    margin: 0;
}

.c-action-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Action Cards Grid */
.c-action-hero__actions {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 500px) {
    .c-action-hero__actions--2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Quick Action Card ========== */

.c-quick-action {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    text-decoration: none;
    transition:
        border-color var(--t-fast),
        transform var(--t),
        box-shadow var(--t-fast);
}

a.c-quick-action:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.c-quick-action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent);
    outline-offset: 2px;
}

.c-quick-action__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    font-size: 1.1rem;
    transition: background var(--t-fast), color var(--t-fast);
}

a.c-quick-action:hover .c-quick-action__icon {
    background: var(--green-gradient);
    color: var(--white);
}

.c-quick-action__title {
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0;
}

.c-quick-action__desc {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

/* Featured variant */
.c-quick-action--featured {
    border-color: var(--green);
    background: radial-gradient(circle at top left, rgba(83, 212, 137, 0.08), transparent 60%),   /* lint-ok — ambient glow: fades to transparent, not a surface fill */
                var(--color-card-bg);
}

/* Large variant for primary actions */
.c-quick-action--lg {
    padding: 1.5rem;
    gap: 1rem;
}

.c-quick-action--lg .c-quick-action__icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.35rem;
}

.c-quick-action--lg .c-quick-action__title {
    font-size: 1.15rem;
}
/* ========== Utility Hero (Single-purpose pages like IP) ========== */

/* ========== Stats Row ========== */

.c-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin-top: 1.25rem;
}

.c-stats-row--center {
    justify-content: center;
}

.c-stats-row__item {
    text-align: center;
}

.c-stats-row__value {
    display: block;
    font-size: 1.75rem;
    font-weight: var(--fw-bold);
    color: var(--green);
    line-height: 1.1;
}

.c-stats-row__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* ========== Contact Info List ========== */

.c-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.c-contact-info__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.c-contact-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.c-contact-info__content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.c-contact-info__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.c-contact-info__value {
    font-weight: var(--fw-medium);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.c-contact-info__value a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--t-fast);
}

.c-contact-info__value a:hover {
    color: var(--color-link);
}

/* ========== Contact Page Grid ========== */

.c-contact-page-grid {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .c-contact-page-grid {
        grid-template-columns: 1fr 1.3fr;
        gap: 3rem;
    }
}

.c-contact-page-grid__details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.c-contact-page-grid__form {
    position: sticky;
    top: 6rem;
}

@media (max-width: 899px) {
    .c-contact-page-grid__form {
        position: relative;
        top: auto;
    }
}

/* Contact Detail Card */
.c-contact-detail-card {
    padding: 1.5rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
}

.c-contact-detail-card__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border-subtle);
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem;
}

.c-contact-detail-card__title i {
    color: var(--green);
}

.c-contact-detail-card__address {
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    color: var(--color-text);
}

.c-contact-detail-card__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-card-border);
}

.c-contact-detail-card__note i {
    color: var(--green);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.c-contact-detail-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.c-contact-detail-card__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-card-border);
}

.c-contact-detail-card__list li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.c-contact-detail-card__list li span:first-child {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.c-contact-detail-card__list li span:last-child {
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

/* ========== Contact Action Bar ========== */

.c-contact-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.c-contact-action-bar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    text-decoration: none;
    transition:
        border-color var(--t-fast),
        transform var(--t),
        box-shadow var(--t-fast);
    flex: 1 1 auto;
    min-width: fit-content;
}

.c-contact-action-bar__item:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.c-contact-action-bar__item--featured {
    border-color: var(--green);
    background: radial-gradient(circle at top left, rgba(83, 212, 137, 0.08), transparent 60%),   /* lint-ok — ambient glow: fades to transparent, not a surface fill */
                var(--color-card-bg);
}

.c-contact-action-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background var(--t-fast), color var(--t-fast);
}

.c-contact-action-bar__item:hover .c-contact-action-bar__icon {
    background: var(--green-gradient);
    color: var(--white);
}

.c-contact-action-bar__label {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

.c-contact-action-bar__value {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .c-contact-action-bar {
        flex-direction: column;
    }

    .c-contact-action-bar__item {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: wrap;
        column-gap: 0.75rem;
        row-gap: 0.15rem;
    }

    /* The desktop `min-width: fit-content` (kept so cards don't shrink below
       their content in the row layout) isn't reset here, so the nowrap
       icon+label+value row — e.g. "Email Us support@silverservers.com" — forces
       the card wider than the viewport and overflows at ≤375px. Reset it and
       drop the long value to its own full-width line, indented under the label. */
    .c-contact-action-bar__value {
        flex-basis: 100%;
        padding-left: calc(2.25rem + 0.75rem);
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .c-contact-action-bar {
        flex-wrap: wrap;
    }

    .c-contact-action-bar__item {
        flex: 1 1 calc(50% - 0.375rem);
    }
}

/* ========== Divider ========== */

.c-divider {
    border: none;
    border-top: 1px solid var(--color-card-border);
    margin: 2.5rem 0;
}

/* ========== Contact Form Card Intro ========== */

.c-contact-form-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.c-contact-form-card__title i {
    color: var(--green);
}

.c-contact-form-card__intro {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ========== Payment Page Components ========== */

/* Currency Toggle */
.c-currency-toggle {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0.6rem;
    width: fit-content;
    margin-inline: auto;
}

.c-currency-toggle__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-radius: 0.45rem;
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}

a.c-currency-toggle__item:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
}

/* --accent-solid, not --green: white on #1b944b measured 3.58:1 on /pay-online/
   at 390, under the 4.5 bar. The documented rule is that --green is a SURFACE
   colour that does not carry white text; --accent-solid is the one that does
   (5.55:1). Found only once every route was swept at both widths. */
.c-currency-toggle__item--active {
    background: var(--accent-solid);
    color: var(--white);
}

/* Compact currency toggle for card headers */
.c-currency-toggle--compact {
    justify-content: flex-end;
    padding: 0.15rem;
    border-radius: 0.5rem;
}

.c-currency-toggle--compact .c-currency-toggle__item {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
}

/* Single-page CAD/USD currency switch — radio-driven so it works with no JS.
   Markup in www/pay-online.php: two .ss-pay__radio inputs precede .c-contact-form-card. */
.ss-pay__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Default view = CAD (first radio is checked) */
.ss-pay-panel--usd,
.ss-pay-only--usd { display: none; }
.ss-pay-only--cad { display: inline; }

/* USD selected → swap panels + the inline "(CAD)/(USD)" labels */
#pay-usd:checked ~ .c-contact-form-card .ss-pay-panel--usd { display: block; }
#pay-usd:checked ~ .c-contact-form-card .ss-pay-panel--cad { display: none; }
#pay-usd:checked ~ .c-contact-form-card .ss-pay-only--usd { display: inline; }
#pay-usd:checked ~ .c-contact-form-card .ss-pay-only--cad { display: none; }

/* Active toggle pill follows the checked radio (reuses .c-currency-toggle styling).
   --accent-solid, not --green: white on #1b944b measured 3.58:1 here, under
   the 4.5 bar. This is a SECOND copy of the same declaration — the shared
   .c-currency-toggle__item--active rule was fixed first and the chip still
   failed, because on /pay-online/ the active state is driven by the checked
   radio through this higher-specificity selector instead. Fixing one of two
   duplicated rules and re-measuring is what caught it. */
#pay-cad:checked ~ .c-contact-form-card label[for="pay-cad"],
#pay-usd:checked ~ .c-contact-form-card label[for="pay-usd"] {
    background: var(--accent-solid);
    color: var(--white);
}

.ss-pay-toggle {
    cursor: pointer;
    user-select: none;
}

.ss-pay-toggle:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
}

/* Keyboard focus reflected on the label (the real radio is visually hidden) */
#pay-cad:focus-visible ~ .c-contact-form-card label[for="pay-cad"],
#pay-usd:focus-visible ~ .c-contact-form-card label[for="pay-usd"] {
    outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent);
    outline-offset: 2px;
}

/* Subtle flip-in when a panel becomes visible */
.ss-pay-panel { transform-origin: top center; }

@media (prefers-reduced-motion: no-preference) {
    .ss-pay-panel { animation: ss-pay-flip 0.32s ease; }
}

@keyframes ss-pay-flip {
    from { opacity: 0; transform: rotateX(-14deg); }
    to   { opacity: 1; transform: rotateX(0); }
}

/* Payment Page Grid */
.c-payment-page-grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 900px) {
    .c-payment-page-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 2.5rem;
    }
}

.c-payment-page-grid__form {
    position: sticky;
    top: 6rem;
}

@media (max-width: 899px) {
    .c-payment-page-grid__form {
        position: relative;
        top: auto;
    }
}

.c-payment-page-grid__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Payment Steps */
.c-payment-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.c-payment-steps li {
    counter-increment: step;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.4;
}

.c-payment-steps li::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

/* Payment Note */
.c-payment-note {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ========== Legal Page Components ========== */

/* Legal Page Layout */
.c-legal-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 900px) {
    /* Cap the content track so prose doesn't run ~135 chars/line across the full
       c-block--wide (1440px). Center the whole TOC+content unit so the leftover
       space sits evenly on both sides rather than dumping on the right. */
    .c-legal-layout {
        grid-template-columns: 240px minmax(0, 700px);
        gap: 3rem;
        justify-content: center;
    }
}

/* Grid items default to min-width:auto (= min-content); a long unbreakable token
   in the policy text (a 90-char source URL) sets a ~315px min-content that forces
   the content track wider than the phone viewport. Let the items shrink and break
   long URLs so the column tracks the available width instead. */
.c-legal-layout > * {
    min-width: 0;
}

.c-legal-content {
    overflow-wrap: break-word;
}

/* Table of Contents */
.c-legal-toc {
    position: sticky;
    top: 6rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 1.25rem;
}

@media (max-width: 899px) {
    .c-legal-toc {
        position: relative;
        top: auto;
    }
}

.c-legal-toc__title {
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.c-legal-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.c-legal-toc__item {
    font-size: 0.85rem;
    line-height: 1.4;
}

.c-legal-toc__item a {
    display: block;
    padding: 0.4rem 0.6rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 0.35rem;
    transition: background var(--t-fast), color var(--t-fast);
}

.c-legal-toc__item a:hover {
    background: color-mix(in srgb, var(--color-surface-alt) 60%, transparent);
    color: var(--color-text);
}

.c-legal-toc__item a.is-active {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
}

/* Legal Summary Callout */
.c-legal-summary {
    background: color-mix(in srgb, var(--green) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
    border-radius: 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.c-legal-summary__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.c-legal-summary__title i {
    color: var(--green);
}

.c-legal-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}

.c-legal-summary li {
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 0.35rem;
}

.c-legal-summary li:last-child {
    margin-bottom: 0;
}

/* Legal Content Styling */
.c-legal-content h2 {
    scroll-margin-top: 6rem;
}

/* Legal Contact Card */
.c-legal-contact {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 1.5rem;
    margin-top: 2rem;
}

.c-legal-contact__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin: 0 0 1rem;
}

.c-legal-contact__title i {
    color: var(--green);
}

/* Legal Last Edited (improved) */
.c-legal-last-edited {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border-radius: 0.4rem;
    margin-top: 2rem;
}

/* Terms of Service TOC — 21 entries is taller than a short laptop viewport, so
   the sticky box would clip its own tail with no way to reach it. Cap it to the
   visible height and let the list scroll inside. */
@media (min-width: 900px) {
    .ss-terms-toc {
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}

/* Reduced motion for action components */
@media (prefers-reduced-motion: reduce) {
    .c-quick-action,
    .c-quick-action__icon,
    .c-contact-action-bar__item,
    .c-contact-action-bar__icon,
    .c-currency-toggle__item,
    .c-legal-toc__item a {
        transition: none;
    }
}

/* ========== Mega CTA Button (Celebratory) ========== */

.c-mega-cta {
    margin-top: 4rem;
    padding-top: 3.5rem;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--color-border-subtle);
}

.c-mega-cta__headline {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0;
    color: var(--color-text);
}

.c-mega-cta__lead {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
    text-align: center;
}

/* Wrapper to contain glow without clipping */
.c-mega-cta__wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 4rem;
    margin: -1rem;
}

.c-mega-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    color: var(--white);
    /* Was var(--green-gradient), whose light end is --green #1b944b. White on
       that is 3.90:1, and 06-do-not-touch's own rule says --green is a surface
       colour that does NOT carry white text. Measured on real pixels under the
       label: 4.17:1 at 390. It passed at 1440 only by accident of the clamp —
       the label resolves to 26.4px there, which WCAG counts as "large" (3:1
       bar), while at 390 the same clamp gives 21.6px at weight 600, which is
       not large, so the bar is 4.5 and it failed.
       No audit could see this: a gradient leaves background-color transparent,
       so audit_contrast.py climbed past the button and scored the white label
       against the near-black page ground. audit_gradient_contrast.py now
       samples the real pixels.
       Fixed by moving the fill onto the sanctioned white-text green family,
       NOT by enlarging the type — a bigger label would only have changed which
       threshold applied (measured 4.07:1 either way), not the readability.
       The gradient, the pill and the travelling disc are all untouched.
       Now 6.65:1 at 1440 and 6.74:1 at 390. */
    background: linear-gradient(135deg, var(--accent-solid), var(--accent-solid-deep)); /* lint-ok: the quote CTA's restored gradient — a sanctioned keeper, retinted for AA */
    border: 3px solid var(--lightgreen);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-pill);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* lint-ok: the quote button's 0.3s fill+glow is the LIVE timing, restored verbatim on request (06-do-not-touch §5). Its travelling disc is already on role tokens; retiming the chassis to --t-fast would take a 300ms glow bloom to 120ms, which is a design change to the best interaction on the site, not a cleanup. */
}

.c-mega-cta__btn:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--darkgreen);
    text-shadow: none;
    box-shadow:
        0 0 40px rgba(83, 212, 137, 0.5),
        0 0 80px rgba(83, 212, 137, 0.25),
        0 20px 40px rgba(0, 0, 0, 0.2);
}

.c-mega-cta__btn:active {
    transform: translateY(-1px);
}

/* Button content wrapper - icon is absolute, text is centered */
.c-mega-cta__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Padding on both sides for icon space */
    padding-left: 4.5rem;
    padding-right: 4.5rem;
    height: 3.5rem;
}

/* Icon circle - absolutely positioned, moves via left property */
.c-mega-cta__icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.35rem;
    background: var(--verydark);
    color: var(--lightgreen);
    border-radius: 50%;
    transform: rotate(0deg);
    transition: left var(--t), transform var(--t);
}

/* Text - static, centered in the content area */
.c-mega-cta__text {
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* On hover: icon slides from left to right edge */
.c-mega-cta__btn:hover .c-mega-cta__icon {
    left: calc(100% - 3.5rem);
    transform: rotate(360deg);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .c-mega-cta__wrapper {
        padding: 2rem 0;
        margin: 0;
    }

    .c-mega-cta__btn {
        padding: 0.4rem;
    }

    .c-mega-cta__content {
        height: 3rem;
        padding-left: 3.5rem;
        padding-right: 1.5rem;
    }

    .c-mega-cta__icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.15rem;
    }

    .c-mega-cta__btn:hover .c-mega-cta__icon {
        left: calc(100% - 3rem);
    }
}

/* Touch devices: skip hover animation so link navigates immediately */
@media (hover: none) {
    .c-mega-cta__btn:hover {
        background: var(--green-gradient);
        border-color: var(--lightgreen);
        color: var(--white);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        box-shadow: none;
    }

    .c-mega-cta__btn:hover .c-mega-cta__icon {
        left: 0;
        transform: rotate(0deg);
    }

    .c-mega-cta__btn:active {
        transform: scale(0.97);
    }

    .c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__glow {
        opacity: 0;
        animation: none;
    }

    .c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__particle {
        animation: none;
    }
}

/* Glow effect layer - sits behind the button in the wrapper */
.c-mega-cta__glow {
    position: absolute;
    width: 150%;
    height: 250%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    background: radial-gradient(   /* lint-ok — ambient glow: fades to transparent, not a surface fill */
        circle at center,
        rgba(83, 212, 137, 0.45) 0%,
        rgba(83, 212, 137, 0.15) 20%,
        transparent 40%
    );
    opacity: 0;
    transition: opacity var(--t-fast);
    pointer-events: none;
}

/* Glow activates only when button is hovered */
.c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__glow {
    opacity: 1;
    animation: mega-cta-pulse 1.5s ease-in-out infinite;
}

@keyframes mega-cta-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* Particles container - in wrapper, positioned relative to button */
.c-mega-cta__particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* Individual particles */
.c-mega-cta__particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lightgreen);
    box-shadow: 0 0 8px var(--lightgreen), 0 0 12px var(--lightgreen);
    opacity: 0;
    pointer-events: none;
}

/* Position particles at the button edges */
.c-mega-cta__particle:nth-child(1) { left: 0; top: 50%; }
.c-mega-cta__particle:nth-child(2) { left: 15%; top: 0; }
.c-mega-cta__particle:nth-child(3) { left: 50%; top: 0; }
.c-mega-cta__particle:nth-child(4) { left: 85%; top: 0; }
.c-mega-cta__particle:nth-child(5) { right: 0; top: 50%; left: auto; }
.c-mega-cta__particle:nth-child(6) { left: 50%; bottom: 0; top: auto; }

/* Particle burst animation - triggered by button hover via :has() */
.c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__particle:nth-child(1) {
    animation: particle-burst-1 0.8s ease-out forwards;
}
.c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__particle:nth-child(2) {
    animation: particle-burst-2 0.8s ease-out 0.05s forwards;
}
.c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__particle:nth-child(3) {
    animation: particle-burst-3 0.8s ease-out 0.1s forwards;
}
.c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__particle:nth-child(4) {
    animation: particle-burst-4 0.8s ease-out 0.05s forwards;
}
.c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__particle:nth-child(5) {
    animation: particle-burst-5 0.8s ease-out forwards;
}
.c-mega-cta__wrapper:has(.c-mega-cta__btn:hover) .c-mega-cta__particle:nth-child(6) {
    animation: particle-burst-6 0.8s ease-out 0.08s forwards;
}

@keyframes particle-burst-1 {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(-50px, -25px) scale(0); }
}
@keyframes particle-burst-2 {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(-25px, -60px) scale(0); }
}
@keyframes particle-burst-3 {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(0, -70px) scale(0); }
}
@keyframes particle-burst-4 {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(25px, -60px) scale(0); }
}
@keyframes particle-burst-5 {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(50px, -25px) scale(0); }
}
@keyframes particle-burst-6 {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(0, 50px) scale(0); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .c-mega-cta__btn,
    .c-mega-cta__icon,
    .c-mega-cta__glow,
    .c-mega-cta__particle {
        animation: none !important;   /* lint-ok — the reduced-motion clamp, this rule's own sanctioned exception */
        transition: none !important;   /* lint-ok — the reduced-motion clamp, this rule's own sanctioned exception */
    }

    .c-mega-cta__btn:hover {
        transform: none;
    }
}

/* ========== Brand Wordmark ========== */
/* Large decorative SVG text that tucks under the footer */
/* Features cursor-following spotlight glow effect */

.l-brand-wordmark {
    --pointer-x: 0px;
    --pointer-y: 0px;
    --glow-radius: 250px;

    position: relative;
    width: 100%;
    overflow: visible;
    padding-top: 3rem;
    margin-bottom: -0.75vw; /* Tuck underneath footer */
}

@media (max-width: 600px) {
    .l-brand-wordmark {
        overflow: hidden;
    }

    .c-brand-wordmark__container {
        width: 100%;
        margin-left: 0;
    }
}

.c-brand-wordmark__container {
    position: relative;
    width: 103%; /* Slightly wider than page content */
    margin-left: -1.5%; /* Center the overflow */
}

.c-brand-wordmark {
    display: block;
    width: 100%;
    height: auto;
    max-height: 20vw;
    min-height: 80px;
}

/* Base layer - subtle outline */
.c-brand-wordmark--base .c-brand-wordmark__letter {
    fill: var(--color-card-bg);
    stroke: var(--color-border-subtle, rgba(255, 255, 255, 0.15));
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Glow layer - colored, blurred, masked spotlight follows cursor */
.c-brand-wordmark--glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mask-image: radial-gradient(
        circle var(--glow-radius) at var(--pointer-x) var(--pointer-y),
        black 0%,
        rgba(0, 0, 0, 0.8) 25%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 100%
    );
    transition: opacity var(--t-fast);
}

/* Show glow layer on hover - mask handles the spotlight effect */
.l-brand-wordmark.is-active .c-brand-wordmark--glow {
    opacity: 1;
}

/* Glow strokes - bright core with fill */
.c-brand-wordmark--glow .c-brand-wordmark__letter {
    fill: rgba(23, 183, 90, 0.15); /* Subtle green fill in spotlight */
    stroke: var(--lightgreen, #53d489); /* Brighter green for hot core */
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* Reduced motion: show subtle static glow on hover */
@media (prefers-reduced-motion: reduce) {
    .c-brand-wordmark--glow {
        mask-image: none;
    }

    .l-brand-wordmark.is-active .c-brand-wordmark--glow {
        opacity: 0.3;
    }
}

/* -----------------------------------------------------------------------
   c-terminal — macOS-style terminal widget (blake-noble team page)
   ----------------------------------------------------------------------- */

/* Container */
.c-terminal.window {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border-radius: var(--r);
    border: 1px solid var(--color-card-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-family: var(--font-mono);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

/* Header */
.c-terminal .terminal-header {
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent);
    border-bottom: 1px solid var(--color-card-border);
    padding: 0.875rem 1.15rem;
    cursor: grab;
    transition: background-color var(--t-fast);
    -webkit-user-select: none;
    user-select: none;
}

.c-terminal .terminal-header:hover {
    background-color: color-mix(in srgb, var(--lightgreen) 12%, var(--color-surface-alt) 55%);
}

.c-terminal.is-dragging .terminal-header {
    cursor: grabbing;
    background-color: color-mix(in srgb, var(--lightgreen) 20%, var(--color-surface-alt) 55%);
}

/* Buttons */
.c-terminal .terminal-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.c-terminal .terminal-btn {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--t-fast), opacity var(--t-fast), transform var(--t);
    position: relative;
    flex-shrink: 0;
}

.c-terminal .terminal-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--t-fast);
}

.c-terminal .terminal-btn:hover {
    transform: scale(1.1);
}

.c-terminal .terminal-btn:active {
    transform: scale(0.95);
}

/* Window controls — cohesive with the site's window style (no macOS traffic-lights):
   neutral dots that light up brand green on hover. Functions unchanged (reset/min/full). */
.c-terminal .terminal-btn.red,
.c-terminal .terminal-btn.yellow,
.c-terminal .terminal-btn.green {
    background: color-mix(in srgb, var(--color-text-muted) 32%, transparent);
}

.c-terminal .terminal-btn.red:hover,
.c-terminal .terminal-btn.yellow:hover,
.c-terminal .terminal-btn.green:hover {
    background: var(--lightgreen);
}

.c-terminal .terminal-btn::before {
    background: var(--color-bg);
}

.c-terminal .terminal-btn:hover::before {
    opacity: 1;
}

.c-terminal-minimized .terminal-body {
    display: none;
}

.c-terminal--wiggle {
    animation: terminal-wiggle 0.6s ease-in-out;
}

/* Fullscreen */
.c-terminal:fullscreen {
    border-radius: 0;
    max-width: none;
}

.c-terminal:fullscreen .terminal-body {
    height: calc(100vh - 3.5rem);
    max-height: none;
}

/* Title */
.c-terminal .terminal-title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-left: 1rem;
    flex-grow: 1;
    text-align: center;
    margin-right: calc(12px * 3 + 0.5rem * 2 + 1rem);
}

/* Body */
.c-terminal .terminal-body {
    background: color-mix(in srgb, var(--color-card-bg) 92%, transparent);
    padding: 1.25rem 1.5rem;
    height: 600px;
    max-height: 70vh;
    overflow: auto;
}

/* Scrollbar */
.c-terminal .terminal-body::-webkit-scrollbar {
    width: 8px;
}

.c-terminal .terminal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.c-terminal .terminal-body::-webkit-scrollbar-thumb {
    background: var(--lightgreen);
    border-radius: 4px;
    opacity: 0.5;
}

.c-terminal .terminal-body::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

/* Output */
.c-terminal .terminal-output {
    font-family: var(--font-mono);
    color: var(--color-accent-text);
    font-size: var(--fs-sm);
    white-space: pre;
    min-height: 0;
    vertical-align: top;
    font-variant-ligatures: none;
}

.c-terminal .terminal-output a {
    color: var(--color-accent-text);
    text-decoration: underline;
}

.c-terminal .terminal-output a:hover {
    color: var(--green);
}

/* Cursor */
.c-terminal .terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--color-accent-text);
    animation: terminal-blink 1s step-end infinite;
    margin-left: 0.25rem;
    vertical-align: top;
}

/* Respect reduced-motion: stop the continuous cursor blink + the click wiggle */
@media (prefers-reduced-motion: reduce) {
    .c-terminal .terminal-cursor { animation: none; opacity: 1; }
    .c-terminal--wiggle { animation: none; }
}

@keyframes terminal-blink {
    0%, 50%  { opacity: 1; }
    50.1%, 100% { opacity: 0; }
}

@keyframes terminal-wiggle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(1.2deg); }
    50%  { transform: rotate(-1.2deg); }
    75%  { transform: rotate(0.6deg); }
    100% { transform: rotate(0deg); }
}

/* Dragging state */
.c-terminal.is-dragging {
    opacity: 0.95;
}

/* Responsive */
@media (max-width: 768px) {
    .c-terminal .terminal-body {
        height: 500px;
        max-height: 60vh;
    }

    .c-terminal .terminal-title {
        font-size: 10px;
        margin-left: 0.5rem;
        margin-right: calc(12px * 3 + 0.5rem * 2 + 0.5rem);
    }
}

/* Blake Noble — Q-learning demo (in-page; moved out of the sidebar) */
.ss-qdemo__stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.25rem;
}

.ss-qdemo__canvas {
    flex: 0 1 420px;
    min-width: 260px;
    max-width: 420px;
}

.ss-qdemo__canvas canvas {
    display: block;
    width: 100%;
    height: auto;
    background: #04141b;   /* lint-ok — matches the q-demo canvas drawn in blake-noble.php's JS */
    border: 1px solid var(--color-card-border);
    border-radius: 0;
}

.ss-qdemo__side {
    flex: 1 1 240px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ss-qdemo__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ss-qdemo__btn {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: 0.6rem 1.15rem;
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-card-border);
    border-radius: var(--r);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.ss-qdemo__btn:hover { border-color: var(--green); }
.ss-qdemo__btn i { margin-right: 0.35rem; }

.ss-qdemo__btn--primary {
    background: var(--green);
    color: #04121a;   /* lint-ok — matches the q-demo canvas drawn in blake-noble.php's JS */
    border-color: transparent;
    font-weight: var(--fw-semibold);
}

.ss-qdemo__btn--primary:hover { background: var(--green); filter: brightness(1.06); }

/* -----------------------------------------------------------------------
   c-decoder — archive decoder utility page (panic.php)
   ----------------------------------------------------------------------- */

.c-decoder {
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.c-decoder__box {
    background-color: var(--ink-on-strong);
    padding: 40px;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.c-decoder__box label,
.c-decoder__box input[type="text"],
.c-decoder__box input[type="submit"] {
    display: block;
    margin: 10px auto;
    line-height: 2;
}

.c-decoder__box input[type="text"] {
    width: 80%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.c-decoder__box input[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color var(--t-fast);
}

.c-decoder__box input[type="submit"]:hover {
    background-color: #0056b3;
}

.c-decoder__box.is-dragover {
    border: 2px dashed #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}

.dergs {
    display: inline-block;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 360 360' fill='%2353d489'%3E%3Cpath stroke='%23000000' stroke-width='24' paint-order='stroke fill' d='m178.41 115.87v6.6704q-40.948 10.561-40.948 77.449 0 72.447 50.954 85.231v-107.65q0-23.531 2.9651-34.278 2.9652-10.932 12.97-19.084 10.191-8.3378 24.458-8.3378 25.014 0 46.321 23.531 21.493 23.531 21.493 61.329 0 35.389-22.048 63.182-21.864 27.793-66.147 31.684v76.152h-20.011v-76.152q-38.539-3.3351-61.885-28.719-23.161-25.569-23.161-66.332 0-36.686 21.123-59.847 21.123-23.346 53.918-24.828zm30.016 169.35q58.365-8.7083 58.365-75.411 0-30.757-12.599-51.509-12.414-20.937-29.275-20.937-6.1141 0-10.376 4.4467-4.0749 4.2616-5.1905 10.191-0.92746 5.9292-0.92746 23.346z'/%3E%3C/svg%3E") 12 12, auto;
}

/* ==========================================================================
   Graphic Design — ss-logo-system
   "A logo is a system" — one mark rendered across the treatments a brand
   actually encounters: primary, monochrome, reversed, small-scale.
   Lives on graphic-design.php as the brand-systems band (#brand anchor).
   ========================================================================== */

.ss-logo-system {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .ss-logo-system {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .ss-logo-system {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
}

.ss-logo-system__tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0;
    border: 1px solid var(--color-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform var(--t), border-color var(--t-fast);
}

.ss-logo-system__tile:hover {
    transform: translateY(-2px);
    border-color: var(--green);
}

.ss-logo-system__mark {
    width: 52%;
    height: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.ss-logo-system__mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ss-logo-system__label {
    position: absolute;
    bottom: 0.6rem;
    left: 0.75rem;
    right: 0.75rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: currentColor;
    opacity: 0.6;
    text-align: left;
}

/* Treatment variants — same mark, different context */
.ss-logo-system__tile--primary {
    background-color: var(--accent-solid);
    color: var(--ink-on-strong);
    border-color: transparent;
}

.ss-logo-system__tile--mono-dark {
    background: #f5f5f5;   /* lint-ok — deliberate pure mono — this tile demos the mark on white/black */
    color: #111;   /* lint-ok — deliberate pure mono — this tile demos the mark on white/black */
    border-color: rgba(0, 0, 0, 0.08);
}

.ss-logo-system__tile--mono-light {
    background: #111;   /* lint-ok — deliberate pure mono — this tile demos the mark on white/black */
    color: #f5f5f5;   /* lint-ok — deliberate pure mono — this tile demos the mark on white/black */
    border-color: rgba(255, 255, 255, 0.08);
}

.ss-logo-system__tile--accent {
    background: var(--green);
    color: var(--ink-on-strong);
    border-color: transparent;
}

.ss-logo-system__tile--outlined {
    background: transparent;
    color: var(--color-text);
}

.ss-logo-system__tile--outlined .ss-logo-system__mark svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    stroke-linejoin: round;
}

.ss-logo-system__tile--favicon {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.ss-logo-system__tile--favicon .ss-logo-system__mark {
    width: 22%;
    height: 22%;
}

/* ==========================================================================
   Domain Registration — ss-domain-search
   Real domain availability search. POSTs to the OpenSRS storefront at
   silverservers.shopco.com/search (canonical entry is domains.silverservers.com,
   which 301s to shopco); target=_blank so results open in a new tab and the
   marketing page stays in place.
   ========================================================================== */

.ss-domain-search {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 540px;
    margin: 2rem auto 1rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ss-domain-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.85rem 1rem;
    font-family: var(--font-mono, monospace);
    font-size: 1rem;
    color: var(--color-text);
}

.ss-domain-search__input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.ss-domain-search__input:focus {
    outline: none;
    background: color-mix(in srgb, var(--green) 6%, transparent);
}

.ss-domain-search__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: var(--accent-solid);
    color: var(--ink-on-strong);
    padding: 0 1.25rem;
    font-family: inherit;
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--t-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.ss-domain-search__btn:hover {
    background: color-mix(in srgb, var(--green) 85%, #fff);
}

.ss-domain-search__pricing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    max-width: 540px;
    margin: 0.5rem auto 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.ss-domain-search__pricing span strong {
    color: var(--color-text);
    font-family: var(--font-mono, monospace);
    margin-right: 0.25rem;
}

/* ==========================================================================
   Colocation — ss-rack
   CSS server-rack diagram. Each slot labels a real facility capability:
   Power, Cooling, Connectivity, Security, Environmental, Hands-on Support.
   ========================================================================== */

.ss-rack {
    max-width: 680px;
    margin: 2.5rem auto 0;
    width: 100%;
}

.ss-rack__frame {
    background: var(--color-band-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px color-mix(in srgb, var(--green) 14%, transparent);
}

.ss-rack__header {
    color: var(--color-text-muted);
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    padding: 0.65rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-card-border);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ss-rack__header-meta {
    color: var(--green);
    font-weight: var(--fw-semibold);
}

.ss-rack__slot {
    background: var(--color-card-bg-opaque);
    border: 1px solid var(--color-card-border);
    border-radius: 0.35rem;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: 3rem auto 1fr;
    gap: 1rem;
    align-items: center;
    color: var(--color-text);
    position: relative;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.ss-rack__slot:hover {
    background: color-mix(in srgb, var(--green) 6%, var(--color-card-bg-opaque));
    border-color: color-mix(in srgb, var(--green) 40%, var(--color-card-border));
}

.ss-rack__slot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 40%;
    background: rgba(83, 212, 137, 0.35);
    border-radius: 0 2px 2px 0;
}

.ss-rack__slot-unit {
    color: var(--color-text-muted);
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    text-align: center;
    border-right: 1px solid var(--color-card-border);
    padding-right: 1rem;
    letter-spacing: 0.08em;
}

.ss-rack__slot-icon {
    color: var(--green);
    font-size: 1.35rem;
    line-height: 1;
}

.ss-rack__slot-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ss-rack__slot-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
    color: var(--color-text);
    letter-spacing: 0.02em;
}

.ss-rack__slot-meta {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

@media (max-width: 540px) {
    .ss-rack__slot {
        grid-template-columns: 2.25rem auto 1fr;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }

    .ss-rack__slot-unit {
        padding-right: 0.6rem;
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   Website Management — ss-monthly-timeline
   Horizontal 4-week cadence timeline. Shows what "proactive" actually
   means by mapping it to specific weekly activities.
   ========================================================================== */

.ss-monthly-timeline {
    margin-top: 2.5rem;
    display: grid;
    gap: 1.75rem;
    position: relative;
}

@media (min-width: 820px) {
    .ss-monthly-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .ss-monthly-timeline::before {
        content: "";
        position: absolute;
        top: 2.25rem;
        left: 12.5%;
        right: 12.5%;
        height: 2px;
        background: linear-gradient(   /* lint-ok — scroll/edge scrim: fades to transparent, not a surface fill */
            90deg,
            transparent 0%,
            var(--green) 10%,
            var(--green) 90%,
            transparent 100%
        );
        opacity: 0.4;
        z-index: 0;
    }
}

.ss-monthly-timeline__week {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ss-monthly-timeline__marker {
    width: 4.5rem;
    height: 4.5rem;
    background: var(--color-card-bg);
    border: 2px solid var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--green);
    position: relative;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 15%, transparent);
    transition: transform var(--t), box-shadow var(--t-fast);
}

.ss-monthly-timeline__week:hover .ss-monthly-timeline__marker {
    transform: translateY(-2px);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 22%, transparent);
}

.ss-monthly-timeline__label {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0;
}

.ss-monthly-timeline__title {
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    line-height: 1.3;
    margin: 0;
}

.ss-monthly-timeline__body {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    margin: 0;
    max-width: 18rem;
}

/* Vertical mobile layout. The week has no content wrapper — marker, label,
   title and body are flat siblings — so a flex row lays all four out
   horizontally and the three text blocks overflow. Use a 2-col grid instead:
   the marker spans the three text rows in column 1, the text stacks in column 2.
   minmax(0,1fr) lets the text column shrink so copy wraps to the phone width. */
@media (max-width: 819px) {
    .ss-monthly-timeline__week {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.3rem;
        align-items: start;
        text-align: left;
    }

    .ss-monthly-timeline__marker {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        flex-shrink: 0;
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.25rem;
    }

    .ss-monthly-timeline__label,
    .ss-monthly-timeline__title,
    .ss-monthly-timeline__body {
        grid-column: 2;
    }

    .ss-monthly-timeline__body {
        max-width: none;
    }
}

/* ==========================================================================
   Website Management — ss-monitor-panel
   ========================================================================== */

.ss-monitor-panel {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 1.5rem;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

@media (min-width: 700px) {
    .ss-monitor-panel {
        grid-template-columns: 1fr 1fr;
        padding: 2rem;
        gap: 1.25rem;
    }
}

.ss-monitor-panel__header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--color-card-border);
}

.ss-monitor-panel__heading {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0;
}

.ss-monitor-panel__heading strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

.ss-monitor-panel__live {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-text);
}

.ss-monitor-panel__pulse {
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent);
    animation: ss-monitor-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ss-monitor-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent);
    }
    50% {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 12%, transparent);
    }
}

.ss-monitor-card {
    background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--color-card-border) 50%, transparent);
}

.ss-monitor-card__label {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ss-monitor-card__value {
    font-size: 1.35rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    font-family: var(--font-mono, monospace);
    line-height: 1.2;
}

.ss-monitor-card__value--ok {
    color: var(--green);
}

.ss-monitor-card__value--warn {
    color: var(--warn);
}

.ss-monitor-card__meta {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.ss-monitor-events {
    grid-column: 1 / -1;
    background: color-mix(in srgb, var(--color-surface-alt) 35%, transparent);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-card-border) 50%, transparent);
}

.ss-monitor-events__title {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.65rem;
}

.ss-monitor-events__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ss-monitor-events__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    color: var(--color-text);
    align-items: baseline;
}

.ss-monitor-events__time {
    color: var(--color-text-muted);
    opacity: 0.85;
    white-space: nowrap;
}

.ss-monitor-events__dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-right: 0.45rem;
    vertical-align: middle;
}

.ss-monitor-events__dot--ok { background: var(--green); }
.ss-monitor-events__dot--warn { background: var(--warn); }
.ss-monitor-events__dot--info { background: var(--color-text-muted); opacity: 0.5; }

/* ==========================================================================
   Pulse terminal status tokens (used in web-applications.php)
   ========================================================================== */

.ss-pulse-ok {
    color: var(--ok);
}

.ss-pulse-warn {
    color: var(--warn);
}

/* ==========================================================================
   Content Writing — ss-sample-excerpt
   Typography treatment for a writing sample shown inside c-card--split.
   Distinguishes the rewritten "after" from the weak "before" visually.
   ========================================================================== */

.ss-sample-excerpt {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--color-text);
    margin: 0.5rem 0 0;
    padding: 1rem 1.15rem;
    background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent);
    border-left: 3px solid var(--color-card-border);
    border-radius: 0 0.35rem 0.35rem 0;
}

.ss-sample-excerpt p {
    margin: 0 0 0.75rem;
}

.ss-sample-excerpt p:last-child {
    margin-bottom: 0;
}

.ss-sample-excerpt--after {
    border-left-color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, var(--color-surface-alt));
}

.ss-sample-annotate {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==========================================================================
   Email — ss-email-preview
   Two stacked mock "From:" headers comparing gmail.com vs your@yourcompany.
   Shows the identity shift that domain-based email delivers.
   ========================================================================== */

.ss-email-preview {
    max-width: 560px;
    margin: 2rem auto 0;
    display: grid;
    gap: 0.75rem;
}

.ss-email-preview__row {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 0.9rem 1.1rem;
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    gap: 0.85rem;
    align-items: center;
    text-align: left;
    position: relative;
    transition: border-color var(--t-fast);
}

.ss-email-preview__row--preferred {
    border-color: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}

.ss-email-preview__avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: var(--accent-solid);
    color: var(--ink-on-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, monospace);
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.ss-email-preview__avatar--generic {
    background: color-mix(in srgb, var(--color-text-muted) 40%, var(--color-surface-alt));
    color: var(--color-text);
}

.ss-email-preview__from {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ss-email-preview__name {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-email-preview__address {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-email-preview__tag {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-text);
    flex-shrink: 0;
}

.ss-email-preview__tag--good {
    color: var(--accent-text);
}

/* ==========================================================================
   SEO Pricing — two-column band
   Used on: www/services/seo.php — Grassroots SEO six-tier program.
   One section, two columns: Grassroots Standard anchor (featured) on the
   left, the other five tiers in a compact list on the right. Mobile stacks.
   ========================================================================== */

.ss-pricing-band {
    display: grid;
    gap: 2rem;
    margin-top: 1.25rem;
    align-items: start;
}

@media (min-width: 900px) {
    .ss-pricing-band {
        grid-template-columns: minmax(340px, 400px) 1fr;
        gap: 2.5rem;
    }
}

/* Featured Standard anchor */
.ss-pricing-anchor {
    position: relative;
    padding: 2rem 1.75rem;
    background: var(--color-card-bg-opaque);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ss-pricing-anchor__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 0.3rem 0.75rem;
    /* darker green so the white badge text clears WCAG AA (white on --green was ~3:1) */
    background: var(--darkgreen);
    color: var(--ink-on-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    line-height: 1;
}

.ss-pricing-anchor__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

.ss-pricing-anchor__price {
    font-family: var(--font-mono);
    font-size: clamp(2.5rem, 5vw, 3.25rem);
    font-weight: var(--fw-medium);
    line-height: 1;
    margin: 0;
    letter-spacing: -0.02em;
}

.ss-pricing-anchor__price-unit {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-left: 0.35rem;
    letter-spacing: 0;
    font-weight: var(--fw-regular);
}

.ss-pricing-anchor__list {
    list-style: none;
    padding: 1.1rem 0 0;
    margin: 0.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    border-top: 1px solid var(--color-border-subtle);
}

.ss-pricing-anchor__list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ss-pricing-anchor__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.ss-pricing-anchor__cta {
    margin: 0.75rem 0 0;
}

/* Tier strip — always stacked rows, fits in either a narrow column or full-width */
.ss-tier-strip {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border-subtle);
}

.ss-tier-strip__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "rank namepr cta"
        "summary summary summary";
    gap: 0.25rem 1rem;
    padding: 1.1rem 0.5rem;
    border-bottom: 1px solid var(--color-border-subtle);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--t-fast);
}

.ss-tier-strip__row:hover,
.ss-tier-strip__row:focus-visible {
    background: var(--color-surface-alt);
    outline: none;
}

.ss-tier-strip__row:hover .ss-tier-strip__cta,
.ss-tier-strip__row:focus-visible .ss-tier-strip__cta {
    transform: translateX(0.3rem);
}

.ss-tier-strip__rank {
    grid-area: rank;
    align-self: center;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.15em;
    margin: 0;
}

.ss-tier-strip__name-price {
    grid-area: namepr;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ss-tier-strip__name {
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    line-height: var(--lh-tight);
    margin: 0;
}

.ss-tier-strip__price {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    margin: 0;
}

.ss-tier-strip__summary {
    grid-area: summary;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 0.2rem 0 0;
}

.ss-tier-strip__cta {
    grid-area: cta;
    align-self: center;
    font-family: var(--font-mono);
    color: var(--green);
    font-size: 1.15rem;
    line-height: 1;
    transition: transform var(--t);
}

@media (max-width: 640px) {
    .ss-pricing-anchor {
        padding: 1.75rem 1.25rem;
    }
}

/* ==========================================================================
   SEO — ss-search-stack (used on www/services/seo.php)
   ========================================================================== */

.ss-search-stack {
    display: grid;
    gap: 0.75rem;
    margin: 2rem auto 0;
    max-width: 880px;
}

.ss-search-stack__answer,
.ss-search-stack__source {
    background: var(--color-card-bg-opaque);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    padding: 1.5rem 1.65rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0; /* grid items: shrink to the column instead of forcing it wide */
}

/* Answer card --------------------------------------------------------------- */

.ss-search-stack__answer-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ss-search-stack__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    color: var(--color-text-muted);
    border-radius: var(--r-sm);
    line-height: 1;
}

.ss-search-stack__query {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--color-text);
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--color-border-subtle);
}

.ss-search-stack__query-mark {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-text);
    letter-spacing: 0;
    flex-shrink: 0;
}

.ss-search-stack__response {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ss-search-stack__response-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text);
}

.ss-search-stack__response-text strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    background: color-mix(in srgb, var(--green) 14%, transparent);
    padding: 0 0.18em;
    border-radius: 0.18rem;
}

.ss-search-stack__cite {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.ss-search-stack__cite-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--fs-xs);
}

.ss-search-stack__cite-url {
    color: var(--color-text);
    overflow-wrap: anywhere; /* break the long source URL rather than overflow the phone */
}

/* Bridge -------------------------------------------------------------------- */

.ss-search-stack__bridge {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.4rem 0;
}

.ss-search-stack__bridge-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
}

/* Source panel -------------------------------------------------------------- */

.ss-search-stack__source-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.ss-search-stack__source-path {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.ss-search-stack__source-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-text);
}

.ss-search-stack__source-tag::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--green);
}

.ss-search-stack__lines {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ss-search-stack__line {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--color-border-subtle);
}

.ss-search-stack__line:last-child {
    border-bottom: none;
}

.ss-search-stack__key {
    color: var(--color-text-muted);
    letter-spacing: 0;
    white-space: nowrap;
    margin: 0;
}

.ss-search-stack__val {
    color: var(--color-text);
    word-break: break-word;
    margin: 0;
}

.ss-search-stack__line--schema .ss-search-stack__key {
    color: var(--color-accent-text);
}

.ss-search-stack__caption {
    margin: 0.4rem 0 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
}

@media (max-width: 720px) {
    .ss-search-stack__answer,
    .ss-search-stack__source {
        padding: 1.25rem 1.15rem;
    }
    .ss-search-stack__line {
        grid-template-columns: 1fr;
        gap: 0.2rem;
        padding: 0.65rem 0;
    }
    .ss-search-stack__source-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .ss-search-stack__lines {
        font-size: 0.78rem;
    }
    /* The mono keys (<meta name="description">, schema.org/BreadcrumbList) are
       nowrap by default — on a phone they set a min-content wider than the card.
       Let them wrap, and let the cite label + long source URL stack. */
    .ss-search-stack__key {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .ss-search-stack__cite {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
}

/* ==========================================================================
   SEM — ss-ad-preview
   Used on: www/services/search-engine-marketing.php — mid-page emphasis.
   Two stacked Google-Ads-style sponsored-result cards: a generic "Template"
   ad and a "Tuned" ad using real SilverServers hosting content. Shows what
   paid-search tuning actually delivers — same business, same service, two
   different ads. Conceptual illustration; real Google Ads primitives
   (responsive-search-ad structure: 3 headlines, display URL, 2 descriptions,
   sitelink extensions). Zero fabricated metrics.
   ========================================================================== */

.ss-ad-preview {
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    gap: 1.75rem;
}

.ss-ad-preview__group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ss-ad-preview__group-label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    margin: 0;
}

.ss-ad-preview__group-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border-subtle);
}

.ss-ad-preview__group--tuned .ss-ad-preview__group-label {
    color: var(--green);
}

.ss-ad-preview__card {
    background: var(--color-card-bg-opaque);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ss-ad-preview__sponsored {
    font-size: 0.78rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    margin: 0 0 0.15rem;
    letter-spacing: 0;
}

.ss-ad-preview__url-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.3rem;
}

.ss-ad-preview__favicon {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--green) 18%, var(--color-surface-alt));
    border: 1px solid var(--color-border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    color: var(--accent-text);
    flex-shrink: 0;
    line-height: 1;
}

.ss-ad-preview__url {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.2;
    word-break: break-all;
}

.ss-ad-preview__headline {
    font-size: 1.2rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--accent-text);
    margin: 0;
}

.ss-ad-preview__desc {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.ss-ad-preview__sitelinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.2rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--accent-text);
}

.ss-ad-preview__sitelink {
    color: var(--accent-text);
    font-weight: var(--fw-medium);
}

/* Template variant — same structure, muted link colour so the generic copy
   reads as "this is what you'd get without tuning." No opacity dim; the
   contrast is carried by the copy and the headline colour shift. */
.ss-ad-preview__card--template .ss-ad-preview__headline {
    color: var(--color-text);
}

.ss-ad-preview__card--template .ss-ad-preview__favicon {
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
}

@media (max-width: 640px) {
    .ss-ad-preview__card {
        padding: 1.15rem 1.2rem;
    }
    .ss-ad-preview__headline {
        font-size: 1.05rem;
    }
    .ss-ad-preview__desc {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Website Hosting — ss-hosting-stack
   Used on: www/services/website-hosting.php — mid-page emphasis band.
   Vertical operational-layer diagram of what a SilverServers hosting account
   runs, top-to-bottom: Your site, SSL, web server + DB, OS/security patches,
   then a "BARGAIN HOSTS STOP HERE" divider, then Local+remote backups,
   Pulse monitoring, Kamloops Tier II+ facility. Each row is an icon + mono
   label + specifics line. The dashed divider carries the bargain-host
   contrast as a visual demarcation. Rows below get a subtle green tint and
   filled green icons to signal "this is what you don't get from a bargain
   host." Conceptual illustration, zero fabricated metrics (every layer
   references real facts from project_site_facts.md: Pulse monitoring since
   2015, Tier II+, 1 MW, dual 100G carrier-neutral, local + remote backups).
   ========================================================================== */

.ss-hosting-stack {
    max-width: 780px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 0.65rem;
    box-shadow: var(--shadow-soft);
}

.ss-hosting-stack__row {
    display: grid;
    grid-template-columns: 2.85rem 1fr;
    gap: 1rem;
    padding: 0.95rem 1rem;
    align-items: flex-start;
    border-top: 1px solid var(--color-border-subtle);
    transition: background var(--t-fast);
}

.ss-hosting-stack__row:first-child {
    border-top: 0;
}

.ss-hosting-stack__icon {
    width: 2.85rem;
    height: 2.85rem;
    display: grid;
    place-items: center;
    border-radius: 0.55rem;
    background: rgba(27, 148, 75, 0.14);
    color: var(--green);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ss-hosting-stack__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ss-hosting-stack__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--fw-mono-medium);
    color: var(--color-text);
    margin: 0;
    line-height: 1.25;
}

.ss-hosting-stack__meta {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Divider marking where bargain hosts stop -------------------------------- */

.ss-hosting-stack__divider {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* --accent-text, not --green. #1b944b as TEXT measures 4.07:1 on this row's
       tinted ground at 12px — below AA. "--accent is a surface colour, not a
       text colour" is a rule already written down; this instance predates the
       cutover and survived because nobody had run audit_contrast.py on
       /services/website-hosting/. Sampling routes is how that happens. */
    color: var(--accent-text);
    border-top: 1px dashed color-mix(in srgb, var(--green) 55%, transparent);
    border-bottom: 1px dashed color-mix(in srgb, var(--green) 55%, transparent);
    background: rgba(27, 148, 75, 0.07);
    font-weight: var(--fw-mono-bold);
}

.ss-hosting-stack__divider-icon {
    color: var(--green);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ss-hosting-stack__divider-text {
    flex: 1;
    line-height: 1.25;
}

/* Premium rows (below the divider) — subtle tint + filled icon ------------ */

.ss-hosting-stack__row--premium {
    background: rgba(27, 148, 75, 0.045);
    border-top-color: transparent;
}

.ss-hosting-stack__row--premium .ss-hosting-stack__icon {
    background: var(--green);
    color: var(--ink-on-strong);
    box-shadow: 0 4px 10px rgba(27, 148, 75, 0.28);
}

/* Caption below the card ------------------------------------------------- */

.ss-hosting-stack__caption {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.ss-hosting-stack__caption strong {
    font-weight: var(--fw-semibold);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 640px) {
    .ss-hosting-stack {
        padding: 0.45rem;
    }
    .ss-hosting-stack__row {
        padding: 0.7rem 0.7rem;
        grid-template-columns: 2.25rem 1fr;
        gap: 0.75rem;
    }
    .ss-hosting-stack__icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.45rem;
        font-size: 0.95rem;
    }
    .ss-hosting-stack__label {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
    }
    .ss-hosting-stack__meta {
        font-size: 0.82rem;
    }
    .ss-hosting-stack__divider {
        font-size: 0.66rem;
        letter-spacing: 0.12em;
        padding: 0.6rem 0.7rem;
        gap: 0.6rem;
    }
}

/* ==========================================================================
   Ecommerce — ss-integration-map
   Used on: www/services/ecommerce.php — mid-to-late page visual.
   Hub-and-spoke diagram: a central "Your store" card with six integration-
   category spokes arranged around it (three per side on desktop), each
   naming real vendors (Stripe/PayPal, Canada Post/FedEx, QuickBooks/Xero,
   Mailchimp/HubSpot, Lightspeed/3PL feeds, GA4/Plausible). Visualizes the
   "& Integrations" half of the page title that's never had a graphic before.
   Conceptual diagram, not a mock-artifact; vendor names are real but no
   integration counts/metrics are claimed. Pure CSS grid, no JS, no SVG
   connector lines (spatial adjacency carries the hub-and-spoke read).
   ========================================================================== */

.ss-integration-map {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1.5rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
}

.ss-integration-map__hub {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
    border-radius: 0;
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 22px rgba(27, 148, 75, 0.2);
    min-height: 100%;
}

.ss-integration-map__hub-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    /* --r-full: genuinely circular, which the radius role rule exempts. Using
       the token rather than a literal 999px also means a future "kill the pills"
       sweep cannot flatten it by accident — the same protection the quote
       button's --radius-pill already gives it. */
    border-radius: var(--r-full);
    background: var(--green);
    color: var(--ink-on-strong);
    font-size: 1.2rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 4px 12px rgba(27, 148, 75, 0.35);
}

.ss-integration-map__hub-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin: 0 0 0.55rem;
    font-weight: var(--fw-mono-bold);
}

.ss-integration-map__hub-title {
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    margin: 0 0 0.4rem;
    line-height: 1.25;
    color: var(--color-text);
}

.ss-integration-map__hub-body {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Spokes ------------------------------------------------------------------ */

.ss-integration-map__spoke {
    display: flex;
    flex-direction: column;
    padding: 0.9rem 1rem;
    background: var(--color-card-bg-opaque);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0;
    gap: 0.4rem;
    min-width: 0;
    transition: border-color var(--t-fast);
}

.ss-integration-map__spoke-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ss-integration-map__spoke-icon {
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    border-radius: 0.4rem;
    background: rgba(27, 148, 75, 0.14);
    color: var(--green);
    flex-shrink: 0;
    font-size: 0.85rem;
}

.ss-integration-map__spoke-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
    font-weight: var(--fw-mono-medium);
    line-height: 1.2;
}

.ss-integration-map__spoke-examples {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* Grid positioning of spokes: 3 on the left column, 3 on the right column */
.ss-integration-map__spoke:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.ss-integration-map__spoke:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.ss-integration-map__spoke:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.ss-integration-map__spoke:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.ss-integration-map__spoke:nth-of-type(5) { grid-column: 1; grid-row: 3; }
.ss-integration-map__spoke:nth-of-type(6) { grid-column: 3; grid-row: 3; }

/* Caption below the card ------------------------------------------------- */

.ss-integration-map__caption {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.ss-integration-map__caption strong {
    font-weight: var(--fw-semibold);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 768px) {
    .ss-integration-map {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 0.65rem;
        padding: 1rem;
    }
    .ss-integration-map__hub {
        grid-column: 1 / span 2;
        grid-row: auto;
        padding: 1.4rem 1rem;
        min-height: 0;
    }
    .ss-integration-map__hub-title {
        font-size: 1.1rem;
    }
    .ss-integration-map__spoke {
        grid-column: auto !important;   /* lint-ok — the mobile stack must beat every explicit grid placement set above it */
        grid-row: auto !important;      /* lint-ok — as above */
        padding: 0.75rem 0.85rem;
    }
}

@media (max-width: 460px) {
    .ss-integration-map {
        grid-template-columns: 1fr;
    }
    .ss-integration-map__hub {
        grid-column: 1;
    }
    .ss-integration-map__spoke-examples {
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   Email — ss-deliverability-check
   Used on: www/services/email.php — second distinctive move.
   Conceptual diagram of the four real deliverability primitives SilverServers
   configures before an email leaves your domain: SPF, DKIM, DMARC, reverse
   DNS. Top panel mocks an outgoing envelope (From / To / Subj). Four gate
   rows below each show: protocol name (mono), short mechanism line with a
   representative real-world record snippet, and a PASS chip. A verdict row
   at the bottom indicates "Primary inbox." Conceptual illustration only —
   no fabricated measurement. The record snippets (v=spf1, p=reject, 2048-bit
   RSA, PTR) are real DNS/SMTP syntax, not invented values.
   ========================================================================== */

.ss-deliverability-check {
    max-width: 640px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

/* Envelope header — mocks an outgoing message ----------------------------- */

.ss-deliverability-check__envelope {
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-card-border);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ss-deliverability-check__envelope-row {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.35;
}

.ss-deliverability-check__envelope-label {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: var(--fw-mono-medium);
}

.ss-deliverability-check__envelope-value {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Gate rows — one per deliverability primitive ---------------------------- */

.ss-deliverability-check__gate {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--color-border-subtle);
}

.ss-deliverability-check__gate:first-of-type {
    border-top: 0;
}

.ss-deliverability-check__gate-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 0.55rem;
    background: rgba(27, 148, 75, 0.14);
    color: var(--green);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.ss-deliverability-check__gate-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ss-deliverability-check__gate-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--fw-mono-bold);
    color: var(--color-text);
    margin: 0;
    line-height: 1.25;
}

.ss-deliverability-check__gate-meta {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.ss-deliverability-check__gate-snippet {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text);
    background: var(--color-surface-alt);
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin-top: 0.15rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ss-deliverability-check__gate-chip {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--fw-mono-bold);
    color: var(--accent-text);
    background: rgba(27, 148, 75, 0.12);
    border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
    padding: 0.25rem 0.55rem;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Verdict row — where the message lands ----------------------------------- */

.ss-deliverability-check__verdict {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(27, 148, 75, 0.07);
    border-top: 1px dashed color-mix(in srgb, var(--green) 45%, transparent);
}

.ss-deliverability-check__verdict-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 0.55rem;
    background: var(--green);
    color: var(--ink-on-strong);
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(27, 148, 75, 0.28);
    flex-shrink: 0;
}

.ss-deliverability-check__verdict-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    color: var(--accent-text);
}

.ss-deliverability-check__verdict-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--fw-mono-bold);
    color: var(--accent-text);
    margin: 0;
    line-height: 1.25;
}

.ss-deliverability-check__verdict-meta {
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: 1.45;
    margin: 0;
}

/* Caption below the panel ------------------------------------------------- */

.ss-deliverability-check__caption {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.ss-deliverability-check__caption strong {
    font-weight: var(--fw-semibold);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 640px) {
    .ss-deliverability-check__envelope-row {
        grid-template-columns: 2.5rem 1fr;
        gap: 0.5rem;
        font-size: 0.8rem;
    }
    .ss-deliverability-check__gate {
        grid-template-columns: 2.25rem 1fr;
        grid-template-rows: auto auto;
        gap: 0.55rem 0.75rem;
        padding: 0.75rem 0.9rem;
    }
    .ss-deliverability-check__gate-chip {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }
    .ss-deliverability-check__gate-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
        grid-row: 1 / span 2;
    }
    .ss-deliverability-check__gate-body {
        grid-column: 2;
        grid-row: 1;
    }
    .ss-deliverability-check__gate-label {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }
    .ss-deliverability-check__gate-meta {
        font-size: 0.82rem;
    }
    .ss-deliverability-check__gate-snippet {
        font-size: 0.72rem;
    }
    .ss-deliverability-check__verdict {
        grid-template-columns: 2.25rem 1fr;
        gap: 0.75rem;
        padding: 0.85rem 0.9rem;
    }
    .ss-deliverability-check__verdict-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.95rem;
    }
    .ss-deliverability-check__verdict-label {
        font-size: 0.72rem;
    }
    .ss-deliverability-check__verdict-meta {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Content Writing — ss-content-brief
   Form-style intake panel showing the six questions that every SilverServers
   content engagement starts with. Conceptual illustration — not a real form,
   no submission, no data capture. Demonstrates the brief IS the service.
   ========================================================================== */

.ss-content-brief {
    max-width: 780px;
    margin: 2rem auto 0;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    overflow: hidden;
}

.ss-content-brief__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.35rem;
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-card-border);
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.ss-content-brief__header-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--green);
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

.ss-content-brief__header-label {
    flex: 1 1 auto;
    color: var(--color-text);
    letter-spacing: 0.1em;
}

.ss-content-brief__header-count {
    opacity: 0.7;
}

.ss-content-brief__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ss-brief-counter;
}

.ss-content-brief__item {
    counter-increment: ss-brief-counter;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.9rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--color-card-border);
}

.ss-content-brief__item:last-child {
    border-bottom: 0;
}

.ss-content-brief__mark {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.1rem;
    border: 1.5px solid color-mix(in srgb, var(--green) 40%, var(--color-card-border));
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--green) 8%, var(--color-card-bg));
    display: grid;
    place-items: center;
    color: var(--green);
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.ss-content-brief__body {
    min-width: 0;
}

.ss-content-brief__num {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.25rem;
}

.ss-content-brief__num::before {
    content: "Q" counter(ss-brief-counter, decimal-leading-zero);
}

.ss-content-brief__question {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.3rem;
    line-height: 1.35;
}

.ss-content-brief__helper {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.ss-content-brief__footer {
    padding: 1rem 1.35rem;
    background: color-mix(in srgb, var(--color-card-bg) 55%, transparent);
    border-top: 1px solid var(--color-card-border);
    font-size: 0.92rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

@media (max-width: 640px) {
    .ss-content-brief {
        margin-top: 1.5rem;
        border-radius: 0;
    }
    .ss-content-brief__header {
        padding: 0.75rem 1rem;
    }
    .ss-content-brief__item {
        padding: 0.95rem 1rem;
        grid-template-columns: 1.9rem 1fr;
        gap: 0.75rem;
    }
    .ss-content-brief__mark {
        width: 1.45rem;
        height: 1.45rem;
        font-size: 0.78rem;
    }
    .ss-content-brief__question {
        font-size: 1rem;
    }
    .ss-content-brief__helper {
        font-size: 0.9rem;
    }
    .ss-content-brief__footer {
        padding: 0.9rem 1rem;
        font-size: 0.88rem;
    }
}

/* ==========================================================================
   Motion Graphics — ss-motion-anatomy
   Horizontal 3-phase timing diagram (Entrance / Hold / Exit) with real
   CSS animation-timing-function vocabulary. Conceptual diagram —
   the timings are canonical motion-design values, not fabricated measurement.
   Proportional column widths (6fr / 8fr / 4fr) express real duration ratios.
   ========================================================================== */

.ss-motion-anatomy {
    margin-top: 2rem;
}

.ss-motion-anatomy__bar {
    display: grid;
    grid-template-columns: 6fr 8fr 4fr;
    gap: 0.5rem;
    position: relative;
    padding-bottom: 2.75rem;
}

.ss-motion-anatomy__phase {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    min-height: 100%;
}

.ss-motion-anatomy__phase--hold {
    background: color-mix(in srgb, var(--color-card-bg) 70%, var(--color-surface-alt) 30%);
}

.ss-motion-anatomy__phase--entrance {
    border-color: color-mix(in srgb, var(--green) 45%, var(--color-card-border));
}

.ss-motion-anatomy__phase-label {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-text);
    margin: 0;
}

.ss-motion-anatomy__phase-timing {
    font-family: var(--font-mono, monospace);
    font-size: 0.83rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}

.ss-motion-anatomy__phase-desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.ss-motion-anatomy__tick {
    position: absolute;
    top: 100%;
    margin-top: 0.85rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    left: 0;
    transform: translateX(-50%);
}

.ss-motion-anatomy__tick::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 0.6rem;
    background: var(--color-card-border);
}

.ss-motion-anatomy__tick--right {
    left: auto;
    right: 0;
    transform: translateX(50%);
}

@media (max-width: 760px) {
    .ss-motion-anatomy__bar {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-bottom: 0;
    }
    .ss-motion-anatomy__tick {
        display: none;
    }
    .ss-motion-anatomy__phase {
        padding: 1rem;
    }
}

/* ==========================================================================
   Domain Registration — ss-domain-lifecycle
   5-phase horizontal lifecycle diagram showing what happens to a domain from
   registration through release. Stage names follow ICANN's Expired
   Registration Recovery Policy (Grace Period, Redemption). Conceptual
   illustration — no day counts, no fabricated measurement. The $150
   restoration callout is a real verified number (see project_site_facts).
   Colour shifts green → amber → red → grey to map the risk ladder.
   ========================================================================== */

.ss-domain-lifecycle {
    margin-top: 2.5rem;
}

.ss-domain-lifecycle__track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    align-items: stretch;
}

.ss-domain-lifecycle__phase {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 1.1rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
}

.ss-domain-lifecycle__phase-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
    flex-shrink: 0;
}

.ss-domain-lifecycle__phase--active .ss-domain-lifecycle__phase-dot {
    background: color-mix(in srgb, var(--green) 72%, var(--color-text));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

.ss-domain-lifecycle__phase--grace .ss-domain-lifecycle__phase-dot {
    background: var(--warn-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, #d7a10a 22%, transparent);
}

.ss-domain-lifecycle__phase--redemption {
    border-color: color-mix(in srgb, #c54848 55%, var(--color-card-border));
    background: color-mix(in srgb, #c54848 6%, var(--color-card-bg));
}

.ss-domain-lifecycle__phase--redemption .ss-domain-lifecycle__phase-dot {
    background: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, #c54848 22%, transparent);
}

.ss-domain-lifecycle__phase--dropped .ss-domain-lifecycle__phase-dot {
    background: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-muted) 20%, transparent);
}

.ss-domain-lifecycle__phase-label {
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--danger-text);
    margin: 0;
    line-height: 1.3;
}

.ss-domain-lifecycle__phase--redemption .ss-domain-lifecycle__phase-label {
    color: var(--danger-text);
}

.ss-domain-lifecycle__phase-cost {
    font-family: var(--font-mono, monospace);
    font-size: 0.95rem;
    color: var(--danger-text);
    font-weight: var(--fw-semibold);
    margin: 0;
    line-height: 1.2;
}

.ss-domain-lifecycle__phase-desc {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.ss-domain-lifecycle__footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .ss-domain-lifecycle__track {
        grid-template-columns: repeat(2, 1fr);
    }
    .ss-domain-lifecycle__phase {
        padding: 1rem;
    }
}

@media (max-width: 520px) {
    .ss-domain-lifecycle__track {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Web Applications — ss-app-schema
   Two-panel showcase: a real-feeling table schema (left) paired with the
   matching endpoint surface (right). Pulse-themed (service_checks) so it
   threads back to the existing terminal section. Verb pills colour-coded:
   POST=green, GET=blue, PATCH=amber. Conceptual — the panel illustrates
   the vocabulary of custom-app construction (schema, FK arrows, HTTP
   verbs, paths) rather than leaking a real production schema. Pure CSS.
   On mobile: panels stack and the connector arrow rotates ↓.
   ========================================================================== */

.ss-app-schema {
    margin-top: 2.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.4rem;
    align-items: stretch;
}

.ss-app-schema__panel {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 1.4rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ss-app-schema__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px dashed var(--color-card-border);
}

.ss-app-schema__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-text-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-muted) 18%, transparent);
    flex-shrink: 0;
}

.ss-app-schema__dot--green {
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

.ss-app-schema__name {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: var(--fw-mono-medium);
}

.ss-app-schema__kind {
    margin-left: auto;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-family: var(--font-mono, monospace);
}

.ss-app-schema__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ss-app-schema__row {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(4.5rem, auto) 1fr;
    gap: 0.85rem;
    align-items: baseline;
    font-family: var(--font-mono, monospace);
    font-size: 0.86rem;
    line-height: 1.45;
    padding: 0.5rem 0;
}

.ss-app-schema__row:not(:last-of-type) {
    border-bottom: 1px solid color-mix(in srgb, var(--color-card-border) 60%, transparent);
}

.ss-app-schema__col--name {
    color: var(--color-text);
    font-weight: var(--fw-mono-medium);
}

.ss-app-schema__col--type {
    color: var(--color-accent-blue);
    font-size: 0.8rem;
}

.ss-app-schema__col--meta {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.ss-app-schema__row--endpoint {
    grid-template-columns: 4rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.ss-app-schema__verb {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: var(--fw-mono-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 0.28rem 0.4rem;
    border-radius: 0.28rem;
    line-height: 1;
    justify-self: stretch;
}

.ss-app-schema__verb--get {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    color: var(--color-accent-blue);
    border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
}

.ss-app-schema__verb--post {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    color: var(--color-accent-text);
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
}

.ss-app-schema__verb--patch {
    background: color-mix(in srgb, #d7a10a 18%, transparent);
    color: var(--warn-deep);
    border: 1px solid color-mix(in srgb, #d7a10a 45%, transparent);
}

.ss-app-schema__path {
    color: var(--color-text);
    font-size: 0.86rem;
    word-break: break-all;
}

.ss-app-schema__arrow {
    align-self: center;
    color: var(--color-text-muted);
    font-size: 1.6rem;
    line-height: 1;
    user-select: none;
    font-family: var(--font-mono, monospace);
}

.ss-app-schema__footer {
    margin-top: 1.4rem;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 820px) {
    .ss-app-schema {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ss-app-schema__arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}

@media (max-width: 520px) {
    .ss-app-schema__row {
        grid-template-columns: minmax(6rem, auto) auto 1fr;
        gap: 0.6rem;
    }
    .ss-app-schema__row--endpoint {
        grid-template-columns: 3.5rem 1fr;
        grid-template-rows: auto auto;
        gap: 0.35rem 0.65rem;
    }
    .ss-app-schema__row--endpoint .ss-app-schema__col--meta {
        grid-column: 1 / -1;
        font-size: 0.74rem;
    }
}

/* Honeypot — visually offscreen but technically focusable; bots fill it,
   humans don't see it. Submission rejected if non-empty. */
.c-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.c-form__fieldset {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.c-form__legend {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-text);
    margin: 0 0 0.25rem;
    padding: 0;
    display: block;
}

/* Question labels (a <span> heading a radio/checkbox group) read as the same
   series of prompts as the <label>s on real inputs, which .c-form label styles. */
.c-form__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Checkbox / radio option chip groups.
   Chip text-size lifted to 0.95rem to read closer to the 1rem inputs above
   (was 0.92rem, felt visibly smaller than the input text). */
.c-form__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.55rem;
    margin-top: 0.3rem;
}

.c-form__option {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--color-card-border);
    border-radius: var(--r);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.c-form__option:hover {
    border-color: color-mix(in srgb, var(--green) 55%, var(--color-card-border));
    background: color-mix(in srgb, var(--green) 5%, var(--color-card-bg));
}

.c-form__option input[type="checkbox"],
.c-form__option input[type="radio"] {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--green);
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.c-form__option:has(input:checked) {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 14%, var(--color-card-bg));
}

.c-form__option:has(input:focus-visible) {
    outline: 2px solid color-mix(in srgb, var(--green) 60%, transparent);
    outline-offset: 2px;
}

/* Disclosure toggle ("More to help us prep · optional").
   Hides everything past the primary visible question so the form reads
   as low-friction (one optional radio + name/email/notes) by default.
   Native <details>/<summary> — no JS. */
.c-form__details {
    border-top: 1px dashed var(--color-card-border);
    padding-top: 1.25rem;
    margin-top: 0.25rem;
}

.c-form__details-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--color-card-border);
    border-radius: var(--r);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}

.c-form__details-summary::-webkit-details-marker { display: none; }
.c-form__details-summary::marker { content: ''; }

.c-form__details-summary:hover {
    border-color: color-mix(in srgb, var(--green) 45%, var(--color-card-border));
    background: color-mix(in srgb, var(--green) 5%, var(--color-card-bg));
}

.c-form__details-summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--green) 60%, transparent);
    outline-offset: 2px;
}

.c-form__details-meta {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-mono);
    margin-left: 0.1rem;
}

.c-form__details-icon {
    transition: transform var(--t);
    color: var(--color-text-muted);
    margin-left: 0.15rem;
    font-size: 0.8rem;
}

.c-form__details[open] .c-form__details-icon {
    transform: rotate(180deg);
}

.c-form__details-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.4rem;
    padding-left: 0.15rem;
}

.c-form__required {
    color: var(--color-text-muted);
    margin-left: 0.15rem;
}

/* Only flag invalid AFTER the user interacts. The old :invalid:not(:placeholder-shown)
   painted empty required fields that have no placeholder (Name, Email) red on load —
   which is exactly why the service forms had red boxes and /contact never did. */
.c-form--lead input:user-invalid {
    border-color: color-mix(in srgb, #d44848 55%, var(--color-border-subtle));
}


.c-form__fineprint {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

.c-form__fineprint a {
    color: var(--color-text);
}

/* Error message — shown above the actions if submit fails before the JS
   gives up and falls through to native submit */
.c-form__error {
    background: color-mix(in srgb, #d44848 12%, var(--color-card-bg));
    border: 1px solid color-mix(in srgb, #d44848 55%, var(--color-card-border));
    border-radius: var(--r);
    padding: 0.85rem 1rem;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0;
}

.c-form__error[hidden] { display: none; }

/* Submitting state */
.c-form--lead.is-submitting {
    opacity: 0.6;
    pointer-events: none;
}

.c-form--lead.is-submitting .c-form__actions button {
    cursor: progress;
}

/* Success panel — lives outside the form so we can hide the form and
   reveal this in its place. Sits in the same container so the visual
   weight of the band is preserved. */
.c-form-success {
    width: 100%;
    max-width: 560px;
    margin: 2rem auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1.5rem;
    background: color-mix(in srgb, var(--green) 8%, var(--color-card-bg));
    border: 1px solid color-mix(in srgb, var(--green) 35%, var(--color-card-border));
    border-radius: 0;
}

.c-form-success[hidden] { display: none; }

.c-form-success__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--green);
    color: var(--ink-on-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.c-form-success__title {
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    font-weight: var(--fw-semibold);
    margin: 0;
    line-height: var(--lh-tight);
    color: var(--color-text);
}

.c-form-success__body {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.55;
}

.c-form-success__body a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--green) 60%, transparent);
    text-underline-offset: 0.18em;
}

@media (max-width: 640px) {
    .c-form--lead {
        gap: 1.5rem;
        margin-top: 1.25rem;
    }
    .c-form__fieldset {
        gap: 1.25rem;
    }
    .c-form__option {
        font-size: 0.88rem;
        padding: 0.5rem 0.85rem;
    }
    .c-form-success {
        padding: 2rem 1.25rem;
    }
}

/* ============================================================================
   Service-form closing section — SAME components as the /contact page.
   Reuses c-contact-page-grid for the two columns (1fr 1.3fr, gap 3rem) and
   c-contact-form-card for the right-hand form card (paper-plane "Send us a
   message" header + body). LEFT column is plain-text intro (ss-form-intro__*).
   The c-form renders --bare inside the card so there's no card-in-card.
   Closing band sits on the page background (not a lighter band). /contact and
   /about are untouched (contact's grid holds c-form; /about has no form).
   ============================================================================ */

/* Closing band sits on the page bg like /contact — no lighter full-bleed band. */
.l-section-band:has(.c-form--lead) {
    background: var(--color-bg);
    border-top: 0;
    border-bottom: 0;
}

/* The service form is tall, so stick the SHORT left intro instead of the form.
   (The /contact page sticks its form because there the form is the short side.)
   Scoped to grids that hold a c-form, so /contact is unaffected. */
@media (min-width: 900px) {
    .l-section-band .c-contact-page-grid .c-contact-page-grid__form {
        position: static;
        top: auto;
    }
    .l-section-band .c-contact-page-grid .c-contact-page-grid__details {
        position: sticky;
        top: 6rem;
    }
}

.l-section-band .c-contact-page-grid .c-contact-page-grid__details {
    gap: 1rem;
}

/* LEFT column — plain-text intro text. */
.ss-form-intro__headline {
    margin: 0;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.ss-form-intro__lead {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.ss-form-intro__altlink {
    margin: 0.25rem 0 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* RIGHT column — the service form sits BARE inside c-contact-form-card; the card
   chrome (surface, border, header bar) comes from c-contact-form-card itself. */
/* Lead forms (the ones that POST to /form-submit) sit inside c-contact-form-card,
   which supplies the surface and the header bar. The modifier only opens up the
   spacing between fieldsets; everything else is plain .c-form. */
.c-form--lead {
    gap: 1.5rem;
}

.c-contact-form-card__body .c-form-success {
    max-width: 100%;
    margin: 0;
}


/* ============================================================================
   Home page — ss-home-* sections (built fresh 2026-04-30, against the
   reference screenshot at .claude/Screenshot 2026-04-28...Agrici Daniel.png).
   Bold typography is the visual when no photo exists. No SVG illustrations
   as primary visuals. No accent strips on top edges of rounded cards.
   ============================================================================ */

/* ========== ss-home-hero ========== */

.ss-home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-bg);
    text-align: center;
}

.ss-home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
}

/* ── The hero frame ─────────────────────────────────────────────────────────
   A hairline rule inset from the hero's edges, with heavier accent brackets at
   the corners — the registration marks of a technical drawing.

   Five generated backdrops were tried and rejected here (120px grid, contour
   field x2, rack elevation, flow field). The note that landed was to FRAME the
   section rather than clip a shape out of the middle of a full-bleed field.
   Nothing is drawn in the centre because nothing is put there — which is not
   the same as masking it out, and does not read the same.

   Everything is drawn with borders, so it is crisp at any DPR, costs no asset,
   and follows the theme. Corner arm length is one variable. */
.ss-home-hero__frame {
    --frame-inset: clamp(1.25rem, 2.6vw, 2.75rem);
    --arm: clamp(28px, 4vw, 56px);

    position: absolute;
    inset: var(--frame-inset);
    z-index: 0;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

.ss-home-hero__corner {
    position: absolute;
    width: var(--arm);
    height: var(--arm);
    /* 2px, and in accent — the brackets are the part that should read. The
       hairline is the quiet half of the pair. */
    border: 2px solid var(--accent-text);
    opacity: 0.75;
    transition: opacity var(--t-fast);
}

/* Each bracket keeps only the two edges that meet at its corner, and sits
   slightly OUTSIDE the hairline so the two lines read as separate marks rather
   than a thickened border. */
.ss-home-hero__corner--tl {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.ss-home-hero__corner--tr {
    top: -1px;
    right: -1px;
    border-left: 0;
    border-bottom: 0;
}

.ss-home-hero__corner--bl {
    bottom: -1px;
    left: -1px;
    border-right: 0;
    border-top: 0;
}

.ss-home-hero__corner--br {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}

/* The cursor lights the brackets. Same idea as the footer wordmark — the thing
   already on screen brightens, rather than a new glow being drawn on top. */
.ss-home-hero.is-active .ss-home-hero__corner {
    opacity: 1;
}

@media (max-width: 760px) {
    .ss-home-hero__frame {
        --arm: 26px;
    }
}

/* ── The pattern inside the frame ────────────────────────────────────────────
   The SAME diagonal hatch the lighter section grounds use — the one treatment
   here that has actually landed — laid inside the frame so the hero is patterned
   rather than empty. Reusing it is the point: the hero should not have a private
   motif nobody else on the site speaks.

   Five generated fields were tried as full-bleed backdrops (120px grid, contour
   field x2, rack elevation, flow field) and a cursor crosshair was tried inside
   the frame; all were turned down. Nothing here is clipped or masked — the
   pattern simply fills the framed area, and the frame is what holds it. */
.ss-home-hero__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--tex-hatch);
    background-size: 6px 6px;
    background-repeat: repeat;
    opacity: 0.85;
    transition: opacity var(--t-fast);
}

/* Hover lifts the pattern and the brackets together — one quiet step, no
   moving parts. A cursor-tracked crosshair was tried here and was rightly
   rejected: it drew hairlines straight across the headline (measured 2.13:1
   over the title) and read as a targeting reticle, not as craft. */
.ss-home-hero.is-active .ss-home-hero__frame::before {
    opacity: 1;
}

/* The warm-palette A/B (body.palette-warm) lived here and was retired with
   /home-alt on 2026-08-05 — it was an explicitly throwaway comparison and
   its own comment said so. ~70 lines, incl. the last two component
   gradients outside the keeper set. Moved, not deleted:
   /d1/wpdev/_retired-assets/silverservers-demo-2026-08-05/ */

.ss-home-hero__eyebrow {
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    /* Theme-aware: the hero art is light-grey in light theme, dark teal-sage in
       dark. Raw --green (#1b944b) is same-hue as the dark art → unreadable. The
       accent token flips dark-green (light) / light-green (dark) for contrast. */
    color: var(--color-accent-text);
}

.ss-home-hero__title {
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: var(--fw-extrabold);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.ss-home-hero__line {
    display: block;
}

.ss-home-hero__line--accent {
    color: var(--green);
}

.ss-home-hero__lead {
    max-width: 44ch;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
}

.ss-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

.ss-home-hero__cta {
    padding: 1rem 1.75rem;
    font-size: 1rem;
}

.ss-home-hero__link {
    position: relative;
    font-size: 1rem;
    color: var(--color-text);
}

/* Expand the hero secondary link to a 44px tap target without shifting the
   underline or the flex row (mobile audit 2026-06-03). */
.ss-home-hero__link::before {
    content: "";
    position: absolute;
    inset: -0.7rem -0.25rem;
}

/* ========== ss-home-trust (proof-points band — sits between hero and services) ========== */

.ss-home-trust {
    padding-block: clamp(2.5rem, 4vw, 3.5rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-band-bg);
    border-block: 1px solid var(--color-card-border);
}

.ss-home-trust__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
    .ss-home-trust__inner {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

.ss-home-trust__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
}

.ss-home-trust__value {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--green);
}

.ss-home-trust__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* ========== ss-home-services ========== */

.ss-home-services {
    padding-block: clamp(4rem, 7vw, 6rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-bg);
}

.ss-home-services__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.ss-home-services__head {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
    max-width: 720px;
}

.ss-home-services__eyebrow {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-home-services__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-home-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (min-width: 900px) {
    .ss-home-services__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

.ss-home-services__col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .ss-home-services__col {
        gap: 1.5rem;
    }
}

/* Equal-height cards ONLY when the two columns sit side-by-side (≥900px) and must
   visually align (2 featured @50% each, 3 support @~33% each, both columns the same
   grid height). On mobile the columns stack one card per row, so cards MUST size to
   content — otherwise flex:1 compresses the tallest card and `overflow:hidden` clips
   its "See …" CTA (this was slicing "See social →" in half at 320px). */
@media (min-width: 900px) {
    .ss-home-services__col--featured .ss-home-services__card { flex: 1; }
    .ss-home-services__col--support  .ss-home-services__card { flex: 1; }
}

/* EMBOSSED PLATE. These cards sit on the solid page ground, where there is
   nothing behind them worth showing through — so they are a machined panel
   rather than a pane: a bright bevel top-left, a dark one bottom-right, a light
   raking across the face, and the dark card weave as the material's grain.

   The face light is a gradient with an opaque stop, so it does not pass
   colour/no-gradients on that rule's own test. It is marked at the call site
   rather than reshaped, because it is a LIGHT MODEL — remove the dark end and
   the plate stops being lit from a direction, which is the whole treatment. */
.ss-home-services__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--plate-face), var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-top-color: var(--plate-edge);
    border-radius: 0;
    box-shadow: var(--plate-bevel);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    transition:
        transform var(--t),
        background var(--t-fast),
        border-color var(--t-fast),
        box-shadow var(--t-fast);
}

/* ⚠ NO GRAIN LAYER ON THE PLATE. A weave pseudo-element here lies OVER both
   bevels and flattens the 3D read. Paint order is the reason and it is not
   fixable by restacking: an inset box-shadow paints above the element's
   background but BELOW positioned children, so any pseudo covering the card —
   at any z-index that keeps it visible — covers the bevel too. The plate's
   material is its light model; the weave belongs on surfaces without one. */

.ss-home-services__card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--green);
    transform: translateY(-50%);
    transition: height var(--t-slow);
    border-radius: 0 var(--r) var(--r) 0;
}

.ss-home-services__card:hover,
.ss-home-services__card:focus-visible {
    transform: translateY(-2px);
    /* --surface-card-hover, not --color-surface-alt. The card rests on
       --color-card-bg; before the cutover that was rgba(16,48,59,0.15) against
       an alt of #06232f, so the step was visible. Both legacy names now alias
       the same Midnight value (#161c25), which left this rule transitioning the
       fill to the colour it already had — the lift and the accent bar still
       fired, so nothing looked broken, but a quarter of the interaction was
       gone. --surface-card-hover (#1d2530) exists for exactly this step.
       Found by audit_dead_hover.py; no screenshot shows it. */
    /* the plate's light model has to be restated: this is the `background:`
       shorthand, so naming only a colour would drop the raking light and the
       card would go flat under the cursor */
    background: var(--plate-face-hover), var(--surface-card-hover);
    border-color: color-mix(in srgb, var(--green) 35%, var(--color-card-border));
    border-top-color: var(--plate-edge);
    box-shadow: var(--plate-bevel-hover);
}

.ss-home-services__card:hover::before,
.ss-home-services__card:focus-visible::before {
    height: 60%;
}

.ss-home-services__card-eyebrow {
    margin: 0 0 1rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-home-services__card-title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: var(--fw-extrabold);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.ss-home-services__card-title--medium {
    font-size: clamp(1.65rem, 2.8vw, 2.15rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.ss-home-services__card-title--small {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
}

.ss-home-services__card-accent {
    color: var(--green);
}

.ss-home-services__card-body {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    flex: 1;
}

.ss-home-services__card-body--tight {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.ss-home-services__card-link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-text);
}

/* ========== ss-home-articles ========== */

.ss-home-articles {
    padding-block: clamp(4rem, 7vw, 6rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-surface);
}

.ss-home-articles__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.ss-home-articles__head {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.ss-home-articles__eyebrow {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-home-articles__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-home-articles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    grid-auto-rows: 1fr;
}

@media (min-width: 700px) {
    .ss-home-articles__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .ss-home-articles__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* NOT GLASS — tried and rejected, for two reasons both worth keeping written
   down. (1) The card is mostly THUMBNAIL, so the translucent area is a narrow
   strip under an image that dominates the card anyway. (2) The accent washes on
   this band sat in its corners while the cards sit in the middle, so the pane
   was showing through nothing — and glass over a flat ground is just a lighter
   fill, which is this project's own stated rule.

   Opaque, with the dark card weave for material. No bevel: an inset highlight
   paints UNDER content, so on an image-topped card the top-left bevel would be
   hidden behind the thumbnail while the bottom-right one showed — lit from
   nowhere. */
.ss-home-articles__card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    overflow: hidden;
    transition:
        transform var(--t),
        border-color var(--t-fast);
}

.ss-home-articles__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--tex-hatch-card);
    background-size: 4px 4px;
    background-repeat: repeat;
}

.ss-home-articles__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--green) 35%, var(--color-card-border));
}

.ss-home-articles__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-post-thumb-bg);
}

.ss-home-articles__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t);
}

.ss-home-articles__card:hover .ss-home-articles__media img {
    transform: scale(1.04);
}

.ss-home-articles__body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ss-home-articles__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ss-home-articles__category {
    color: var(--color-accent-text);
}

.ss-home-articles__date {
    color: var(--color-text-muted);
}

.ss-home-articles__card-title {
    margin: 0 0 0.85rem;
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ss-home-articles__card-title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--t-fast);
}

.ss-home-articles__card:hover .ss-home-articles__card-title a {
    color: var(--green);
}

.ss-home-articles__excerpt {
    margin: 0;
    font-size: 0.95rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-home-articles__more {
    margin-top: clamp(2rem, 4vw, 3rem);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* "Read more articles →" was a 19px-tall tap target — expand the hit area to
   ~44px without moving the centered underline (mobile audit 2026-06-03). */
.ss-home-articles__more a {
    position: relative;
    display: inline-block;
}
.ss-home-articles__more a::before {
    content: "";
    position: absolute;
    inset: -0.8rem -0.5rem;
}

/* ========== ss-home-story ========== */

.ss-home-story {
    padding-block: clamp(5rem, 9vw, 8rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-bg);
}

.ss-home-story__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

@media (min-width: 900px) {
    .ss-home-story__inner {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
    /* Keep the big "Since 1997 / Kamloops" display in view alongside the long points list
       so the left column no longer reads as dead space. */
    .ss-home-story__display {
        position: sticky;
        top: clamp(2rem, 14vh, 9rem);
        align-self: start;
    }
}

.ss-home-story__display {
    display: flex;
    flex-direction: column;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--color-text);
    font-weight: var(--fw-extrabold);
}

.ss-home-story__display-line {
    font-size: clamp(2.75rem, 6vw, 4.25rem);
}

.ss-home-story__display-year {
    font-size: clamp(4.5rem, 12vw, 8rem);
    color: var(--green);
    line-height: 0.85;
    font-weight: var(--fw-black);
}

.ss-home-story__body {
    max-width: 60ch;
}

.ss-home-story__eyebrow {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-home-story__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-home-story__lead {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.ss-home-story__lead--muted {
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}

.ss-home-story__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ss-home-story__point {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    align-items: baseline;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-card-border);
}

.ss-home-story__points > .ss-home-story__point:first-child {
    padding-top: 0;
    border-top: 0;
}

.ss-home-story__point-num {
    font-size: 1rem;
    font-weight: var(--fw-mono-bold);
    letter-spacing: 0.1em;
    color: var(--color-accent-text);
}

.ss-home-story__point-body {
    min-width: 0;
}

.ss-home-story__point-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    line-height: 1.25;
}

.ss-home-story__point-text {
    margin: 0;
    font-size: 0.975rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
}

/* ========== ss-home-faq ========== */

.ss-home-faq {
    padding-block: clamp(4rem, 7vw, 6rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-surface);
}

.ss-home-faq__inner {
    max-width: 920px;
    margin: 0 auto;
}

.ss-home-faq__head {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.ss-home-faq__eyebrow {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-home-faq__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-home-faq__list {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    padding: 0.5rem clamp(1.25rem, 2.5vw, 2rem);
}

.ss-home-faq__row {
    border-bottom: 1px solid var(--color-card-border);
}

.ss-home-faq__row:last-child {
    border-bottom: 0;
}

.ss-home-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    line-height: 1.35;
    transition: color var(--t-fast);
}

.ss-home-faq__q::-webkit-details-marker {
    display: none;
}

/* --accent-text, not --green. Raw --green as TEXT measures 4.23:1 on the glass
   panel and 4.39:1 on the opaque panel it replaced — below AA in BOTH, so this
   was a latent defect, not one the glass introduced (byte-identical to git
   HEAD). audit_hover_contrast cannot see it: it scores hover BACKGROUNDS
   against the colour in effect, and this rule changes the FOREGROUND while the
   ground stays put. Caught by measuring rendered pixels under the text. */
.ss-home-faq__q:hover {
    color: var(--accent-text);
}

.ss-home-faq__chevron {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-card-border);
    position: relative;
    transition:
        transform var(--t),
        border-color var(--t-fast),
        background var(--t-fast);
}

.ss-home-faq__q:hover .ss-home-faq__chevron {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 14%, transparent);
}

.ss-home-faq__chevron::before,
.ss-home-faq__chevron::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.55rem;
    height: 1.5px;
    background: currentColor;
    transform-origin: center;
}

.ss-home-faq__chevron::before {
    transform: translate(-75%, -50%) rotate(45deg);
}

.ss-home-faq__chevron::after {
    transform: translate(-25%, -50%) rotate(-45deg);
}

.ss-home-faq__row[open] .ss-home-faq__chevron {
    transform: rotate(180deg);
    border-color: var(--green);
    color: var(--green);
}

.ss-home-faq__a {
    padding: 0 0 1.5rem;
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

.ss-home-faq__a p {
    margin: 0;
    color: var(--color-text-muted);
}

.ss-home-faq__row[open] .ss-home-faq__a {
    animation: ss-home-faq-fade 0.3s ease both;
}

@keyframes ss-home-faq-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========== ss-home-closing ========== */

.ss-home-closing {
    padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background: var(--color-bg);
    text-align: center;
}

.ss-home-closing__inner {
    max-width: 900px;
    margin: 0 auto;
}

.ss-home-closing__title {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    /* Floor lowered 2.75rem→2.5rem (matches the hero) so "No platform fees."
       stops orphaning its last word at 320px (mobile audit 2026-06-03). */
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: var(--fw-extrabold);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.ss-home-closing__line {
    display: block;
}

.ss-home-closing__line--accent {
    color: var(--green);
}

.ss-home-closing__sub {
    margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}

.ss-home-closing__action {
    display: flex;
    justify-content: center;
}

.ss-home-closing__cta {
    padding: 1rem 1.85rem;
    font-size: 1rem;
}

/* ============================================================================
   About page — ss-about-* sections (built 2026-04-30 from scratch, not bolt-on).
   Distinctive move: diagonal narrative timeline (story). Other sections are
   hero, voices (real testimonials), team grid, closing. Brand --green token
   used directly throughout (not --color-accent-text indirection).
   ============================================================================ */

/* ========== ss-about-hero (Big sentence — typography at scale, no chassis) ====
   Single full-width statement using the page width. No card, no masthead,
   no metadata strip, no body paragraph. Two accent words inline. The
   timeline starts immediately below.

   Prior attempts archived for possible reuse:
     includes/about/_archive/record-card.php       (whois card)
     includes/about/_archive/magazine-masthead.php (Vol/Nº cover)
     includes/about/_archive/team-letter.php       (correspondence)
   ================================================================= */

.ss-about-hero {
    padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3rem, 5vw, 4.5rem);
}

.ss-about-hero__statement {
    margin: 0;
    /* Restore the bigger typography. Constrain text width via max-width
       (in characters) so wrap happens cleanly instead of orphaning a
       single word like "1997." on its own line. */
    max-width: 22ch;
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 6vw, 4.75rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.ss-about-hero__accent {
    color: var(--green);
}

/* ========== ss-about-story (diagonal narrative timeline — distinctive move) ========== */

.ss-about-story {
    padding-block: clamp(4rem, 7vw, 6rem);
    scroll-margin-top: 120px;
}

.ss-about-story__head {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
    max-width: 720px;
}

.ss-about-story__eyebrow {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-about-story__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-about-story__timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Mobile: rail at left, all milestones full-width */
.ss-about-story__timeline::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    width: 1px;
    background: var(--color-card-border);
}

.ss-about-story__milestone {
    position: relative;
    padding: 0 0 2.5rem 2.5rem;
}

.ss-about-story__milestone:last-child {
    padding-bottom: 0;
}

.ss-about-story__dot {
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--green);
    background: var(--color-surface);
    box-sizing: border-box;
}

.ss-about-story__milestone--latest .ss-about-story__dot {
    background: var(--green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent);
}

.ss-about-story__year {
    display: block;
    font-size: 0.95rem;
    color: var(--color-accent-text);
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
}

.ss-about-story__milestone-title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.ss-about-story__milestone-body {
    margin: 0;
    max-width: 60ch;
    font-size: 0.975rem;
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
}

/* Desktop ≥880px: alternating zig-zag with central rail */
@media (min-width: 880px) {
    .ss-about-story__timeline::before {
        left: 50%;
        transform: translateX(-0.5px);
    }

    .ss-about-story__milestone {
        width: calc(50% - 1.5rem);
        padding: 0 0 3rem;
    }

    .ss-about-story__milestone:last-child {
        padding-bottom: 0;
    }

    .ss-about-story__milestone:nth-child(odd) {
        margin-right: auto;
        text-align: right;
    }

    .ss-about-story__milestone:nth-child(even) {
        margin-left: auto;
        text-align: left;
    }

    /* Dots align to the central rail at 50% of timeline width */
    .ss-about-story__milestone:nth-child(odd) .ss-about-story__dot {
        left: auto;
        right: -2rem;
    }

    .ss-about-story__milestone:nth-child(even) .ss-about-story__dot {
        left: -2rem;
    }

    .ss-about-story__milestone-body {
        max-width: none;
    }
}

/* ========== ss-about-voices (real customer testimonials) ========== */

.ss-about-voices {
    padding-block: clamp(4rem, 7vw, 6rem);
}

.ss-about-voices__head {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
    max-width: 720px;
}

.ss-about-voices__eyebrow {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-about-voices__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-about-voices__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 800px) {
    .ss-about-voices__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.ss-about-voices__card {
    margin: 0;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.ss-about-voices__mark {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4rem, 7vw, 6rem);
    line-height: 0.7;
    color: var(--green);
    margin-bottom: 0.5rem;
    user-select: none;
}

.ss-about-voices__quote {
    margin: 0 0 1.5rem;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.6;
    color: var(--color-text);
    font-style: italic;
    flex: 1;
}

.ss-about-voices__attrib {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: auto;
}

.ss-about-voices__name {
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.ss-about-voices__org {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-text);
}

/* ========== ss-about-team (designed grid, supporting section) ========== */

.ss-about-team {
    padding-block: clamp(4rem, 7vw, 6rem);
    scroll-margin-top: 120px;
}

.ss-about-team__head {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
    max-width: 720px;
}

.ss-about-team__eyebrow {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-about-team__title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-about-team__lead {
    margin: 0;
    max-width: 60ch;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
}

.ss-about-team__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 600px) {
    .ss-about-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .ss-about-team__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .ss-about-team__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

.ss-about-team__item {
    margin: 0;
    display: flex; /* let the card stretch to the row's tallest, so a 2-line role doesn't break the grid */
}

.ss-about-team__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--t),
        border-color var(--t-fast);
}

.ss-about-team__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--green) 40%, var(--color-card-border));
}

.ss-about-team__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-post-thumb-bg);
}

.ss-about-team__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t);
}

.ss-about-team__card:hover .ss-about-team__media img {
    transform: scale(1.04);
}

.ss-about-team__body {
    display: block;
    padding: 1.15rem 1.35rem 1.4rem;
}

.ss-about-team__role {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-text);
    margin-bottom: 0.4rem;
}

.ss-about-team__name {
    display: block;
    font-size: 1.05rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--color-text);
    transition: color var(--t-fast);
}

.ss-about-team__card:hover .ss-about-team__name {
    color: var(--green);
}

/* ========== ss-about-closing (single H2 + sub + c-mega-cta, NO form) ========== */

.ss-about-closing {
    padding-block: clamp(5rem, 9vw, 8rem);
    text-align: center;
}

.ss-about-closing__eyebrow {
    margin: 0 0 1rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent-text);
}

.ss-about-closing__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

.ss-about-closing__sub {
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    max-width: 50ch;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
}

.ss-about-closing__action {
    display: flex;
    justify-content: center;
}
/* ==========================================================================
   Typographic balance — no single-word orphan lines on display titles,
   diagram captions, and hero/CTA leads. Chromium 114+, Safari 17.4+,
   Firefox 121+. Browsers cap balancing at ~6 lines, so longer card
   bodies aren't worth listing here.
   ========================================================================== */
.c-hero-title,
.c-text-intro__heading,
.c-text-section__heading,
.c-card-grid__title,
.c-mega-cta__headline,
.c-action-hero__title,
.c-service-hero__title,
.ss-fullstack-section__title,
.ss-home-hero__title,
.ss-home-services__title,
.ss-home-articles__title,
.ss-home-story__title,
.ss-home-faq__title,
.ss-home-closing__title,
.ss-about-hero__title,
.ss-about-story__title,
.ss-about-voices__title,
.ss-about-team__title,
.ss-about-closing__title,
.c-media-block__caption,
.ss-search-stack__caption,
.ss-hosting-stack__caption,
.ss-integration-map__caption,
.ss-deliverability-check__caption,
.c-text-intro__lead,
.c-service-hero__lead,
.c-action-hero__lead,
.c-mega-cta__lead,
.ss-home-hero__lead,
.ss-home-story__lead,
.ss-about-team__lead {
    text-wrap: balance;
}

/* ========== ss-portfolio (gallery-style contact sheet → lightbox) ========== */
.ss-portfolio__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

@media (min-width: 520px)  { .ss-portfolio__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px)  { .ss-portfolio__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .ss-portfolio__grid { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; } }
@media (min-width: 1280px) { .ss-portfolio__grid { grid-template-columns: repeat(6, 1fr); } }

.ss-portfolio__item { margin: 0; }

/* Tile = a small browser-window thumbnail; click opens the full screenshot. */
.ss-portfolio__tile {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-post-thumb-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--r);
    transition: transform var(--t), border-color var(--t-fast);
}

.ss-portfolio__tile:hover,
.ss-portfolio__tile:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--green) 50%, var(--color-card-border));
    outline: none;
}

.ss-portfolio__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Name overlay — appears on hover/focus (the lightbox carries it on touch). */
.ss-portfolio__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.45rem 0.5rem 0.4rem;
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: var(--fw-semibold);
    color: var(--ink-on-strong);
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));   /* lint-ok — scroll/edge scrim: fades to transparent, not a surface fill */
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity var(--t-fast), transform var(--t);
    pointer-events: none;
}

.ss-portfolio__tile:hover .ss-portfolio__cap,
.ss-portfolio__tile:focus-visible .ss-portfolio__cap {
    opacity: 1;
    transform: none;
}

/* ----- Screenshot viewer (native <dialog>, top layer) -----
   Opened with showModal(), so it escapes every stacking context on the page —
   the previous fixed-position div was nested inside .l-content (position:
   relative + z-index:0), which scoped its z-index:1000 and let the sticky
   header and the footer paint over it. Dialog UA styles (auto margins, a
   max-width/height of calc(100% - 6px - 2em), border, padding) are all reset
   below; the element itself is the full-viewport frame and the panel inside
   it is the visible card. */
.ss-pf-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(0px, 2.5vh, 1.75rem) clamp(0px, 2.5vw, 1.75rem);
    border: 0;
    background: transparent;
    color: var(--color-text);
    overflow: hidden;      /* the panel scrolls, not the dialog */
    overscroll-behavior: contain;
}

.ss-pf-lightbox::backdrop {
    background: rgba(3, 6, 9, 0.86);
}

.ss-pf-lightbox__panel {
    width: 100%;
    height: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--r);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.ss-pf-lightbox__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem 0.6rem 0.95rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-subtle);
}

.ss-pf-lightbox__id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.ss-pf-lightbox__name {
    min-width: 0;
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-pf-lightbox__count {
    flex: none;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
}

.ss-pf-lightbox__tools {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ss-pf-lightbox__navgroup {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ss-pf-lightbox__visit {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.34rem 0.75rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--r);
    white-space: nowrap;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.ss-pf-lightbox__visit:hover { color: var(--green); border-color: var(--green); }
.ss-pf-lightbox__visit i { font-size: 0.85em; margin-left: 0.1rem; }
/* No live URL on this entry (client site is gone) — the screenshot stays,
   the link does not. */
.ss-pf-lightbox__visit[hidden] { display: none; }

.ss-pf-lightbox__nav,
.ss-pf-lightbox__close {
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-muted);
    cursor: pointer;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.ss-pf-lightbox__nav:hover,
.ss-pf-lightbox__close:hover {
    color: var(--color-text);
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.ss-pf-lightbox__close { margin-left: 0.25rem; }

/* Scroll container: the full-page screenshot scrolls top→bottom here. */
.ss-pf-lightbox__scroll {
    flex: 1 1 auto;
    min-height: 0;         /* lets the flex child actually scroll */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: var(--color-post-thumb-bg);
    text-align: center;
}

.ss-pf-lightbox__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    opacity: 1;
    transition: opacity var(--t-fast);
}
/* Full-page screenshots are multi-megabyte PNGs — don't show the previous
   entry's image while the next one downloads. */
.ss-pf-lightbox.is-loading .ss-pf-lightbox__img { opacity: 0; }

.ss-pf-lightbox__loading {
    display: none;
    margin: 0;
    padding: 3rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.ss-pf-lightbox.is-loading .ss-pf-lightbox__loading { display: block; }

@media (max-width: 40rem) {
    .ss-pf-lightbox { padding: 0; }
    .ss-pf-lightbox__panel { border: 0; border-radius: 0; }
    .ss-pf-lightbox__bar { padding: 0.5rem 0.5rem 0.5rem 0.75rem; gap: 0.5rem; }
    .ss-pf-lightbox__name { font-size: 0.85rem; }
    .ss-pf-lightbox__count { display: none; }
    /* Visit shrinks to its icon on a narrow bar — still a real link, just not
       competing with the site name for width. */
    .ss-pf-lightbox__visit { padding: 0.34rem 0.55rem; font-size: 0; }
    .ss-pf-lightbox__visit i { font-size: 0.95rem; margin: 0; }
}

/* ==========================================================================
   ss-404-term
   Playful mock server response on the 404 page (audit: "too bland, add
   something fun"). A faux `curl -I` of the path the visitor actually requested,
   returning a real 404 with a Kamloops in-joke. Themes via tokens; the cursor
   blink is motion-guarded.
   ========================================================================== */
.ss-404-term {
    max-width: 30rem;
    margin: 1.75rem 0 2rem;
    font-family: var(--font-mono);
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45);
}

.ss-404-term__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.ss-404-term__dot {
    width: 0.7rem;
    height: 0.7rem;
    /* --r-full: genuinely circular, which the radius role rule exempts. Using
       the token rather than a literal 999px also means a future "kill the pills"
       sweep cannot flatten it by accident — the same protection the quote
       button's --radius-pill already gives it. */
    border-radius: var(--r-full);
    background: var(--color-text-muted);
    opacity: 0.45;
}
.ss-404-term__dot:nth-child(1) { background: #d44848; opacity: 0.8; }   /* lint-ok — terminal traffic-light dots, same depiction as the browser chrome */
.ss-404-term__dot:nth-child(2) { background: var(--yellow); opacity: 0.8; }
.ss-404-term__dot:nth-child(3) { background: var(--green); opacity: 0.8; }

.ss-404-term__name {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.ss-404-term__body {
    margin: 0;
    padding: 1rem 1.1rem 1.15rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.ss-404-term__muted { color: var(--color-text-muted); }
.ss-404-term__bad   { color: var(--danger-text); font-weight: 600; }
.ss-404-term__ok    { color: var(--accent-text); font-weight: 600; }

.ss-404-term__cursor {
    display: inline-block;
    width: 0.55rem;
    height: 1.05em;
    margin-left: 0.15rem;
    vertical-align: text-bottom;
    background: var(--green);
    animation: ss-404-blink 1.1s steps(1) infinite;
}

@keyframes ss-404-blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-404-term__cursor { animation: none; }
}


/* ==========================================================================
   Section-ground weave
   ==========================================================================
   The diagonal hairline, on the lighter-toned section grounds only — the bands
   and the home sections that sit on --color-surface / --color-band-bg.

   Sections on the page ground (--color-bg: .ss-home-services, .ss-home-story,
   .ss-home-closing) stay bare on purpose, so a textured band still reads as a
   change of surface rather than the whole page becoming one woven field.

   Cards get nothing, and nothing moves on hover. Both were tried and both were
   wrong: a diagonal at card size reads as stripes ON the object, and a
   background that shifts under the cursor is the attention-grabbing behaviour
   this is meant to avoid.

   Set as a LATER rule that touches only background-image, because these
   families fill themselves with the `background:` shorthand, which would
   otherwise reset it to none. */
.l-section-band,
.l-prefooter,
.ss-home-trust,
.ss-home-articles,
.ss-home-faq {
    background-image: var(--tex-hatch);
    background-size: 6px 6px;
    background-repeat: repeat;
}