/**
 * NitishLabs shared visual system
 * ----------------------------
 * Dark zinc base, violet accent (use sparingly: brand-mark, ACTIVE, active filter,
 * category chip, title hover). Headings: Space Grotesk. Body: Inter.
 *
 * Tokens (use these; avoid inventing new Tailwind radius/color combos):
 *   Space   --labs-space-1 … 8  →  4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px
 *   Type    --labs-text-hero | section | card | body | meta
 *   Radius  --labs-radius-btn (12) | card (20) | badge (999) | panel (32)
 *   Motion  --labs-duration (250ms) + --labs-ease-out | --labs-ease
 *   Color   zinc surfaces; violet only for the 10% accent moments above
 *
 * Cover images (other agents):
 * Path: labs/posts/<slug>/carousel/cover.svg (prefer) or cover.png
 * Size: 1600×900 (16:9). Cards crop with object-fit: cover.
 * Fallback when missing: slide-01.svg (portrait carousel title slide).
 * Match accents: --labs-violet, --labs-indigo, --labs-cyan below.
 */

:root {
 /* Surfaces & text */
 --labs-bg: #09090b;
 --labs-fg: #e4e4e7;
 --labs-muted: #a1a1aa;
 --labs-faint: #71717a;
 --labs-line: rgba(255, 255, 255, 0.10);
 --labs-line-strong: rgba(255, 255, 255, 0.12);
 --labs-surface: rgba(255, 255, 255, 0.04);
 --labs-surface-hover: rgba(255, 255, 255, 0.065);

 /* Accent (10% rule: earn attention) */
 --labs-violet: #8b5cf6;
 --labs-violet-deep: #7c3aed;
 --labs-violet-soft: #c4b5fd;
 --labs-indigo: #6366f1;
 --labs-cyan: #22d3ee;
 --labs-cyan-deep: #0e7490;

 --labs-grad-brand: linear-gradient(135deg, var(--labs-violet-deep) 0%, var(--labs-indigo) 48%, var(--labs-cyan) 100%);
 --labs-grad-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
 --labs-grad-glow: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(99, 102, 241, 0.32), transparent 68%);
 --labs-grad-cover-fallback: linear-gradient(145deg, #18181b 0%, #1e1b4b 48%, #164e63 100%);

 /* Spacing scale (4px base) */
 --labs-space-1: 0.25rem;  /* 4 */
 --labs-space-2: 0.5rem;   /* 8 */
 --labs-space-3: 0.75rem;  /* 12 */
 --labs-space-4: 1rem;     /* 16 */
 --labs-space-5: 1.5rem;   /* 24 */
 --labs-space-6: 2rem;     /* 32 */
 --labs-space-7: 3rem;     /* 48 */
 --labs-space-8: 4rem;     /* 64 */

 /* Type scale */
 --labs-text-hero: clamp(2.75rem, 6vw, 4.5rem);
 --labs-text-section: 2.25rem;
 --labs-text-card: 1.375rem;
 --labs-text-body: 1.0625rem;
 --labs-text-meta: 0.8125rem;
 --labs-leading-body: 1.7;
 --labs-measure: 70ch;

 /* Radius system */
 --labs-radius-btn: 0.75rem;   /* 12 */
 --labs-radius-card: 1.25rem;  /* 20 */
 --labs-radius-badge: 999px;
 --labs-radius-panel: 2rem;    /* 32 */
 /* Back-compat aliases */
 --labs-radius-lg: var(--labs-radius-panel);
 --labs-radius-md: var(--labs-radius-card);

 --labs-cover-ratio: 16 / 9;

 /* Motion */
 --labs-duration: 250ms;
 --labs-duration-slow: 10s;
 --labs-ease: cubic-bezier(0.4, 0, 0.2, 1);
 --labs-ease-out: cubic-bezier(0, 0, 0.2, 1);

 /* Elevation */
 --labs-shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
 --labs-shadow-glass-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 40px rgba(0, 0, 0, 0.4);
 --labs-shadow-brand: 0 6px 18px rgba(99, 102, 241, 0.18);
}

