/*
Theme Name: RevApple Theme
Theme URI: https://revapple.com
Author: RevApple
Description: Publisher theme for RevApple, the editorial house behind multiple industrial reference sites.
Version: 2.22.3
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: revapple-theme
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
    --ra-paper:        #fafaf6;
    --ra-paper-soft:   #ffffff;
    --ra-paper-deep:   #ece9dd;
    --ra-ink:          #0c1814;
    --ra-ink-soft:     #2a342e;
    --ra-muted:        #687570;
    --ra-muted-2:      #9aa39e;
    --ra-rule:         #e8e6dc;
    --ra-rule-strong:  #c8c4b6;

    --ra-green:        #1d6b3a;
    --ra-green-deep:   #154d29;
    --ra-green-soft:   #e6efe8;
    --ra-teal:         #1d5670;
    --ra-teal-deep:    #103a4d;
    --ra-teal-soft:    #e4ecf0;
    --ra-paper-cool:   #dde8e2;  /* muted sage-teal, between green-soft and teal-soft */

    --ra-font-display: "Instrument Serif", "Source Serif 4", Georgia, serif;
    --ra-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ra-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --ra-max:          1200px;
    --ra-max-prose:    66ch;
    --ra-radius:       2px;

    --ra-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --ra-dur:          280ms;
    --ra-dur-slow:     520ms;
}

/* ============================================================
   2. Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--ra-paper);
    color: var(--ra-ink);
    font-family: var(--ra-font-sans);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ra-ink);
    font-family: var(--ra-font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.02;
}

h1 { font-size: clamp(2.8rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1rem; font-family: var(--ra-font-sans); font-weight: 500; letter-spacing: 0; }

p { margin: 0; max-width: var(--ra-max-prose); }
p + p { margin-top: 1em; }

a {
    color: var(--ra-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: var(--ra-rule-strong);
    transition: text-decoration-color var(--ra-dur) var(--ra-ease), color var(--ra-dur) var(--ra-ease);
}

a:hover { text-decoration-color: var(--ra-teal); color: var(--ra-teal-deep); }

:focus-visible {
    outline: 2px solid var(--ra-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--ra-green); color: #fff; }

.ra-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ra-ink);
    color: #fff;
    padding: 12px 18px;
    font-weight: 600;
    z-index: 100;
}
.ra-skip:focus { left: 0; }

.ra-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ============================================================
   3. Layout primitives
   ============================================================ */
.ra-wrap {
    width: 100%;
    max-width: var(--ra-max);
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 720px) { .ra-wrap { padding: 0 22px; } }

.ra-section { padding: clamp(96px, 12vw, 176px) 0; }
.ra-section--tight { padding: clamp(64px, 8vw, 112px) 0; }
.ra-rule { border: 0; border-top: 1px solid var(--ra-rule); margin: 0; }
.ra-prose { max-width: var(--ra-max-prose); }

/* ============================================================
   4. Editorial chrome
   ============================================================ */
.ra-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ra-muted);
    font-weight: 400;
}

.ra-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.ra-eyebrow--accent { color: var(--ra-teal-deep); }
.ra-eyebrow--green  { color: var(--ra-green-deep); }

.ra-numeral {
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    color: var(--ra-muted);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.ra-section-head {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 80px);
}

.ra-section-head__lead { display: flex; flex-direction: column; gap: 18px; }
.ra-section-head__copy {
    max-width: 52ch;
    color: var(--ra-muted);
    font-size: 1.08rem;
    line-height: 1.55;
}

@media (max-width: 920px) {
    .ra-section-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 40px; }
}

/* ============================================================
   5. Header & nav
   ============================================================ */
.ra-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background:
        linear-gradient(180deg, rgba(29, 107, 58, 0.04) 0%, rgba(29, 86, 112, 0.04) 100%),
        rgba(250, 250, 246, 0.9);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    transition: box-shadow var(--ra-dur) var(--ra-ease), background var(--ra-dur) var(--ra-ease);
}

.ra-header.is-scrolled {
    background:
        linear-gradient(180deg, rgba(29, 107, 58, 0.06) 0%, rgba(29, 86, 112, 0.06) 100%),
        rgba(250, 250, 246, 0.96);
    box-shadow: 0 4px 18px rgba(13, 27, 20, 0.04);
}

/* Always-on brand stripe at the bottom of the header */
.ra-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--ra-green) 0%,
        var(--ra-green-deep) 35%,
        var(--ra-teal-deep) 65%,
        var(--ra-teal) 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    animation: ra-header-stripe 18s ease-in-out infinite;
    will-change: background-position;
}
@keyframes ra-header-stripe {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .ra-header::after { animation: none; }
}

.ra-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 92px;
    padding: 14px 0;
}

.ra-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ra-ink);
    font-family: var(--ra-font-display);
    font-size: 1.85rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
.ra-brand:hover { color: var(--ra-ink); text-decoration: none; }

/* Brand wordmark in the brand-color gradient */
.ra-brand__word {
    background: linear-gradient(95deg, var(--ra-green-deep) 0%, var(--ra-teal-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ra-teal-deep);
}

.ra-brand__mark {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.ra-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ra-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    text-decoration: none;
    color: var(--ra-ink-soft);
    font-size: 0.93rem;
    font-weight: 500;
    border-radius: var(--ra-radius);
    position: relative;
    transition: color var(--ra-dur) var(--ra-ease);
}

.ra-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 2px;
    background: linear-gradient(90deg, var(--ra-green) 0%, var(--ra-teal) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ra-dur) var(--ra-ease);
}

.ra-nav a:hover { color: var(--ra-teal-deep); }
.ra-nav a:hover::after,
.ra-nav a[aria-current="page"]::after { transform: scaleX(1); }

.ra-nav__cta {
    margin-left: 12px;
}

.ra-nav-toggle {
    display: none;
    appearance: none;
    background: transparent;
    border: 1px solid var(--ra-rule-strong);
    color: var(--ra-ink);
    padding: 10px 14px;
    border-radius: var(--ra-radius);
    font-family: var(--ra-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
}

@media (max-width: 920px) {
    .ra-nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
    .ra-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--ra-paper-soft);
        border-bottom: 1px solid var(--ra-rule);
        padding: 12px 32px 28px;
    }
    .ra-nav.is-open { display: flex; }
    .ra-nav a { padding: 16px 0; border-bottom: 1px solid var(--ra-rule); width: 100%; }
    .ra-nav a::after { display: none; }
    .ra-nav__cta { margin: 16px 0 0; }
}

/* ============================================================
   6. Buttons
   ============================================================ */
.ra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    background: var(--ra-ink);
    color: var(--ra-paper);
    border: 1px solid var(--ra-ink);
    border-radius: var(--ra-radius);
    font-family: var(--ra-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background var(--ra-dur) var(--ra-ease), color var(--ra-dur) var(--ra-ease), transform var(--ra-dur) var(--ra-ease);
}

.ra-btn:hover {
    background: var(--ra-teal-deep);
    border-color: var(--ra-teal-deep);
    color: var(--ra-paper);
    text-decoration: none;
}

.ra-btn .ra-arrow { transition: transform var(--ra-dur) var(--ra-ease); }
.ra-btn:hover .ra-arrow { transform: translateX(4px); }

.ra-btn--ghost {
    background: transparent;
    color: var(--ra-ink);
    border-color: var(--ra-rule-strong);
}
.ra-btn--ghost:hover {
    background: var(--ra-ink);
    color: var(--ra-paper);
    border-color: var(--ra-ink);
}

