/* ================================================================
   LANDING.CSS — page-specific styles for landing.html only.
   Depends on root-tokens.css + core.css.
   ================================================================ */

/* ----------------------------------------------------------------
   PAGE-LOCAL GRADIENT TOKENS — these exact OKLab gradients are
   reused verbatim by multiple unrelated sections below. Defined
   once here (not in root-tokens.css — they're a landing-page
   rendering technique, not a site-wide design token) instead of
   duplicating the same 3-8 line gradient in every rule that needs it.
   ---------------------------------------------------------------- */
:root {
    /* Dark surface-1 -> surface-2 band, used by full-bleed dark
       sections (.cta-card, .platform-hero). */
    --gradient-surface-dark-band: linear-gradient(
        155deg in oklab,
        var(--color-surface-dark-1) 0%,
        color-mix(in oklab, var(--color-surface-dark-1) 90%, var(--color-surface-dark-2)) 15%,
        color-mix(in oklab, var(--color-surface-dark-1) 70%, var(--color-surface-dark-2)) 33%,
        color-mix(in oklab, var(--color-surface-dark-1) 45%, var(--color-surface-dark-2)) 52%,
        color-mix(in oklab, var(--color-surface-dark-1) 20%, var(--color-surface-dark-2)) 74%,
        var(--color-surface-dark-2) 100%
    );

    /* Light card face gradient (cream-50 -> surface), used by every
       card-shaped component (.spotlight-card, .review-card). */
    --gradient-card-surface: linear-gradient(
        155deg in oklab,
        var(--color-text-on-dark) 0%,
        color-mix(in oklab, var(--color-text-on-dark) 90%, var(--color-surface)) 15%,
        color-mix(in oklab, var(--color-text-on-dark) 75%, var(--color-surface)) 30%,
        color-mix(in oklab, var(--color-text-on-dark) 58%, var(--color-surface)) 45%,
        color-mix(in oklab, var(--color-text-on-dark) 40%, var(--color-surface)) 60%,
        color-mix(in oklab, var(--color-text-on-dark) 22%, var(--color-surface)) 78%,
        color-mix(in oklab, var(--color-text-on-dark) 8%, var(--color-surface)) 91%,
        var(--color-surface) 100%
    );

    /* Bottom-anchored dark fade over tile imagery, used by both the
       platform hero band and the 4 platform tiles beneath it. */
    --gradient-tile-overlay: linear-gradient(
        0deg in oklab,
        color-mix(in oklab, var(--color-surface-dark-2) 92%, var(--color-gray-850)) 0%,
        color-mix(in oklab, var(--color-surface-dark-2) 55%, transparent) 55%,
        transparent 100%
    );
}

/* ----------------------------------------------------------------
   HERO — full-bleed dark band
   ---------------------------------------------------------------- */
.hero-section {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 560px;
    overflow: hidden;
    isolation: isolate;
}

.hero-visual {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* 
       FIXED: Switched interpolation from "in oklch" to "in oklab".
       OKLab calculates color steps in a straight, uniform line, which 
       completely eliminates the sudden "shimmering" jumps in dark values.
    */
    background: linear-gradient(
        160deg in oklab,
        var(--color-surface-dark-1) 0%,
        color-mix(in oklab, var(--color-surface-dark-1) 90%, var(--color-surface-dark-2)) 15%,
        color-mix(in oklab, var(--color-surface-dark-1) 75%, var(--color-surface-dark-2)) 30%,
        color-mix(in oklab, var(--color-surface-dark-1) 58%, var(--color-surface-dark-2)) 45%,
        color-mix(in oklab, var(--color-surface-dark-1) 40%, var(--color-surface-dark-2)) 60%,
        color-mix(in oklab, var(--color-surface-dark-1) 22%, var(--color-surface-dark-2)) 78%,
        color-mix(in oklab, var(--color-surface-dark-1) 8%, var(--color-surface-dark-2)) 91%,
        var(--color-surface-dark-2) 100%
    );
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Updated transparent fade using OKLab for perfectly smooth black transitions */
    background: linear-gradient(
        0deg in oklab,
        color-mix(in oklab, var(--color-surface-dark-2) 98%, var(--color-gray-850)) 0%,
        color-mix(in oklab, var(--color-surface-dark-2) 92%, var(--color-rolex-green-850)) 15%,
        color-mix(in oklab, var(--color-surface-dark-2) 75%, transparent) 30%,
        color-mix(in oklab, var(--color-surface-dark-2) 45%, transparent) 50%,
        color-mix(in oklab, var(--color-surface-dark-2) 20%, transparent) 75%,
        transparent 100%
    );
    position: relative;
}

