/* ==========================================================================
   Public refresh — "Aurora editorial" layer
   Visual-only overrides for the public site. Loaded last from app.css, so it
   restyles existing markup without changing structure. Delete the @import in
   app.css to fall back to the previous look.
   ========================================================================== */

:root {
    --pr-ink: var(--color-secondary, #0f172a);
    --pr-primary: var(--color-primary, #0e9f6e);
    --pr-accent: var(--color-accent, #14b8a6);
    --pr-primary-text: var(--color-primary-text, #065f46);
    --pr-mint: color-mix(in srgb, var(--pr-primary) 7%, white);
    --pr-mint-strong: color-mix(in srgb, var(--pr-primary) 14%, white);
    --pr-line: rgb(15 23 42 / 0.07);
    --pr-line-strong: rgb(15 23 42 / 0.12);
    --pr-radius: 1.125rem;
    --pr-radius-lg: 1.5rem;
    --pr-radius-xl: 2rem;
    --pr-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 14px -6px rgb(15 23 42 / 0.08);
    --pr-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 18px 40px -18px rgb(15 23 42 / 0.18);
    --pr-shadow-lg: 0 2px 6px rgb(15 23 42 / 0.05), 0 40px 80px -32px rgb(2 44 34 / 0.38);
    --pr-glow: 0 18px 40px -16px color-mix(in srgb, var(--pr-primary) 55%, transparent);
    --pr-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pr-ink-gradient: linear-gradient(120deg, var(--pr-ink) 0%, var(--pr-ink) 42%, color-mix(in srgb, var(--pr-primary-text) 85%, var(--pr-ink)) 78%, var(--pr-primary) 100%);
    --pr-brand-gradient: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-accent) 100%);
    --pr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
    --pr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background: #fff;
    text-rendering: optimizeLegibility;
}

::selection {
    background: color-mix(in srgb, var(--pr-accent) 28%, white);
    color: var(--pr-ink);
}

html {
    scrollbar-color: color-mix(in srgb, var(--pr-primary) 45%, #cbd5e1) transparent;
}

:where(.home-page, .site-header, .footer-advanced) :focus-visible {
    outline: 2px solid var(--pr-accent);
    outline-offset: 3px;
    border-radius: 0.5rem;
}

.home-page {
    --home-radius: var(--pr-radius);
    --home-shadow: var(--pr-shadow-sm);
}

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

.home-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.8rem 0.375rem 0.65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pr-primary) 20%, transparent);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.55)) padding-box,
        var(--pr-mint);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 6px 16px -10px color-mix(in srgb, var(--pr-primary) 60%, transparent);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.2;
    color: var(--pr-primary-text);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.home-kicker::before {
    content: '';
    flex-shrink: 0;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 999px;
    background: var(--pr-brand-gradient);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr-primary) 18%, transparent);
    animation: pr-pulse 2.8s ease-in-out infinite;
}

:is(.detail-hero--immersive, .detail-spotlight, .home-cta-panel, .public-hero, .public-hero-sm) .home-kicker {
    border-color: rgb(94 234 212 / 0.28);
    background: rgb(94 234 212 / 0.1);
    box-shadow: none;
    color: #99f6e4;
}

.home-eyebrow-dark {
    border-color: rgb(94 234 212 / 0.3);
    background: rgb(94 234 212 / 0.08);
    color: #99f6e4;
}

.home-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
    background: var(--pr-ink-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.08em;
}

.home-section-title {
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.section-heading {
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.home-lead,
.section-lead {
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.7;
    color: #475569;
    text-wrap: pretty;
}

.home-section-head__main .home-section-title,
.home-section-head .home-section-title {
    margin-top: 1rem;
}

.home-section-head--split {
    border-bottom: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--pr-primary) 45%, transparent), var(--pr-line) 35%, transparent) bottom / 100% 1px no-repeat;
}