.ra-btn--green { background: var(--ra-green-deep); border-color: var(--ra-green-deep); color: #fff; font-weight: 600; }
.ra-btn--green:hover { background: var(--ra-ink); border-color: var(--ra-ink); color: #fff; }

.ra-btn--sm { min-height: 40px; padding: 8px 18px; font-size: 0.9rem; font-weight: 600; }

/* Header CTA — uses ink for max legibility on the cream paper header */
.ra-nav__cta.ra-btn {
    background: var(--ra-ink);
    border-color: var(--ra-ink);
    color: #fff;
    font-weight: 600;
}
.ra-nav__cta.ra-btn:hover {
    background: var(--ra-green-deep);
    border-color: var(--ra-green-deep);
    color: #fff;
}

.ra-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ra-ink);
    font-weight: 500;
    font-size: 0.95rem;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    transition: color var(--ra-dur) var(--ra-ease);
}
.ra-link-arrow:hover { color: var(--ra-teal-deep); text-decoration: none; }
.ra-link-arrow .ra-arrow { transition: transform var(--ra-dur) var(--ra-ease); }
.ra-link-arrow:hover .ra-arrow { transform: translateX(4px); }

.ra-arrow { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; }

/* ============================================================
   7. Hero — radically simpler
   ============================================================ */
.ra-hero {
    padding-top: clamp(96px, 12vw, 168px);
    padding-bottom: clamp(72px, 9vw, 128px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    perspective: 1200px;
    perspective-origin: 50% 42%;
    transform-style: preserve-3d;
}

/* Engineering floor grid — tilted into 3D, lines flow toward the viewer */
.ra-hero__floor {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -15%;
    height: 95%;
    z-index: 0;
    transform: rotateX(62deg) translateZ(-80px);
    transform-origin: 50% 100%;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  rgba(29, 86, 112, 0.45) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(29, 107, 58, 0.45) 1px, transparent 1px);
    background-size: 72px 72px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse 70% 95% at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.3) 80%, transparent 96%);
            mask-image: radial-gradient(ellipse 70% 95% at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.3) 80%, transparent 96%);
    animation: ra-grid-flow 11s linear infinite;
    will-change: background-position;
}

/* Engineering ceiling grid — mirrored at the top, slightly slower */
.ra-hero__ceiling {
    position: absolute;
    left: -25%;
    right: -25%;
    top: -15%;
    height: 70%;
    z-index: 0;
    transform: rotateX(-62deg) translateZ(-80px);
    transform-origin: 50% 0%;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  rgba(29, 107, 58, 0.38) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(29, 86, 112, 0.38) 1px, transparent 1px);
    background-size: 72px 72px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse 65% 90% at 50% 0%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 45%, transparent 95%);
            mask-image: radial-gradient(ellipse 65% 90% at 50% 0%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 45%, transparent 95%);
    animation: ra-grid-flow-rev 17s linear infinite;
    will-change: background-position;
}

/* Horizon glow where the floor and ceiling meet the vanishing point */
.ra-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-0.5px);
    background: linear-gradient(90deg, transparent 0%, rgba(29, 107, 58, 0.45) 35%, rgba(29, 86, 112, 0.45) 65%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 50%, black 0%, transparent 80%);
            mask-image: radial-gradient(ellipse 50% 100% at 50% 50%, black 0%, transparent 80%);
    z-index: 0;
    pointer-events: none;
    filter: blur(0.6px);
}

.ra-hero > .ra-wrap { position: relative; z-index: 1; }

@keyframes ra-grid-flow {
    from { background-position: 0 0; }
    to   { background-position: 0 72px; }
}
@keyframes ra-grid-flow-rev {
    from { background-position: 0 72px; }
    to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ra-hero__floor,
    .ra-hero__ceiling { animation: none; }
}

.ra-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(64px, 9vw, 120px);
    color: var(--ra-muted);
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ra-hero__top-right {
    display: flex;
    gap: 24px;
}

.ra-hero__title {
    font-size: clamp(3rem, 8.4vw, 7.2rem);
    line-height: 0.96;
    letter-spacing: -0.028em;
    max-width: 18ch;
    margin-bottom: 36px;
}

/* Headline + brand mark side-by-side */
.ra-hero__masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(28px, 5vw, 80px);
}
.ra-hero__masthead .ra-hero__title {
    margin-bottom: 0;
    flex: 0 1 auto;
}
.ra-hero__mark-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(180px, 24vw, 360px);
    height: clamp(180px, 24vw, 360px);
    isolation: isolate;
}

/* Creative solution: a soft paper-cool radial halo sits BEHIND the logo.
   The logo PNG is transparent and dark-toned, so on a video background it
   would otherwise read as a smudge. The halo gives it cream-colored room
   to live without a hard card edge — looks like the logo is printed on
   diffused light. */
.ra-hero__mark-wrap::before {
    content: "";
    position: absolute;
    inset: -8%;
    background: radial-gradient(
        circle at center,
        rgba(255, 252, 240, 0.92) 0%,
        rgba(232, 240, 230, 0.78) 22%,
        rgba(221, 232, 226, 0.42) 50%,
        rgba(221, 232, 226, 0.00) 74%
    );
    z-index: 0;
    pointer-events: none;
}

.ra-hero__mark {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 1;
    /* Multi-layer drop-shadow stack: a tight grounding shadow + a wider
       soft cream lift. Works on the logo's alpha channel so only the
       apple shape carries the glow, not a square. */
    filter:
        drop-shadow(0 0 18px rgba(255, 252, 240, 0.55))
        drop-shadow(0 14px 28px rgba(8, 24, 20, 0.18));
}

.ra-hero__masthead + .ra-hero__lede { margin-top: 36px; }

@media (max-width: 880px) {
    .ra-hero__masthead {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(20px, 6vw, 36px);
    }
    .ra-hero__mark-wrap {
        width: clamp(140px, 32vw, 220px);
        height: clamp(140px, 32vw, 220px);
        align-self: flex-end;
        margin-top: -8px;
    }
}

/* ============================================================
   Homepage hero video — full-bleed background with brand wash.
   The video is layered BELOW the 3D grid and content. The overlay
   keeps the homepage's bright editorial character (mostly paper-cool
   with subtle teal at the edges) while the video provides ambient
   texture you sense more than see.
   ============================================================ */
.ra-hero--video {
    background: var(--ra-paper);
}

.ra-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

/* Bright wash so the page keeps the publishing feel — video shows
   through as ambient texture at ~20-25% visibility. */
.ra-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(221, 232, 226, 0.86) 0%,
            rgba(230, 239, 232, 0.82) 50%,
            rgba(221, 232, 226, 0.86) 100%
        ),
        linear-gradient(
            180deg,
            rgba(250, 250, 246, 0.40) 0%,
            rgba(250, 250, 246, 0.00) 40%,
            rgba(250, 250, 246, 0.00) 60%,
            rgba(250, 250, 246, 0.40) 100%
        );
    z-index: -1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ra-hero__video { animation: none; }
}

/* Italic emphasis on page titles — quiet teal tint */
.ra-page__title em {
    font-style: italic;
    color: var(--ra-teal-deep);
}

/* Hero italic — slow shimmer through the brand colors */
.ra-hero__title em {
    font-style: italic;
    color: var(--ra-teal-deep); /* fallback */
    background: linear-gradient(
        100deg,
        var(--ra-teal-deep) 0%,
        var(--ra-green-deep) 22%,
        var(--ra-green) 38%,
        var(--ra-teal) 62%,
        var(--ra-teal-deep) 78%,
        var(--ra-green-deep) 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ra-em-shimmer 9s ease-in-out infinite;
    will-change: background-position;
}

@keyframes ra-em-shimmer {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ra-hero__title em {
        animation: none;
        background-position: 30% 50%;
    }
}

/* Brand swipe — only applied where explicitly opted-in (partner band heading) */
.ra-swipe {
    position: relative;
    display: inline-block;
    font-style: italic;
    isolation: isolate;
    padding: 0 0.06em;
}

.ra-hero__lede {
    max-width: 52ch;
    color: var(--ra-ink-soft);
    font-size: clamp(1.08rem, 1.5vw, 1.25rem);
    line-height: 1.5;
}

/* ============================================================
   Rotating audience word in the homepage lede.
   JS-driven: a single word is in the DOM at a time, and the
   container's natural width tracks the word. No gap on the right
   regardless of word length. Fade-out uses a slight upward drift
   + blur; fade-in arrives from below with the brand-teal underline
   drawing in left-to-right.
   ============================================================ */
.ra-rotator {
    display: inline-block;
    vertical-align: baseline;
    color: var(--ra-teal-deep);
    font-weight: 600;
    position: relative;
    text-align: right;
    white-space: nowrap;
}

.ra-rotator__word {
    display: inline-block;
    position: relative;
    will-change: opacity, transform, filter;
    transform-origin: 50% 60%;
}

/* Underline that draws in from left as the word arrives, and recedes
   to the right as it leaves. Done with a pseudo so the line is
   independent of the text-decoration metrics. */
.ra-rotator__word::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--ra-green-deep) 0%,
        var(--ra-teal-deep) 50%,
        var(--ra-teal) 100%
    );
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: 1px;
}

