:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --border-subtle: #eaeaea;
    --text-primary: #111111;
    --text-secondary: #666666;
    --cta-bg: #111111;
    --cta-hover: #333333;
    --cta-text: #ffffff;
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --max-w-content: 1100px;
}

html {
    overflow-y: scroll;
    overscroll-behavior-y: none;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Base */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.2;
    margin-top: 0;
    font-weight: 600;
}

p {
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--text-secondary);
}

/* Scroll targets: clear the sticky header when following an anchor link or
   URL hash — the replacement for the old .anchor relative-top div hack.
   Honored by both native hash navigation and scrollIntoView. Header is
   ~4.6rem; 5.75rem adds breathing room. All anchor ids now live directly on
   their sections (index.html) */
[id] {
    scroll-margin-top: 5.75rem;
}

/* Header */
.site-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: var(--max-w-content);
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.header-nav ul {
    display: flex;
    align-items: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: 2rem;
}

.header-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.header-nav a:hover {
    color: var(--text-primary);
}

.cta-button {
    background-color: var(--cta-bg);
    color: var(--cta-text);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--font-body);
    transition: background-color 0.2s, transform 0.1s;
}

.cta-button:hover {
    background-color: var(--cta-hover);
}

.cta-button:active {
    transform: scale(0.98);
}