/* - - Base - - */
body {
 font-family: 'Inter', system-ui, sans-serif;
 font-size: var(--labs-text-body);
 background-color: var(--labs-bg);
 color: var(--labs-fg);
}

.heading {
 font-family: 'Space Grotesk', sans-serif;
 letter-spacing: -0.02em;
}

/* Type wiring: override mixed Tailwind sizes on shared patterns */
main > section.page-hero.text-center h1.heading,
main > section:first-of-type.text-center h1.heading {
 font-size: var(--labs-text-hero);
 line-height: 1.08;
 letter-spacing: -0.03em;
}

main > section.page-hero:not(.text-center) h1.heading {
 font-size: clamp(2rem, 4vw, 3rem);
 line-height: 1.15;
 letter-spacing: -0.025em;
}

main > section:first-of-type > p,
.prose-labs {
 max-width: var(--labs-measure);
}

h2.heading.text-3xl {
 font-size: var(--labs-text-section);
 line-height: 1.2;
}

h2.heading.text-2xl {
 font-size: calc(var(--labs-text-section) * 0.85);
 line-height: 1.25;
}

h2.heading.text-xl,
h3.heading.text-lg,
h3.heading {
 font-size: var(--labs-text-card);
 line-height: 1.3;
}

article header h1.heading {
 font-size: clamp(2rem, 4.5vw, 3rem);
 line-height: 1.15;
 letter-spacing: -0.025em;
}

/* - - Surfaces: glass / cards - - */
.glass,
.labs-surface {
 background: var(--labs-surface);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border: 1px solid var(--labs-line);
 box-shadow: var(--labs-shadow-glass);
}

.card-transition {
 transition:
 transform var(--labs-duration) var(--labs-ease-out),
 box-shadow var(--labs-duration) var(--labs-ease-out),
 border-color var(--labs-duration) var(--labs-ease-out),
 background-color var(--labs-duration) var(--labs-ease-out);
}

.glass-hover:hover {
 background: var(--labs-surface-hover);
 border-color: var(--labs-line-strong);
 box-shadow: var(--labs-shadow-glass-hover);
 transform: translateY(-4px);
}

.glass-hover:hover .heading,
.glass-hover:hover h3.heading {
 color: #fff;
}

/* Quiet icon tilt on model tiles / glass cards only */
.glass-hover:hover > i,
.glass-hover:hover .labs-icon-well i {
 transform: rotate(3deg);
}

.glass-hover > i,
.labs-icon-well i {
 display: inline-block;
 transition: transform var(--labs-duration) var(--labs-ease-out);
}

/* Radius: map common Tailwind radii on Labs chrome to the system */
.glass.rounded-3xl,
.glass.rounded-2xl,
.post-card.rounded-3xl,
a.glass.rounded-3xl,
article.glass.rounded-3xl {
 border-radius: var(--labs-radius-card);
}

.glass.rounded-full,
.glass.is-pill {
 border-radius: var(--labs-radius-badge);
 border-color: var(--labs-line-strong);
 box-shadow:
  0 1px 0 rgba(255, 255, 255, 0.06) inset,
  0 4px 14px rgba(0, 0, 0, 0.22);
}

.brand-mark,
.brand-mark.rounded-xl {
 border-radius: var(--labs-radius-btn);
}

/* Opt-in section rhythm (index / ideas) */
.labs-section {
 margin-top: var(--labs-space-7);
}

.labs-section--lg {
 margin-top: var(--labs-space-8);
}

.labs-section--tight {
 margin-top: var(--labs-space-6);
}

.section-head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: var(--labs-space-4);
 margin-bottom: var(--labs-space-5);
}