/* IN state — arriving from below with blur clearing */
.ra-rotator__word.is-in {
    animation: ra-rotator-in 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ra-rotator__word.is-in::after {
    animation: ra-rotator-underline-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

/* OUT state — drifting up, blur returning */
.ra-rotator__word.is-out {
    animation: ra-rotator-out 420ms cubic-bezier(0.55, 0, 0.55, 0.2) forwards;
}
.ra-rotator__word.is-out::after {
    animation: ra-rotator-underline-out 340ms cubic-bezier(0.55, 0, 0.55, 0.2) forwards;
}

@keyframes ra-rotator-in {
    0%   { opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(4px); letter-spacing: -0.02em; }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0)    scale(1.00); filter: blur(0); letter-spacing: normal; }
}

@keyframes ra-rotator-out {
    0%   { opacity: 1; transform: translateY(0)    scale(1.00); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.96); filter: blur(4px); }
}

@keyframes ra-rotator-underline-in {
    0%   { transform: scaleX(0); transform-origin: left center; }
    100% { transform: scaleX(1); transform-origin: left center; }
}

@keyframes ra-rotator-underline-out {
    0%   { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(0); transform-origin: right center; }
}

/* Reduced-motion: park on the first word, no animation */
@media (prefers-reduced-motion: reduce) {
    .ra-rotator__word { animation: none; opacity: 1; transform: none; filter: none; }
    .ra-rotator__word::after { animation: none; transform: scaleX(1); }
}

.ra-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 48px;
}

.ra-hero__scroll {
    margin-top: clamp(72px, 10vw, 128px);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ra-muted);
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ra-hero__scroll::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ra-rule);
}

/* ============================================================
   8. Properties — ultra-clean two-card grid
   ============================================================ */
.ra-properties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--ra-rule);
}

.ra-property {
    position: relative;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px);
    border-right: 1px solid var(--ra-rule);
    border-bottom: 1px solid var(--ra-rule);
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--ra-paper);
    color: var(--ra-ink);
    text-decoration: none;
    min-height: 380px;
    transition: background var(--ra-dur) var(--ra-ease);
    overflow: hidden;
}

.ra-property:last-child { border-right: 0; }
.ra-property:hover { background: var(--ra-paper-soft); text-decoration: none; color: var(--ra-ink); }

.ra-property::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ra-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 520ms var(--ra-ease);
}
.ra-property:hover::before { transform: scaleX(1); }
.ra-property[data-brand="teal"]::before { background: var(--ra-teal); }

.ra-property__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    color: var(--ra-muted);
    font-family: var(--ra-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.ra-property__name {
    font-family: var(--ra-font-display);
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ra-green-deep);
    margin-top: auto;
}
.ra-property[data-brand="teal"] .ra-property__name { color: var(--ra-teal-deep); }

.ra-property__tagline {
    font-family: var(--ra-font-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--ra-ink-soft);
    max-width: 32ch;
    line-height: 1.3;
}

.ra-property__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ra-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ra-ink);
}

.ra-property__cta .ra-arrow { transition: transform var(--ra-dur) var(--ra-ease); }
.ra-property:hover .ra-property__cta .ra-arrow { transform: translateX(6px); }

@media (max-width: 880px) {
    .ra-properties { grid-template-columns: 1fr; }
    .ra-property { border-right: 0; }
}

/* ============================================================
   9. Principles — three lines, that's it
   ============================================================ */
.ra-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.ra-principle {
    padding: 0 clamp(20px, 3vw, 40px);
    border-right: 1px solid var(--ra-rule);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ra-principle:first-child { padding-left: 0; }
.ra-principle:last-child { border-right: 0; padding-right: 0; }

.ra-principle__num {
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    color: var(--ra-muted);
    text-transform: uppercase;
}

.ra-principle__title {
    font-family: var(--ra-font-display);
    font-size: 1.75rem;
    line-height: 1.05;
    color: var(--ra-ink);
}

.ra-principle__body { color: var(--ra-muted); font-size: 0.98rem; line-height: 1.6; }

@media (max-width: 880px) {
    .ra-principles { grid-template-columns: 1fr; gap: 32px; }
    .ra-principle { border-right: 0; padding: 0; padding-bottom: 32px; border-bottom: 1px solid var(--ra-rule); }
    .ra-principle:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ============================================================
   10. Topics — coverage map (signals niche fit)
   ============================================================ */
.ra-topics {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}

.ra-topics__col h3 {
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ra-muted);
    margin-bottom: 20px;
}

.ra-topics__group {
    margin-bottom: clamp(28px, 4vw, 56px);
}
.ra-topics__group:last-child { margin-bottom: 0; }

.ra-topics__group-label {
    font-family: var(--ra-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ra-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ra-topics__group-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ra-rule);
}

.ra-topics__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ra-topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--ra-paper-soft);
    border: 1px solid var(--ra-rule);
    border-radius: 999px;
    color: var(--ra-ink-soft);
    font-size: 0.88rem;
    font-weight: 400;
    text-decoration: none;
    transition: background var(--ra-dur) var(--ra-ease), border-color var(--ra-dur) var(--ra-ease), color var(--ra-dur) var(--ra-ease);
}

.ra-topic-chip:hover {
    background: var(--ra-ink);
    color: var(--ra-paper);
    border-color: var(--ra-ink);
    text-decoration: none;
}


@media (max-width: 760px) {
    .ra-topics { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   11. Partner band — single CTA, big breath
   ============================================================ */
.ra-partner-band {
    background:
        linear-gradient(90deg, var(--ra-green) 0%, var(--ra-green-deep) 35%, var(--ra-teal-deep) 65%, var(--ra-teal) 100%) top / 100% 4px no-repeat,
        radial-gradient(circle at 12% 18%, rgba(29, 107, 58, 0.55) 0%, transparent 38%),
        radial-gradient(circle at 88% 82%, rgba(29, 86, 112, 0.55) 0%, transparent 42%),
        var(--ra-ink);
    color: var(--ra-paper);
    padding: clamp(96px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}

.ra-partner-band__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 920px;
}

.ra-partner-band h2 {
    color: var(--ra-paper);
    font-size: clamp(2.4rem, 5.4vw, 4.8rem);
    line-height: 1.02;
    max-width: 20ch;
}
.ra-partner-band h2 em.ra-swipe {
    color: var(--ra-paper);
}
.ra-partner-band h2 em.ra-swipe::before {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: 0.04em;
    height: 0.5em;
    background: linear-gradient(102deg,
        transparent 0%,
        rgba(74, 195, 110, 0.65) 8%,
        rgba(64, 178, 215, 0.65) 92%,
        transparent 100%);
    z-index: -1;
    transform: skewX(-6deg);
    border-radius: 3px;
}

.ra-partner-band p {
    color: rgba(250, 250, 246, 0.72);
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 56ch;
}

.ra-partner-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}

.ra-partner-band .ra-btn {
    background: var(--ra-paper);
    color: var(--ra-ink);
    border-color: var(--ra-paper);
}
.ra-partner-band .ra-btn:hover {
    background: var(--ra-green);
    border-color: var(--ra-green);
    color: var(--ra-paper);
}
.ra-partner-band .ra-btn--ghost {
    background: transparent;
    color: var(--ra-paper);
    border-color: rgba(250,250,246,0.32);
}
.ra-partner-band .ra-btn--ghost:hover {
    background: var(--ra-paper);
    color: var(--ra-ink);
    border-color: var(--ra-paper);
}

.ra-partner-band .ra-eyebrow { color: rgba(250,250,246,0.6); }
.ra-partner-band .ra-eyebrow::before { background: rgba(250,250,246,0.5); }

/* ============================================================
   12. Coverage feed
   ============================================================ */
.ra-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--ra-rule);
}