.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Adjusted to 0.04 to give a tiny bit more dithering help on desktop monitors */
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

.hero-context {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: var(--space-64);
    padding-left: calc(var(--space-40) + env(safe-area-inset-left));
    padding-right: calc(var(--space-40) + env(safe-area-inset-right));
}

.hero-title {
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-800);
    font-size: var(--font-size-5xl);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    color: var(--color-text-on-dark);
    max-width: 760px;
    margin-bottom: var(--space-20);
}

.hero-subtitle {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-on-dark-secondary);
    max-width: 560px;
    margin-bottom: var(--space-32);
}

.hero-actions {
    display: flex;
    gap: var(--space-12);
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   STATEMENT BAND — a quiet pause between Hero and Platform's dark
   hero band, on the same cream the rest of the page's light
   sections use. Full-height enough to feel deliberate, not just a
   gap, and closes with a scroll cue that gives the eye somewhere
   to go next instead of just fading out.
   ---------------------------------------------------------------- */
.statement-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
    padding: var(--space-96) var(--space-40);
    background: var(--color-background);
    border-top: var(--border-width-thin) solid var(--color-border);
    border-bottom: var(--border-width-thin) solid var(--color-border);
}

.statement-context {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.statement-text {
    font-family: var(--font-family-display);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-500);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    text-align: center;
    margin: 0;
}

.statement-accent {
    color: var(--color-primary);
    font-style: italic;
}

.statement-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: var(--space-40);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-standard);
}

.statement-scroll-cue:hover,
.statement-scroll-cue:focus-visible {
    color: var(--color-primary);
}

.statement-scroll-cue:focus-visible {
    outline: var(--border-width-medium) solid var(--color-primary);
    outline-offset: var(--space-8);
}

.statement-scroll-label {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.statement-scroll-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    border: var(--border-width-medium) solid var(--color-border);
    animation: statement-scroll-float 2.2s ease-in-out infinite;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.statement-scroll-cue:hover .statement-scroll-circle,
.statement-scroll-cue:focus-visible .statement-scroll-circle {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary-sm);
}

.statement-scroll-arrow {
    width: 12px;
    height: 7px;
    color: var(--color-primary);
}

@keyframes statement-scroll-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .statement-scroll-circle {
        animation: none;
    }
}

@media (max-width: 720px) {
    .statement-section {
        min-height: 480px;
        padding: var(--space-64) var(--space-24);
    }

    .statement-text {
        font-size: var(--font-size-3xl);
    }
}

/* ----------------------------------------------------------------
   CTA — dark card
   ---------------------------------------------------------------- */
.cta-section {
    padding: var(--space-96) var(--space-40);
}

.cta-context {
    max-width: var(--container-max);
    margin: 0 auto;
}

.cta-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-80) var(--space-48);
    border-radius: var(--radius-3xl);
    background: var(--gradient-surface-dark-band);
}

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-text-on-dark-secondary);
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    border: var(--border-width-thin) solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    margin-bottom: var(--space-24);
}

.cta-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-4xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-weight-600);
    color: var(--color-text-on-dark);
    max-width: 640px;
    margin: 0 auto var(--space-16);
}