.nav-link {
 color: var(--labs-muted);
 transition: color var(--labs-duration) var(--labs-ease-out);
}

.nav-link.is-active {
 color: #fff;
}

.nav-link:hover {
 color: #fff;
}

button.nav-link {
 color: var(--labs-muted);
}

button.nav-link:hover {
 color: #fff;
}

.meta-label {
 font-size: var(--labs-text-meta);
 font-weight: 500;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--labs-faint);
}

.meta-plain {
 font-size: var(--labs-text-meta);
 color: var(--labs-faint);
}

.panel-card {
 padding: var(--labs-space-5) calc(var(--labs-space-5) + 0.15rem);
 border-radius: var(--labs-radius-card);
}

.panel-card__head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: var(--labs-space-5);
}

.panel-card__title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: var(--labs-text-card);
 font-weight: 600;
 color: #fff;
 letter-spacing: -0.02em;
}

.icon-chip {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: var(--labs-radius-btn);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid var(--labs-line);
 color: var(--labs-muted);
}

.post-card__title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: var(--labs-text-card);
 font-weight: 600;
 color: #fff;
 line-height: 1.3;
 letter-spacing: -0.02em;
 margin-bottom: var(--labs-space-2);
 transition: color var(--labs-duration) var(--labs-ease-out);
}

.group:hover .post-card__title {
 color: var(--labs-violet-soft);
}

/* - - Brand / accent (restrained) - - */
.brand-mark {
 background: var(--labs-grad-brand);
 box-shadow: var(--labs-shadow-brand);
}

.labs-glow {
 background-image: var(--labs-grad-glow);
 background-size: 120% 120%;
 background-position: 50% 0%;
 animation: labs-aurora var(--labs-duration-slow) var(--labs-ease) infinite alternate;
}

@keyframes labs-aurora {
 from {
 background-position: 48% 0%;
 opacity: 1;
 }
 to {
 background-position: 52% 4%;
 opacity: 0.88;
 }
}

@media (prefers-reduced-motion: reduce) {
 .labs-glow {
 animation: none;
 }
 .glass-hover:hover {
 transform: none;
 }
 .glass-hover:hover > i,
 .glass-hover:hover .labs-icon-well i {
 transform: none;
 }
 .accent-dot {
 animation: none;
 }
 .context-card:hover {
 transform: none;
 }
 .context-strip {
 animation: none;
 opacity: 1;
 transform: none;
 }
 .post-card:hover .post-card-cover img,
 .group:hover .post-card-cover img {
 transform: none;
 }
}

.accent-text {
 color: var(--labs-violet-soft);
}

.accent-dot {
 background: var(--labs-violet);
 box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18), 0 0 10px rgba(139, 92, 246, 0.35);
 animation: labs-accent-pulse 2.4s var(--labs-ease) infinite;
}

@keyframes labs-accent-pulse {
 0%,
 100% {
 box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16), 0 0 8px rgba(139, 92, 246, 0.28);
 opacity: 1;
 }
 50% {
 box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.1), 0 0 14px rgba(139, 92, 246, 0.4);
 opacity: 0.85;
 }
}

/* System label (design language) */
.labs-label {
 display: inline-block;
 font-size: var(--labs-text-meta);
 font-weight: 500;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--labs-faint);
 margin-bottom: var(--labs-space-2);
}

/* Icon wells: zinc, not rainbow */
.labs-icon-well {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: var(--labs-radius-btn);
 background: rgba(255, 255, 255, 0.05);
 color: var(--labs-muted);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

/* Quiet multi-hue wells already in markup (index / ideas) */
#ideas .w-10.rounded-2xl,
#experiments .w-10.rounded-2xl,
#models .w-10.rounded-2xl,
#pinned-row .w-10.rounded-2xl,
#ideas .icon-chip,
#experiments .icon-chip,
#models .icon-chip,
#pinned-row .icon-chip {
 width: 2.5rem;
 height: 2.5rem;
 border-radius: var(--labs-radius-btn);
 background: rgba(255, 255, 255, 0.08) !important;
 border: 1px solid var(--labs-line);
 color: var(--labs-muted) !important;
}