.ra-feed__item {
    padding: clamp(28px, 3.5vw, 40px) clamp(20px, 3vw, 32px);
    border-right: 1px solid var(--ra-rule);
    border-bottom: 1px solid var(--ra-rule);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: var(--ra-ink);
    background: transparent;
    transition: background var(--ra-dur) var(--ra-ease);
    min-height: 240px;
}

.ra-feed__item:nth-child(3n) { border-right: 0; }
.ra-feed__item:hover { background: var(--ra-paper-soft); color: var(--ra-ink); text-decoration: none; }

.ra-feed__source {
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ra-teal-deep);
}
.ra-feed__source[data-brand="green"] { color: var(--ra-green-deep); }

.ra-feed__title {
    font-family: var(--ra-font-display);
    font-size: 1.5rem;
    line-height: 1.12;
    color: var(--ra-ink);
}

.ra-feed__meta {
    margin-top: auto;
    color: var(--ra-muted);
    font-size: 0.82rem;
    font-family: var(--ra-font-mono);
    letter-spacing: 0.02em;
}

@media (max-width: 880px) {
    .ra-feed { grid-template-columns: 1fr; }
    .ra-feed__item { border-right: 0; }
}

/* ============================================================
   13. Stats row
   ============================================================ */
.ra-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ra-rule);
    border-bottom: 1px solid var(--ra-rule);
}

.ra-stat {
    padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
    border-right: 1px solid var(--ra-rule);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ra-stat:last-child { border-right: 0; }

.ra-stat__value {
    font-family: var(--ra-font-display);
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    line-height: 1;
    color: var(--ra-ink);
    letter-spacing: -0.02em;
}

.ra-stat__label {
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ra-muted);
}

@media (max-width: 880px) {
    .ra-stats { grid-template-columns: 1fr 1fr; }
    .ra-stat { border-right: 0; border-bottom: 1px solid var(--ra-rule); }
    .ra-stat:nth-child(odd) { border-right: 1px solid var(--ra-rule); }
    .ra-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
    .ra-stats { grid-template-columns: 1fr; }
    .ra-stat { border-right: 0; }
    .ra-stat:nth-child(odd) { border-right: 0; }
}

/* ============================================================
   14. Newsletter band
   ============================================================ */
.ra-newsletter {
    padding: clamp(56px, 7vw, 96px) 0;
    border-top: 1px solid var(--ra-rule);
    background: var(--ra-paper);
}

.ra-newsletter__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}

.ra-newsletter h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.05;
    max-width: 18ch;
}

.ra-newsletter p {
    color: var(--ra-muted);
    font-size: 1rem;
    margin-top: 12px;
}

.ra-newsletter__form {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--ra-rule-strong);
    padding-bottom: 10px;
}
.ra-newsletter__form:focus-within { border-color: var(--ra-ink); }

.ra-newsletter__form input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 12px 0;
    font-family: var(--ra-font-sans);
    font-size: 1.05rem;
    color: var(--ra-ink);
    outline: 0;
}

.ra-newsletter__form button {
    background: transparent;
    border: 0;
    color: var(--ra-ink);
    font-family: var(--ra-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    transition: color var(--ra-dur) var(--ra-ease);
}
.ra-newsletter__form button:hover { color: var(--ra-teal-deep); }
.ra-newsletter__form button .ra-arrow { transition: transform var(--ra-dur) var(--ra-ease); }
.ra-newsletter__form button:hover .ra-arrow { transform: translateX(4px); }

.ra-newsletter__note {
    margin-top: 14px;
    font-family: var(--ra-font-mono);
    font-size: 0.78rem;
    color: var(--ra-muted);
    letter-spacing: 0.02em;
}

@media (max-width: 880px) {
    .ra-newsletter__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   15. Page templates
   ============================================================ */
.ra-page {
    padding-top: clamp(72px, 9vw, 128px);
    padding-bottom: clamp(96px, 12vw, 168px);
}

/* Flush variant — used when the page opens with a full-bleed hero band
   that should butt directly against the nav rather than float below it.
   Also tightens the bottom padding so the page doesn't dead-air below
   the last prose block. */
.ra-page--hero-flush {
    padding-top: 0;
    padding-bottom: clamp(40px, 5vw, 72px);
}

/* Suppress the long left-edge accent rule on hero-flush pages — it was
   designed for symmetric top/bottom padding and reads as a color stripe
   below the last section when the body padding is reduced. */
.ra-page--hero-flush.ra-section--numbered::after {
    display: none;
}

.ra-page__head {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: end;
    padding-bottom: clamp(36px, 5vw, 64px);
    border-bottom: 1px solid var(--ra-rule);
    margin-bottom: clamp(48px, 6vw, 80px);
}

.ra-page__title {
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
    hyphens: manual;
}

/* ============================================================
   Refined header variant for marquee subpages (e.g. /about/).
   Full-bleed paper-deep band, centered lede, no top accent.
   Reads as a proper masthead distinct from the body.
   ============================================================ */
.ra-page__head--hero {
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(40px, 5vw, 88px);
    align-items: center;
    background: var(--ra-paper-cool);
    /* Break out of the parent .ra-wrap to span the viewport */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: clamp(20px, 3vw, 44px);
    /* Re-pad so content lines up with the wrap content area */
    padding-left: max(32px, calc(50vw - (var(--ra-max) / 2) + 32px));
    padding-right: max(32px, calc(50vw - (var(--ra-max) / 2) + 32px));
    padding-top: clamp(36px, 4.5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 72px);
    /* Locked minimum height so every page's hero band matches — no more
       variance based on title-line-count or lede length. */
    min-height: clamp(420px, 44vw, 580px);
    border-bottom: 1px solid rgba(16, 58, 77, 0.12);
    border-top: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ra-page__head--hero > * {
    position: relative;
    z-index: 2;
}

/* ============================================================
   Video background for the hero band. The <video> element sits
   beneath the title and lede; a multi-stop gradient overlay tints
   it back toward the brand palette so text stays readable.
   ============================================================ */
.ra-page__head--video {
    /* No solid fill — the video provides the color; the overlay tones it */
    background: var(--ra-paper-cool);
}

.ra-page__head-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* Register cursor-position custom props so CSS can interpolate them */
@property --mx {
    syntax: '<length>';
    inherits: true;
    initial-value: 50%;
}
@property --my {
    syntax: '<length>';
    inherits: true;
    initial-value: 50%;
}

.ra-page__head--video {
    --mx: 50%;
    --my: 50%;
}

/* Single overlay layer:
   - A radial circle at the cursor position with a buttery-soft falloff
     (eight stops) that reveals the video near the pointer
   - Layered on top of a vertical vignette for clean seating */
.ra-page__head--video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Cursor influence — very gentle. Maximum alpha delta is only
           0.16 across an extremely soft 7-stop falloff. You feel the
           area around the cursor lift slightly; you don't see a circle. */
        radial-gradient(
            circle 520px at var(--mx) var(--my),
            rgba(16, 58, 77, 0.00) 0%,
            rgba(16, 58, 77, 0.02) 20%,
            rgba(16, 58, 77, 0.05) 40%,
            rgba(16, 58, 77, 0.09) 60%,
            rgba(16, 58, 77, 0.13) 80%,
            rgba(16, 58, 77, 0.16) 100%
        ),
        /* Top/bottom vignette in brand teal */
        linear-gradient(
            180deg,
            rgba(16, 58, 77, 0.18) 0%,
            rgba(16, 58, 77, 0.04) 30%,
            rgba(16, 58, 77, 0.04) 70%,
            rgba(16, 58, 77, 0.18) 100%
        ),
        /* Base brand wash — diagonal teal → green → teal at consistent
           medium opacity. The wash is the visual character of the band;
           the cursor just lifts/dims it gently. */
        linear-gradient(
            135deg,
            rgba(16, 58, 77, 0.64) 0%,
            rgba(18, 60, 60, 0.62) 30%,
            rgba(21, 77, 41, 0.60) 60%,
            rgba(16, 58, 77, 0.66) 100%
        );
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 720px) {
    .ra-page__head--video::after {
        background:
            radial-gradient(
                circle 300px at var(--mx) var(--my),
                rgba(16, 58, 77, 0.00) 0%,
                rgba(16, 58, 77, 0.08) 50%,
                rgba(16, 58, 77, 0.16) 100%
            ),
            linear-gradient(
                180deg,
                rgba(16, 58, 77, 0.18) 0%,
                rgba(16, 58, 77, 0.04) 30%,
                rgba(16, 58, 77, 0.04) 70%,
                rgba(16, 58, 77, 0.18) 100%
            ),
            linear-gradient(
                135deg,
                rgba(16, 58, 77, 0.68) 0%,
                rgba(21, 77, 41, 0.64) 50%,
                rgba(16, 58, 77, 0.70) 100%
            );
    }
}

/* Light up the type on the dark video background */
.ra-page__head--video .ra-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}
.ra-page__head--video .ra-eyebrow::before {
    background: rgba(255, 255, 255, 0.5);
}
.ra-page__head--video .ra-page__title--hero {
    color: #f7faf8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 18px rgba(0, 0, 0, 0.22);
}
.ra-page__head--video .ra-page__title--hero em {
    color: #9fd4cc;
}
.ra-page__head--video .ra-page__head-aside {
    border-left-color: rgba(255, 255, 255, 0.22);
}
.ra-page__head--video .ra-page__lede,
.ra-page__head--video .ra-page__lede a {
    color: rgba(255, 255, 255, 0.88);
}
.ra-page__head--video .ra-page__lede a {
    text-decoration-color: rgba(159, 212, 204, 0.6);
}

/* Stop the video if the user prefers reduced motion — leaves the
   poster frame as a still image (browser already shows the poster
   when video is paused) */
@media (prefers-reduced-motion: reduce) {
    .ra-page__head-video {
        animation: none !important;
    }
}

.ra-page__head--hero .ra-page__head-lead {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.4vw, 32px);
}

