/* ==========================================================
   TAPPHIRE
   Public Website — Main Stylesheet

   File:
   css/style.css

   Purpose:
   - Approved global design tokens
   - Reset and base styles
   - Accessibility foundation
   - Typography
   - Global layout
   - Buttons and links
   - Global header
   - Homepage/shared structural sections
   - Cards and workflow structures
   - Trust surfaces
   - Final CTA
   - Global footer

   Component-specific styles:
   css/components.css

   Responsive overrides:
   css/responsive.css

   Important:
   Do not place page-specific responsive media queries here.
========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
========================================================== */

:root {

    /* ------------------------------------------------------
       Brand
    ------------------------------------------------------ */

    --brand-blue: #0f52ba;
    --brand-blue-dark: #0b3f91;
    --brand-blue-deep: #082f6f;
    --brand-blue-light: #eaf2ff;
    --brand-blue-soft: #f5f8ff;


    /* ------------------------------------------------------
       Neutral colours
    ------------------------------------------------------ */

    --color-white: #ffffff;
    --color-black: #111111;

    --color-text-primary: #111111;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;

    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;

    --color-surface: #f7f8fa;
    --color-surface-blue: #f5f8ff;

    --color-footer: #0b1220;
    --color-footer-text: #d1d5db;


    /* ------------------------------------------------------
       Status / interaction
    ------------------------------------------------------ */

    --color-focus: #0f52ba;

    --color-selection-background: #dce9ff;
    --color-selection-text: #111111;


    /* ------------------------------------------------------
       Typography
    ------------------------------------------------------ */

    --font-primary:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* ------------------------------------------------------
       Layout
    ------------------------------------------------------ */

    --container-width: 1240px;
    --container-padding: 28px;

    --content-width: 760px;
    --content-wide: 900px;

    --header-height: 76px;


    /* ------------------------------------------------------
       Spacing
    ------------------------------------------------------ */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 120px;
    --space-14: 144px;


    /* ------------------------------------------------------
       Radius
    ------------------------------------------------------ */

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 20px;


    /* ------------------------------------------------------
       Shadows

       Deliberately restrained.
    ------------------------------------------------------ */

    --shadow-small:
        0 1px 2px rgba(17, 24, 39, 0.04);

    --shadow-card:
        0 12px 32px rgba(17, 24, 39, 0.06);


    /* ------------------------------------------------------
       Transitions
    ------------------------------------------------------ */

    --transition-fast: 160ms ease;
    --transition-base: 220ms ease;


    /* ------------------------------------------------------
       Shared component compatibility aliases

       components.css and legal page components may use these
       shorter semantic names. Keep these aliases so we have
       one source of truth rather than duplicated colours.
    ------------------------------------------------------ */

    --white: var(--color-white);

    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);

    --border: var(--color-border);
    --border-strong: var(--color-border-strong);

    --surface: var(--color-surface);
    --surface-blue: var(--color-surface-blue);
}


/* ==========================================================
   2. RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    background: var(--color-white);
    color: var(--color-text-primary);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: 1.65;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


img,
picture,
svg,
canvas,
video {
    display: block;

    max-width: 100%;
}


img,
video {
    height: auto;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


button:disabled {
    cursor: not-allowed;
}


ul,
ol {
    margin: 0;
    padding: 0;
}


p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}


a {
    color: inherit;
    text-decoration: none;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}


fieldset {
    min-width: 0;
}


::selection {
    background: var(--color-selection-background);
    color: var(--color-selection-text);
}


/* ==========================================================
   3. ACCESSIBILITY
========================================================== */

.skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: 9999;

    padding: 12px 18px;

    background: var(--color-black);
    color: var(--color-white);

    border-radius: var(--radius-small);

    font-size: 14px;
    font-weight: var(--font-weight-semibold);

    transform: translateY(-160%);

    transition: transform var(--transition-fast);
}


.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
}


/* Prevent focus styles from being visually clipped
   by common interactive cards and controls. */

button,
a,
input,
textarea,
select {
    scroll-margin-top: calc(var(--header-height) + 24px);
}