#ideas .text-violet-400,
#experiments .text-indigo-300,
#models .text-cyan-400,
#pinned-row .text-violet-400,
#models-grid .text-cyan-400,
#ideas .icon-chip,
#experiments .icon-chip,
#models .icon-chip,
#pinned-row .icon-chip {
 color: var(--labs-muted) !important;
}

/* Accent bullets / experiment hovers → zinc + single violet hover */
#pinned-ideas .bg-violet-500 {
 background-color: var(--labs-faint) !important;
}

#experiments-list a:hover {
 color: var(--labs-violet-soft) !important;
}

/* - - Buttons / badges / filters - - */
.labs-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 2rem;
 padding: 0 var(--labs-space-3);
 border-radius: var(--labs-radius-btn);
 border: 1px solid var(--labs-line);
 background: var(--labs-surface);
 color: var(--labs-muted);
 font-size: var(--labs-text-meta);
 font-weight: 500;
 transition:
 color var(--labs-duration) var(--labs-ease-out),
 border-color var(--labs-duration) var(--labs-ease-out),
 background-color var(--labs-duration) var(--labs-ease-out);
}

.labs-btn:hover {
 color: #fff;
 border-color: var(--labs-line-strong);
}

.labs-badge,
.filter-btn {
 display: inline-flex;
 align-items: center;
 height: 2rem;
 padding: 0 0.75rem;
 border-radius: var(--labs-radius-badge);
 border: 1px solid var(--labs-line-strong);
 background: rgba(255, 255, 255, 0.03);
 color: var(--labs-muted);
 font-size: var(--labs-text-meta);
 font-weight: 500;
 letter-spacing: 0.02em;
 line-height: 1;
 transition:
 color var(--labs-duration) var(--labs-ease-out),
 border-color var(--labs-duration) var(--labs-ease-out),
 background-color var(--labs-duration) var(--labs-ease-out);
}

.filter-btn {
 cursor: pointer;
 color: var(--labs-faint);
 border-color: rgba(255, 255, 255, 0.1);
}

.filter-btn:hover {
 color: var(--labs-muted);
}

.filter-btn.active {
 background: rgba(139, 92, 246, 0.12);
 border-color: rgba(139, 92, 246, 0.45);
 color: var(--labs-violet-soft);
}

/* Status pills: ACTIVE earns violet; others stay zinc */
.labs-badge--active,
#experiments-list span[class*="rounded-full"] {
 border-radius: var(--labs-radius-badge);
 font-size: var(--labs-text-meta);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

#experiments-list span[class*="rounded-full"] {
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid var(--labs-line-strong);
 color: var(--labs-muted);
}

/* Category chips on posts (violet reserved) */
article header .glass.rounded-full,
article header span.glass {
 border-radius: var(--labs-radius-badge);
 font-size: var(--labs-text-meta);
 color: var(--labs-violet-soft);
 padding: 0.25rem 0.65rem;
}

/* - - Nav - - */
nav a:not(.group) {
 position: relative;
 transition: color var(--labs-duration) var(--labs-ease-out);
}

nav a:not(.group)::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: -0.2em;
 height: 1px;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: center;
 transition: transform var(--labs-duration) var(--labs-ease-out);
 opacity: 0.55;
}

nav a:not(.group):hover {
 color: #fff;
}

nav a:not(.group):hover::after {
 transform: scaleX(1);
}

#mobile-nav a::after {
 display: none;
}

.labs-nav-link {
 position: relative;
 transition: color var(--labs-duration) var(--labs-ease-out);
}

.labs-nav-link::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: -0.2em;
 height: 1px;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: center;
 transition: transform var(--labs-duration) var(--labs-ease-out);
 opacity: 0.55;
}