.ra-page__title--hero {
    font-size: clamp(2.8rem, 7.6vw, 6rem);
    line-height: 0.96;
    letter-spacing: -0.028em;
    text-wrap: balance;
    margin: 0;
}

/* Static deep-teal italic — same color as section accents, no animation */
.ra-page__title--hero em {
    font-style: italic;
    color: var(--ra-teal-deep);
}

/* Lede centered vertically against the title, with a quiet left rule */
.ra-page__head--hero .ra-page__head-aside {
    padding-left: clamp(20px, 2.4vw, 36px);
    border-left: 1px solid var(--ra-rule);
    display: flex;
    align-items: center;
    align-self: stretch;
}

.ra-page__head--hero .ra-page__lede {
    max-width: 40ch;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.55;
}

@media (max-width: 920px) {
    .ra-page__head--hero {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
        padding-top: clamp(40px, 6vw, 64px);
        padding-bottom: clamp(40px, 6vw, 64px);
    }
    .ra-page__head--hero .ra-page__head-aside {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--ra-rule);
        padding-top: 28px;
        align-items: flex-start;
    }
    .ra-page__head--hero .ra-page__lede {
        max-width: none;
    }
}

.ra-page__lede {
    color: var(--ra-ink-soft);
    font-size: 1.15rem;
    line-height: 1.5;
    max-width: 52ch;
}

@media (max-width: 920px) {
    .ra-page__head { grid-template-columns: 1fr; gap: 22px; }
}

.ra-prose-block {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(36px, 5vw, 72px);
    padding: clamp(28px, 4vw, 48px) 0;
    border-bottom: 1px solid var(--ra-rule);
}
.ra-prose-block:last-of-type { border-bottom: 0; }

/* ============================================================
   Per-section icon that fades in when the prose block is hovered.
   Sits in the bottom-right corner so it never competes with the
   meta label or the headline. Each block opts in via data-section-icon,
   and the SVG is loaded as a CSS mask so its color follows the brand.
   ============================================================ */