.home-text-link {
    text-decoration: none;
    background-image: var(--pr-brand-gradient), linear-gradient(#cbd5e1, #cbd5e1);
    background-repeat: no-repeat;
    background-position: 0 100%, 0 100%;
    background-size: 0 2px, 100% 1px;
    padding-bottom: 0.2em;
    transition: background-size 0.45s var(--pr-ease), color 0.2s ease;
}

.home-text-link:hover {
    color: var(--pr-primary-text);
    background-size: 100% 2px, 100% 1px;
}

.detail-hero--immersive .home-text-link {
    background-image: linear-gradient(#5eead4, #5eead4), linear-gradient(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.4));
    border-bottom: 0;
}

.detail-hero--immersive .home-text-link:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 999px !important;
    background-image: linear-gradient(120deg, var(--pr-primary) 0%, var(--pr-accent) 50%, var(--pr-primary) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), var(--pr-glow);
    letter-spacing: 0.005em;
    transition: background-position 0.7s var(--pr-ease), transform 0.25s var(--pr-ease), box-shadow 0.25s ease;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s var(--pr-ease);
    pointer-events: none;
}

.btn-primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    filter: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), 0 22px 44px -16px color-mix(in srgb, var(--pr-primary) 70%, transparent);
}

.btn-primary:hover::after {
    transform: translateX(120%);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.home-btn {
    border-radius: 999px !important;
}

main .rounded-full.border.border-primary.px-8 {
    padding: calc(0.75rem - 1px) 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: rgb(255 255 255 / 0.6);
    backdrop-filter: blur(8px);
    border-color: color-mix(in srgb, var(--pr-primary) 45%, transparent);
    transition: transform 0.35s var(--pr-ease), box-shadow 0.35s var(--pr-ease), border-color 0.35s, background-color 0.35s;
}

main .rounded-full.border.border-primary:hover {
    transform: translateY(-2px);
    border-color: var(--pr-primary);
    background: #fff;
    box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--pr-primary) 70%, transparent);
}

header[role="banner"] .btn-primary,
.site-header__cta {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 8px 20px -10px color-mix(in srgb, var(--pr-primary) 80%, transparent);
}

header[role="banner"] .btn-primary:hover {
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

header.site-header {
    background: rgb(255 255 255 / 0.72);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 var(--pr-line), 0 10px 30px -24px rgb(15 23 42 / 0.25);
}

header.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pr-primary) 55%, transparent) 30%, color-mix(in srgb, var(--pr-accent) 55%, transparent) 70%, transparent);
    opacity: 0.55;
    pointer-events: none;
}

.nav-mega-panel-inner {
    border-radius: 1.25rem;
    border-color: var(--pr-line);
    box-shadow: 0 30px 70px -24px rgb(15 23 42 / 0.28), 0 0 0 1px rgb(255 255 255 / 0.6) inset;
}

/* --------------------------------------------------------------------------
   Sections & atmosphere
   -------------------------------------------------------------------------- */

.home-section--hero {
    position: relative;
    isolation: isolate;
}

.home-section--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42rem 30rem at 88% 8%, color-mix(in srgb, var(--pr-accent) 20%, transparent), transparent 70%),
        radial-gradient(38rem 26rem at 2% 96%, color-mix(in srgb, var(--pr-primary) 14%, transparent), transparent 70%),
        radial-gradient(28rem 18rem at 48% -8%, rgb(99 102 241 / 0.07), transparent 70%);
    background-size: 120% 120%;
    animation: pr-aurora 22s ease-in-out infinite alternate;
}

.home-section--hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgb(15 23 42 / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(15 23 42 / 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%);
}

.home-section--muted {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(60rem 26rem at 100% 0%, color-mix(in srgb, var(--pr-accent) 9%, transparent), transparent 70%),
        radial-gradient(50rem 24rem at 0% 100%, color-mix(in srgb, var(--pr-primary) 8%, transparent), transparent 70%),
        linear-gradient(180deg, #f6faf9 0%, #f3f8f7 100%);
}

.home-section--muted::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgb(15 23 42 / 0.09) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    opacity: 0.55;
}

/* Breadcrumbs as a glass pill */
.home-page nav[aria-label="Breadcrumb"] > ol {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--pr-line);
    background: rgb(255 255 255 / 0.7);
    box-shadow: var(--pr-shadow-sm);
    font-size: 0.8125rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.home-page :is(.detail-hero__crumbs, .public-hero nav, .public-hero-sm nav)[aria-label="Breadcrumb"] > ol {
    border-color: rgb(255 255 255 / 0.14);
    background: rgb(255 255 255 / 0.08);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Hero collage — layered, tilted prints
   -------------------------------------------------------------------------- */

.home-hero-collage-grid {
    position: relative;
    isolation: isolate;
}

.home-hero-collage-main,
.home-hero-collage-cell {
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-lg);
    outline: 1px solid rgb(255 255 255 / 0.6);
    outline-offset: -1px;
}

.home-hero-collage-img {
    transition: transform 1.2s var(--pr-ease), filter 0.6s ease;
}

