/* =============================================================================
   Routeless v2 — "Wayfinding" design system
   -----------------------------------------------------------------------------
   Concept: Routeless = many possible routes, one clear path (see logo).
   Dark ink chrome (nav / hero / final CTA / footer), porcelain body,
   a single flat violet used like a highlighted route on a map.
   No gradients. No glows.

   Type:
     Display  — Bricolage Grotesque
     Body     — Instrument Sans
     Utility  — IBM Plex Mono (wayfinding labels, route badges)

   Loaded AFTER styles.css. Applied site-wide via body.v2 (set in base.html).
   Marketing pages use the r-* component classes; functional pages (apply,
   review, legal, thanks, errors) keep their legacy markup and are re-themed
   by the overrides at the bottom of this file.
   ============================================================================= */

:root {
    --v2-ink: #17131f;
    --v2-ink-2: #211b2e;
    --v2-ink-line: #2e2740;
    --v2-ink-text: #f0edf5;
    --v2-ink-soft: #a89fbc;

    --v2-paper: #f2f1f4;
    --v2-card: #ffffff;
    --v2-wash: #e9e4f4;
    --v2-line: #dbd7e2;
    --v2-text: #1c1726;
    --v2-muted: #5d5768;

    --v2-violet: #6d28d9;
    --v2-violet-deep: #581cad;
    --v2-violet-bright: #8b5cf6;
    --v2-violet-soft: #c9b8f0;

    /* semantic colors tuned for light surfaces */
    --v2-good: #15803d;
    --v2-warn: #b45309;
    --v2-bad: #dc2626;

    --v2-display: 'Bricolage Grotesque', 'Outfit', sans-serif;
    --v2-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --v2-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;

    --v2-container: 1200px;
    --v2-rail: 72px;
    --v2-radius: 10px;
    --v2-radius-lg: 16px;
}

/* =============================================================================
   Global chrome — nav & footer (all pages)
   ============================================================================= */

.nav {
    background: var(--v2-ink);
    border-bottom: 1px solid var(--v2-ink-line);
}

.nav-link {
    font-family: var(--v2-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--v2-ink-soft);
}

.nav-link:hover {
    color: var(--v2-ink-text);
}

.nav-cta,
.nav-link.nav-cta {
    background: var(--v2-violet);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}

.nav-cta:hover {
    background: var(--v2-violet-deep);
    opacity: 1;
}

@media (max-width: 768px) {
    .nav-menu {
        background: var(--v2-ink-2);
        border-bottom: 1px solid var(--v2-ink-line);
    }
}

.footer {
    background: var(--v2-ink);
    border-top: 1px solid var(--v2-ink-line);
}

body.v2 .footer-tagline {
    font-family: var(--v2-display);
    color: var(--v2-ink-soft);
}

body.v2 .footer-links h4 {
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-ink-soft);
}

.footer-links a {
    font-family: var(--v2-body);
    color: var(--v2-ink-text);
    opacity: 0.75;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--v2-ink-text);
}

body.v2 .footer-bottom p {
    font-family: var(--v2-body);
    color: var(--v2-ink-soft);
}

/* =============================================================================
   v2 base (site-wide)
   ============================================================================= */

body.v2 {
    font-family: var(--v2-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--v2-text);
    background: var(--v2-paper);
    background-image: none;
}

body.v2::before {
    display: none; /* remove noise overlay from styles.css */
}

body.v2 h1,
body.v2 h2,
body.v2 h3,
body.v2 h4 {
    font-family: var(--v2-display);
    color: inherit;
}

/* neutralize styles.css globals that assume the dark theme */
body.v2 p {
    color: inherit;
}

body.v2 a {
    color: var(--v2-violet);
}

body.v2 a:hover {
    color: var(--v2-violet-deep);
}

/* keep chrome link colors (body.v2 a outranks the base .nav/.footer rules) */
body.v2 .nav-link {
    color: var(--v2-ink-soft);
}

body.v2 .nav-link:hover {
    color: var(--v2-ink-text);
}

body.v2 .nav-logo,
body.v2 .footer-logo {
    color: inherit;
}

body.v2 .footer-links a {
    color: var(--v2-ink-text);
    opacity: 0.75;
}

body.v2 .footer-links a:hover {
    color: var(--v2-ink-text);
    opacity: 1;
}

body.v2 :focus-visible {
    outline: 2px solid var(--v2-violet);
    outline-offset: 3px;
}

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