.ra-prose-block[data-section-icon]::after {
    content: "";
    position: absolute;
    /* Anchor to the BOTTOM of the prose-block, on the left, below all
       text content. Sits in the block's bottom padding so it never
       collides with the body paragraphs above it. */
    bottom: clamp(8px, 1.5vw, 24px);
    left: clamp(22px, 1.5vw, 36px);
    width: clamp(56px, 6vw, 88px);
    height: clamp(56px, 6vw, 88px);
    background-color: var(--ra-teal-deep);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: left center;
            mask-position: left center;
    -webkit-mask-size: contain;
            mask-size: contain;
    /* Resting: invisible + slightly below target, slight rotate.
       Eases UP into the slot at the bottom-left. */
    opacity: 0;
    transform: translate3d(0, 12px, 0) rotate(-6deg);
    pointer-events: none;
    transition:
        opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

/* Original four (about page) */
.ra-prose-block[data-section-icon="who"]::after        { -webkit-mask-image: url('assets/icons/section-who.svg');        mask-image: url('assets/icons/section-who.svg'); }
.ra-prose-block[data-section-icon="what"]::after       { -webkit-mask-image: url('assets/icons/section-what.svg');       mask-image: url('assets/icons/section-what.svg'); }
.ra-prose-block[data-section-icon="how"]::after        { -webkit-mask-image: url('assets/icons/section-how.svg');        mask-image: url('assets/icons/section-how.svg'); }
.ra-prose-block[data-section-icon="where"]::after      { -webkit-mask-image: url('assets/icons/section-where.svg');      mask-image: url('assets/icons/section-where.svg'); }

/* Properties */
.ra-prose-block[data-section-icon="energy"]::after     { -webkit-mask-image: url('assets/icons/section-energy.svg');     mask-image: url('assets/icons/section-energy.svg'); }
.ra-prose-block[data-section-icon="air"]::after        { -webkit-mask-image: url('assets/icons/section-air.svg');        mask-image: url('assets/icons/section-air.svg'); }
.ra-prose-block[data-section-icon="expand"]::after     { -webkit-mask-image: url('assets/icons/section-expand.svg');     mask-image: url('assets/icons/section-expand.svg'); }

/* Custom builds */
.ra-prose-block[data-section-icon="build"]::after      { -webkit-mask-image: url('assets/icons/section-build.svg');      mask-image: url('assets/icons/section-build.svg'); }
.ra-prose-block[data-section-icon="audience"]::after   { -webkit-mask-image: url('assets/icons/section-audience.svg');   mask-image: url('assets/icons/section-audience.svg'); }
.ra-prose-block[data-section-icon="logic"]::after      { -webkit-mask-image: url('assets/icons/section-logic.svg');      mask-image: url('assets/icons/section-logic.svg'); }
.ra-prose-block[data-section-icon="process"]::after    { -webkit-mask-image: url('assets/icons/section-process.svg');    mask-image: url('assets/icons/section-process.svg'); }
.ra-prose-block[data-section-icon="privacy"]::after    { -webkit-mask-image: url('assets/icons/section-privacy.svg');    mask-image: url('assets/icons/section-privacy.svg'); }
.ra-prose-block[data-section-icon="inquire"]::after    { -webkit-mask-image: url('assets/icons/section-inquire.svg');    mask-image: url('assets/icons/section-inquire.svg'); }

/* Editorial */
.ra-prose-block[data-section-icon="citation"]::after   { -webkit-mask-image: url('assets/icons/section-citation.svg');   mask-image: url('assets/icons/section-citation.svg'); }
.ra-prose-block[data-section-icon="verify"]::after     { -webkit-mask-image: url('assets/icons/section-verify.svg');     mask-image: url('assets/icons/section-verify.svg'); }
.ra-prose-block[data-section-icon="correct"]::after    { -webkit-mask-image: url('assets/icons/section-correct.svg');    mask-image: url('assets/icons/section-correct.svg'); }
.ra-prose-block[data-section-icon="direction"]::after  { -webkit-mask-image: url('assets/icons/section-direction.svg');  mask-image: url('assets/icons/section-direction.svg'); }

/* AI search */
.ra-prose-block[data-section-icon="shift"]::after          { -webkit-mask-image: url('assets/icons/section-shift.svg');          mask-image: url('assets/icons/section-shift.svg'); }
.ra-prose-block[data-section-icon="retrieval"]::after      { -webkit-mask-image: url('assets/icons/section-retrieval.svg');      mask-image: url('assets/icons/section-retrieval.svg'); }
.ra-prose-block[data-section-icon="rules"]::after          { -webkit-mask-image: url('assets/icons/section-rules.svg');          mask-image: url('assets/icons/section-rules.svg'); }
.ra-prose-block[data-section-icon="synthesis"]::after      { -webkit-mask-image: url('assets/icons/section-synthesis.svg');      mask-image: url('assets/icons/section-synthesis.svg'); }
.ra-prose-block[data-section-icon="entity"]::after         { -webkit-mask-image: url('assets/icons/section-entity.svg');         mask-image: url('assets/icons/section-entity.svg'); }
.ra-prose-block[data-section-icon="infrastructure"]::after { -webkit-mask-image: url('assets/icons/section-infrastructure.svg'); mask-image: url('assets/icons/section-infrastructure.svg'); }
.ra-prose-block[data-section-icon="trust"]::after          { -webkit-mask-image: url('assets/icons/section-trust.svg');          mask-image: url('assets/icons/section-trust.svg'); }
.ra-prose-block[data-section-icon="evaluation"]::after     { -webkit-mask-image: url('assets/icons/section-evaluation.svg');     mask-image: url('assets/icons/section-evaluation.svg'); }

/* Hover reveals the icon below the meta label. */
.ra-prose-block[data-section-icon]:hover::after {
    opacity: 0.26;
    transform: translate3d(0, 0, 0) rotate(0deg);
    transition:
        opacity 340ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Meta label hover treatment — pushed all the way to black + bold so
   the change reads at a glance. */
.ra-prose-block .ra-prose-block__meta,
.ra-prose-block .ra-prose-block__meta::before {
    transition:
        color 280ms cubic-bezier(0.22, 1, 0.36, 1),
        background 280ms cubic-bezier(0.22, 1, 0.36, 1),
        font-weight 280ms cubic-bezier(0.22, 1, 0.36, 1),
        letter-spacing 280ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ra-prose-block:hover .ra-prose-block__meta {
    color: #000;
    font-weight: 700;
    letter-spacing: 0.06em;
    /* Synthetic bold backup for mono fonts that don't ship a 700 weight */
    text-shadow: 0 0 0.4px currentColor;
}
.ra-prose-block:hover .ra-prose-block__meta::before {
    background: #000;
    opacity: 1;
    height: 2px;
}

/* Keep the text above the icon — z-index it explicitly so the
   icon never washes through the headline */
.ra-prose-block > * { position: relative; z-index: 1; }

/* On narrow viewports the prose-block grid collapses to a single column
   (meta on top, body below). Hide the icon there so it can't overlap body
   text — there's nowhere for it to sit without crowding the prose. */
@media (max-width: 880px) {
    .ra-prose-block[data-section-icon]::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ra-prose-block[data-section-icon]::after {
        transition: opacity 240ms linear;
        transform: none;
    }
}
.ra-prose-block h2 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.1;
    margin-bottom: 14px;
}
.ra-prose-block__body { max-width: var(--ra-max-prose); color: var(--ra-ink-soft); font-size: 1.04rem; line-height: 1.7; }

/* Apply section on /partners/ — stands alone outside the prose-block grid
   so the form takes full width with a clear separator from the prose. */
.ra-partners-apply {
    padding-top: clamp(48px, 6vw, 80px);
    margin-top: clamp(16px, 2vw, 32px);
    border-top: 1px solid var(--ra-rule);
}
.ra-prose-block__body p { color: var(--ra-ink-soft); }
.ra-prose-block__body p + p { margin-top: 14px; }
.ra-prose-block__body ul { padding-left: 1.2em; margin: 14px 0; color: var(--ra-ink-soft); }
.ra-prose-block__body li + li { margin-top: 8px; }
.ra-prose-block__meta {
    color: var(--ra-muted);
    font-family: var(--ra-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 880px) {
    .ra-prose-block { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   Subpage rhythm — prose-blocks become quasi-sections with
   alternating backgrounds, matching the homepage section rhythm.
   ============================================================ */
.ra-page .ra-prose-block {
    padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 48px);
    margin: 0 calc(-1 * clamp(28px, 4vw, 48px));
    border-bottom: 1px solid var(--ra-rule);
    position: relative;
    z-index: 1;
    gap: clamp(36px, 5vw, 72px);
}

.ra-page .ra-prose-block:last-of-type {
    border-bottom: 0;
}

/* Alternate prose-blocks to a brighter background — full-bleed via pseudo */
.ra-page .ra-prose-block:nth-of-type(even)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--ra-paper-soft);
    z-index: -1;
}

/* Meta label gets the homepage eyebrow treatment with lead line */
.ra-page .ra-prose-block .ra-prose-block__meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ra-muted);
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.4;
}
.ra-page .ra-prose-block .ra-prose-block__meta::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Slightly larger H2 inside prose-blocks to mirror section h2 weight */
.ra-page .ra-prose-block h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

/* Sections that wrap prose-blocks (e.g. partners page) still work — only
   target loose prose-blocks; section-wrapped ones get the section's own bg. */
.ra-page section .ra-prose-block {
    margin: 0;
    padding: clamp(36px, 4vw, 56px) 0;
}
.ra-page section .ra-prose-block::before { display: none; }
.ra-page section .ra-prose-block:nth-of-type(even) { background: transparent; }

@media (max-width: 880px) {
    .ra-page .ra-prose-block { padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 32px); }
}

/* ============================================================
   16. Forms
   ============================================================ */
.ra-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
    max-width: 720px;
}
.ra-form__full { grid-column: 1 / -1; }
.ra-form label {
    display: block;
    font-family: var(--ra-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ra-muted);
    margin-bottom: 8px;
}
.ra-form input[type="text"],
.ra-form input[type="email"],
.ra-form input[type="url"],
.ra-form select,
.ra-form textarea {
    width: 100%;
    padding: 14px 14px;
    background: var(--ra-paper-soft);
    border: 1px solid var(--ra-rule-strong);
    border-radius: var(--ra-radius);
    font-family: var(--ra-font-sans);
    font-size: 1rem;
    color: var(--ra-ink);
    transition: border-color var(--ra-dur) var(--ra-ease);
    min-height: 48px;
}
.ra-form textarea { min-height: 140px; line-height: 1.5; resize: vertical; }
.ra-form input:focus,
.ra-form select:focus,
.ra-form textarea:focus { outline: 0; border-color: var(--ra-teal); }

@media (max-width: 720px) { .ra-form { grid-template-columns: 1fr; } }

/* ============================================================
   17. FAQ
   ============================================================ */
.ra-faq__list { border-top: 1px solid var(--ra-rule); }
.ra-faq__item {
    border-bottom: 1px solid var(--ra-rule);
}
.ra-faq__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: clamp(20px, 3vw, 32px) 0;
    font-family: var(--ra-font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.15;
    color: var(--ra-ink);
    cursor: pointer;
    list-style: none;
}
.ra-faq__summary::-webkit-details-marker { display: none; }
.ra-faq__summary::after {
    content: "+";
    font-family: var(--ra-font-mono);
    font-size: 1.4rem;
    color: var(--ra-muted);
    transition: transform var(--ra-dur) var(--ra-ease);
    line-height: 1;
}
.ra-faq__item[open] .ra-faq__summary::after { transform: rotate(45deg); }