.home-hero-collage-main:hover .home-hero-collage-img,
.home-hero-collage-cell:hover .home-hero-collage-img {
    transform: scale(1.05);
}

@media (min-width: 1024px) {
    .home-hero-collage-grid::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 8% -6% -4% 10%;
        border-radius: 3rem;
        background: var(--pr-brand-gradient);
        opacity: 0.16;
        filter: blur(48px);
        pointer-events: none;
    }

    .home-hero-collage-grid::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: -2.25rem;
        bottom: -2rem;
        width: 9rem;
        height: 9rem;
        background-image: radial-gradient(color-mix(in srgb, var(--pr-primary) 55%, transparent) 1.4px, transparent 1.6px);
        background-size: 14px 14px;
        opacity: 0.6;
        pointer-events: none;
    }

    .home-hero-collage-main,
    .home-hero-collage-cell {
        transition: transform 0.8s var(--pr-ease), box-shadow 0.6s ease;
    }

    .home-hero-collage-main {
        transform: rotate(-3deg) translateY(1rem);
    }

    .home-hero-collage-stack > :first-child {
        transform: rotate(3deg) translate(0.75rem, -0.75rem);
    }

    .home-hero-collage-stack > :last-child {
        transform: rotate(-1.5deg) translate(1.25rem, 0.75rem);
    }

    .home-hero-collage-grid:hover > *,
    .home-hero-collage-grid:hover .home-hero-collage-stack > * {
        transform: none;
    }
}

.home-hero-copy .home-rating {
    width: fit-content;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--pr-line);
    background: rgb(255 255 255 / 0.75);
    box-shadow: var(--pr-shadow-sm);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

:is(.home-card, .home-benefit-card, .home-step-card, .home-quote-card, .detail-mosaic__item, .detail-related__item, .blog-card, .premium-card) {
    border-radius: var(--pr-radius-lg);
    border: 1px solid var(--pr-line);
    background: #fff;
    box-shadow: var(--pr-shadow-sm);
    transition:
        transform 0.45s var(--pr-ease),
        box-shadow 0.45s var(--pr-ease),
        border-color 0.3s ease;
}

:is(.home-card, .home-benefit-card, .home-step-card, .detail-mosaic__item, .detail-related__item, .blog-card):hover {
    border-color: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(140deg, color-mix(in srgb, var(--pr-primary) 70%, transparent), color-mix(in srgb, var(--pr-accent) 45%, transparent) 45%, var(--pr-line) 80%) border-box;
    box-shadow: 0 2px 4px rgb(15 23 42 / 0.04), 0 28px 50px -24px color-mix(in srgb, var(--pr-primary) 38%, rgb(15 23 42 / 0.4));
    transform: translateY(-5px);
}

.home-card {
    position: relative;
    padding: 1.75rem;
}

.home-card::before {
    content: '';
    position: absolute;
    top: 1.75rem;
    left: 0;
    width: 3px;
    height: 1.5rem;
    border-radius: 0 3px 3px 0;
    background: var(--pr-brand-gradient);
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.45s var(--pr-ease), opacity 0.3s ease;
}

.home-card:hover::before {
    transform: scaleY(1);
    opacity: 1;
}

.home-card__title {
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
}

.home-card__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.35s var(--pr-ease), color 0.2s ease;
}

.home-card:hover .home-card__action {
    gap: 0.6rem;
    color: var(--pr-primary);
}

.home-benefit-card {
    padding: 1.4rem 1.5rem;
}

.home-benefit-card__title {
    font-size: 1rem;
    letter-spacing: -0.01em;
}

/* Process steps: gradient orbs joined by a line */
.home-step-card {
    padding: 2rem 1.5rem 1.75rem;
}

.home-step-card__num {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--pr-brand-gradient);
    color: #fff;
    font-size: 0.9375rem;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--pr-primary) 10%, transparent), var(--pr-glow);
}

.home-step-card__title {
    margin-top: 1.25rem;
    font-size: 1rem;
}

@media (min-width: 1024px) {
    .home-steps--row > * {
        position: relative;
    }

    .home-steps--row > :not(:last-child)::after {
        content: '';
        position: absolute;
        top: 3.375rem;
        right: -1.3rem;
        width: 1.35rem;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, color-mix(in srgb, var(--pr-primary) 55%, transparent), color-mix(in srgb, var(--pr-accent) 55%, transparent));
        pointer-events: none;
    }
}