/* ==========================================================
   4. GLOBAL LAYOUT
========================================================== */

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}


main {
    display: block;
}


.section {
    position: relative;

    padding-block: var(--space-13);
}


.section-surface {
    background: var(--color-surface);
}


.content-narrow {
    width: min(100%, var(--content-width));

    margin-inline: auto;
}


.section-heading {
    width: min(100%, var(--content-width));

    margin-bottom: var(--space-10);
}


.section-heading-wide {
    width: min(100%, var(--content-wide));

    margin-inline: auto;
    margin-bottom: var(--space-9);

    text-align: center;
}


.section-heading > p:last-child,
.section-heading-wide > p:last-child {
    margin-bottom: 0;
}


.section-action {
    display: flex;

    justify-content: center;

    margin-top: var(--space-10);
}


/* ==========================================================
   5. TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);

    overflow-wrap: break-word;
}


h1,
h2,
h3 {
    font-weight: var(--font-weight-semibold);

    letter-spacing: -0.035em;

    text-wrap: balance;
}


h1 {
    margin-bottom: var(--space-6);

    font-size: clamp(3.4rem, 6.1vw, 6.5rem);

    line-height: 0.98;
}


h2 {
    margin-bottom: var(--space-6);

    font-size: clamp(2.25rem, 4vw, 4.35rem);

    line-height: 1.05;
}


h3 {
    margin-bottom: var(--space-4);

    font-size: 1.35rem;

    line-height: 1.25;
}


h4 {
    margin-bottom: var(--space-3);

    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);

    line-height: 1.35;
}


p {
    margin-bottom: var(--space-5);

    color: var(--color-text-secondary);

    font-size: 1.05rem;

    overflow-wrap: break-word;
}


strong {
    font-weight: var(--font-weight-semibold);
}


.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: var(--space-6);

    color: var(--brand-blue);

    font-size: 0.78rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;

    line-height: 1.3;

    text-transform: uppercase;
}


.eyebrow::before {
    content: "";

    width: 24px;
    height: 1px;

    flex-shrink: 0;

    background: var(--brand-blue);
}


/* ==========================================================
   6. BUTTONS
========================================================== */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 13px 22px;

    background: transparent;

    border: 1px solid transparent;

    border-radius: var(--radius-small);

    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);

    line-height: 1.2;

    text-align: center;

    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-fast);
}


.button-primary {
    background: var(--brand-blue);

    border-color: var(--brand-blue);

    color: var(--color-white);
}


.button-secondary {
    background: var(--color-white);

    border-color: var(--color-border-strong);

    color: var(--color-text-primary);
}


.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.6;

    pointer-events: none;
}


.text-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: var(--brand-blue);

    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);

    transition:
        color var(--transition-fast),
        gap var(--transition-fast);
}


/* Hover effects are deliberately scoped to devices
   that actually support hover. */

@media (hover: hover) and (pointer: fine) {

    .button:hover {
        transform: translateY(-1px);
    }


    .button-primary:hover {
        background: var(--brand-blue-dark);

        border-color: var(--brand-blue-dark);
    }


    .button-secondary:hover {
        border-color: var(--brand-blue);

        color: var(--brand-blue);
    }


    .text-link:hover {
        gap: 12px;

        color: var(--brand-blue-dark);
    }

}


.button:active {
    transform: translateY(0);
}


/* ==========================================================
   7. GLOBAL HEADER
========================================================== */

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid var(--color-border);
}


.header-container {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: var(--header-height);
}


.brand {
    flex-shrink: 0;

    color: var(--color-text-primary);

    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.09em;

    transition: color var(--transition-fast);
}


.primary-navigation {
    display: flex;

    align-items: center;

    gap: var(--space-8);
}


.nav-list {
    display: flex;

    align-items: center;

    gap: 30px;

    list-style: none;
}


.nav-list a {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 44px;

    color: #374151;

    font-size: 0.92rem;
    font-weight: var(--font-weight-medium);

    transition: color var(--transition-fast);
}


.nav-list a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 5px;
    left: 0;

    height: 1px;

    background: var(--brand-blue);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform var(--transition-base);
}