a.r-btn,
.r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.625rem;
    font-family: var(--v2-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.r-btn svg {
    flex-shrink: 0;
    transition: transform 160ms ease;
}

.r-btn:hover svg {
    transform: translateX(3px);
}

body.v2 .r-btn--violet,
.r-btn--violet {
    background: var(--v2-violet);
    color: #fff;
}

body.v2 .r-btn--violet:hover,
.r-btn--violet:hover {
    background: var(--v2-violet-deep);
    color: #fff;
}

body.v2 .r-btn--ghost-dark,
.r-btn--ghost-dark {
    background: transparent;
    color: var(--v2-ink-text);
    border-color: rgba(240, 237, 245, 0.28);
}

body.v2 .r-btn--ghost-dark:hover,
.r-btn--ghost-dark:hover {
    border-color: rgba(240, 237, 245, 0.7);
    color: var(--v2-ink-text);
}

body.v2 .r-btn--ink,
.r-btn--ink {
    background: var(--v2-ink);
    color: var(--v2-ink-text);
}

body.v2 .r-btn--ink:hover,
.r-btn--ink:hover {
    background: var(--v2-ink-2);
    color: var(--v2-ink-text);
}

body.v2 .r-btn--ghost,
.r-btn--ghost {
    background: transparent;
    color: var(--v2-text);
    border-color: var(--v2-line);
}

body.v2 .r-btn--ghost:hover,
.r-btn--ghost:hover {
    border-color: var(--v2-text);
    color: var(--v2-text);
}

.r-btn--block {
    width: 100%;
}

/* =============================================================================
   Section shell + route rail
   -----------------------------------------------------------------------------
   Every light section shares a two-column grid: a narrow "rail" column that
   carries a faint vertical path with a violet stop marker, and the content
   column. The rail is the page-level echo of the hero's route fan.
   ============================================================================= */

body.v2 .r-section {
    padding: 6.5rem 0;
}

.r-shell {
    max-width: var(--v2-container);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: var(--v2-rail) minmax(0, 1fr);
}

.r-rail {
    position: relative;
}

.r-rail::before {
    content: '';
    position: absolute;
    left: 8px;
    top: -6.5rem;   /* run through section padding so lines meet */
    bottom: -6.5rem;
    width: 2px;
    background: var(--v2-line);
}

.r-section--first .r-rail::before {
    top: 0.4rem;
}

.r-section--last .r-rail::before {
    bottom: -6.5rem;
}

/* stop marker sits at the section header line */
.r-stop {
    position: absolute;
    left: 3px;
    top: 0.4rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--v2-violet);
    box-shadow: 0 0 0 5px var(--v2-paper), 0 0 0 7px var(--v2-violet-soft);
}

.r-content {
    min-width: 0;
}

/* ---- Section headers ---- */

.r-eyebrow {
    display: block;
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-violet);
    margin-bottom: 1.25rem;
}

.r-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    max-width: 21em;
}

.r-lede {
    font-size: 1.1875rem;
    color: var(--v2-muted);
    max-width: 40em;
}

/* =============================================================================
   Hero
   ============================================================================= */

body.v2 .r-hero {
    position: relative;
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    padding-top: calc(var(--nav-height) + 7rem);
    padding-bottom: 0;
    overflow: hidden;
}

.r-hero .r-shell {
    position: relative;
    z-index: 1;
    display: block;
}

.r-hero-eyebrow {
    display: block;
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
    margin-bottom: 2rem;
}

.r-hero-title {
    font-size: clamp(2.75rem, 6.6vw, 5.25rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 1.75rem;
    max-width: 12em;
}

.r-hero-title em {
    font-style: normal;
    color: var(--v2-violet-bright);
}

.r-hero-sub {
    font-size: 1.25rem;
    line-height: 1.65;
    color: var(--v2-ink-soft);
    max-width: 34em;
    margin-bottom: 2.5rem;
}

.r-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.r-hero-meta {
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    color: var(--v2-ink-soft);
    letter-spacing: 0.04em;
}

/* Route fan — many faint paths, one violet route */
.r-hero-routes {
    display: block;
    width: 100%;
    height: clamp(180px, 26vw, 340px);
    margin-top: 1rem;
}

.r-hero-routes path {
    fill: none;
}

.r-hero-routes .faint {
    stroke: var(--v2-ink-line);
    stroke-width: 1.5;
}

.r-hero-routes .route {
    stroke: var(--v2-violet-bright);
    stroke-width: 3;
    stroke-linecap: round;
}

/* draw-in on load */
@media (prefers-reduced-motion: no-preference) {
    .r-hero-routes .route {
        stroke-dasharray: 1520;
        stroke-dashoffset: 1520;
        animation: r-draw 1.4s cubic-bezier(0.45, 0, 0.2, 1) 0.35s forwards;
    }

    .r-hero-routes .faint {
        opacity: 0;
        animation: r-fade 0.9s ease 0.2s forwards;
    }

    .r-hero-eyebrow,
    .r-hero-title,
    .r-hero-sub,
    .r-hero-actions,
    .r-hero-meta {
        opacity: 0;
        transform: translateY(14px);
        animation: r-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    }

    .r-hero-title { animation-delay: 0.08s; }
    .r-hero-sub { animation-delay: 0.16s; }
    .r-hero-actions { animation-delay: 0.24s; }
    .r-hero-meta { animation-delay: 0.32s; }
}

@keyframes r-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes r-fade {
    to { opacity: 1; }
}

@keyframes r-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   Intro video
   ============================================================================= */

.r-video-frame {
    margin-top: 2.5rem;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    overflow: hidden;
    background: var(--v2-ink);
}

.r-video-embed {
    position: relative;
    padding-bottom: 56.25%;
}

.r-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =============================================================================
   Problem
   ============================================================================= */

.r-problem-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4rem;
    margin-top: 3rem;
}