/* Lists */
.home-list--panel {
    border-radius: var(--pr-radius-lg);
    border-color: var(--pr-line);
    box-shadow: var(--pr-shadow);
}

.home-list__link {
    position: relative;
    transition: background 0.3s ease, padding 0.45s var(--pr-ease);
}

.home-list__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--pr-brand-gradient);
    transform: scaleY(0);
    transition: transform 0.4s var(--pr-ease);
}

.home-list__link:hover {
    background: linear-gradient(90deg, var(--pr-mint), transparent 85%);
    padding-left: 1.85rem;
}

.home-list__link:hover::before {
    transform: scaleY(1);
}

.home-list__meta {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--pr-mint);
    font-size: 0.75rem;
}

/* Checklists with gradient tick badges */
.home-checklist li {
    padding-left: 1.85rem;
}

.home-checklist li + li {
    margin-top: 0.7rem;
}

.home-checklist li::before {
    top: 0.18em;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--pr-check) center / 70% no-repeat, var(--pr-brand-gradient);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--pr-primary) 70%, transparent);
}

/* --------------------------------------------------------------------------
   Numbers
   -------------------------------------------------------------------------- */

.home-stat-grid__value,
.detail-stats-panel__value {
    background: linear-gradient(135deg, var(--pr-ink) 10%, var(--pr-primary-text) 60%, var(--pr-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.04em;
}

.home-stat-grid__value {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.05;
}

.home-stat-grid__label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-stat-grid > * {
    position: relative;
}

@media (min-width: 640px) {
    .home-stat-grid:not(.home-stat-grid--4) > :not(:last-child)::after {
        content: '';
        position: absolute;
        top: 15%;
        right: -0.75rem;
        bottom: 15%;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--pr-line-strong), transparent);
    }
}

.detail-stats-panel {
    gap: 0;
    border-radius: var(--pr-radius-lg);
    background: linear-gradient(180deg, #fff 0%, #f9fcfb 100%);
    box-shadow: var(--pr-shadow-lg);
    outline: 1px solid var(--pr-line);
}

@media (min-width: 768px) {
    .detail-stats-panel {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

.detail-stats-panel__item {
    position: relative;
    background: transparent;
    padding-block: 1.6rem;
}

@media (max-width: 767px) {
    .detail-stats-panel__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .home-split--center > .detail-frame,
    .home-split--center > .min-w-0:has(> .detail-frame) {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

@media (min-width: 768px) {
    .detail-stats-panel__item + .detail-stats-panel__item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 22%;
        bottom: 22%;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--pr-line-strong), transparent);
    }
}

.detail-stats-panel__value {
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
}

/* --------------------------------------------------------------------------
   Imagery
   -------------------------------------------------------------------------- */

.home-editorial-photo {
    border-radius: var(--pr-radius-lg);
    box-shadow: var(--pr-shadow-lg);
}

.home-figure-caption {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
}

.home-figure-caption::before {
    content: '';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1px;
    background: var(--pr-brand-gradient);
}

.home-figure-caption--center {
    justify-content: center;
}

.detail-hero__figure {
    border-radius: var(--pr-radius-xl);
    box-shadow:
        0 30px 60px -28px rgb(2 44 34 / 0.45),
        1.25rem 1.25rem 0 0 color-mix(in srgb, var(--pr-primary) 12%, transparent);
}

/* --------------------------------------------------------------------------
   Detail heroes
   -------------------------------------------------------------------------- */

.detail-hero__img {
    animation: pr-kenburns 16s var(--pr-ease) both;
}

.detail-hero__shade {
    background:
        linear-gradient(180deg, rgb(3 7 18 / 0.3) 0%, rgb(3 7 18 / 0.68) 52%, rgb(3 7 18 / 0.94) 100%),
        linear-gradient(100deg, color-mix(in srgb, var(--pr-primary) 42%, transparent) 0%, transparent 58%),
        radial-gradient(40rem 22rem at 90% 110%, color-mix(in srgb, var(--pr-accent) 28%, transparent), transparent 70%);
}

.detail-hero__shade::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pr-grain);
    opacity: 0.09;
    mix-blend-mode: overlay;
}