.header-cta {
    min-height: 44px;

    padding-inline: 18px;
}


.mobile-menu-button {
    display: none;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    padding: 12px;

    background: transparent;

    border: 0;

    border-radius: var(--radius-small);
}


.menu-line {
    display: block;

    width: 100%;
    height: 2px;

    margin-block: 5px;

    background: var(--color-text-primary);

    transition:
        transform var(--transition-base),
        opacity var(--transition-base);
}


@media (hover: hover) and (pointer: fine) {

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


    .nav-list a:hover {
        color: var(--brand-blue);
    }


    .nav-list a:hover::after {
        transform: scaleX(1);

        transform-origin: left;
    }

}


/* ==========================================================
   8. HERO
========================================================== */

.hero-section {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(88px, 10vw, 150px)
        clamp(100px, 11vw, 170px);

    background: var(--color-white);

    border-bottom: 1px solid var(--color-border);
}


.hero-container {
    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(420px, 0.94fr);

    align-items: center;

    gap: clamp(60px, 8vw, 110px);
}


.hero-content {
    max-width: 720px;

    min-width: 0;
}


.hero-description {
    max-width: 690px;

    margin-bottom: var(--space-5);

    color: var(--color-text-secondary);

    font-size: clamp(1.08rem, 1.4vw, 1.28rem);

    line-height: 1.7;
}


.hero-supporting-text {
    max-width: 650px;

    margin-bottom: var(--space-8);

    color: var(--color-text-muted);

    font-size: 1rem;
}


.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-4);
}


/* ==========================================================
   9. HERO ARCHITECTURE
========================================================== */

.hero-architecture {
    position: relative;

    min-width: 0;

    padding: clamp(30px, 4vw, 52px);

    background: var(--color-surface-blue);

    border: 1px solid #dbe7fa;

    border-radius: var(--radius-large);
}


.architecture-label {
    margin-bottom: var(--space-8);

    color: var(--color-text-muted);

    font-size: 0.76rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.architecture-system {
    display: flex;

    flex-direction: column;

    align-items: center;
}


.architecture-node {
    width: min(100%, 320px);

    padding: 22px 24px;

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-small);
}


.architecture-node strong {
    display: block;

    color: var(--color-text-primary);

    font-size: 1rem;
    font-weight: var(--font-weight-semibold);

    line-height: 1.4;
}


.architecture-number {
    display: block;

    margin-bottom: 10px;

    color: var(--brand-blue);

    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;
}


.architecture-connector {
    position: relative;

    width: 1px;
    height: 40px;

    background: #b9c8df;
}


.architecture-connector::after {
    content: "";

    position: absolute;

    bottom: -1px;
    left: 50%;

    width: 7px;
    height: 7px;

    border-right: 1px solid var(--brand-blue);
    border-bottom: 1px solid var(--brand-blue);

    transform:
        translateX(-50%)
        rotate(45deg);
}


.architecture-core {
    display: flex;

    width: min(100%, 380px);

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 135px;

    padding: 28px;

    background: var(--brand-blue);

    border: 1px solid var(--brand-blue);

    border-radius: var(--radius-medium);

    color: var(--color-white);

    text-align: center;
}


.architecture-core-brand {
    margin-bottom: 8px;

    font-size: 0.82rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;
}


.architecture-core-text {
    max-width: 220px;

    margin: 0;

    color: var(--color-white);

    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);

    line-height: 1.25;
}


.architecture-bottom {
    display: grid;

    width: 100%;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-4);
}


.architecture-bottom .architecture-node {
    width: 100%;
}


/* ==========================================================
   10. INTRO / MOVEMENT PROBLEM
========================================================== */

.section-intro {
    background: var(--color-white);
}


.section-intro .content-narrow > p {
    font-size: 1.08rem;
}


.statement-block {
    margin-top: var(--space-8);

    padding: var(--space-7);

    background: var(--color-surface-blue);

    border-left: 3px solid var(--brand-blue);

    border-radius:
        0
        var(--radius-medium)
        var(--radius-medium)
        0;
}