.cta-title-accent {
    background: linear-gradient(
        180deg,
        var(--color-text-on-dark) 0%,
        color-mix(in oklch, var(--color-text-on-dark) 60%, var(--color-primary)) 55%,
        var(--color-primary) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    font-weight: var(--font-weight-500);
}

.cta-subtitle {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    color: var(--color-text-on-dark-tertiary);
    max-width: 480px;
    margin: 0 auto var(--space-40);
}

.cta-actions {
    display: inline-flex;
    gap: var(--space-12);
    flex-wrap: wrap;
    justify-content: center;
}

.cta-actions .btn-primary {
    box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.cta-actions .btn-primary:hover {
    box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--color-primary) 65%, transparent);
}

/* ----------------------------------------------------------------
   SHARED SECTION HEADER — eyebrow + title + intro, used by the
   Stats/Tracks/How/Tools sections below. .review-head/.cta-eyebrow
   etc. are left as-is (pre-existing, not worth refactoring for 2 uses).
   ---------------------------------------------------------------- */
.section-head {
    max-width: 640px;
    margin: 0 auto var(--space-64);
    text-align: center;
}

.section-tag {
    display: inline-block;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-primary);
    margin-bottom: var(--space-16);
}

.section-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-600);
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin-bottom: var(--space-16);
}

.section-title-accent {
    color: var(--color-primary);
    font-style: italic;
}

.section-intro {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------
   COMMUNITY SPOTLIGHT — Nike "team"-style row of person cards
   ---------------------------------------------------------------- */
.spotlight-section {
    padding: var(--space-96) var(--space-40);
}

.spotlight-context {
    max-width: var(--container-max);
    margin: 0 auto;
}

.spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-24);
}

.spotlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-40) var(--space-24);
    text-align: center;
    background: var(--gradient-card-surface);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(var(--color-background-rgb), 0.6);
    transition:
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}

.spotlight-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow:
        var(--shadow-glow-primary-sm),
        inset 0 1px 0 rgba(var(--color-background-rgb), 0.7);
}

.spotlight-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-circle);
    margin-bottom: var(--space-16);
    background: linear-gradient(
        155deg in oklab,
        color-mix(in oklab, var(--color-primary) 22%, transparent) 0%,
        color-mix(in oklab, var(--color-primary) 14%, transparent) 40%,
        color-mix(in oklab, var(--color-primary) 8%, transparent) 70%,
        color-mix(in oklab, var(--color-primary) 6%, transparent) 100%
    );
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary-active);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-600);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.spotlight-card:hover .spotlight-avatar {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.spotlight-name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
    color: var(--color-text);
}

.spotlight-role {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-primary);
    margin-bottom: var(--space-12);
}

.spotlight-quote {
    font-family: var(--font-family-display);
    font-style: italic;
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
    padding-top: var(--space-12);
    border-top: var(--border-width-thin) solid var(--color-border);
    width: 100%;
}

.spotlight-card-muted {
    border-style: dashed;
    background: var(--color-background);
    box-shadow: none;
    opacity: 0.75;
}

.spotlight-card-muted:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
}

.spotlight-card-muted .spotlight-avatar {
    background: color-mix(in srgb, var(--color-text-secondary) 12%, transparent);
    box-shadow: none;
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------
   YOUR PLATFORM, YOUR RULES — full-bleed hero band + 2x2 tile grid
   Mirrors the Nike-style block from the design reference: the top
   band reuses the same visual treatment as .hero-section (full-bleed,
   dark OKLab gradient, bottom-anchored content), and the four tiles
   below are a strict edge-to-edge 2x2 cube grid, each one a mini
   version of that same hero — no rounded cards, no page gutters.
   ---------------------------------------------------------------- */
.platform-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 400px;
    margin-bottom: 4px;
    /* Same base tint family as the tiles below */
    background: var(--gradient-surface-dark-band);
}