.detail-hero--immersive .detail-hero__title {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
    background: linear-gradient(180deg, #fff 35%, #a7f3d0 140%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.06em;
}

.detail-hero__title--dark {
    letter-spacing: -0.04em;
    background: var(--pr-ink-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.06em;
}

.detail-hero--split {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(44rem 28rem at 100% 0%, color-mix(in srgb, var(--pr-accent) 14%, transparent), transparent 70%),
        radial-gradient(30rem 20rem at 0% 100%, color-mix(in srgb, var(--pr-primary) 9%, transparent), transparent 70%),
        linear-gradient(180deg, #f7fbfa 0%, #fff 100%);
    border-bottom-color: var(--pr-line);
}

/* Dark page heroes */
.public-hero,
.public-hero-sm {
    position: relative;
}

.public-hero::after,
.public-hero-sm::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pr-grain);
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Detail components
   -------------------------------------------------------------------------- */

.detail-mosaic__item {
    padding: 1.75rem 1.75rem 1.75rem 2rem;
}

.detail-mosaic__item::after {
    width: 4px;
}

.detail-mosaic__index {
    font-size: 2.75rem;
    letter-spacing: -0.06em;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pr-primary) 45%, transparent), color-mix(in srgb, var(--pr-accent) 15%, transparent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.detail-timeline__num {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--pr-brand-gradient);
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px color-mix(in srgb, var(--pr-primary) 22%, transparent), var(--pr-glow);
}

.detail-timeline::before {
    top: 1.375rem;
    height: 2px;
    opacity: 0.5;
    background: repeating-linear-gradient(90deg, var(--pr-primary) 0 8px, transparent 8px 14px);
}

.detail-rail {
    border-left-color: color-mix(in srgb, var(--pr-primary) 22%, transparent);
}

.detail-rail__item::before {
    background: var(--pr-brand-gradient);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pr-primary) 14%, transparent);
}

.detail-related__item {
    padding: 1.75rem;
}

.detail-spotlight {
    background:
        radial-gradient(40rem 26rem at 0% 0%, rgb(20 184 166 / 0.22), transparent 70%),
        radial-gradient(36rem 24rem at 100% 100%, color-mix(in srgb, var(--pr-primary) 45%, transparent), transparent 70%),
        linear-gradient(135deg, #030712 0%, #0b2a29 50%, #064e3b 100%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    animation: pr-aurora 26s ease-in-out infinite alternate;
}

.detail-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pr-grain);
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.detail-spotlight > * {
    position: relative;
    z-index: 1;
}

.detail-spotlight__card {
    border-radius: var(--pr-radius-lg);
    background: linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
    border: 1px solid rgb(255 255 255 / 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.45s var(--pr-ease), border-color 0.3s ease, background 0.3s ease;
}

.detail-spotlight__card:hover {
    transform: translateY(-4px);
    border-color: rgb(94 234 212 / 0.45);
    background: linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05));
}

/* --------------------------------------------------------------------------
   CTA panel — dark aurora
   -------------------------------------------------------------------------- */

.home-cta-panel {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: var(--pr-radius-xl);
    background:
        radial-gradient(34rem 24rem at 0% 0%, rgb(20 184 166 / 0.28), transparent 70%),
        radial-gradient(30rem 22rem at 60% 120%, color-mix(in srgb, var(--pr-primary) 40%, transparent), transparent 70%),
        linear-gradient(140deg, #030712 0%, #0a2622 55%, #053b2f 100%);
    box-shadow: var(--pr-shadow-lg);
    color: #cbd5e1;
}

.home-cta-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--pr-grain);
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.home-cta-panel :is(.home-section-title, h2, h3) {
    color: #fff;
}

.home-cta-panel :is(.home-lead, .home-checklist li, p:not(.home-kicker)) {
    color: rgb(226 232 240 / 0.82);
}

.home-cta-panel .home-btn {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 20px 40px -16px rgb(20 184 166 / 0.65);
}

.home-cta-panel__media {
    background: transparent;
    overflow: hidden;
}

.home-cta-panel__media img {
    transition: transform 1.4s var(--pr-ease);
}

.home-cta-panel:hover .home-cta-panel__media img {
    transform: scale(1.04);
}

@media (min-width: 1024px) {
    .home-cta-panel__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #071a17 0%, rgb(7 26 23 / 0.35) 22%, transparent 55%);
        pointer-events: none;
    }
}

/* --------------------------------------------------------------------------
   Quotes & FAQ
   -------------------------------------------------------------------------- */

.home-quote-card {
    position: relative;
    overflow: hidden;
}