.statement-block p {
    margin: 0;

    color: var(--color-text-primary);

    font-size: 1.07rem;
    font-weight: var(--font-weight-medium);
}


/* ==========================================================
   11. CARD GRIDS
========================================================== */

.card-grid {
    display: grid;

    gap: var(--space-5);
}


.card-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.card-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


.feature-card,
.access-card,
.trust-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-medium);

    transition:
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}


.feature-card {
    min-height: 310px;

    padding: var(--space-7);
}


.access-card {
    min-height: 245px;

    padding: var(--space-7);
}


.trust-card {
    min-height: 210px;

    padding: var(--space-7);
}


.feature-card p,
.access-card p,
.trust-card p {
    font-size: 0.98rem;
}


.card-number {
    margin-bottom: var(--space-8);

    color: var(--brand-blue);

    font-size: 0.76rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;
}


@media (hover: hover) and (pointer: fine) {

    .feature-card:hover,
    .access-card:hover,
    .trust-card:hover {
        border-color: #c8d6eb;

        transform: translateY(-3px);

        box-shadow: var(--shadow-card);
    }

}


/* ==========================================================
   12. AUDIENCE SECTIONS
========================================================== */

.audience-section {
    overflow: hidden;
}


.split-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: clamp(70px, 9vw, 130px);
}


.split-layout-reverse .split-content {
    order: 2;
}


.split-layout-reverse .split-panel {
    order: 1;
}


.split-content {
    max-width: 620px;

    min-width: 0;
}


.split-content p:not(.eyebrow) {
    margin-bottom: var(--space-8);

    font-size: 1.08rem;
}


.split-panel {
    min-width: 0;

    padding: clamp(32px, 4vw, 52px);

    background: var(--color-surface-blue);

    border: 1px solid #dce6f5;

    border-radius: var(--radius-large);
}


.check-list {
    display: grid;

    gap: var(--space-5);

    list-style: none;
}


.check-list li {
    position: relative;

    padding-left: 34px;

    color: #374151;

    font-size: 1rem;

    line-height: 1.6;
}


.check-list li::before {
    content: "✓";

    position: absolute;

    top: 1px;
    left: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    background: var(--color-white);

    border: 1px solid #bfd0e8;

    border-radius: 50%;

    color: var(--brand-blue);

    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
}


/* ==========================================================
   13. PLATFORM WORKFLOW
========================================================== */

.platform-section {
    background: var(--color-white);
}


.workflow {
    position: relative;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);

    list-style: none;
}


.workflow-item {
    position: relative;

    min-width: 0;
    min-height: 280px;

    padding: var(--space-8);

    background: var(--color-white);

    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}


.workflow-number {
    display: inline-flex;

    margin-bottom: var(--space-8);

    color: var(--brand-blue);

    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;
}


.workflow-content h3 {
    max-width: 280px;
}


.workflow-content p {
    margin-bottom: 0;

    font-size: 0.96rem;
}


/* ==========================================================
   14. TRUST
========================================================== */

.trust-section {
    background: var(--color-footer);

    color: var(--color-white);
}


.trust-section h2,
.trust-section h3 {
    color: var(--color-white);
}


.trust-section .eyebrow {
    color: #8db7f3;
}


.trust-section .eyebrow::before {
    background: #8db7f3;
}


.trust-section .section-heading > p:not(.eyebrow),
.trust-section .section-heading-wide > p:not(.eyebrow) {
    color: #b8c1ce;
}


.trust-grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: var(--space-4);
}


.trust-section .trust-card {
    background: #111c2d;

    border-color: #273449;
}


.trust-section .trust-card h3 {
    color: var(--color-white);
}


.trust-section .trust-card p {
    margin-bottom: 0;

    color: #b8c1ce;
}


.trust-section .button-secondary {
    background: transparent;

    border-color: #53667f;

    color: var(--color-white);
}


@media (hover: hover) and (pointer: fine) {

    .trust-section .trust-card:hover {
        border-color: #405a7c;

        box-shadow: none;
    }


    .trust-section .button-secondary:hover {
        border-color: var(--color-white);

        color: var(--color-white);
    }

}


/* ==========================================================
   15. ACCESS
========================================================== */