.ra-faq__body {
    padding: 0 0 clamp(24px, 3vw, 40px);
    color: var(--ra-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: var(--ra-max-prose);
}
.ra-faq__body p + p { margin-top: 12px; }

/* ============================================================
   18. Footer
   ============================================================ */
.ra-footer {
    background: var(--ra-ink);
    color: var(--ra-paper);
    padding: clamp(72px, 9vw, 112px) 0 32px;
    border-top: 1px solid var(--ra-ink);
}

.ra-footer a { color: var(--ra-paper); text-decoration-color: rgba(250,250,246,0.3); }
.ra-footer a:hover { color: var(--ra-paper); text-decoration-color: var(--ra-paper); }

.ra-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    padding-bottom: clamp(48px, 6vw, 80px);
    border-bottom: 1px solid rgba(250,250,246,0.12);
}

.ra-footer__brand-block { display: flex; flex-direction: column; gap: 20px; max-width: 38ch; }

.ra-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ra-paper);
    font-family: var(--ra-font-display);
    font-size: 1.8rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
.ra-footer__brand:hover { color: var(--ra-paper); text-decoration: none; }
.ra-footer__brand img {
    width: 44px;
    height: 44px;
    background: var(--ra-paper);
    border-radius: 50%;
    padding: 4px;
    object-fit: contain;
}

.ra-footer__tag { color: rgba(250,250,246,0.62); font-size: 0.96rem; line-height: 1.5; }

.ra-footer__col h4 {
    font-family: var(--ra-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(250,250,246,0.45);
    margin-bottom: 18px;
}

.ra-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ra-footer__col li { font-size: 0.96rem; }

.ra-footer__bottom {
    padding-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--ra-font-mono);
    font-size: 0.78rem;
    color: rgba(250,250,246,0.5);
    letter-spacing: 0.04em;
}

.ra-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.ra-footer__nap {
    font-style: normal;
    line-height: 1.6;
    color: rgba(250,250,246,0.7);
    font-size: 0.94rem;
    font-family: var(--ra-font-sans);
    letter-spacing: 0;
}

@media (max-width: 880px) {
    .ra-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .ra-footer__top { grid-template-columns: 1fr; }
    .ra-footer__bottom { flex-direction: column; gap: 14px; }
}

/* ============================================================
   19. Reveal-on-scroll
   ============================================================ */
.ra-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--ra-ease), transform 700ms var(--ra-ease);
    will-change: opacity, transform;
}
.ra-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .ra-reveal { opacity: 1; transform: none; transition: none; }
}

/* count-up numbers */
.ra-count { font-variant-numeric: tabular-nums; }

/* ============================================================
   Section icon watermark — large ghosted geometric icon in the
   background corner. One icon per section, selected via data-icon.
   ============================================================ */