.r-problem-item {
    padding: 1.75rem 0;
    border-top: 1px solid var(--v2-line);
}

.r-problem-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.r-problem-item p {
    color: var(--v2-muted);
    font-size: 1rem;
}

/* =============================================================================
   Two ways to work
   ============================================================================= */

.r-paths-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.r-path-card {
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    transition: border-color 160ms ease;
}

.r-path-card:hover {
    border-color: var(--v2-violet);
}

.r-path-tag {
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-violet);
    margin-bottom: 1.25rem;
}

.r-path-card h3 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.375rem;
}

.r-path-price {
    font-family: var(--v2-mono);
    font-size: 0.875rem;
    color: var(--v2-muted);
    margin-bottom: 1.25rem;
}

.r-path-card > p {
    color: var(--v2-muted);
    margin-bottom: 1.75rem;
}

.r-path-card ul {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: 0.625rem;
}

.r-path-card ul li {
    position: relative;
    padding-left: 1.375rem;
    color: var(--v2-text);
    font-size: 1rem;
}

.r-path-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.66em;
    width: 10px;
    height: 2px;
    background: var(--v2-violet);
}

.r-path-card .r-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* =============================================================================
   The route (signature section) — vertical route with numbered stops.
   The only numbered element on the page: the offer genuinely is a sequence.
   ============================================================================= */

.r-route-list {
    margin-top: 3.5rem;
    position: relative;
    display: grid;
    gap: 0;
}

.r-route-stop {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 2rem;
    padding-bottom: 3.25rem;
}

.r-route-stop:last-child {
    padding-bottom: 0;
}

/* the violet route line itself */
.r-route-stop::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 48px;
    bottom: 4px;
    width: 2px;
    background: var(--v2-violet);
}

.r-route-stop:last-child::before {
    display: none;
}

.r-route-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--v2-mono);
    font-size: 1rem;
    font-weight: 600;
    background: var(--v2-paper);
    border: 2px solid var(--v2-violet);
    color: var(--v2-violet);
}

.r-route-stop--start .r-route-badge {
    background: var(--v2-violet);
    color: #fff;
}

.r-route-body {
    padding-top: 0.5rem;
}

.r-route-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.r-route-body h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.r-route-flag {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
}

.r-route-flag--start {
    background: var(--v2-violet);
    color: #fff;
}

.r-route-flag--optional {
    background: var(--v2-wash);
    color: var(--v2-violet-deep);
}

.r-route-body p {
    color: var(--v2-muted);
    max-width: 38em;
}

/* =============================================================================
   Capabilities
   ============================================================================= */

.r-cap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
}

.r-cap-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-cap-tile {
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 1.75rem;
    transition: border-color 160ms ease;
}

.r-cap-tile:hover {
    border-color: var(--v2-violet);
}

.r-cap-tile h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

.r-cap-tile ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.r-cap-tile li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    color: var(--v2-muted);
}

.r-cap-tile li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 2px;
    background: var(--v2-violet-soft);
}

/* =============================================================================
   Work / proof cards (law firms)
   ============================================================================= */

.r-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
}

.r-work-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.r-work-card {
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 1.75rem;
}

.r-work-tag {
    display: inline-block;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-violet);
    margin-bottom: 0.875rem;
}

.r-work-card h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.r-work-card p {
    font-size: 0.9375rem;
    color: var(--v2-muted);
}

/* =============================================================================
   Founder card (law firms)
   ============================================================================= */

.r-founder {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 3rem;
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    padding: 3rem;
}

.r-founder-photo {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 8%; /* portrait source: lift crop to the face */
    background: var(--v2-wash);
    border: 3px solid var(--v2-wash);
    margin-bottom: 1.25rem;
}