.labs-nav-link:hover {
 color: #fff;
}

.labs-nav-link:hover::after {
 transform: scaleX(1);
}

footer a {
 position: relative;
 transition: color var(--labs-duration) var(--labs-ease-out);
}

footer a::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: -0.15em;
 height: 1px;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: center;
 transition: transform var(--labs-duration) var(--labs-ease-out);
 opacity: 0.45;
}

footer a:hover::after {
 transform: scaleX(1);
}

footer {
 border-color: var(--labs-line);
 padding-top: var(--labs-space-6);
 padding-bottom: var(--labs-space-6);
}

/* - - Context strip (index / ideas) - - */
.context-strip {
 display: grid;
 gap: var(--labs-space-5);
 animation: labs-fade-up 0.55s var(--labs-ease-out) both;
}

@keyframes labs-fade-up {
 from {
 opacity: 0;
 transform: translateY(10px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@media (min-width: 768px) {
 .context-strip {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--labs-space-5);
 }
}

.context-card {
 border-radius: var(--labs-radius-card);
 padding: var(--labs-space-5);
 background: rgba(255, 255, 255, 0.055);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--labs-line);
 box-shadow: var(--labs-shadow-glass);
 transition:
 transform var(--labs-duration) var(--labs-ease-out),
 background-color var(--labs-duration) var(--labs-ease-out),
 border-color var(--labs-duration) var(--labs-ease-out),
 box-shadow var(--labs-duration) var(--labs-ease-out);
}

.context-card:hover {
 background: var(--labs-surface-hover);
 border-color: var(--labs-line-strong);
 box-shadow: var(--labs-shadow-glass-hover);
 transform: translateY(-4px);
}

.context-card h2 {
 font-family: 'Space Grotesk', sans-serif;
 font-size: var(--labs-text-meta);
 font-weight: 600;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--labs-violet-soft);
 margin-bottom: var(--labs-space-2);
}

.context-card p {
 color: var(--labs-muted);
 font-size: var(--labs-text-body);
 line-height: 1.6;
}

/* - - Post / stream covers - - */
.post-card-cover,
.post-cover {
 position: relative;
 overflow: hidden;
 border-radius: var(--labs-radius-card);
 border: 1px solid var(--labs-line);
 background: var(--labs-grad-cover-fallback);
 aspect-ratio: var(--labs-cover-ratio);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.post-card-cover::after,
.post-cover::after {
 content: '';
 position: absolute;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(
 180deg,
 rgba(9, 9, 11, 0.12) 0%,
 transparent 28%,
 transparent 72%,
 rgba(9, 9, 11, 0.35) 100%
 );
 z-index: 1;
}

/* Article covers are Visual Wiki Maps (tall portrait ~3:4 / 1080×1350) */
.post-cover {
 aspect-ratio: 3 / 4;
 max-width: min(100%, 420px);
 margin-left: auto;
 margin-right: auto;
}

.post-card-cover {
 border-radius: var(--labs-radius-card) var(--labs-radius-card) 0 0;
 border-bottom: none;
 margin: -1px -1px 0;
}

.post-card-cover img,
.post-cover img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform var(--labs-duration) var(--labs-ease-out);
}

.post-card:hover .post-card-cover img,
.group:hover .post-card-cover img {
 transform: scale(1.02);
}

.post-cover img {
 object-fit: contain;
 background: var(--labs-bg);
}

.post-card-cover.is-fallback img,
.post-cover.is-fallback img {
 object-fit: cover;
 object-position: center top;
}

.post-card-cover.is-empty::after,
.post-cover.is-empty::after {
 content: '';
 position: absolute;
 inset: 0;
 background: var(--labs-grad-cover-fallback);
 z-index: 0;
}

.post-card {
 overflow: hidden;
 padding: 0;
 border-radius: var(--labs-radius-card);
}