/* Layout */
.main {
    max-width: var(--max-w-content);
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section
   Centered 40rem column; the title/subtitle lockup is left-aligned inside
   it, everything else (CTAs, note, trust bar) centered. The hero fills the
   first viewport below the sticky header and centers its content
   structurally (flex) instead of relying on top padding, which is why the
   old 10rem/4rem asymmetric padding is gone. 4.6rem below is the header's
   measured height (2x 1rem padding + content + border); revisit it if the
   header's height ever changes. 100svh is the URL-bar-safe small viewport
   height on mobile; the vh line is the fallback cascade. */
.hero {
    text-align: center;
    max-width: 40rem;
    min-height: calc(100vh - 4.6rem);
    min-height: calc(100svh - 4.6rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Asymmetric bottom padding for optical centering: dead-center in a
       filled viewport reads as "floating low"; small heroes belong in the
       upper third. The 9rem biases the lockup ~3rem above true center —
       raise the bottom padding to bias higher */
    /* padding: 3rem 1rem 9rem; */
    /* Vertical padding deliberately left unset: with the viewport-fill
       min-height, any top padding compounds into visible top space (see
       session notes 2026-10-05). Only horizontal spacing is wanted */
    padding-left: 1rem;
    padding-right: 1rem;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* Quiet h1 (index hero): semantically the h1, visually a quiet statement.
   Hierarchy carried by weight and color instead of size; overrides the
   display rule above when index.html's .hero-title-quiet class is present */
.hero h1.hero-title-quiet {
    font-size: 1.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
    text-align: center;
}

/* Left-aligned title/subtitle lockup: the two share a hard left edge while
   the surrounding column stays centered */
.hero-subtitle {
    text-align: center;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.hero-cta-button {
    background-color: var(--cta-bg);
    color: var(--cta-text);
    border: none;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s, transform 0.1s;
}

.hero-cta-button:hover {
    background-color: var(--cta-hover);
}

.hero-cta-button:active {
    transform: scale(0.98);
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.hero-secondary-cta {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    padding: 1rem 2.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: var(--font-body);
    transition: background-color 0.2s, border-color 0.2s;
    text-decoration: none;
}

.hero-secondary-cta:hover {
    background-color: var(--bg-secondary);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.hero-note {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Trust Bar */
.trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #888;
    padding: 0 1.25rem;
    position: relative;
}

.trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: var(--border-subtle);
}

.trust-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .trust-item {
        padding: 0 0.9rem;
        font-size: 0.75rem;
    }

    .trust-item svg {
        width: 12px;
        height: 12px;
    }
}

/* Steps Tracking / Stepper */
.stepper-section {
    margin: 6rem 0;
    padding: 3rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
}

.stepper-header {
    text-align: center;
    margin-bottom: 3rem;
}

.stepper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: left;
}

.step-card {
    position: relative;
}

.step-number {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 1rem;
    font-weight: 600;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.step-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Features Section - Grid & Bento */
.section-title {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    margin: 5rem 0 3rem 0;
    color: var(--text-primary);
    text-align: center;
}


.coming-soon-tag {
    font-size: 0.75rem;
    background-color: var(--border-subtle);
    color: var(--text-primary);
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 0.5rem;
    font-weight: 600;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Contact / Content Wrapper */
.content-wrapper {
    text-align: center;
    padding: 6rem 1rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: 5rem;
}


/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .header-nav {
        display: none;
    }

    .stepper-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .site-header {
        padding: 1rem;
    }

    .info-section {
        padding: 2rem;
        margin: 0 1rem;
    }
}

/* Pricing Layout */
.pricing-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: var(--max-w-content);
    margin: 0 auto 4rem auto;
    padding: 0 2rem;
    align-items: center;
}

.pricing-content h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.pricing-content p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.pricing-features svg {
    width: 18px;
    height: 18px;
    color: #555;
    flex-shrink: 0;
}

/* Pricing Cards */
.pricing-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.p-card {
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.p-card.light {
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.p-card.dark {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333;
}

.p-card-badge {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.p-card h3 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.p-card.dark h3 {
    color: #ffffff;
}

.p-card-desc {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

.p-card.dark .p-card-desc {
    color: #aaa;
}

.p-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
}

.p-card-price {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    color: #666;
}

.p-card.dark .p-card-price {
    color: #aaa;
}

.p-card-price strong {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.p-card.dark .p-card-price strong {
    color: #ffffff;
}

.p-card-subprice {
    font-size: 0.8rem;
    text-decoration: underline;
    text-decoration-color: #ccc;
}

.p-card-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.p-card-btn.light-btn {
    background: #ffffff;
    color: var(--text-primary);
    border-color: #ddd;
}

.p-card-btn.light-btn:hover {
    border-color: #999;
    background: #fafafa;
}

.p-card-btn.dark-btn {
    background: #ffffff;
    color: #000000;
}

.p-card-btn.dark-btn:hover {
    background: #e0e0e0;
}

/* Responsive */
@media (max-width: 850px) {
    .pricing-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0 1.5rem;
    }
}

/* Infrastructure Layout */
.infrastructure-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: start;
    max-width: var(--max-w-content);
    margin: 8rem auto 8rem auto;
    padding: 0 2rem;
}

.infrastructure-header {
    flex: 1 1 300px;
}

.infrastructure-header h2 {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.1;
}

.infrastructure-text {
    flex: 1 1 400px;
}

.infrastructure-text p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.infrastructure-text p:last-child {
    margin: 0;
}

/* Philosophy Variant */
.principle {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2rem;
}

.principle-header {
    flex: unset;
}

.principle-header h2 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0;
}

.principle-header h2 em {
    font-style: italic;
}

.kicker {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 1rem 0;
}

.principle-text {
    max-width: 680px;
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 850px) {
    .infrastructure-layout {
        gap: 0;
        margin: 10rem auto 10rem auto;
    }

    .principle {
        gap: 2.5rem;
        margin: 12rem auto;
    }

    .principle-header h2 {
        font-size: 3rem;
    }

    .infrastructure-header {
        padding-right: 3rem;
    }

    .infrastructure-text {
        border-left: 1px solid var(--border-subtle);
        padding-left: 3rem;
    }
}

/* Ledger Layout (Produktoverblik) */
.ledger-section {
    max-width: var(--max-w-content);
    margin: 8rem auto;
    padding: 0 2rem;
}

.ledger-header {
    margin-bottom: 2rem;
    font-size: 2.2rem;
    font-weight: 600;
}

.ledger-row {
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.ledger-row:first-of-type {
    border-top: 1px solid var(--border-subtle);
}

.ledger-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    gap: 1rem;
}

.ledger-desc {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 85%;
    font-size: 1.15rem;
}

.ledger-chip {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.chip-basis {
    background: transparent;
    border: 1px solid #777;
    color: #777;
}

.chip-plus {
    background: #e0e0e0;
    color: #000;
    border: 1px solid #e0e0e0;
}

.chip-pro {
    background: #111;
    color: #fff;
    border: 1px solid #111;
}

@media (max-width: 768px) {
    .ledger-desc {
        max-width: 100%;
    }

    .ledger-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Story Layout */
.story-section {
    max-width: var(--max-w-content);
    margin: 4rem auto;
    padding: 0 2rem;
}

.story-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    margin: 10rem 0;
}

.story-row.reverse {
    flex-wrap: wrap-reverse;
}

.story-text {
    flex: 1 1 400px;
}

.story-title-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.story-title-wrapper h2 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.story-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.story-bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.story-bullet-list li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #555;
}

.story-bullet-list li span {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.story-visual {
    flex: 1 1 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.04;
    /* The "ghost" effect */
}

.story-visual svg {
    width: 160px;
    height: 160px;
}

@media (max-width: 768px) {
    .story-row {
        margin: 8rem 0;
        gap: 3rem;
    }

    .story-title-wrapper h2 {
        font-size: 2.2rem;
    }

    .story-title-wrapper {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .story-bullet-list li span {
        font-size: 1.15rem;
    }

    .story-visual svg {
        width: 150px;
        height: 150px;
    }
}

/* Sources (Kilder) Grid */
.sources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.source-card {
    background-color: transparent;
    border: 1px dashed var(--border-subtle);
    padding: 3rem;
    display: flex;
    flex-direction: column;
}

.source-icon {
    margin-bottom: 1.5rem;
}

.source-icon svg {
    width: 24px;
    height: 24px;
    color: var(--text-primary);
}

.source-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.source-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Roadmap Timeline */
.roadmap-timeline {
    position: relative;
    max-width: 100%;
    margin: 4rem 0;
}

.roadmap-scroll-container {
    display: flex;
    overflow-x: auto;
    padding: 2rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.roadmap-scroll-container::-webkit-scrollbar {
    display: none;
}

.roadmap-line-bg {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-subtle);
    z-index: 1;
}

.r-node {
    flex: 0 0 160px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
}

.r-content {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0 1rem;
    box-sizing: border-box;
}

.r-node:nth-child(odd) .r-content {
    bottom: 50%;
    padding-bottom: 2rem;
}

.r-node:nth-child(even) .r-content {
    top: 50%;
    padding-top: 2rem;
}

.r-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--text-primary);
}

.status-done .r-dot {
    background: var(--text-primary);
}

.status-building .r-dot {
    background: var(--bg-primary);
    border-style: solid;
}

.status-building .r-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: var(--text-primary);
    border-radius: 50%;
}

.status-planned .r-dot {
    background: var(--bg-primary);
    border: 2px dashed #bbb;
}

.status-planned .r-content {
    opacity: 0.6;
}

.r-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}

.r-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* Roadmap scroll affordances */
.roadmap-scroll-wrapper {
    position: relative;
}

.roadmap-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 3;
    pointer-events: none;
}

.roadmap-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--bg-primary), transparent);
}