.r-founder-aside h3 {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.r-founder-role {
    font-size: 0.9375rem;
    color: var(--v2-muted);
    margin-bottom: 1.25rem;
}

.r-founder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.r-founder-chip {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3125rem 0.625rem;
    border-radius: 4px;
    background: var(--v2-wash);
    color: var(--v2-violet-deep);
}

.r-founder-lead {
    font-size: 1.125rem;
    color: var(--v2-text);
    margin-bottom: 1rem;
}

.r-founder-body p {
    color: var(--v2-muted);
    margin-bottom: 1.5rem;
}

.r-founder-points {
    display: grid;
    gap: 0.75rem;
}

.r-founder-point {
    position: relative;
    padding-left: 1.375rem;
    color: var(--v2-text);
    font-size: 1rem;
}

.r-founder-point::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.66em;
    width: 10px;
    height: 2px;
    background: var(--v2-violet);
}

/* =============================================================================
   Packages (tiers)
   ============================================================================= */

.r-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
    align-items: stretch;
}

.r-tier {
    display: flex;
    flex-direction: column;
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    padding: 2.25rem;
}

.r-tier--featured {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: var(--v2-ink-text);
}

.r-tier-tag {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-violet);
    margin-bottom: 1rem;
    min-height: 1rem;
}

.r-tier--featured .r-tier-tag {
    color: var(--v2-violet-soft);
}

.r-tier h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}

.r-tier-tagline {
    font-size: 0.9375rem;
    color: var(--v2-muted);
    margin-bottom: 1.75rem;
}

.r-tier--featured .r-tier-tagline {
    color: var(--v2-ink-soft);
}

.r-tier-price {
    font-family: var(--v2-display);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.r-tier-price small {
    font-size: 1.125rem;
    font-weight: 500;
}

.r-tier-price-label {
    display: block;
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-muted);
    margin: 0.5rem 0 1.75rem;
}

.r-tier--featured .r-tier-price-label {
    color: var(--v2-ink-soft);
}

.r-tier ul {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--v2-line);
    display: grid;
    gap: 0.625rem;
}

.r-tier--featured ul {
    border-top-color: var(--v2-ink-line);
}

.r-tier li {
    position: relative;
    padding-left: 1.375rem;
    font-size: 0.9375rem;
}

.r-tier li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 2px;
    background: var(--v2-violet);
}

.r-tier--featured li::before {
    background: var(--v2-violet-bright);
}

.r-tier-note {
    font-size: 0.8125rem;
    color: var(--v2-muted);
    margin-bottom: 1.75rem;
}

.r-tier--featured .r-tier-note {
    color: var(--v2-ink-soft);
}

.r-tier .r-btn {
    margin-top: auto;
}

.r-tiers-footnote {
    margin-top: 2rem;
    font-size: 0.9375rem;
    color: var(--v2-muted);
}

/* =============================================================================
   Managed plans
   ============================================================================= */

.r-managed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
}

.r-managed-card {
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    padding: 2rem;
}

.r-managed-card--featured {
    background: var(--v2-wash);
    border-color: var(--v2-violet-soft);
}

.r-managed-price {
    display: inline-block;
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--v2-violet);
    margin-bottom: 1rem;
}

.r-managed-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}

.r-managed-card > p {
    font-size: 0.9375rem;
    color: var(--v2-muted);
    margin-bottom: 1.25rem;
}

.r-managed-card ul {
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--v2-line);
    display: grid;
    gap: 0.5rem;
}

.r-managed-card--featured ul {
    border-top-color: var(--v2-violet-soft);
}

.r-managed-card li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    color: var(--v2-text);
}

.r-managed-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 2px;
    background: var(--v2-violet);
}

.r-managed-note {
    margin-top: 3rem;
    padding: 2.5rem;
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
}

.r-managed-note h4 {
    font-family: var(--v2-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}

.r-managed-note p {
    color: var(--v2-muted);
    max-width: 46em;
}

/* =============================================================================
   FAQ
   ============================================================================= */

.r-faq-list {
    margin-top: 2.5rem;
    max-width: 780px;
    border-top: 1px solid var(--v2-line);
}

body.v2 .faq-item {
    border-bottom: 1px solid var(--v2-line);
}

body.v2 .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.375rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--v2-body);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--v2-text);
}

body.v2 .faq-question:hover {
    color: var(--v2-violet-deep);
}

body.v2 .faq-icon {
    flex-shrink: 0;
    color: var(--v2-violet);
    transition: transform 200ms ease;
}

body.v2 .faq-item.active .faq-icon {
    transform: rotate(180deg);
}

body.v2 .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
}

body.v2 .faq-item.active .faq-answer {
    max-height: 600px;
}

body.v2 .faq-answer p {
    padding: 0 0 1.375rem;
    color: var(--v2-muted);
    max-width: 44em;
}

/* =============================================================================
   Final CTA — the destination
   ============================================================================= */

body.v2 .r-cta {
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    padding: 7rem 0;
    text-align: center;
}

.r-cta .r-shell {
    display: block;
}

.r-cta-marker {
    width: 22px;
    height: 22px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    border: 2px solid var(--v2-violet-bright);
    display: flex;
    align-items: center;
    justify-content: center;
}