.home-quote-card::before {
    content: '\201C';
    position: absolute;
    top: -1.75rem;
    left: 1.25rem;
    font-size: 9rem;
    line-height: 1;
    font-family: Georgia, 'Times New Roman', serif;
    background: var(--pr-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.18;
    pointer-events: none;
}

.home-quote-card__text {
    position: relative;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    letter-spacing: -0.01em;
}

.home-faq--panel {
    display: grid;
    gap: 0.75rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.home-faq--panel .home-faq__item,
.home-faq--panel .home-faq__item:first-child {
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    background: #fff;
    box-shadow: var(--pr-shadow-sm);
    transition: border-color 0.3s ease, box-shadow 0.4s var(--pr-ease), transform 0.4s var(--pr-ease);
}

.home-faq--panel .home-faq__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--pr-shadow);
}

.home-faq__item:has([aria-expanded="true"]) {
    border-color: color-mix(in srgb, var(--pr-primary) 35%, transparent);
    background:
        linear-gradient(180deg, var(--pr-mint), #fff 70%);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--pr-primary) 45%, transparent);
}

.home-faq__trigger {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding-block: 1.2rem;
}

.home-faq__icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--pr-mint-strong);
    color: var(--pr-primary-text);
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease, transform 0.45s var(--pr-ease);
}

[aria-expanded="true"] .home-faq__icon {
    background: var(--pr-brand-gradient);
    color: #fff;
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Industries atlas & video wall polish
   -------------------------------------------------------------------------- */

.home-industries-atlas__hero {
    border-radius: var(--pr-radius-xl);
    box-shadow: var(--pr-shadow-lg);
}

.home-industries-atlas__tile {
    border-radius: var(--pr-radius-lg);
    transition: transform 0.45s var(--pr-ease), box-shadow 0.45s var(--pr-ease);
}

.home-industries-atlas__tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 50px -24px rgb(15 23 42 / 0.3);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer-advanced::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pr-grain);
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.footer-cta-panel {
    background-image:
        radial-gradient(30rem 18rem at 100% 0%, rgb(255 255 255 / 0.18), transparent 70%),
        linear-gradient(120deg, #047857 0%, #0d9488 35%, #10b981 65%, #047857 100%);
    background-size: 100% 100%, 240% 100%;
    animation: pr-flow 14s ease-in-out infinite alternate;
    box-shadow: 0 40px 80px -36px rgb(16 185 129 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.2);
}

.footer-cta-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pr-grain);
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.footer-cta-panel > * {
    position: relative;
    z-index: 1;
}

.footer-icon-box {
    border-radius: 0.75rem;
    background: linear-gradient(145deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.footer-nav-link:hover .footer-icon-box {
    background: var(--pr-brand-gradient);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Forms on public pages
   -------------------------------------------------------------------------- */

.home-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.home-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select):focus {
    border-color: color-mix(in srgb, var(--pr-primary) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pr-primary) 14%, transparent);
    outline: none;
}

/* --------------------------------------------------------------------------
   Scroll-driven reveals (progressive enhancement)
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        :is(
            .home-card,
            .home-benefit-card,
            .home-step-card,
            .home-quote-card,
            .home-editorial-photo,
            .home-list--panel,
            .home-cta-panel,
            .detail-mosaic__item,
            .detail-related__item,
            .detail-spotlight__card,
            .detail-timeline__item,
            .blog-card,
            .home-faq--panel .home-faq__item
        ) {
            animation: pr-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 85%;
        }

        :is(.home-section-title, .home-section-head .home-lead) {
            animation: pr-fade linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-kicker::before,
    .home-section--hero::before,
    .detail-spotlight,
    .footer-cta-panel,
    .detail-hero__img {
        animation: none !important;
    }

    :is(.home-card, .home-benefit-card, .home-step-card, .detail-mosaic__item, .detail-related__item, .blog-card, .detail-spotlight__card, .home-faq--panel .home-faq__item):hover,
    .home-hero-collage-main,
    .home-hero-collage-stack > *,
    .btn-primary:hover {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes pr-aurora {
    0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    100% { background-position: 30% 20%, 70% 80%, 50% 50%; }
}

@keyframes pr-flow {
    0% { background-position: 0 0, 0% 50%; }
    100% { background-position: 0 0, 100% 50%; }
}

@keyframes pr-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr-primary) 18%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pr-primary) 6%, transparent); }
}

@keyframes pr-kenburns {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}

@keyframes pr-rise {
    from { opacity: 0; translate: 0 32px; scale: 0.97; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes pr-fade {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}