.roadmap-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--bg-primary), transparent);
}

.roadmap-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.25s ease, border-color 0.2s, background-color 0.2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

@media (hover: hover) {
    .roadmap-scroll-wrapper:hover .roadmap-scroll-btn:not(.hidden) {
        opacity: 1;
    }
}

.roadmap-scroll-btn:focus-visible {
    opacity: 1;
}

.roadmap-scroll-btn:hover {
    border-color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.roadmap-scroll-btn.hidden {
    opacity: 0 !important;
    pointer-events: none;
}

.roadmap-scroll-prev {
    left: 0.5rem;
}

.roadmap-scroll-next {
    right: 0.5rem;
}

.roadmap-scroll-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .sources-grid {
        grid-template-columns: 1fr;
    }
}

/* Legal Documents Content */
.legal-document {
    max-width: 768px;
    margin: 8rem auto;
    padding: 0 2rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.legal-document h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.legal-document .last-updated {
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

.legal-document .content-body {
    font-size: 1.05rem;
}

.legal-document h3 {
    margin-top: 2.5rem;
    font-size: 1.25rem;
}

.legal-document h4 {
    margin-top: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.legal-document ul {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.legal-document li {
    margin-bottom: 0.5rem;
}

.legal-document a {
    text-decoration: underline;
}

.legal-alert {
    border-left: 4px solid var(--text-primary);
    background-color: var(--bg-primary);
    padding: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-sm);
}

.legal-alert h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.legal-alert p:last-child {
    margin-bottom: 0;
}
/* =========================================
   CONSOLIDATED UTILITY & SECTION CLASSES
   Extracted from inline styles — 20260522
   ========================================= */

/* Background utilities */
.bg-secondary { background-color: var(--bg-secondary); }
.bg-law { background-color: #F9FAFB; }
.bg-white { background-color: #ffffff; }

/* Spacing utilities */
.spacer-sm { height: 32px; }
.spacer-md { height: 64px; }

/* Typography utilities */
.text-lg { font-size: 1.15rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 2.5rem; }
.font-light { font-weight: 300; }
.font-semibold { font-weight: 600; }
.leading-tight { line-height: 1.1; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.text-secondary { color: var(--text-secondary); }

/* Margin utilities */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1rem { margin-top: 1rem; }
.mb-6rem { margin-bottom: 6rem; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Stepper header text (replaces inline styles) */
.stepper-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stepper-header p {
    color: var(--text-secondary);
    margin: 0;
}

/* Section layout utilities */
.section {
    max-width: var(--max-w-content);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-md {
    max-width: var(--max-w-content);
    margin: 4rem auto;
    padding: 0 2rem;
}

.section-lg {
    max-width: var(--max-w-content);
    margin: 8rem auto;
    padding: 0 2rem;
}

.section-header {
    margin-bottom: 4rem;
}

.section-header-centered {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title-lg {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    line-height: 1.1;
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0;
    line-height: 1.6;
}

.section-subtitle-narrow {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 650px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}

/* Roadmap subtitle (replaces repeated inline styles) */
.r-subtitle {
    font-size: 0.8rem;
    margin: 0.5rem 0 0 0;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Partnership section */
.partnership-section {
    max-width: var(--max-w-content);
    margin: 0 auto 8rem auto;
    padding: 0 2rem;
}

.partnership-box {
    background: transparent;
    border: 1px dashed var(--border-subtle);
    padding: 4rem 2rem;
    text-align: center;
}

.partnership-box .section-title-lg {
    margin-bottom: 1.5rem;
}

/* Button size modifiers */
.hero-cta-button.sm {
    font-size: 0.95rem;
    padding: 0.75rem 2rem;
}

.hero-cta-button.xs {
    font-size: 0.9rem;
    padding: 0.6rem 1.5rem;
}

/* Contact block within about section */
.contact-block {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-subtle);
}

.contact-block p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.contact-block a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Footer (replaces inline styles across all pages) */
.site-footer {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
    margin-top: 4rem;
}

.site-footer p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.footer-links {
    font-size: 0.85rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
}

/* Responsive overrides for new utilities */
@media (max-width: 768px) {
    .partnership-box {
        padding: 3rem 1.5rem;
    }

    .section-title-lg {
        font-size: 2rem;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 1rem;
    }
}