.r-cta-marker::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v2-violet-bright);
}

.r-cta h2 {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 17em;
    margin: 0 auto 1.25rem;
}

.r-cta p {
    font-size: 1.1875rem;
    color: var(--v2-ink-soft);
    max-width: 36em;
    margin: 0 auto 2.5rem;
}

.r-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.r-cta-note {
    margin-top: 2rem;
    font-size: 0.9375rem;
    color: var(--v2-ink-soft);
}

/* =============================================================================
   Work / portfolio — case cards & homepage teaser
   ============================================================================= */

.r-case-list {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}

.r-case {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    overflow: hidden;
}

.r-case-media {
    position: relative;
    background: var(--v2-ink);
    min-height: 320px;
}

.r-case-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
}

.r-case-body {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.r-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.r-case-tag {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-violet);
    background: var(--v2-wash);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

.r-case-body h3 {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 0.875rem;
}

.r-case-body > p {
    font-size: 0.9875rem;
    color: var(--v2-muted);
    margin-bottom: 1.5rem;
}

.r-case-points {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--v2-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    width: 100%;
}

.r-case-points li {
    position: relative;
    padding-left: 1.125rem;
    font-size: 0.875rem;
    color: var(--v2-text);
}

.r-case-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 2px;
    background: var(--v2-violet);
}

.r-case-link {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--v2-violet);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.r-case-link:hover {
    color: var(--v2-violet-deep);
}

/* confidential (NDA) case — no screenshot, redacted panel */
.r-case--nda {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: var(--v2-ink-text);
}

.r-case--nda .r-case-body > p {
    color: var(--v2-ink-soft);
}

.r-case--nda .r-case-points {
    border-top-color: var(--v2-ink-line);
}

.r-case--nda .r-case-points li {
    color: var(--v2-ink-text);
}

.r-case--nda .r-case-tag {
    background: var(--v2-ink-2);
    color: var(--v2-violet-bright);
}

.r-case-media--nda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: var(--v2-ink-2);
    border-right: 1px solid var(--v2-ink-line);
    padding: 2.5rem;
}

.r-case-media--nda svg {
    color: var(--v2-violet-bright);
}

.r-case-nda-label {
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-ink-soft);
    text-align: center;
}

.r-case-nda-bars {
    display: grid;
    gap: 0.5rem;
    width: min(260px, 70%);
}

.r-case-nda-bars span {
    display: block;
    height: 12px;
    border-radius: 3px;
    background: var(--v2-ink-line);
}

.r-case-nda-bars span:nth-child(2) { width: 78%; }
.r-case-nda-bars span:nth-child(3) { width: 56%; }

@media (max-width: 900px) {
    .r-case-media--nda {
        aspect-ratio: auto;
        min-height: 220px;
        border-right: none;
        border-bottom: 1px solid var(--v2-ink-line);
    }
}

/* homepage teaser grid */
.r-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.r-showcase-card {
    display: block;
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    overflow: hidden;
    color: var(--v2-text);
    transition: border-color 160ms ease, transform 160ms ease;
}

.r-showcase-card:hover {
    border-color: var(--v2-violet-soft);
    transform: translateY(-2px);
    color: var(--v2-text);
}

.r-showcase-media {
    aspect-ratio: 16 / 10;
    background: var(--v2-ink);
    overflow: hidden;
}

.r-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
}