.post-card__body {
 padding: var(--labs-space-5);
}

.post-card__body .text-xs,
.post-card__body [class*="text-xs"] {
 font-size: var(--labs-text-meta);
}

/* - - Carousel (posts) - - */
.carousel-track {
 display: flex;
 gap: var(--labs-space-4);
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 padding-bottom: var(--labs-space-2);
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.carousel-slide {
 flex: 0 0 min(86vw, 420px);
 scroll-snap-align: start;
 margin: 0;
}

.carousel-slide img {
 width: 100%;
 height: auto;
 border-radius: var(--labs-radius-card);
 border: 1px solid var(--labs-line);
 background: #f7f5f1;
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.5),
 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* - - Prose - - */
.prose-labs {
 font-size: var(--labs-text-body);
}

.prose-labs p {
 margin-bottom: 1.35rem;
 color: var(--labs-muted);
 line-height: var(--labs-leading-body);
}

.prose-labs h2 {
 font-family: 'Space Grotesk', sans-serif;
 color: #fff;
 font-size: var(--labs-text-card);
 font-weight: 600;
 letter-spacing: -0.02em;
 margin: var(--labs-space-7) 0 var(--labs-space-3);
}

.prose-labs ul,
.prose-labs ol {
 margin: 0 0 var(--labs-space-5);
 padding-left: 1.2rem;
 color: var(--labs-muted);
}

.prose-labs li {
 margin-bottom: 0.55rem;
 line-height: 1.65;
}

.prose-labs blockquote {
 border-left: 2px solid rgba(139, 92, 246, 0.4);
 padding: 0.35rem 0 0.35rem var(--labs-space-4);
 margin: var(--labs-space-5) 0;
 color: #d4d4d8;
 font-style: italic;
}

.prose-labs pre {
 background: var(--labs-surface);
 border: 1px solid var(--labs-line);
 border-radius: var(--labs-radius-card);
 padding: var(--labs-space-4) 1.15rem;
 overflow-x: auto;
 font-size: 0.85rem;
 color: #d4d4d8;
 margin: var(--labs-space-5) 0 var(--labs-space-5);
 line-height: 1.55;
 box-shadow: var(--labs-shadow-glass);
}

.prose-labs a {
 color: var(--labs-violet-soft);
 text-decoration: none;
 background-image: linear-gradient(currentColor, currentColor);
 background-position: 50% 100%;
 background-repeat: no-repeat;
 background-size: 0% 1px;
 transition:
 background-size var(--labs-duration) var(--labs-ease-out),
 color var(--labs-duration) var(--labs-ease-out);
}

.prose-labs a:hover {
 background-size: 100% 1px;
 color: #fff;
}

/* Slightly more air on major index/ideas bands without editing every utility */
main.labs-glow > section {
 scroll-margin-top: 5rem;
}

main > section.border-b,
.page-hero {
 padding-top: var(--labs-space-6);
 padding-bottom: var(--labs-space-7);
}

.page-hero.border-b,
main > section.page-hero.border-b {
 border-color: transparent;
 position: relative;
}

.page-hero.border-b::after,
main > section.page-hero.border-b::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 pointer-events: none;
 background: linear-gradient(
 90deg,
 transparent 0%,
 rgba(255, 255, 255, 0.12) 22%,
 rgba(255, 255, 255, 0.18) 50%,
 rgba(255, 255, 255, 0.12) 78%,
 transparent 100%
 );
}

.section-title {
 font-family: 'Space Grotesk', sans-serif;
 font-size: var(--labs-text-section);
 font-weight: 600;
 color: #fff;
 letter-spacing: -0.02em;
 line-height: 1.2;
}

.section-sub {
 margin-top: var(--labs-space-2);
 color: var(--labs-faint);
 font-size: 0.95rem;
 line-height: 1.5;
}

#about {
 padding-bottom: var(--labs-space-4);
}