.access-section {
    border-bottom: 1px solid var(--color-border);
}


/* ==========================================================
   16. FINAL CTA
========================================================== */

.final-cta {
    padding-block: var(--space-13);

    background: var(--color-white);
}


.final-cta-container {
    position: relative;
}


.final-cta-content {
    width: min(100%, 940px);

    margin-inline: auto;

    padding:
        clamp(46px, 6vw, 80px)
        clamp(30px, 6vw, 80px);

    background: var(--color-surface-blue);

    border: 1px solid #d8e5f7;

    border-radius: var(--radius-large);

    text-align: center;
}


.final-cta-content .eyebrow {
    justify-content: center;
}


.final-cta-content .eyebrow::before {
    display: none;
}


.final-cta-content h2 {
    max-width: 780px;

    margin-inline: auto;
}


.final-cta-content > p:not(.eyebrow) {
    max-width: 720px;

    margin-right: auto;
    margin-bottom: var(--space-8);
    margin-left: auto;

    font-size: 1.08rem;
}


.final-cta-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: var(--space-4);
}


/* ==========================================================
   17. GLOBAL FOOTER
========================================================== */

.site-footer {
    padding-top: var(--space-11);

    background: var(--color-footer);

    color: var(--color-footer-text);
}


.footer-main {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.25fr)
        minmax(0, 2.75fr);

    gap: clamp(70px, 8vw, 120px);

    padding-bottom: var(--space-10);
}


.footer-brand {
    max-width: 390px;
}


.footer-logo {
    display: inline-block;

    margin-bottom: var(--space-5);

    color: var(--color-white);

    font-size: 1.28rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.1em;

    transition: color var(--transition-fast);
}


.footer-tagline {
    margin-bottom: var(--space-4);

    color: var(--color-white);

    font-size: 1.08rem;
    font-weight: var(--font-weight-medium);

    line-height: 1.5;
}


.footer-description {
    margin-bottom: 0;

    color: #9ca8b8;

    font-size: 0.92rem;

    line-height: 1.75;
}


.footer-navigation {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: var(--space-6);
}


.footer-column {
    min-width: 0;
}


.footer-heading {
    margin-bottom: var(--space-5);

    color: #8fa0b6;

    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.11em;

    line-height: 1.4;

    text-transform: uppercase;
}


.footer-column ul {
    display: grid;

    gap: 12px;

    list-style: none;
}


.footer-column a {
    color: #c4ccd8;

    font-size: 0.9rem;

    line-height: 1.45;

    overflow-wrap: anywhere;

    transition: color var(--transition-fast);
}


.footer-bottom {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-8);

    padding-block: var(--space-6);

    border-top: 1px solid #253246;
}


.footer-bottom p {
    max-width: 670px;

    margin: 0;

    color: #7f8b9c;

    font-size: 0.8rem;

    line-height: 1.6;
}


@media (hover: hover) and (pointer: fine) {

    .footer-logo:hover {
        color: #9fc2f7;
    }


    .footer-column a:hover {
        color: var(--color-white);
    }

}


/* ==========================================================
   18. LINK / INTERACTION DETAILS
========================================================== */

main a:not(.button):not(.text-link) {
    text-underline-offset: 3px;
}


.site-footer a:focus-visible,
.site-header a:focus-visible {
    outline-color: #8db7f3;
}


/* ==========================================================
   19. SCROLL TARGET SUPPORT
========================================================== */

[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}


/* Avoid applying scroll offset to the page root. */

html[id],
body[id] {
    scroll-margin-top: 0;
}


/* ==========================================================
   20. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/* ==========================================================
   21. FORCED COLOURS / HIGH CONTRAST SUPPORT
========================================================== */

@media (forced-colors: active) {

    .button,
    .architecture-node,
    .architecture-core,
    .feature-card,
    .access-card,
    .trust-card,
    .split-panel,
    .final-cta-content {
        border: 1px solid CanvasText;
    }


    .button-primary {
        forced-color-adjust: auto;
    }


    .eyebrow::before,
    .architecture-connector {
        background: CanvasText;
    }

}