/* Same panel as .platform-tile-overlay: bottom-anchored content over a fade */
.platform-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-16);
    padding: var(--space-28);
    background: var(--gradient-tile-overlay);
}

.platform-title {
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-800);
    font-size: var(--font-size-4xl);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    color: var(--color-text-on-dark);
    margin: 0;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.platform-tile {
    position: relative;
    display: block;
    isolation: isolate;
    height: 320px;
    text-decoration: none;
}

.platform-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-12);
    padding: var(--space-28);
    background: var(--gradient-tile-overlay);
    transition: background var(--duration-base) var(--ease-out);
}

/* Distinct base tint per tile, same OKLab dark-surface family as the hero */
#platform-apps { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }
#platform-tools { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }
#platform-lessons { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }
#platform-guides { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }
#platform-roadmaps { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }
#platform-templates { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }
#platform-projects { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }
#platform-services { background: linear-gradient(155deg in oklab, var(--color-surface-dark-1), var(--color-surface-dark-2)); }

.platform-tile:hover .platform-tile-overlay {
    background: linear-gradient(
        0deg in oklab,
        color-mix(in oklab, var(--color-surface-dark-2) 96%, var(--color-gray-850)) 0%,
        color-mix(in oklab, var(--color-surface-dark-2) 65%, transparent) 60%,
        transparent 100%
    );
}

.platform-tile-tag {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-on-dark-secondary);
}

.platform-tile-title {
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-700);
    font-size: var(--font-size-xl);
    color: var(--color-text-on-dark);
    margin: 0 0 var(--space-4);
}

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

/* ----------------------------------------------------------------
   REVIEWS — light section
   ---------------------------------------------------------------- */
.review-section {
    padding: var(--space-96) var(--space-40);
}

.review-context {
    max-width: var(--container-max);
    margin: 0 auto;
}

.review-head {
    max-width: 640px;
    margin: 0 auto var(--space-64);
    text-align: center;
}

.review-tag {
    display: inline-block;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-primary);
    margin-bottom: var(--space-16);
}

.review-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-600);
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin-bottom: var(--space-16);
}

.review-title-accent {
    color: var(--color-primary);
    font-style: italic;
}

.review-intro {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.review-marquee {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.review-row {
    position: relative;
    overflow: hidden;
}

/* Fade the row's edges with a plain gradient overlay instead of a CSS
   mask — masking live animated content forces the browser to repaint
   the mask every frame, which is what caused the flicker. A static
   pseudo-element sitting on top never needs to repaint. */
.review-row::before,
.review-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 1;
    pointer-events: none;
}

.review-row::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-background), transparent);
}

.review-row::after {
    right: 0;
    background: linear-gradient(270deg, var(--color-background), transparent);
}

.review-track {
    display: flex;
    width: max-content;
    gap: var(--space-24);
    will-change: transform;
    backface-visibility: hidden;
}

.review-row-left .review-track {
    animation: review-marquee-left 140s linear infinite;
}

.review-row-right .review-track {
    animation: review-marquee-right 160s linear infinite;
}

@keyframes review-marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes review-marquee-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

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

.review-card {
    display: flex;
    flex-direction: column;
    flex: none;
    width: min(360px, 82vw);
    gap: var(--space-16);
    padding: var(--space-32);
    background: var(--gradient-card-surface);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow:
        var(--shadow-xs),
        inset 0 1px 0 rgba(var(--color-background-rgb), 0.6);
}

.review-text {
    flex: 1;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.review-profile {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    background: linear-gradient(
        155deg in oklab,
        color-mix(in oklab, var(--color-primary) 22%, transparent) 0%,
        color-mix(in oklab, var(--color-primary) 14%, transparent) 40%,
        color-mix(in oklab, var(--color-primary) 8%, transparent) 70%,
        color-mix(in oklab, var(--color-primary) 6%, transparent) 100%
    );
    color: var(--color-primary-active);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-600);
}

.review-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-name {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-600);
    color: var(--color-text);
}

.review-role {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}