.ra-section--numbered {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ra-section--numbered::before {
    /* Disabled for now — left section watermark icons removed across the site. */
    display: none;
    content: "";
    position: absolute;
    bottom: clamp(-48px, -3vw, -24px);
    left: clamp(-72px, -5vw, -40px);
    width: clamp(20rem, 32vw, 30rem);
    height: clamp(20rem, 32vw, 30rem);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    /* Initial: invisible and slightly down-left, ready to ease in */
    opacity: 0;
    transform: translate3d(-24px, 36px, 0) rotate(-6deg);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    transition:
        opacity 880ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reveal on viewport entry (IntersectionObserver adds .is-revealed)
   OR on hover (so the icon also flares in when the visitor explores) */
.ra-section--numbered.is-revealed::before,
.ra-section--numbered:hover::before,
.ra-section--numbered:focus-within::before {
    opacity: 0.10;
    transform: translate3d(0, 0, 0) rotate(0deg);
}

/* On hover, intensify slightly — gives the section a quiet response */
.ra-section--numbered:hover::before {
    opacity: 0.14;
    transition:
        opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .ra-section--numbered::before {
        opacity: 0.09;
        transform: none;
        transition: none;
    }
}
.ra-section--numbered > * { position: relative; z-index: 1; }

.ra-section--numbered[data-icon="properties"]::before { background-image: url('assets/watermark-properties.svg'); }
.ra-section--numbered[data-icon="principles"]::before { background-image: url('assets/watermark-principles.svg'); }
.ra-section--numbered[data-icon="partner"]::before    { background-image: url('assets/watermark-partner.svg'); }
.ra-section--numbered[data-icon="coverage"]::before   { background-image: url('assets/watermark-coverage.svg'); }
.ra-section--numbered[data-icon="ai"]::before         { background-image: url('assets/watermark-ai.svg'); }
.ra-section--numbered[data-icon="legal"]::before      { background-image: url('assets/watermark-legal.svg'); }
.ra-section--numbered[data-icon="custom"]::before     { background-image: url('assets/watermark-custom.svg'); }

/* ============================================================
   AI pipeline diagram — woven into the editorial flow, not a
   bolt-on panel. Soft brand wash + edge-fade mask + slow signals.
   ============================================================ */
.ra-ai-pipeline {
    margin: clamp(56px, 7vw, 96px) auto 0;
    padding: clamp(40px, 5vw, 64px) 0 0;
    max-width: 980px;
    background:
        radial-gradient(ellipse 70% 60% at 30% 50%, rgba(29, 86, 112, 0.045) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 78% 50%, rgba(29, 107, 58, 0.040) 0%, transparent 70%);
    position: relative;
}

.ra-ai-pipeline__intro {
    display: block;
    text-align: center;
    font-family: var(--ra-font-mono), "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ra-muted);
    margin-bottom: clamp(16px, 2vw, 24px);
}

.ra-ai-pipeline > svg {
    width: 100%;
    max-width: 920px;
    height: auto;
    margin: 0 auto;
    display: block;
    /* Soft fade at top and bottom so the diagram emerges from / dissolves into the page */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Layer headers — tight mono, compact */
.ra-ai-pipeline .ra-nn__label text {
    font-family: var(--ra-font-mono), "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    fill: var(--ra-muted);
    font-weight: 500;
}

/* Tiny floating weight markers — barely-there technical detail */
.ra-ai-pipeline .ra-nn__weights text {
    font-family: var(--ra-font-mono), ui-monospace, monospace;
    font-size: 7.5px;
    fill: rgba(104, 117, 112, 0.55);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Connector lines — gradient stroke (teal → green) for visual flow direction.
   Each connector has a variable base width and a breathing animation, so
   the network reads as actively re-weighting over time. */
.ra-ai-pipeline .ra-nn__connectors use {
    fill: none;
    stroke: url(#ra-nn-grad);
    stroke-linecap: round;
    --w: 1.2;
    stroke-width: var(--w);
    animation: ra-nn-weight 14s ease-in-out infinite;
}
/* Distribute "synaptic strengths" across the 20 edges — mix of strong, medium, faint */
.ra-ai-pipeline .ra-nn__connectors use:nth-child(1)  { --w: 2.1; animation-delay:  0s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(2)  { --w: 0.7; animation-delay:  1.4s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(3)  { --w: 1.5; animation-delay:  3.1s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(4)  { --w: 0.6; animation-delay:  5.0s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(5)  { --w: 0.9; animation-delay:  0.8s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(6)  { --w: 2.3; animation-delay:  2.4s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(7)  { --w: 1.1; animation-delay:  4.0s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(8)  { --w: 0.8; animation-delay:  5.7s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(9)  { --w: 1.7; animation-delay:  1.1s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(10) { --w: 0.9; animation-delay:  2.9s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(11) { --w: 1.9; animation-delay:  4.6s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(12) { --w: 0.7; animation-delay:  6.2s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(13) { --w: 2.5; animation-delay:  0.4s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(14) { --w: 1.0; animation-delay:  2.0s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(15) { --w: 1.8; animation-delay:  3.7s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(16) { --w: 2.0; animation-delay:  5.3s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(17) { --w: 0.8; animation-delay:  1.7s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(18) { --w: 1.6; animation-delay:  3.4s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(19) { --w: 1.2; animation-delay:  5.0s; }
.ra-ai-pipeline .ra-nn__connectors use:nth-child(20) { --w: 2.2; animation-delay:  6.7s; }

@keyframes ra-nn-weight {
    0%, 100% { stroke-width: var(--w); opacity: 1; }
    50%      { stroke-width: calc(var(--w) * 1.55); opacity: 1; }
}

/* Nodes — concentric three-ring construction (outer ghost, inner ring, center dot) */
.ra-ai-pipeline .ra-nn__node-outer {
    fill: transparent;
    stroke: rgba(16, 58, 77, 0.16);
    stroke-width: 0.8;
}
.ra-ai-pipeline .ra-nn__node-inner {
    fill: var(--ra-paper);
    stroke: var(--ra-teal-deep);
    stroke-width: 1.8;
    transform-origin: center;
    transform-box: fill-box;
    animation: ra-nn-breathe 9s ease-in-out infinite;
}
.ra-ai-pipeline .ra-nn__node-core {
    fill: var(--ra-teal-deep);
}

/* Output layer reads green — answer side */
.ra-ai-pipeline .ra-nn__layer--output .ra-nn__node-inner {
    stroke: var(--ra-green-deep);
    stroke-width: 2.2;
    animation-delay: 4.5s;
}
.ra-ai-pipeline .ra-nn__layer--output .ra-nn__node-core { fill: var(--ra-green-deep); }
.ra-ai-pipeline .ra-nn__layer--output .ra-nn__node-outer { stroke: rgba(29, 107, 58, 0.22); }

/* Hidden layer breathes in the middle of the cycle */
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node-inner { animation-delay: 2.25s; }

/* Per-node stagger inside each layer */
.ra-ai-pipeline .ra-nn__layer--input  .ra-nn__node:nth-of-type(2) .ra-nn__node-inner { animation-delay: 1s; }
.ra-ai-pipeline .ra-nn__layer--input  .ra-nn__node:nth-of-type(3) .ra-nn__node-inner { animation-delay: 2s; }
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node:nth-of-type(2) .ra-nn__node-inner { animation-delay: 3.25s; }
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node:nth-of-type(3) .ra-nn__node-inner { animation-delay: 4.25s; }
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node:nth-of-type(4) .ra-nn__node-inner { animation-delay: 5.25s; }
.ra-ai-pipeline .ra-nn__layer--output .ra-nn__node:nth-of-type(2) .ra-nn__node-inner { animation-delay: 5.5s; }

@keyframes ra-nn-breathe {
    0%, 100% { opacity: 0.72; }
    50%      { opacity: 1; }
}

/* Processing flash — blue glow + scale pulse that fires once per loop on each
   receiving node. Animation-delay below staggers the flashes to roughly match
   when signal dots arrive at that node. */
.ra-ai-pipeline .ra-nn__node-flash {
    fill: transparent;
    stroke: rgba(56, 132, 210, 0);
    stroke-width: 2.5;
    transform-origin: center;
    transform-box: fill-box;
    animation: ra-nn-process 11s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes ra-nn-process {
    0%, 50% {
        fill: transparent;
        stroke: rgba(56, 132, 210, 0);
        transform: scale(0.85);
    }
    55% {
        fill: rgba(56, 132, 210, 0.08);
        stroke: rgba(56, 132, 210, 0.55);
        transform: scale(0.95);
    }
    62% {
        fill: rgba(56, 132, 210, 0.28);
        stroke: rgba(48, 140, 220, 0.95);
        stroke-width: 2.2;
        transform: scale(1.12);
    }
    72% {
        fill: rgba(56, 132, 210, 0.16);
        stroke: rgba(56, 132, 210, 0.55);
        stroke-width: 3;
        transform: scale(1.05);
    }
    82%, 100% {
        fill: transparent;
        stroke: rgba(56, 132, 210, 0);
        transform: scale(0.92);
    }
}

/* Stagger the flashes so different nodes fire at different times in the 11s loop.
   Hidden layer flashes ~60% into the cycle (when input signals reach them).
   Output layer flashes slightly later (when hidden signals reach them). */
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node:nth-of-type(1) .ra-nn__node-flash { animation-delay:  0s;  }
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node:nth-of-type(2) .ra-nn__node-flash { animation-delay:  1.2s; }
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node:nth-of-type(3) .ra-nn__node-flash { animation-delay:  2.4s; }
.ra-ai-pipeline .ra-nn__layer--hidden .ra-nn__node:nth-of-type(4) .ra-nn__node-flash { animation-delay:  3.6s; }
.ra-ai-pipeline .ra-nn__layer--output .ra-nn__node:nth-of-type(1) .ra-nn__node-flash { animation-delay:  1.8s; }
.ra-ai-pipeline .ra-nn__layer--output .ra-nn__node:nth-of-type(2) .ra-nn__node-flash { animation-delay:  3.0s; }

/* Signal dot + halo. Halo gives a soft glow trail. Slower, deliberate. */
.ra-ai-pipeline .ra-nn__signal-halo {
    fill: url(#ra-nn-halo);
    opacity: 0.85;
}
.ra-ai-pipeline .ra-nn__signal-core {
    fill: var(--ra-green);
    opacity: 0.95;
}
.ra-ai-pipeline .ra-nn__signal--late .ra-nn__signal-core {
    fill: var(--ra-green-deep);
}

@media (prefers-reduced-motion: reduce) {
    .ra-ai-pipeline .ra-nn__signals { display: none; }
    .ra-ai-pipeline .ra-nn__node-inner,
    .ra-ai-pipeline .ra-nn__node-flash,
    .ra-ai-pipeline .ra-nn__connectors use { animation: none; }
    .ra-ai-pipeline .ra-nn__node-inner { opacity: 0.85; }
    .ra-ai-pipeline .ra-nn__node-flash { fill: transparent; stroke: transparent; }
}

@media (max-width: 720px) {
    .ra-ai-pipeline { padding-top: clamp(24px, 4vw, 40px); }
    .ra-ai-pipeline .ra-nn__weights text { display: none; }
}

/* Full-page sections: suppress the bottom watermark. The per-section
   data-icon icons cover the hover affordance; the prose-block hover
   icons handle the in-flow accent. No need for a giant page-level mark. */
.ra-page.ra-section--numbered::before {
    display: none;
}
.ra-page.ra-section--numbered::after {
    top: 0;
    bottom: auto;
    height: clamp(280px, 36vw, 440px);
}

/* Light variant for the dark partner band */
.ra-section--numbered.ra-section--numbered-light::before {
    opacity: 0.18;
}

/* Subtle accent — thin colored bar on the inside-left of a numbered section */
.ra-section--numbered::after {
    content: "";
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--ra-teal) 20%,
        var(--ra-green) 80%,
        transparent 100%);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}
.ra-section--numbered.ra-section--numbered-light::after {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(74, 195, 110, 0.7) 20%,
        rgba(64, 178, 215, 0.7) 80%,
        transparent 100%);
    opacity: 0.85;
}

/* ============================================================
   20. Banner / status message
   ============================================================ */
.ra-status {
    padding: 14px 20px;
    text-align: center;
    font-family: var(--ra-font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    color: var(--ra-paper);
}
.ra-status--ok  { background: var(--ra-green); }
.ra-status--err { background: #9b2226; }

/* ============================================================
   21. 404
   ============================================================ */
.ra-404 { text-align: center; padding: clamp(96px, 14vw, 168px) 0; }
.ra-404 h1 { font-size: clamp(4rem, 14vw, 10rem); color: var(--ra-teal-deep); margin: 24px 0 14px; }
.ra-404 p { color: var(--ra-muted); margin: 0 auto; }
.ra-404 .ra-eyebrow { justify-content: center; }