.r-showcase-caption {
    padding: 1rem 1.25rem 1.125rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.r-showcase-caption strong {
    font-family: var(--v2-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.r-showcase-caption span {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-muted);
    white-space: nowrap;
}

.r-showcase-actions {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* two-card managed grid */
.r-managed-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
}

@media (max-width: 1024px) {
    .r-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .r-case {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-case-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .r-case-media img {
        position: static;
    }

    .r-case-body {
        padding: 1.75rem;
    }

    .r-managed-grid--two {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .r-showcase-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =============================================================================
   =============================================================================
   Legacy page re-theming (apply, review, legal, thanks, errors)
   These pages keep their original markup; the rules below re-skin the old
   styles.css classes for the light v2 theme.
   =============================================================================
   ============================================================================= */

/* ---- shared bits ---- */

body.v2 .section-tag {
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--v2-violet);
}

body.v2 .section-subtitle {
    color: var(--v2-muted);
}

body.v2 .back-link {
    color: var(--v2-muted);
}

body.v2 .back-link:hover {
    color: var(--v2-text);
}

/* legacy buttons → v2 look */
body.v2 .btn {
    font-family: var(--v2-body);
    font-weight: 600;
    border-radius: 8px;
}

body.v2 .btn-primary {
    background: var(--v2-violet);
    color: #fff;
    box-shadow: none;
}

body.v2 .btn-primary:hover {
    background: var(--v2-violet-deep);
    transform: none;
    box-shadow: none;
    color: #fff;
}

body.v2 .btn-secondary,
body.v2 .btn-outline {
    background: transparent;
    color: var(--v2-text);
    border: 1px solid var(--v2-line);
}

body.v2 .btn-secondary:hover,
body.v2 .btn-outline:hover {
    background: transparent;
    border-color: var(--v2-text);
    color: var(--v2-text);
}

/* dark-hero variants (review page hero keeps legacy .hero markup) */
body.v2 .hero {
    background: var(--v2-ink);
    color: var(--v2-ink-text);
}

body.v2 .hero-bg {
    display: none;
}

body.v2 .hero-badge {
    background: transparent;
    border: 1px solid var(--v2-ink-line);
    color: var(--v2-violet-soft);
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
}

body.v2 .badge-dot {
    background: var(--v2-violet-bright);
    animation: none;
}

body.v2 .hero-title {
    color: var(--v2-ink-text);
}

body.v2 .gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--v2-violet-bright);
}

body.v2 .hero-subtitle {
    color: var(--v2-ink-soft);
}

/* semantic score colors tuned for light surfaces */
body.v2 .good { color: var(--v2-good); }
body.v2 .warn { color: var(--v2-warn); }
body.v2 .bad  { color: var(--v2-bad); }
body.v2 .rr-good { --score-color: var(--v2-good); }
body.v2 .rr-warn { --score-color: var(--v2-warn); }
body.v2 .rr-bad  { --score-color: var(--v2-bad); }
body.v2 .rr-na   { --score-color: var(--v2-muted); }

/* ---- Legal pages (privacy, terms, messaging, data-deletion) ---- */

body.v2 .legal-updated {
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    color: var(--v2-muted);
}

body.v2 .legal-header p {
    color: var(--v2-muted);
}

body.v2 .legal-content p,
body.v2 .legal-content li,
body.v2 .legal-ordered li {
    color: var(--v2-muted);
}

body.v2 .legal-content li::before {
    color: var(--v2-violet);
}

body.v2 .consent-preview-label {
    color: var(--v2-muted);
}

body.v2 .consent-preview-box {
    background: var(--v2-card);
    border: 1px dashed var(--v2-line);
}

body.v2 .consent-preview-item {
    color: var(--v2-muted);
}

/* ---- Apply page ---- */

body.v2 .apply-subtitle {
    color: var(--v2-muted);
}

body.v2 .apply-form {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .form-section {
    border-bottom-color: var(--v2-line);
}

body.v2 .form-label {
    color: var(--v2-text);
}

body.v2 .form-label .optional,
body.v2 .form-hint,
body.v2 .form-note {
    color: var(--v2-muted);
}

body.v2 .form-input,
body.v2 .form-textarea,
body.v2 .form-select {
    background: var(--v2-paper);
    border-color: var(--v2-line);
    color: var(--v2-text);
    font-family: var(--v2-body);
}

body.v2 .form-input::placeholder,
body.v2 .form-textarea::placeholder {
    color: #9b95a8;
}

body.v2 .form-input:focus,
body.v2 .form-textarea:focus,
body.v2 .form-select:focus {
    border-color: var(--v2-violet);
    box-shadow: 0 0 0 3px var(--v2-wash);
}

body.v2 .checkbox-item {
    background: var(--v2-paper);
    border-color: var(--v2-line);
    color: var(--v2-text);
}

body.v2 .checkbox-item:hover {
    border-color: var(--v2-violet);
}

body.v2 .checkbox-custom {
    border-color: var(--v2-line);
    background: var(--v2-card);
}

body.v2 .checkbox-item input:checked + .checkbox-custom {
    background: var(--v2-violet);
    border-color: var(--v2-violet);
}

body.v2 .consent-block {
    background: var(--v2-paper);
    border-color: var(--v2-line);
}

body.v2 .consent-checkbox-text {
    color: var(--v2-muted);
}

body.v2 .sidebar-card {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .sidebar-card p {
    color: var(--v2-muted);
}

body.v2 .next-steps li {
    color: var(--v2-muted);
}

body.v2 .step-num {
    background: var(--v2-wash);
    color: var(--v2-violet-deep);
    font-family: var(--v2-mono);
}

/* ---- Thanks page ---- */

body.v2 .thanks-subtitle {
    color: var(--v2-muted);
}

body.v2 .thanks-steps li {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .thanks-steps .step-content h3 {
    color: var(--v2-text);
}

body.v2 .thanks-steps .step-content p {
    color: var(--v2-muted);
}

body.v2 .calendar-placeholder {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .placeholder-content svg {
    color: var(--v2-muted);
}

body.v2 .placeholder-note,
body.v2 .thanks-calendar > p {
    color: var(--v2-muted);
}

/* ---- Error pages ---- */

body.v2 .error-code {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--v2-violet);
    font-family: var(--v2-display);
}

body.v2 .error-message {
    color: var(--v2-muted);
}

/* ---- Review lead-magnet page ---- */

body.v2 .review-hero .hero-subtitle {
    color: var(--v2-ink-soft);
}

body.v2 .review-field label {
    color: var(--v2-ink-soft);
}

body.v2 .review-field .optional {
    color: var(--v2-ink-soft);
    opacity: 0.7;
}

body.v2 .review-field input {
    background: var(--v2-card);
    border-color: var(--v2-ink-line);
    color: var(--v2-text);
    font-family: var(--v2-body);
}

body.v2 .review-field input:focus {
    border-color: var(--v2-violet-bright);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

body.v2 .review-fineprint {
    color: var(--v2-ink-soft);
}

body.v2 .review-what {
    background: var(--v2-paper);
    padding: 6rem 0;
}

body.v2 .review-what-card {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .review-what-card h3 {
    color: var(--v2-text);
}

body.v2 .review-what-card p {
    color: var(--v2-muted);
}

/* ---- Review status page ---- */

body.v2 .rs-spinner {
    border-color: var(--v2-line);
    border-top-color: var(--v2-violet);
}

body.v2 .rs-url {
    font-family: var(--v2-mono);
    color: var(--v2-muted);
}

body.v2 .rs-step {
    color: var(--v2-muted);
}

body.v2 .rs-step-dot {
    border-color: var(--v2-line);
}

body.v2 .rs-step.is-active {
    color: var(--v2-text);
}

body.v2 .rs-step.is-active .rs-step-dot {
    border-color: var(--v2-violet);
    box-shadow: 0 0 0 4px var(--v2-wash);
}

body.v2 .rs-step.is-done {
    color: var(--v2-muted);
}

body.v2 .rs-step.is-done .rs-step-dot {
    border-color: var(--v2-good);
    background: var(--v2-good);
}

body.v2 .rs-note {
    color: var(--v2-muted);
}

body.v2 .rs-step-sub {
    color: var(--v2-muted);
}

body.v2 .rs-live-counter {
    color: var(--v2-warn);
}

body.v2 .rs-finding {
    background: var(--v2-card);
    border-color: var(--v2-line);
    color: var(--v2-text);
}

body.v2 .rs-finding-warn .rs-finding-icon {
    color: var(--v2-warn);
}

body.v2 .rs-finding-good .rs-finding-icon {
    color: var(--v2-good);
}

body.v2 .rs-stat {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .rs-stat-text {
    color: var(--v2-muted);
}

body.v2 .rr-percentile {
    color: var(--v2-muted);
}

body.v2 .rr-percentile strong {
    color: var(--v2-text);
}

body.v2 .rr-midcta {
    background: var(--v2-wash);
    border-left-color: var(--v2-violet);
}

body.v2 .rr-midcta p {
    color: var(--v2-text);
}

body.v2 .rr-midcta a {
    color: var(--v2-violet);
}

body.v2 .rr-ai-intro {
    color: var(--v2-muted);
}

body.v2 .rr-llms {
    border-top-color: var(--v2-line);
}

body.v2 .rr-llms-title code {
    color: var(--v2-violet);
}

body.v2 .rr-llms-hint {
    color: var(--v2-muted);
}

body.v2 .rr-impact {
    background: var(--v2-card);
    border-color: var(--v2-line);
    color: var(--v2-text);
}

body.v2 .rr-llmtest {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .rr-llmtest-verdict {
    color: var(--v2-text);
}

body.v2 .rr-llmtest-verdict.warn strong {
    color: var(--v2-warn);
}

body.v2 .rr-llmtest-verdict.good strong {
    color: var(--v2-good);
}

body.v2 .rr-llmtest-q {
    color: var(--v2-muted);
}

body.v2 .rr-llmtest-queries li {
    border-bottom-color: var(--v2-line);
}

body.v2 .rr-llmtest-queries li.miss .rr-llmtest-a {
    color: var(--v2-warn);
}

body.v2 .rr-llmtest-queries li.ok .rr-llmtest-a {
    color: var(--v2-good);
}

body.v2 .rr-llmtest-method {
    color: var(--v2-muted);
}

body.v2 .rr-llmtest-provider {
    color: var(--v2-text);
}

body.v2 .rr-llmtest-providers li {
    border-bottom-color: var(--v2-line);
}

body.v2 .rr-llmtest-competitors {
    background: var(--v2-paper);
    border-left-color: var(--v2-warn);
}

body.v2 .rr-competitor-name {
    background: var(--v2-card);
    border-color: var(--v2-line);
    color: var(--v2-text);
}

body.v2 .rr-llmtest-competitors-note,
body.v2 .rr-llmtest-detail summary {
    color: var(--v2-muted);
}

body.v2 .rs-error p {
    color: var(--v2-muted);
}

/* ---- Review report page ---- */

body.v2 .rr-meta {
    font-family: var(--v2-mono);
    color: var(--v2-muted);
}

body.v2 .rr-summary,
body.v2 .rr-overall-text {
    color: var(--v2-muted);
}

body.v2 .rr-overall,
body.v2 .rr-block,
body.v2 .rr-share {
    background: var(--v2-card);
    border-color: var(--v2-line);
}

body.v2 .rr-gauge {
    background:
        radial-gradient(closest-side, var(--v2-card) 79%, transparent 80% 100%),
        conic-gradient(var(--score-color) calc(var(--pct, 0) * 1%), var(--v2-line) 0);
    border-color: var(--v2-line);
}

body.v2 .rr-gauge-max {
    color: var(--v2-muted);
}

body.v2 .rr-cat-label {
    color: var(--v2-muted);
}

body.v2 .rr-bar {
    background: var(--v2-line);
}

body.v2 .rr-improvement-num {
    background: var(--v2-violet);
}

body.v2 .rr-improvement h3 {
    color: var(--v2-text);
}

body.v2 .rr-improvement p,
body.v2 .rr-list li {
    color: var(--v2-muted);
}

body.v2 .rr-phone {
    border-color: var(--v2-line);
    background: var(--v2-paper);
}

body.v2 .rr-rating-label,
body.v2 .rr-trust-verdict {
    color: var(--v2-muted);
}

body.v2 .rr-star {
    color: var(--v2-line);
}

body.v2 .rr-star.on {
    color: var(--v2-violet);
}

body.v2 .rr-perf-card {
    background: var(--v2-paper);
    border-color: var(--v2-line);
}

body.v2 .rr-perf-head {
    color: var(--v2-muted);
}

body.v2 .rr-metrics li {
    color: var(--v2-muted);
}

body.v2 .rr-metrics strong {
    color: var(--v2-text);
    font-family: var(--v2-mono);
}

body.v2 .rr-perf-note,
body.v2 .rr-perf-extra {
    color: var(--v2-muted);
}

body.v2 .rr-perf-extra strong {
    color: var(--v2-text);
}

body.v2 .rr-check-label {
    color: var(--v2-text);
}

body.v2 .rr-check-detail {
    color: var(--v2-muted);
}

body.v2 .rr-check.ok .rr-check-icon { background: rgba(21, 128, 61, 0.12); color: var(--v2-good); }
body.v2 .rr-check.miss .rr-check-icon { background: rgba(220, 38, 38, 0.1); color: var(--v2-bad); }
body.v2 .rr-dot.good { background: rgba(21, 128, 61, 0.12); color: var(--v2-good); }
body.v2 .rr-dot.warn { background: rgba(180, 83, 9, 0.12); color: var(--v2-warn); }

body.v2 .rr-cta {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: var(--v2-ink-text);
}

body.v2 .rr-cta p {
    color: var(--v2-ink-soft);
}

body.v2 .rr-cta-note {
    color: var(--v2-ink-soft);
}

body.v2 .rr-cta-note a {
    color: var(--v2-violet-bright);
}

body.v2 .rr-share-label,
body.v2 .rr-outreach-hint {
    color: var(--v2-muted);
}

body.v2 .rr-share-input,
body.v2 .rr-outreach-text {
    background: var(--v2-paper);
    border-color: var(--v2-line);
    color: var(--v2-text);
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 1024px) {
    .r-cap-grid,
    .r-tiers-grid,
    .r-managed-grid,
    .r-work-grid,
    .r-work-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .r-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-rail {
        display: none;
    }

    body.v2 .r-section {
        padding: 4.5rem 0;
    }

    .r-problem-grid,
    .r-paths-grid,
    .r-cap-grid--two {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-problem-grid {
        gap: 0;
    }

    .r-founder {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding: 2rem;
    }
}

@media (max-width: 640px) {
    .r-cap-grid,
    .r-tiers-grid,
    .r-managed-grid,
    .r-work-grid,
    .r-work-grid--four {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-route-stop {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0 1.25rem;
    }

    .r-route-badge {
        width: 44px;
        height: 44px;
        font-size: 0.875rem;
    }

    .r-route-stop::before {
        left: 21px;
        top: 40px;
    }

    body.v2 .r-hero {
        padding-top: calc(var(--nav-height) + 4.5rem);
    }

    .r-hero-eyebrow {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }

    .r-hero-actions .r-btn {
        width: 100%;
    }

    .r-cta-actions .r-btn {
        width: 100%;
    }

    .r-managed-note,
    .r-path-card {
        padding: 1.75rem;
    }
}