/* =============================================================================
   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', system-ui, sans-serif;
    --v2-body: 'Instrument Sans', system-ui, sans-serif;
    --v2-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    /* Legacy components in styles.css still read these names. Point them at
       the v2 families so every inherited page uses one coherent type system. */
    --font-display: var(--v2-display);
    --font-mono: var(--v2-mono);

    --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: #fff;
    /* Labels never wrap into two lines; the menu gap compresses instead. */
    white-space: nowrap;
}

/* Mid-width desktop: tighten the menu before anything is forced to wrap. The
   gap lives on .nav-menu below 1100px and on .nav-links above it, where the bar
   becomes a three-track grid. */
@media (min-width: 960px) and (max-width: 1180px) {
    .nav-menu,
    .nav-links {
        gap: 1.1rem;
    }

    .nav-link {
        font-size: 0.875rem;
    }
}

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

.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;
}

.nav-cta--compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 0.875rem;
    font-family: var(--v2-body);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

/* Matches the hamburger breakpoint in styles.css. */
@media (max-width: 959px) {
    .nav-menu {
        background: var(--v2-ink-2);
        border-bottom: 1px solid var(--v2-ink-line);
    }

    .nav-toggle span {
        background: #fff;
    }
}

.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-operator {
    max-width: 24rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    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);
}

.footer-address {
    margin-bottom: 1rem;
    font-family: var(--v2-body);
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.65;
    color: var(--v2-ink-soft);
}

body.v2 .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    text-align: left;
}

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

.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.footer-legal-links a {
    font-size: 0.8125rem;
    color: var(--v2-ink-soft);
}

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

@media (max-width: 640px) {
    body.v2 .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-legal-links {
        justify-content: flex-start;
    }
}

/* =============================================================================
   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;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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;
    font-optical-sizing: auto;
    text-wrap: balance;
}

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

/* Keep ordinary prose readable inside the wide rail layout. Ledes and
   purpose-built grids own their own measure. */
.r-content > p:not(.r-lede),
.faq-answer p {
    max-width: 42em;
}

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: #fff;
}

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

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;
}

body.v2 .r-section--first {
    padding-top: 2.75rem;
}

.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;
}

/* Sections used to carry a single lede, so the missing margin never showed.
   The research pages stack several and they ran together without this. */
.r-lede + .r-lede {
    margin-top: 1.15em;
}

/* Subheads inside the rail layout. This was scoped to #ai-research, so every
   other section that stacks an h3 after a paragraph — market records, trade
   studies, case studies — sat its next heading flush against the paragraph
   above with no visible break. */
.r-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

/* The break belongs to prose only. Applied to every descendant it also reached
   the heading that OPENS a card — tiles, tiers, phases, case bodies — where
   there is no paragraph to separate from, so 2.75rem landed inside the card as
   dead space above its own title and pushed the content off centre. */
.r-content > h3 {
    margin-top: 2.75rem;
}

/* The first subhead follows the eyebrow or title, which carry their own space. */
.r-content > .r-eyebrow + h3,
.r-content > .r-title + h3 {
    margin-top: 1.5rem;
}

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

/* One viewport tall, so the route field and the scan input are both in frame
   the moment the page loads. svh keeps mobile browser chrome from pushing the
   CTA under the fold. */
body.v2 .r-hero {
    position: relative;
    min-height: 100svh;
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    padding-top: calc(var(--nav-height) + 2.5rem);
    padding-bottom: 3.5rem;
    overflow: hidden;
}

body.v2 .r-hero--home {
    min-height: clamp(560px, 64svh, 650px);
}

.r-hero--home .r-hero-title {
    max-width: 16em;
    font-size: clamp(2.75rem, 5vw, 4.25rem);
}

.r-hero--home .r-hero-sub {
    max-width: 38em;
}

@media (min-width: 701px) {
    .r-hero--home .r-hero-routes {
        top: 20%;
        bottom: auto;
        height: 84%;
    }
}

.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, 6vw, 4.75rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    /* rem, not em: an em cap shrinks with the font and silently adds a line */
    max-width: 58rem;
}

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

/* Held narrower than the headline so the fan's rising arcs own the right side */
.r-hero-sub {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--v2-ink-soft);
    max-width: 29em;
    margin-bottom: 1.5rem;
}

/* A compact operating credential, drawn as a live stop on the route rather
   than a generic stat card. */
.r-hero-proof {
    position: relative;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: -0.125rem 0 1.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--v2-violet-bright);
    color: var(--v2-ink-text);
}

.r-hero-proof::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-violet-bright);
    transform: translateY(-50%);
}

.r-hero-proof strong {
    font-family: var(--v2-display);
    font-size: 2rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--v2-violet-bright);
    font-variant-numeric: tabular-nums;
}

.r-hero-proof span {
    max-width: 12rem;
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-ink-text);
}

/* Only index, vertical, and work render the route fan. Everywhere else the
   full-height hero and the 29em column were reserving space for a graphic that
   never arrives, so the right half and the fold below sat empty. */
body.v2 .r-hero--doc {
    min-height: 0;
    padding-top: calc(var(--nav-height) + 3rem);
    padding-bottom: 3rem;
}

.r-hero--doc .r-hero-title {
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    max-width: 24em;
}

.r-hero--doc .r-hero-sub {
    max-width: 42em;
    margin-bottom: 0;
}

.r-hero--doc .r-hero-sub + .r-hero-sub,
.r-hero--doc .r-hero-sub + .r-hero-actions,
.r-hero--doc .r-hero-sub + .r-hero-meta {
    margin-top: 1.5rem;
}

.r-hero--doc .r-hero-eyebrow {
    margin-bottom: 1.25rem;
}

/* The finding, in the reader's own words. It carries the page, so it outranks
   the setup paragraph above it instead of hiding in a mono meta line. */
.r-hero--doc .r-hero-verdict {
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--v2-violet-bright);
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--v2-ink-text);
    max-width: 38em;
}

.r-hero--doc .r-hero-verdict + .r-hero-meta {
    margin-top: 1.25rem;
}

/* Case-study proof row. The reader is an owner scanning for whether this worked,
   so the figures carry the page and sit outside the rail layout the prose uses. */
.r-stat-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    border-top: 1px solid var(--v2-ink-line);
    border-bottom: 1px solid var(--v2-ink-line);
    padding: 2.5rem 0;
}

.r-stat-value {
    display: block;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--v2-violet-bright);
    font-variant-numeric: tabular-nums;
}

.r-stat-label {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--v2-ink-muted);
    max-width: 22em;
}

/* Homepage proof ledger. It uses the route language without turning outcomes
   into generic stat cards: one connected record, with every current result
   linking to the dated case study behind it. */
.r-proof-ledger {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
}

.r-proof-item {
    position: relative;
    min-width: 0;
    padding: 2.25rem 1.5rem 2.25rem 0;
    display: flex;
    flex-direction: column;
}

.r-proof-item + .r-proof-item {
    border-left: 1px solid var(--v2-line);
    padding-left: 1.5rem;
}

.r-proof-item::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--v2-paper);
    border: 2px solid var(--v2-violet);
}

.r-proof-item + .r-proof-item::before {
    left: 1.5rem;
}

.r-proof-label {
    min-height: 2.8em;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.r-proof-value {
    display: block;
    margin-top: 1rem;
    font-size: clamp(2rem, 3.3vw, 3rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--v2-text);
    font-variant-numeric: tabular-nums;
}

.r-proof-copy {
    display: block;
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--v2-text);
}

.r-proof-detail {
    display: block;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--v2-muted);
}

.r-proof-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--v2-violet);
    text-decoration: none;
}

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

@media (max-width: 720px) {
    .r-stat-row {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 0;
    }
}

@media (max-width: 640px) {
    .r-proof-ledger {
        grid-template-columns: 1fr;
    }

    .r-proof-item,
    .r-proof-item + .r-proof-item,
    .r-proof-item:nth-child(odd) {
        border-left: 0;
        padding: 1.75rem 0;
    }

    .r-proof-item + .r-proof-item {
        border-top: 1px solid var(--v2-line);
    }

    .r-proof-item::before,
    .r-proof-item + .r-proof-item::before {
        left: 0;
    }

    .r-proof-label {
        min-height: 0;
    }
}

/* Sibling case studies. Prose, not the mono data rows the market pages use —
   this is a reading list, and each entry leads with what the work produced.

   Named r-related-* rather than r-case-*: /work already owns .r-case-list for
   its card grid, and a descendant rule here reaches the chips inside those
   cards. Child combinators below for the same reason. */
.r-related-cases {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.r-related-cases > li + li {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--v2-ink-line);
}

.r-related-case-name {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.r-related-case-sector {
    margin-left: 0.625rem;
    font-size: 0.9375rem;
    color: var(--v2-ink-muted);
}

.r-related-case-result {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--v2-ink-text);
    max-width: 42em;
}

.r-related-cases + .r-lede {
    margin-top: 2rem;
}

/* The definition is the answer a machine lifts and the first thing a reader
   needs, so it gets read as a lede rather than as small print under a headline. */
.r-hero--doc .r-hero-definition {
    font-size: 1.3125rem;
    line-height: 1.55;
    color: var(--v2-ink-text);
    font-weight: 400;
    max-width: 38em;
}

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

body.v2 .r-hero-fit-link {
    display: inline-block;
    color: var(--v2-ink-text);
    opacity: 0.84;
    font-size: 0.9375rem;
    line-height: 1.5;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(23, 19, 31, 0.76);
    box-shadow: 0 0 0 0.25rem rgba(23, 19, 31, 0.76);
    transition: color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

body.v2 .r-hero-fit-link:hover {
    color: var(--v2-ink-text);
    opacity: 1;
    border-bottom-color: var(--v2-violet-soft);
}

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

.r-hero-qualifier {
    width: fit-content;
    max-width: 42rem;
    padding: 0.625rem 0.8rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--v2-ink-text);
    background: rgba(23, 19, 31, 0.86);
    border: 1px solid rgba(240, 237, 245, 0.16);
    border-radius: 6px;
}

.r-hero-qualifier strong {
    color: var(--v2-violet-soft);
    font-weight: 600;
}

/* =============================================================================
   Experience band
   The company names are context for the founder's engineering background, not
   a client-logo claim. The repeated track lets the route move continuously.
   ============================================================================= */

.r-experience {
    padding: 0 max(1.5rem, calc((100vw - var(--v2-container)) / 2 + 1.5rem));
    color: var(--v2-ink-text);
    background: var(--v2-ink-2);
    border-top: 1px solid var(--v2-ink-line);
    border-bottom: 1px solid var(--v2-ink-line);
    overflow: hidden;
}

.r-experience-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 0;
}

.r-experience-row + .r-experience-row {
    border-top: 1px solid var(--v2-ink-line);
}

.r-experience-label {
    position: relative;
    z-index: 1;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-ink-soft);
    white-space: nowrap;
}

.r-logo-marquee,
.r-client-marquee {
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.r-logo-marquee-track,
.r-client-marquee-track {
    width: max-content;
    display: flex;
    align-items: center;
}

.r-logo-marquee-set {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
}

.r-brand-lockup {
    min-width: 108px;
    flex: 0 0 108px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--v2-ink-soft);
    white-space: nowrap;
}

.r-brand-lockup img {
    display: block;
    width: auto;
    max-width: 112px;
    height: 31px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.76;
}

.r-brand-lockup:first-child {
    min-width: 182px;
    flex-basis: 182px;
}

.r-brand-lockup:first-child img {
    max-width: 174px;
    height: 40px;
}

.r-brand-lockup:nth-child(2) img {
    max-width: 94px;
    height: 28px;
}

.r-brand-lockup--nike img {
    width: 76px;
    max-width: 76px;
    height: 33px;
}

.r-brand-lockup--peloton img {
    width: 35px;
    max-width: 35px;
    height: 35px;
}

.r-brand-lockup--bcbs {
    min-width: 155px;
    flex-basis: 155px;
    height: 44px;
    overflow: hidden;
}

.r-brand-lockup--bcbs img {
    width: 148px;
    max-width: 148px;
    height: 38px;
    transform: scale(3.05);
}

.r-brand-lockup > span {
    font-family: var(--v2-mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
    .r-logo-marquee-track {
        animation: r-logo-loop 30s linear infinite;
    }

    .r-client-marquee-track {
        animation: r-logo-loop 36s linear infinite reverse;
    }

    .r-logo-marquee:hover .r-logo-marquee-track,
    .r-client-marquee:hover .r-client-marquee-track {
        animation-play-state: paused;
    }
}

@keyframes r-logo-loop {
    to { transform: translateX(-50%); }
}

/* Client logos live with the work they support, not under the hero beside
   employment history. Names accompany every mark because many local-service
   logos are symbols that do not identify the company by themselves. */
.r-client-roster {
    margin-top: 2.75rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
    overflow: hidden;
}

.r-client-roster-label {
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-muted);
}

.r-client-marquee-set {
    display: flex;
    align-items: stretch;
    gap: 0.875rem;
    padding-right: 0.875rem;
}

.r-client-lockup {
    width: 220px;
    min-width: 220px;
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--v2-text);
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-sizing: border-box;
}

.r-client-lockup img {
    width: 76px;
    height: 40px;
    flex: 0 0 76px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.84;
}

.r-client-lockup > span {
    min-width: 0;
    font-family: var(--v2-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
}

/* -----------------------------------------------------------------------------
   Hero scan — the free Radar scan as the hero's primary action. One field, one
   button, posting straight to /review so there's no interstitial page.
   -------------------------------------------------------------------------- */

.r-hero-scan {
    max-width: 52rem;
    margin-bottom: 1rem;
}

.r-scan-label {
    display: block;
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
    margin-bottom: 0.6875rem;
}

.r-scan-row {
    display: flex;
    gap: 0.625rem;
    align-items: stretch;
}

.r-scan-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.r-scan-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--v2-body);
    font-size: 1rem;
    line-height: 1;
    color: #17131f;
    /* Opaque white so route strokes never show through the typed domain. */
    background: #fff;
    border: 1px solid rgba(240, 237, 245, 0.28);
    border-radius: 8px;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.r-scan-input::placeholder {
    color: rgba(23, 19, 31, 0.42);
}

.r-scan-input:hover {
    border-color: rgba(240, 237, 245, 0.45);
}

.r-scan-input:focus {
    outline: none;
    background: #fff;
    color: #17131f;
    border-color: rgba(139, 92, 246, 0.75);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

/* Typed-domain hint. It's an overlay rather than the native placeholder so the
   caret can sit after the text through normal inline layout instead of a width
   measurement. motion.js empties the real placeholder when it takes over, so
   without JS the plain placeholder still shows. */
.r-scan-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* +1px matches the input's border so the two text runs sit on one baseline */
    padding-left: calc(1rem + 1px);
    padding-right: 1rem;
    font-family: var(--v2-body);
    font-size: 1rem;
    line-height: 1;
    color: #17131f;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

.r-scan-ghost[hidden] {
    display: none;
}

.r-scan-caret {
    flex: 0 0 auto;
    width: 1px;
    height: 1.0625rem;
    margin-left: 1px;
    background: var(--v2-violet-bright);
}

.r-scan-submit {
    flex: 0 0 auto;
    white-space: nowrap;
}

.r-scan-note {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v2-ink-soft);
    margin-top: 0.5rem;
    max-width: 30em;
}

@media (prefers-reduced-motion: no-preference) {
    .r-scan-caret {
        animation: r-scan-blink 1.05s steps(1, end) infinite;
    }
}

@keyframes r-scan-blink {
    0%, 45% { opacity: 0.9; }
    46%, 100% { opacity: 0; }
}

/* Aurora depth — slow violet light drifting behind the route fan */
.r-hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.r-hero-glow {
    position: absolute;
    border-radius: 50%;
    /* the gradients already fade to transparent, so this only needs to take the
       banding off the edge — a large radius here costs a full-screen filter pass */
    filter: blur(40px);
}

/* Promote the layers only while the hero is actually on screen. motion.js adds
   rl-idle once the hero leaves, which also parks the drift animation. */
.r-hero:not(.rl-idle) .r-hero-glow {
    will-change: transform;
}

.r-hero.rl-idle .r-hero-glow {
    animation-play-state: paused;
}

.r-hero-glow--a {
    top: -20%;
    right: -10%;
    width: 46vw;
    height: 46vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.30) 0%, rgba(139, 92, 246, 0) 68%);
}

.r-hero-glow--b {
    bottom: -24%;
    left: -14%;
    width: 54vw;
    height: 54vw;
    background: radial-gradient(circle, rgba(109, 40, 217, 0.28) 0%, rgba(109, 40, 217, 0) 70%);
}

.r-hero-glow--c {
    top: 26%;
    left: 40%;
    width: 34vw;
    height: 34vw;
    background: radial-gradient(circle, rgba(201, 184, 240, 0.11) 0%, rgba(201, 184, 240, 0) 70%);
}

/* Cheaper backdrop on phones: one less layer, smaller blur radius */
@media (max-width: 900px) {
    .r-hero-glow {
        filter: blur(28px);
    }

    .r-hero-glow--c {
        display: none;
    }
}

/* Film grain — sits over the backdrop, under the headline and the routes */
body.v2 .r-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 170px 170px;
}

/* Route fan — many faint paths, one violet route.
   Spans the whole hero behind the copy rather than sitting in a band below it,
   which is what puts the motion above the fold on every screen. z-index 0 keeps
   it over the aurora (earlier sibling) and under .r-shell. */
.r-hero-routes {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Desktop has room for the fan to sit clear of the copy, so the veil is phone-only
   (enabled in the 700px block below). Ordered after the fan in the markup so it
   paints over it — both are z-index 0, and .r-shell at 1 stays above both. */
.r-hero-veil {
    display: none;
}

.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) {
    /* 1850 clears the path's true arc length (~1755) so the tail draws too */
    .r-hero-routes .route {
        stroke-dasharray: 1850;
        stroke-dashoffset: 1850;
        animation: r-draw 1.5s 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-glow--a { animation: r-drift-a 34s ease-in-out infinite alternate; }
    .r-hero-glow--b { animation: r-drift-b 44s ease-in-out infinite alternate; }
    .r-hero-glow--c { animation: r-drift-c 28s ease-in-out infinite alternate; }

    .r-hero-eyebrow,
    .r-hero-title,
    .r-hero-sub,
    .r-hero-proof,
    .r-hero-scan,
    .r-hero-actions,
    .r-hero-meta,
    .r-hero-qualifier {
        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-proof,
    .r-hero-scan { animation-delay: 0.24s; }
    .r-hero-actions { animation-delay: 0.32s; }
    .r-hero-meta,
    .r-hero-qualifier { animation-delay: 0.4s; }
}

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

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

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

@keyframes r-drift-a {
    to { transform: translate3d(-7%, 9%, 0) scale(1.14); }
}

@keyframes r-drift-b {
    to { transform: translate3d(10%, -8%, 0) scale(1.09); }
}

@keyframes r-drift-c {
    to { transform: translate3d(-12%, -6%, 0) scale(0.9); }
}

/* =============================================================================
   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-handoff-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 3.5rem;
    border-top: 1px solid var(--v2-line);
}

.r-handoff {
    position: relative;
    min-width: 0;
    padding: 2rem 1.25rem 0 0;
}

.r-handoff + .r-handoff {
    padding-left: 1.25rem;
    border-left: 1px solid var(--v2-line);
}

.r-handoff::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--v2-paper);
    border: 2px solid var(--v2-violet-soft);
}

.r-handoff + .r-handoff::before {
    left: 1.25rem;
}

.r-handoff--active::before {
    background: var(--v2-violet);
    border-color: var(--v2-violet);
    box-shadow: 0 0 0 5px var(--v2-wash);
}

.r-handoff-kicker {
    display: block;
    margin-bottom: 0.65rem;
    font-family: var(--v2-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.r-content .r-handoff h3 {
    margin: 0 0 0.45rem;
    font-size: 1.0625rem;
}

.r-handoff p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--v2-muted);
}

.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;
}

/* =============================================================================
   Connected-route console
   A wayfinding control panel that makes the offer tangible without pretending
   an illustrative timeline is a client case study.
   ============================================================================= */

.r-route-console {
    margin-top: 3rem;
    overflow: hidden;
    color: var(--v2-ink-text);
    background: var(--v2-ink);
    border: 1px solid var(--v2-ink-line);
    border-radius: var(--v2-radius-lg);
    box-shadow: 0 28px 70px rgba(23, 19, 31, 0.16);
}

.r-route-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--v2-ink-line);
    background: var(--v2-ink-2);
}

.r-route-console-head > div {
    display: grid;
    gap: 0.3rem;
}

.r-console-label {
    font-family: var(--v2-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
}

.r-route-console-head strong {
    font-family: var(--v2-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.r-console-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    padding: 0.4rem 0.7rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(109, 40, 217, 0.28);
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 999px;
}

.r-console-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-violet-bright);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
}

.r-console-steps {
    list-style: none;
    margin: 0;
    padding: 0.75rem 1.75rem;
}

.r-console-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem 0;
}

.r-console-steps li + li {
    border-top: 1px solid var(--v2-ink-line);
}

.r-console-steps li::before {
    content: '';
    position: absolute;
    left: 75px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-violet-bright);
    transform: translate(-50%, -50%);
}

.r-console-steps time {
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--v2-violet-soft);
    font-variant-numeric: tabular-nums;
}

.r-console-steps span {
    padding-left: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--v2-ink-soft);
}

.r-console-steps b {
    color: var(--v2-ink-text);
    font-weight: 600;
}

.r-console-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.25rem 1.75rem 1.5rem;
    border-top: 1px solid var(--v2-ink-line);
}

.r-console-summary span {
    padding: 0.35rem 0.65rem;
    font-family: var(--v2-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
    background: var(--v2-ink-2);
    border: 1px solid var(--v2-ink-line);
    border-radius: 4px;
}

/* =============================================================================
   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);
}

/* Service tiles on /services carry a sentence of context above the bullets and
   the ongoing plan below them — a capability label needs neither. */

.r-cap-tile--service p {
    font-size: 0.9375rem;
    color: var(--v2-muted);
    margin-bottom: 1.125rem;
}

.r-cap-tile--service h3 a {
    color: inherit;
    text-decoration: none;
}

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

.r-service-meta {
    display: block;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--v2-line);
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v2-muted);
}

/* Sends the reader from a summary grid to the page that actually ranks. */
.r-grid-followup {
    margin-top: 2.5rem;
}

/* =============================================================================
   Original research
   Findings from a market scan. The number carries the point, so it is set large
   and the caption stays plain — no card chrome competing with the figure.
   ============================================================================= */

.r-findings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2rem 3rem;
    margin: 3rem 0;
}

.r-finding {
    padding-top: 1.25rem;
    border-top: 2px solid var(--v2-violet);
}

.r-finding-value {
    display: block;
    font-size: 2.75rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.r-finding-label {
    display: block;
    margin-top: 0.5rem;
    color: var(--v2-muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

#ai-research h3 {
    margin-top: 2.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.r-source-list {
    list-style: none;
    margin: 1.75rem 0 2rem;
    padding: 0;
    max-width: 34rem;
}

.r-source-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--v2-line);
}

.r-source-host {
    font-family: var(--v2-mono);
    font-size: 0.875rem;
}

.r-source-count {
    color: var(--v2-muted);
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
}

/* Service engagement descriptions are prose, not the host/count pairs the
   source list above was designed for. */
.r-engagement-list {
    list-style: none;
    max-width: 46rem;
    margin: 2rem 0;
    padding: 0;
    border-top: 1px solid var(--v2-line);
}

.r-engagement-list li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--v2-line);
    font-size: 1rem;
    line-height: 1.6;
}

.r-engagement-list strong {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--v2-display);
    font-size: 1.0625rem;
    font-weight: 650;
    color: var(--v2-text);
}

.r-source-note {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--v2-muted);
}

/* =============================================================================
   Glossary
   =============================================================================
   r-source-list was built for domain/count pairs: mono, 34rem, space-between.
   Definitions are sentences, so they get their own component — proportional
   type, a real measure, and the term visually anchored above its answer. */

.r-glossary-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 1.75rem 0 2.5rem;
}

.r-glossary-jump a {
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--v2-muted);
    text-decoration: none;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--v2-line);
    border-radius: 6px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.r-glossary-jump a:hover {
    color: var(--v2-violet-bright);
    border-color: var(--v2-violet-bright);
}

.r-glossary-group {
    margin-bottom: 2.75rem;
    /* Anchor jumps otherwise land the letter under the fixed nav */
    scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}

.r-glossary-letter {
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--v2-violet-soft);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--v2-line);
}

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

.r-glossary-entry dt {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.r-glossary-entry dt a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.r-glossary-entry dt a:hover {
    color: var(--v2-violet-bright);
    border-bottom-color: currentColor;
}

.r-glossary-entry dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--v2-muted);
    max-width: 34em;
}

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

/* Related terms read as a short reference list, not as a data table */
.r-related-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    max-width: 44em;
}

.r-related-list dt,
.r-related-list .r-related-term {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.r-related-list .r-related-term a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.r-related-list .r-related-term a:hover {
    color: var(--v2-violet-bright);
    border-bottom-color: currentColor;
}

.r-related-list .r-related-gloss {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--v2-muted);
}

/* Provenance for the numbers above. Quieter than the findings on purpose —
   it has to be present and checkable, not prominent. */
.r-research-method {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--v2-line);
    font-size: 0.9375rem !important;
    color: var(--v2-muted);
}

/* The measured shortlist on a city page. r-source-list puts its two spans on
   one row, which works for "bbb.org / 24" and fails badly for a business name
   beside a list of the five questions it was named for: the name column
   collapses and "Phoenix Roofing & Repair" wraps to four lines. Here the name
   leads on its own line at body size, and the evidence sits underneath it. */
.r-market-list {
    list-style: none;
    margin: 1.75rem 0 2rem;
    padding: 0;
    max-width: 42rem;
}

.r-market-list li {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--v2-line);
}

.r-market-name {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.r-market-meta {
    display: block;
    margin-top: 0.3rem;
    color: var(--v2-muted);
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* The long tail of businesses named exactly once. It is a list of forty-odd
   names in running text, so it is set back from the argument around it and
   reads as the appendix it is rather than as another paragraph. */
/* Thirty-odd single-mention businesses. As one semicolon-run paragraph this was
   a wall nobody could scan; columns let a reader find their own name. */
.r-market-tail {
    list-style: none;
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid var(--v2-line);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--v2-muted);
    columns: 3;
    column-gap: 2rem;
}

.r-market-tail li {
    break-inside: avoid;
    padding: 0.2rem 0;
}

@media (max-width: 900px) {
    .r-market-tail {
        columns: 2;
    }
}

@media (max-width: 560px) {
    .r-market-tail {
        columns: 1;
    }
}

@media (max-width: 640px) {
    .r-findings {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .r-finding-value {
        font-size: 2.25rem;
    }
}

/* =============================================================================
   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);
}

.r-founder--compact {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    padding: 2.5rem;
}

.r-founder--compact .r-founder-photo {
    width: 96px;
    height: 96px;
}

.r-founder--compact .r-founder-lead {
    max-width: 42em;
}

/* =============================================================================
   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.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    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: clamp(1.85rem, 2.4vw, 2.25rem);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: 0.75rem;
}

.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;
    line-height: 1.5;
}

/* .r-case-points is shared with light case-study cards and declares its own
   dark text later in this file. Featured tiers need the inverse explicitly. */
.r-tier--featured .r-case-points li {
    color: var(--v2-ink-text);
}

.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;
}

/* =============================================================================
   Contextual CTA — a route marker, not a second footer
   ============================================================================= */

.r-inline-cta {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    margin: 4rem 0;
    padding: 1.75rem 0;
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
}

.r-inline-cta-marker {
    width: 10px;
    height: 10px;
    border: 2px solid var(--v2-violet);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--v2-wash);
}

.r-inline-cta-eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.r-inline-cta h3 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.r-inline-cta p {
    max-width: 48rem;
    margin: 0;
    color: var(--v2-muted);
}

.r-inline-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: max-content;
}

.r-inline-cta .r-btn {
    min-height: 44px;
}

.r-inline-cta-secondary {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v2-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .r-inline-cta {
        grid-template-columns: 12px minmax(0, 1fr);
        margin: 3rem 0;
    }

    .r-inline-cta-actions {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }

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

/* =============================================================================
   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);
    flex: none;
}

.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%; }

/* 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);
    line-height: 1.4;
    text-align: right;
}

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

/* categorized work page: platform cards and evidence ledger */
.r-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
}

.r-project-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    transition: border-color 160ms ease, transform 160ms ease;
}

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

.r-project-card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--v2-ink);
    border-bottom: 1px solid var(--v2-line);
}

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

.r-project-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
}

.r-project-type {
    margin-bottom: 0.875rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

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

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

.r-project-facts {
    width: 100%;
    list-style: none;
    display: grid;
    gap: 0.45rem;
    margin: 0 0 1.5rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--v2-line);
}

.r-project-facts li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.8125rem;
    color: var(--v2-text);
}

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

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

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

.r-project-card--nda {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: var(--v2-ink-text);
}

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

.r-project-card-media--nda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--v2-violet-bright);
    background: var(--v2-ink-2);
    border-bottom-color: var(--v2-ink-line);
}

.r-project-card-media--nda span {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-ink-soft);
}

.r-project-card--nda .r-project-type,
.r-project-card--nda .r-project-link {
    color: var(--v2-violet-bright);
}

.r-project-card--nda .r-project-card-body > p,
.r-project-card--nda .r-project-facts li {
    color: var(--v2-ink-soft);
}

.r-project-card--nda .r-project-facts {
    border-top-color: var(--v2-ink-line);
}

.r-archive-ledger {
    margin-top: 3rem;
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
}

.r-archive-head,
.r-archive-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(140px, 0.8fr) minmax(260px, 1.7fr) 1.5rem;
    gap: 1.25rem;
    align-items: center;
}

.r-archive-head {
    padding: 0.875rem 1rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-muted);
}

.r-archive-row {
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--v2-line);
    color: var(--v2-text);
    transition: background-color 160ms ease, color 160ms ease;
}

.r-archive-row:hover,
.r-archive-row:focus-visible {
    background: var(--v2-wash);
    color: var(--v2-text);
}

.r-archive-row strong {
    font-family: var(--v2-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

.r-archive-sector {
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    color: var(--v2-violet);
}

.r-archive-scope {
    font-size: 0.875rem;
    color: var(--v2-muted);
}

.r-archive-arrow {
    justify-self: end;
    font-size: 1rem;
    color: var(--v2-violet);
}

/* 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,
    .r-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r-archive-head,
    .r-archive-row {
        grid-template-columns: minmax(170px, 1fr) minmax(130px, 0.75fr) minmax(220px, 1.4fr) 1.5rem;
    }
}

@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;
    }

    /* NDA panel has no image: size to content instead of forcing 16:10 */
    .r-case-media.r-case-media--nda {
        aspect-ratio: auto;
        padding: 2rem;
        border-right: none;
        border-bottom: 1px solid var(--v2-ink-line);
    }

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

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

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

    .r-archive-head {
        display: none;
    }

    .r-archive-row {
        grid-template-columns: minmax(0, 1fr) 1.5rem;
        gap: 0.35rem 1rem;
        padding: 1.125rem 0.25rem;
    }

    .r-archive-sector,
    .r-archive-scope {
        grid-column: 1;
    }

    .r-archive-arrow {
        grid-column: 2;
        grid-row: 1;
    }
}

/* =============================================================================
   =============================================================================
   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);
}

body.v2 .apply-header .back-link {
    display: flex;
    width: fit-content;
    margin-bottom: 1.5rem;
}

body.v2 .apply-header .section-tag {
    display: block;
    width: fit-content;
    margin-bottom: 1rem;
}

/* 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);
}

.company-intro {
    font-family: var(--v2-display);
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--v2-text) !important;
}

.company-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 2rem;
    border-top: 1px solid var(--v2-line);
    border-left: 1px solid var(--v2-line);
}

.company-facts > div {
    min-width: 0;
    padding: 1rem 1.125rem;
    border-right: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
}

.company-facts dt {
    margin-bottom: 0.3rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--v2-muted);
}

.company-facts dd {
    margin: 0;
    color: var(--v2-text);
}

.company-address {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--v2-violet);
    font-style: normal;
    line-height: 1.7;
    color: var(--v2-muted);
}

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

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-header--simple,
body.v2 .apply-form-container--simple {
    width: min(100%, 720px);
    margin-inline: auto;
}

body.v2 .apply-form-container--simple {
    display: block;
}

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-book {
    color: var(--v2-ink-soft);
}

body.v2 .rr-cta-book:hover {
    color: #fff;
}

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));
    }

    .r-handoff-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border-top: 0;
    }

    .r-handoff,
    .r-handoff + .r-handoff {
        padding: 1.5rem 1.5rem 1.5rem 0;
        border-top: 1px solid var(--v2-line);
        border-left: 0;
    }

    .r-handoff:nth-child(even) {
        padding-left: 1.5rem;
        border-left: 1px solid var(--v2-line);
    }

    .r-handoff::before,
    .r-handoff + .r-handoff::before {
        top: -5px;
        left: 0;
    }

    .r-handoff:nth-child(even)::before {
        left: 1.5rem;
    }
}

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

    .r-rail {
        display: none;
    }

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

    body.v2 .r-section--first {
        padding-top: 3rem;
    }

    /* The proof section sits directly under a content-height hero, so its top
       padding is the seam a phone reader sees first. Keep it tight enough that
       the outcome headline, not blank paper, is what peeks above the fold. */
    body.v2 .r-section--proof {
        padding-top: 2.5rem;
    }

    .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;
    }

    .r-hero-title {
        max-width: none;
    }

    .r-hero-sub {
        max-width: 34em;
    }
}

/* Phone-shaped heroes only. 700px matches motion.js's own NARROW query, which
   scales the traffic packets — the two have to agree or the packets render at
   desktop size on a fan that's been shrunk. Tablets keep the full-bleed fan. */
@media (max-width: 700px) {
    /* A 1440x900 viewBox stretched over a tall narrow hero crops to a slice where
       every path reads as a near-vertical line, so the fan gets a shorter box.
       It's lifted off the hero's bottom edge deliberately: anchored down there,
       the paths' low-left ends land past the fold and only a corner of the fan is
       on screen when the page loads. */
    .r-hero-routes {
        top: 34%;
        bottom: auto;
        height: 46%;
    }

    /* Stroke widths are viewBox units, and this box scales them to roughly 0.42,
       which thins the fan to sub-pixel and anti-aliases it away. Scaled back up. */
    .r-hero-routes .faint {
        stroke-width: 2.6;
    }

    .r-hero-routes .route {
        stroke-width: 4.5;
    }

    /* Two-axis so it calms without flattening: vertically it peaks across the
       label/field/note band and clears above and below; horizontally it's masked
       away at the right edge, which is where the violet route runs and where
       there's no type to protect. */
    .r-hero-veil {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(23, 19, 31, 0) 32%,
            rgba(23, 19, 31, 0.66) 47%,
            rgba(23, 19, 31, 0.66) 79%,
            rgba(23, 19, 31, 0) 91%
        );
        -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 26%);
        mask-image: linear-gradient(to left, transparent 0%, #000 26%);
    }
}

@media (max-width: 640px) {
    .r-experience {
        padding-block: 0.2rem;
    }

    .r-experience-row {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
        padding: 0.8rem 0;
    }

    .r-logo-marquee,
    .r-client-marquee {
        width: calc(100vw - 3rem);
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
    }

    .r-handoff-map {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 2.5rem;
    }

    .r-handoff,
    .r-handoff + .r-handoff,
    .r-handoff:nth-child(even) {
        padding: 1.25rem 0 1.25rem 1.5rem;
        border-top: 0;
        border-left: 1px solid var(--v2-line);
    }

    .r-handoff::before,
    .r-handoff + .r-handoff::before,
    .r-handoff:nth-child(even)::before {
        top: 1.6rem;
        left: -5px;
    }

    .r-route-console-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.25rem;
    }

    .r-console-steps {
        padding: 0.5rem 1.25rem;
    }

    .r-console-steps li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .r-console-steps li::before {
        left: 60px;
    }

    .r-console-steps span {
        padding-left: 0.35rem;
        font-size: 0.875rem;
    }

    .r-console-summary {
        padding: 1rem 1.25rem 1.25rem;
    }

    .r-cap-grid,
    .r-tiers-grid,
    .r-managed-grid,
    .r-work-grid,
    .r-work-grid--four {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-tier {
        padding: 1.5rem;
    }

    .r-tier h3 {
        font-size: 1.75rem;
        line-height: 1.08;
    }

    .r-tier-price {
        font-size: 2rem;
    }

    .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;
    }

    /* Phone fold budget. Content drives the hero height so taller phones reveal
       the proof section instead of adding an empty band below the actions. */
    body.v2 .r-hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + 1.25rem);
        padding-bottom: 2rem;
    }

    .r-hero-eyebrow {
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        margin-bottom: 1rem;
    }

    .r-hero-title {
        font-size: 2.125rem;
        line-height: 1.06;
        margin-bottom: 0.75rem;
    }

    .r-hero-sub {
        font-size: 1rem;
        line-height: 1.55;
        margin-bottom: 1.25rem;
    }

    .r-hero-scan {
        max-width: none;
        margin-bottom: 0.875rem;
    }

    .r-scan-label {
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        margin-bottom: 0.5rem;
    }

    /* Stacked, so neither the domain nor the button gets squeezed */
    .r-scan-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .r-scan-submit {
        width: 100%;
    }

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

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

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

/* =============================================================================
   Blog / Guides
   ============================================================================= */

/* ---- Index cards ---- */

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

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 1.75rem;
    text-decoration: none;
    color: var(--v2-text);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.blog-card:hover {
    border-color: var(--v2-violet-soft);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(23, 19, 31, 0.08);
}

.blog-card-tag {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.blog-card-title {
    font-family: var(--v2-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}

.blog-card-desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--v2-muted);
    margin: 0;
}

.blog-card-meta {
    margin-top: auto;
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    color: var(--v2-muted);
}

/* ---- Post hero ---- */

.blog-breadcrumb {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-family: var(--v2-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c4bbd2;
    margin-bottom: 1.75rem;
}

.blog-breadcrumb a {
    color: #d6c5fa;
    text-decoration: none;
}

.blog-breadcrumb a:hover {
    color: #fff;
}

.blog-post-title {
    font-family: var(--v2-display);
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 20em;
    margin-bottom: 1.5rem;
}

.blog-post-byline {
    font-family: var(--v2-body);
    font-size: 0.875rem;
    font-weight: 450;
    letter-spacing: 0.01em;
    color: #c4bbd2;
}

/* ---- Article body ---- */

.blog-prose {
    max-width: 46em;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--v2-text);
}

.blog-prose > p:first-child {
    font-size: 1.1875rem;
    line-height: 1.7;
}

.blog-prose h2 {
    font-family: var(--v2-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 2.75rem 0 1rem;
}

.blog-prose h3 {
    font-family: var(--v2-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 2rem 0 0.75rem;
}

.blog-prose p {
    margin: 0 0 1.15rem;
}

.blog-prose a {
    color: var(--v2-violet);
    text-decoration: underline;
    text-decoration-color: var(--v2-violet-soft);
    text-underline-offset: 3px;
}

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

.blog-prose ul,
.blog-prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}

.blog-prose li {
    margin-bottom: 0.5rem;
}

.blog-prose strong {
    font-weight: 600;
}

.blog-prose blockquote {
    margin: 2.25rem 0;
    padding: 1.5rem 1.75rem;
    background: var(--v2-wash);
    border-left: 3px solid var(--v2-violet);
    border-radius: 0 var(--v2-radius) var(--v2-radius) 0;
}

.blog-prose blockquote p {
    margin: 0 0 0.75rem;
}

.blog-prose blockquote p:last-child {
    margin-bottom: 0;
}

.blog-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.blog-prose th,
.blog-prose td {
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--v2-line);
    vertical-align: top;
}

.blog-prose th {
    background: var(--v2-wash);
    font-weight: 600;
    font-family: var(--v2-display);
    font-size: 0.875rem;
}

.blog-prose tr:nth-child(even) td {
    background: rgba(233, 228, 244, 0.35);
}

.blog-prose pre {
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    border-radius: var(--v2-radius);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.75rem 0;
    font-family: var(--v2-mono);
    font-size: 0.875rem;
    line-height: 1.6;
}

.blog-prose code {
    font-family: var(--v2-mono);
    font-size: 0.875em;
    background: var(--v2-wash);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.blog-prose pre code {
    background: none;
    padding: 0;
}

.blog-prose hr {
    border: none;
    border-top: 1px solid var(--v2-line);
    margin: 2.5rem 0;
}

/* ---- Post CTA + related ---- */

.blog-post-cta {
    max-width: 46em;
    margin-top: 3rem;
    padding: 2rem 2.25rem;
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    border-radius: var(--v2-radius);
}

.blog-post-cta h3 {
    font-family: var(--v2-display);
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.blog-post-cta p {
    color: #c4bbd2;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    max-width: 40em;
}

.blog-related {
    margin-top: 4.5rem;
}

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

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

    .blog-prose {
        font-size: 1rem;
    }

    .blog-post-cta {
        padding: 1.5rem;
    }

    .blog-prose table {
        display: block;
        overflow-x: auto;
    }
}

.blog-post-cta p {
    color: #c4bbd2;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    max-width: 40em;
}

.blog-post-cta p strong {
    color: var(--v2-ink-text);
}

.blog-post-cta a:not(.r-btn) {
    color: #d6c5fa;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-post-cta a:not(.r-btn):hover {
    color: #fff;
}

/* ---- llms.txt generator tool ---- */

.llms-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: inherit;
    font: inherit;
    padding: 0.85rem 1rem;
    resize: vertical;
}

.llms-error {
    color: #fca5a5;
    font-size: 0.9375rem;
    margin: 0.5rem 0 0;
}

.llms-output {
    margin-top: 1.5rem;
    max-width: 52em;
}

.llms-output pre {
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    border-radius: var(--v2-radius);
    padding: 1.5rem 1.75rem;
    overflow-x: auto;
    font-family: var(--v2-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.llms-output-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.llms-next {
    margin-top: 2.5rem;
    max-width: 46em;
}

.llms-next h3 {
    font-family: var(--v2-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.llms-next ol {
    padding-left: 1.4rem;
    line-height: 1.75;
}

.llms-next li {
    margin-bottom: 0.5rem;
}

.llms-next code {
    font-family: var(--v2-mono);
    font-size: 0.875em;
    background: var(--v2-wash);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.tool-cta-note a {
    color: var(--v2-violet);
}

/* ---- AI readability checker ---- */

.read-checks {
    margin-top: 2rem;
    max-width: 52em;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.read-check {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    padding: 1.1rem 1.25rem;
}

.read-check-badge {
    flex: 0 0 auto;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    margin-top: 0.1rem;
}

.read-check--pass .read-check-badge { background: #dcfce7; color: var(--v2-good); }
.read-check--warn .read-check-badge { background: #fef3c7; color: var(--v2-warn); }
.read-check--fail .read-check-badge { background: #fee2e2; color: var(--v2-bad); }

.read-check--fail { border-color: #fecaca; }
.read-check--warn { border-color: #fde68a; }

.read-check-body strong {
    font-family: var(--v2-display);
    font-size: 1rem;
}

.read-check-body p {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--v2-muted);
}

.read-check-fix {
    color: var(--v2-text) !important;
    background: var(--v2-wash);
    padding: 0.6rem 0.8rem !important;
    border-radius: 6px;
    margin-top: 0.6rem !important;
}

/* ---- Question generator ---- */

.q-badge {
    background: var(--v2-wash) !important;
    color: var(--v2-violet) !important;
    min-width: 7.5em;
    text-align: center;
}

.q-text {
    color: var(--v2-text) !important;
    font-size: 1rem !important;
}

.q-list + .llms-output-actions {
    margin-top: 1.25rem;
}

/* ---- AI share-of-voice calculator ---- */

.sov-workbench {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr);
    margin-top: 2.25rem;
    border: 1px solid var(--v2-line);
}

.sov-form {
    padding: 1.75rem;
    background: var(--v2-card);
    border-right: 1px solid var(--v2-line);
}

.sov-field + .sov-field {
    margin-top: 1.25rem;
}

.sov-field label {
    display: block;
    font-family: var(--v2-display);
    font-weight: 600;
    color: var(--v2-text);
}

.sov-field p {
    margin: 0.3rem 0 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--v2-muted);
}

.sov-field input {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--v2-line);
    border-radius: 0;
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: var(--v2-mono);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}

.sov-field input:focus-visible {
    outline: 2px solid var(--v2-violet);
    outline-offset: 2px;
}

.sov-error {
    min-height: 1.5rem;
    margin: 1rem 0;
    font-size: 0.875rem;
    color: var(--v2-bad);
}

.sov-results {
    padding: 1.75rem;
    background: var(--v2-ink);
    color: var(--v2-ink-text);
}

.sov-result {
    padding: 1.25rem 0;
}

.sov-result--primary {
    padding-top: 0;
    border-bottom: 1px solid var(--v2-ink-line);
}

.sov-result-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
}

.sov-result strong {
    display: block;
    font-family: var(--v2-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sov-result p,
.sov-sample p {
    margin: 0.65rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v2-ink-muted);
}

.sov-meter {
    height: 0.45rem;
    margin-top: 1rem;
    background: var(--v2-ink-line);
    overflow: hidden;
}

.sov-meter span {
    display: block;
    height: 100%;
    background: var(--v2-violet-bright);
    transition: width 180ms ease;
}

.sov-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    border-bottom: 1px solid var(--v2-ink-line);
}

.sov-result-grid .sov-result + .sov-result {
    padding-left: 1.5rem;
    border-left: 1px solid var(--v2-ink-line);
}

.sov-result-grid .sov-result strong {
    font-size: 2rem;
}

.sov-sample {
    padding-top: 1.25rem;
}

.sov-sample strong {
    font-family: var(--v2-display);
    font-size: 1.25rem;
}

.r-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2rem;
    border: 1px solid var(--v2-line);
}

.r-choice-grid article {
    padding: 1.75rem;
}

.r-choice-grid article + article {
    border-left: 1px solid var(--v2-line);
}

.r-choice-label {
    display: block;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.r-choice-grid h3 {
    margin: 0.75rem 0;
    font-size: 1.25rem;
}

.r-choice-grid p {
    margin: 0;
    line-height: 1.65;
    color: var(--v2-muted);
}

.r-compare-table table {
    min-width: 46rem;
}

.r-compare-table td:first-child {
    width: 22%;
}

@media (prefers-reduced-motion: reduce) {
    .sov-meter span {
        transition: none;
    }
}

@media (max-width: 760px) {
    .sov-workbench {
        grid-template-columns: 1fr;
    }

    .sov-form {
        border-right: 0;
        border-bottom: 1px solid var(--v2-line);
    }

    .sov-result-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sov-result-grid .sov-result + .sov-result {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--v2-ink-line);
    }

    .r-choice-grid {
        grid-template-columns: 1fr;
    }

    .r-choice-grid article + article {
        border-left: 0;
        border-top: 1px solid var(--v2-line);
    }
}

/* ---- Research press report ---- */

.r-research-scope {
    list-style: none;
    margin: 0;
    padding: 2.5rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    border-top: 1px solid var(--v2-ink-line);
    border-bottom: 1px solid var(--v2-ink-line);
}

.r-research-scope-value {
    display: block;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--v2-violet-bright);
    font-variant-numeric: tabular-nums;
}

.r-research-scope-label {
    display: block;
    max-width: 22em;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--v2-ink-muted);
}

.r-study-chart {
    margin: 2.25rem 0 0;
    padding: 1.25rem 0;
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
}

.r-study-chart-scale {
    display: grid;
    grid-template-columns: 12rem 1fr 4rem;
    margin-bottom: 0.75rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--v2-muted);
}

.r-study-chart-scale span:first-child {
    grid-column: 2;
    justify-self: start;
}

.r-study-chart-scale span:nth-child(2) {
    grid-column: 2;
    justify-self: center;
}

.r-study-chart-scale span:last-child {
    grid-column: 2;
    justify-self: end;
}

.r-study-chart-row {
    display: grid;
    grid-template-columns: 12rem minmax(12rem, 1fr) 4rem;
    gap: 1rem;
    align-items: center;
    min-height: 3.25rem;
}

.r-study-chart-label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}

.r-study-chart-label a {
    color: var(--v2-text);
    text-decoration: none;
}

.r-study-chart-label a:hover {
    color: var(--v2-violet);
}

.r-study-chart-label strong,
.r-study-chart-range-label {
    font-family: var(--v2-mono);
    font-variant-numeric: tabular-nums;
}

.r-study-chart-label strong {
    color: var(--v2-violet);
}

.r-study-chart-range-label {
    font-size: 0.75rem;
    color: var(--v2-muted);
}

.r-study-chart-track {
    position: relative;
    height: 0.75rem;
    overflow: visible;
    background: var(--v2-wash);
    border: 1px solid var(--v2-line);
}

.r-study-chart-fill {
    display: block;
    height: 100%;
    background: var(--v2-violet);
}

.r-study-chart-range {
    position: absolute;
    top: -0.4rem;
    height: 1.4rem;
    border-left: 2px solid var(--v2-text);
    border-right: 2px solid var(--v2-text);
}

.r-study-chart-range::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--v2-text);
}

.r-study-caption {
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--v2-muted);
}

.r-quote-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 2.5rem;
    background: var(--v2-line);
    border: 1px solid var(--v2-line);
}

.r-quote-grid blockquote {
    margin: 0;
    padding: 1.5rem;
    background: var(--v2-card);
}

.r-quote-grid p {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--v2-text);
}

.r-quote-grid cite {
    display: block;
    margin-top: 1.25rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-muted);
}

.r-press-ledger {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 2rem;
    border: 1px solid var(--v2-line);
}

.r-press-ledger > div {
    padding: 1.5rem;
}

.r-press-ledger > div + div {
    border-left: 1px solid var(--v2-line);
}

.r-press-label {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.r-press-ledger strong {
    display: block;
    font-family: var(--v2-display);
    font-size: 1.0625rem;
}

.r-press-ledger p {
    margin: 0.65rem 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--v2-muted);
}

.r-download-status {
    display: block;
    min-height: 1.25rem;
    margin-top: 0.65rem;
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    color: var(--v2-muted);
}

@media (max-width: 760px) {
    .r-research-scope {
        grid-template-columns: 1fr;
    }

    .r-study-chart-scale {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .r-study-chart-scale span:first-child,
    .r-study-chart-scale span:nth-child(2),
    .r-study-chart-scale span:last-child {
        grid-column: 1;
    }

    .r-study-chart-scale span:nth-child(2) {
        display: none;
    }

    .r-study-chart-row {
        grid-template-columns: 1fr 3.5rem;
        gap: 0.45rem 0.75rem;
        padding: 0.65rem 0;
    }

    .r-study-chart-label {
        grid-column: 1 / -1;
    }

    .r-quote-grid,
    .r-press-ledger {
        grid-template-columns: 1fr;
    }

    .r-press-ledger > div + div {
        border-left: 0;
        border-top: 1px solid var(--v2-line);
    }
}

/* ---- Blog images (teardowns etc.) ---- */

.blog-prose img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    margin: 1.5rem 0 0.5rem;
    box-shadow: 0 8px 24px rgba(23, 19, 31, 0.07);
}

/* Image captions only. `p > em:only-child` used to be in this selector, but
   :only-child ignores text nodes — so it matched any paragraph containing a
   single italicised phrase and broke it onto its own grey line mid-sentence. */
.blog-prose img + em {
    display: block;
    font-size: 0.875rem;
    color: var(--v2-muted);
    margin-bottom: 1.5rem;
}

/* ---- GBP audit candidates ---- */

.gbp-candidate {
    align-items: center;
    justify-content: space-between;
}

.gbp-candidate .r-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Glossary term pages: the related-terms eyebrow sits below prose. */
.r-related-heading {
    display: block;
    margin-top: 2.5rem;
}

/* =============================================================================
   The Qualified Lead System — flagship offer page
   -----------------------------------------------------------------------------
   The offer page needs three shapes the rest of the site did not have: a wide
   scope table, a four-window build timeline, and one dominant price block. The
   alternate packages, guarantees, and plans reuse .r-tier and .r-managed-card.
   ============================================================================= */

.r-offer-scope {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 3rem;
    border: 1px solid var(--v2-line);
    background: var(--v2-card);
}

.r-offer-group {
    padding: 1.75rem;
    border-top: 1px solid var(--v2-line);
    border-left: 1px solid var(--v2-line);
}

/* The outer border already draws the top and left edges of the first row and
   first column, so those internal rules would double up. */
.r-offer-group:nth-child(-n + 3) {
    border-top: 0;
}

.r-offer-group:nth-child(3n + 1) {
    border-left: 0;
}

.r-offer-group h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

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

.r-offer-group li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--v2-muted);
}

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

/* ---- Boundaries: what is deliberately not included ---- */

.r-boundary {
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--v2-wash);
    border-radius: var(--v2-radius-lg);
}

.r-boundary h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

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

.r-boundary .r-tiers-footnote {
    margin-top: 1.25rem;
    font-size: 0.875rem;
}

.r-boundary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 2rem;
}

.r-boundary-list--wide {
    margin-top: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r-boundary-list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

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

.r-disclosure {
    margin-top: 2rem;
    border-top: 1px solid var(--v2-line);
    padding-top: 1.5rem;
}

.r-disclosure summary {
    cursor: pointer;
    font-family: var(--v2-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

/* ---- The 30-day build ---- */

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

.r-phase {
    background: var(--v2-card);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-lg);
    padding: 1.75rem;
    /* The violet edge reads as progress along the build without needing a
       connector line that would break on wrap. */
    border-top: 3px solid var(--v2-violet);
}

.r-phase-days {
    display: block;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-violet);
    margin-bottom: 0.75rem;
}

.r-phase h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

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

.r-phase li {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v2-muted);
}

/* ---- The flagship price block ---- */

.r-offer {
    margin-top: 3rem;
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    border-radius: var(--v2-radius-lg);
    overflow: hidden;
}

.r-offer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2.5rem;
    padding: 2.5rem;
}

.r-offer-head h3 {
    font-family: var(--v2-display);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 650;
    line-height: 1.03;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
}

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

.r-offer-summary {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--v2-ink-soft);
    margin: 0;
}

.r-offer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 2.5rem;
    border-left: 1px solid var(--v2-ink-line);
}

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

.r-offer-terms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--v2-ink-line);
}

.r-offer-terms > div {
    padding: 1.75rem 2.5rem;
}

.r-offer-terms > div + div {
    border-left: 1px solid var(--v2-ink-line);
}

.r-offer-terms h4 {
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
    margin-bottom: 0.85rem;
}

.r-offer-terms p,
.r-offer-terms li {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--v2-ink-soft);
}

.r-offer-terms ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

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

/* ---- Two-step review form progress ---- */

.r-review-steps {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    font-family: var(--v2-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v2-muted);
}

.r-review-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.r-review-steps span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--v2-line);
    font-size: 0.6875rem;
}

.r-review-steps .is-current {
    color: var(--v2-violet);
}

.r-review-steps .is-current span {
    background: var(--v2-violet);
    border-color: var(--v2-violet);
    color: #fff;
}

.r-review-steps .is-done span {
    border-color: var(--v2-violet);
    color: var(--v2-violet);
}

/* The honeypot must be reachable by a bot's parser and invisible to everyone
   else, so it is moved off-screen rather than display:none — some crawlers
   skip hidden inputs, which is exactly the ones we want to catch. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-hint,
.form-optional {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    color: var(--v2-muted);
}

.form-optional {
    display: inline;
    margin-left: 0.35rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.form-consent {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--v2-muted);
}

.form-consent input {
    margin-top: 0.25rem;
    flex: 0 0 auto;
}

.form-back-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--v2-violet);
}

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

    .r-offer-group:nth-child(-n + 3) {
        border-top: 1px solid var(--v2-line);
    }

    .r-offer-group:nth-child(-n + 2) {
        border-top: 0;
    }

    .r-offer-group:nth-child(3n + 1) {
        border-left: 1px solid var(--v2-line);
    }

    .r-offer-group:nth-child(odd) {
        border-left: 0;
    }

    .r-offer-head,
    .r-offer-terms {
        grid-template-columns: 1fr;
    }

    .r-offer-price {
        padding-left: 0;
        padding-top: 2rem;
        border-left: 0;
        border-top: 1px solid var(--v2-ink-line);
    }

    .r-offer-terms > div + div {
        border-left: 0;
        border-top: 1px solid var(--v2-ink-line);
    }

    .r-boundary-list--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .r-offer-scope,
    .r-phases,
    .r-tiers-grid--two,
    .r-boundary-list,
    .r-boundary-list--wide {
        grid-template-columns: 1fr;
    }

    .r-offer-group {
        border-left: 0;
        border-top: 1px solid var(--v2-line);
    }

    .r-offer-group:first-child {
        border-top: 0;
    }

    .r-offer-head,
    .r-offer-terms > div {
        padding: 1.75rem;
    }
}

/* =============================================================================
   Web-design geo pages: benchmark stat grid + the compare-your-site widget.
   The stat grid extends .r-stat-row with a per-figure source note; the widget
   is deliberately plain — an instrument panel, not a marketing block.
   ========================================================================== */

.wd-proof-band {
    background: var(--v2-card);
    border-bottom: 1px solid var(--v2-line);
}

.wd-proof-band-inner {
    max-width: var(--v2-container);
    margin: 0 auto;
    padding: 1.4rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(210px, 0.75fr) minmax(0, 2.25fr);
    gap: 2rem;
    align-items: center;
}

.wd-proof-eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--v2-violet);
}

.wd-proof-heading h2 {
    margin: 0;
    font-family: var(--v2-display);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.wd-proof-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid var(--v2-line);
}

.wd-proof-result {
    min-width: 0;
    padding: 0.15rem 1.25rem;
    color: var(--v2-text);
    border-right: 1px solid var(--v2-line);
}

.wd-proof-result:hover {
    color: var(--v2-violet-deep);
}

.wd-proof-result strong,
.wd-proof-result span,
.wd-proof-result small {
    display: block;
}

.wd-proof-result strong {
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

.wd-proof-result span {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--v2-muted);
}

.wd-proof-result small {
    margin-top: 0.5rem;
    font-family: var(--v2-mono);
    font-size: 0.625rem;
    letter-spacing: 0.03em;
    color: var(--v2-violet);
}

@media (max-width: 900px) {
    .wd-proof-band-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    .wd-proof-results {
        grid-template-columns: minmax(0, 1fr);
        border-left: 0;
        border-top: 1px solid var(--v2-line);
    }

    .wd-proof-result {
        padding: 0.9rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--v2-line);
    }
}

.wd-stat-row {
    list-style: none;
    margin: 2.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    border-top: 1px solid var(--v2-ink-line);
    border-bottom: 1px solid var(--v2-ink-line);
    padding: 2.5rem 0;
}

.wd-stat-value {
    display: block;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--v2-violet-bright);
    font-variant-numeric: tabular-nums;
}

.wd-stat-label {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--v2-ink-muted);
    max-width: 22em;
}

.wd-stat-row--bench {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
}

.wd-stat-row--bench .wd-stat-value {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
}

.wd-stat-detail {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--v2-ink-muted);
    opacity: 0.75;
}

@media (max-width: 900px) {
    .wd-stat-row,
    .wd-stat-row--bench {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wd-compare-form {
    margin-top: 2rem;
}

.wd-compare-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.wd-compare-fields input {
    flex: 1 1 220px;
    padding: 0.9rem 1.1rem;
    font-size: 1rem;
    border: 1px solid var(--v2-ink-line);
    border-radius: 10px;
    background: transparent;
    color: inherit;
}

.wd-compare-fields input:focus {
    outline: 2px solid var(--v2-violet-bright);
    outline-offset: 1px;
}

.wd-compare-progress {
    margin-top: 1.5rem;
}

.wd-compare-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--v2-ink-line);
    overflow: hidden;
}

.wd-compare-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--v2-violet-bright);
    transition: width 0.4s ease;
}

.wd-compare-progress p {
    margin-top: 0.6rem;
    font-size: 0.9375rem;
    color: var(--v2-ink-muted);
}

.wd-compare-error {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid #c0392b55;
    border-radius: 10px;
    color: #c0392b;
    font-size: 0.95rem;
}

.wd-compare-result {
    margin-top: 2rem;
    padding: 1.75rem;
    border: 1px solid var(--v2-ink-line);
    border-radius: 14px;
}

.wd-compare-result h3 {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    line-height: 1.35;
}

.wd-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.wd-compare-table th,
.wd-compare-table td {
    text-align: left;
    padding: 0.6rem 0.75rem 0.6rem 0;
    border-bottom: 1px solid var(--v2-ink-line);
    font-size: 0.95rem;
}

.wd-compare-table thead th {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v2-ink-muted);
}

.wd-compare-signals {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.4rem 1.5rem;
    font-size: 0.9375rem;
}

.wd-signal-yes { color: var(--v2-ink-muted); }
.wd-signal-no { color: #c0392b; font-weight: 600; }

.wd-histogram {
    margin: 2rem 0 1.5rem;
}

.wd-histogram-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    border-bottom: 1px solid var(--v2-ink-line);
    padding-bottom: 2px;
}

.wd-histogram-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.wd-histogram-count {
    font-size: 0.75rem;
    color: var(--v2-ink-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.wd-histogram-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--v2-ink-line);
}

.wd-histogram-bar--poor { background: #c65f4e; }
.wd-histogram-bar--mid { background: #b7a9e0; }
.wd-histogram-bar--good { background: #2e9e6b; }

.wd-histogram-tick {
    margin-top: 0.4rem;
    font-size: 0.6875rem;
    color: var(--v2-ink-muted);
    white-space: nowrap;
}

.wd-histogram-caption {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--v2-ink-muted);
}

.wd-histogram-key--poor { color: #c65f4e; font-weight: 600; }
.wd-histogram-key--good { color: #2e9e6b; font-weight: 600; }

@media (max-width: 640px) {
    .wd-histogram-tick { font-size: 0.5625rem; }
    .wd-histogram-bars { height: 130px; }
}

.wd-deciles {
    margin: 1.5rem 0;
    overflow-x: auto;
}

.wd-decile-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wd-decile-table th,
.wd-decile-table td {
    text-align: right;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--v2-ink-line);
    font-size: 0.875rem;
}

.wd-decile-table th[scope="row"] {
    text-align: left;
    font-weight: 600;
    padding-left: 0;
}

.wd-decile-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v2-ink-muted);
}

#wd-compare-cta {
    margin-top: 1.5rem;
}

/* =============================================================================
   Homepage fit recommendation
   Restored interactive selector, reskinned for the Wayfinding system.
   ============================================================================= */

.r-fit-simulator {
    max-width: 58rem;
    margin: 3rem auto 0;
}

.r-fit-simulator .simulator-card {
    min-height: 27rem;
    display: grid;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    color: var(--v2-ink-text);
    background:
        radial-gradient(circle at 85% 15%, rgba(109, 40, 217, 0.26), transparent 32%),
        var(--v2-ink);
    border: 1px solid var(--v2-ink-line);
    border-radius: var(--v2-radius-lg);
    box-shadow: 0 28px 70px rgba(23, 19, 31, 0.16);
}

.r-fit-simulator .simulator-step,
.r-fit-simulator .simulator-result {
    width: 100%;
}

.r-fit-simulator .simulator-step.hidden,
.r-fit-simulator .simulator-result.hidden {
    display: none;
}

.r-simulator-progress {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
}

.r-fit-simulator .simulator-step h3 {
    max-width: 24em;
    margin: 0 auto 2rem;
    font-family: var(--v2-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.12;
    text-align: center;
    color: #fff;
}

.r-fit-simulator .option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
    margin: 0;
}

.r-fit-simulator .option-grid.multi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.r-fit-simulator .option-btn {
    min-height: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    font-family: var(--v2-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--v2-ink-text);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--v2-ink-line);
    border-radius: var(--v2-radius);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.r-fit-simulator .option-btn:hover {
    transform: translateY(-3px);
    color: #fff;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.5);
}

.r-fit-simulator .option-btn:focus-visible {
    outline: 3px solid rgba(167, 139, 250, 0.55);
    outline-offset: 3px;
}

.r-fit-simulator .option-btn.selected {
    color: #fff;
    background: rgba(109, 40, 217, 0.3);
    border-color: var(--v2-violet-bright);
}

.r-fit-simulator .option-icon {
    font-family: var(--v2-mono);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--v2-violet-soft);
}

.r-fit-simulator .simulator-next {
    display: flex;
    margin: 1.5rem auto 0;
    color: #fff;
    border-color: var(--v2-ink-line);
}

.r-fit-simulator .simulator-next:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.r-fit-simulator .simulator-result {
    text-align: center;
}

.r-fit-simulator .result-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.45rem 0.75rem;
    font-family: var(--v2-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-violet-soft);
    background: rgba(109, 40, 217, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 999px;
}

.r-fit-simulator .result-tier {
    margin: 0 0 1rem;
    font-family: var(--v2-display);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.r-fit-simulator .result-description {
    max-width: 38rem;
    margin: 0 auto 2rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--v2-ink-soft);
}

.r-fit-simulator .result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.r-fit-simulator .result-actions .r-btn--ghost {
    color: #fff;
    border-color: var(--v2-ink-line);
}

@media (max-width: 760px) {
    .r-fit-simulator .option-grid,
    .r-fit-simulator .option-grid.multi {
        grid-template-columns: 1fr;
    }

    .r-fit-simulator .option-btn {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
    }

    .r-fit-simulator .simulator-card {
        min-height: 32rem;
    }
}

/* Website Intelligence Index
   The page behaves like a measuring instrument: exposed scales, denominators,
   and result bands carry the visual identity instead of decorative cards. */
.r-benchmark-ruler {
    margin: 4rem 0 2rem;
    padding: 2.5rem 0 1rem;
}

.r-benchmark-ruler-track {
    position: relative;
    height: 3.5rem;
    border: 1px solid var(--v2-line);
    background: repeating-linear-gradient(
        90deg,
        var(--v2-card) 0,
        var(--v2-card) calc(10% - 1px),
        var(--v2-line) calc(10% - 1px),
        var(--v2-line) 10%
    );
}

.r-benchmark-ruler-good {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--v2-good) 16%, transparent);
}

.r-benchmark-ruler-marker {
    position: absolute;
    top: -2.25rem;
    width: 1px;
    height: 7.5rem;
    background: var(--v2-good);
}

.r-benchmark-ruler-marker--median {
    background: var(--v2-bad);
}

.r-benchmark-ruler-marker strong,
.r-benchmark-ruler-marker small {
    position: absolute;
    left: 0;
    display: block;
    padding-left: 0.65rem;
    white-space: nowrap;
}

.r-benchmark-ruler-marker strong {
    top: -0.1rem;
    color: var(--v2-text);
    font: 700 1.5rem/1 var(--v2-display);
}

.r-benchmark-ruler-marker small {
    top: 1.7rem;
    color: var(--v2-muted);
    font: 600 0.72rem/1 var(--v2-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.r-benchmark-ruler-marker--median strong,
.r-benchmark-ruler-marker--median small {
    left: auto;
    right: 0;
    padding-right: 0.65rem;
    padding-left: 0;
    text-align: right;
}

.r-benchmark-ruler-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    color: var(--v2-muted);
    font: 600 0.75rem/1 var(--v2-body);
}

.r-benchmark-findings {
    margin: 3rem 0 1.5rem;
    border-top: 1px solid var(--v2-line);
}

.r-benchmark-finding {
    display: grid;
    grid-template-columns: minmax(7rem, 0.28fr) 1fr;
    gap: 2rem;
    align-items: baseline;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--v2-line);
}

.r-benchmark-finding > strong {
    font: 650 clamp(2.2rem, 6vw, 4.5rem)/0.9 var(--v2-display);
    color: var(--v2-violet);
}

.r-benchmark-finding h3,
.r-benchmark-finding p {
    margin: 0;
}

.r-benchmark-finding h3 {
    font-size: 1.25rem;
}

.r-benchmark-finding p {
    margin-top: 0.4rem;
    color: var(--v2-muted);
    font-size: 0.9rem;
}

.r-benchmark-compare {
    max-width: 54rem;
    margin-top: 2.5rem;
}

.r-benchmark-compare label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--v2-ink-text);
    font-weight: 700;
}

.r-benchmark-compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.r-benchmark-compare-row input {
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--v2-ink-line);
    border-radius: 0.35rem;
    color: var(--v2-ink-text);
    background: var(--v2-ink-2);
    font: inherit;
}

.r-benchmark-compare-row input:focus {
    outline: 2px solid var(--v2-violet-bright);
    outline-offset: 2px;
}

.r-benchmark-compare-status {
    min-height: 1.6rem;
    margin-top: 0.8rem;
    color: var(--v2-ink-soft);
}

.r-benchmark-result {
    max-width: 54rem;
    margin-top: 2rem;
    padding: 2rem;
    border: 1px solid var(--v2-ink-line);
    border-left: 4px solid var(--v2-violet-bright);
    background: var(--v2-ink-2);
}

.r-benchmark-result h3 {
    margin: 0.5rem 0;
    color: var(--v2-ink-text);
    font-size: 1.5rem;
}

.r-benchmark-result p {
    color: var(--v2-ink-soft);
}

.r-platform-compare {
    margin: 3rem 0 1.5rem;
    border-top: 1px solid var(--v2-line);
}

.r-platform-compare-row {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) minmax(7rem, 0.45fr) minmax(7rem, 0.45fr);
    gap: 1.25rem;
    align-items: baseline;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--v2-line);
}

.r-platform-compare-head {
    color: var(--v2-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 620px) {
    .r-benchmark-finding {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .r-benchmark-compare-row {
        grid-template-columns: 1fr;
    }

    .r-platform-compare-row {
        grid-template-columns: minmax(0, 1fr) 5rem 5rem;
        gap: 0.65rem;
        font-size: 0.82rem;
    }
}

.r-cost-ledger {
    margin-top: 3rem;
    border-top: 1px solid var(--v2-line);
}

.r-cost-ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid var(--v2-line);
}

.r-cost-ledger-row h3 {
    margin: 0.55rem 0 0.35rem;
    font-size: 1.35rem;
}

.r-cost-ledger-row p {
    max-width: 42rem;
    margin: 0;
    color: var(--v2-muted);
}

.r-cost-ledger-row > strong {
    font: 650 clamp(1.6rem, 4vw, 3.2rem)/1 var(--v2-display);
    color: var(--v2-violet);
    white-space: nowrap;
}

.r-cost-calculator {
    max-width: 58rem;
    margin-top: 2.5rem;
}

.r-cost-calculator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.r-cost-calculator label,
.r-cost-calculator legend {
    color: var(--v2-ink-text);
    font-weight: 700;
}

.r-cost-calculator select {
    display: block;
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.9rem;
    border: 1px solid var(--v2-ink-line);
    border-radius: 0.35rem;
    color: var(--v2-ink-text);
    background: var(--v2-ink-2);
    font: inherit;
}

.r-cost-calculator fieldset {
    margin: 2rem 0 0;
    padding: 0;
    border: 0;
}

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

.r-cost-features label {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--v2-ink-line);
    border-radius: 0.4rem;
    background: var(--v2-ink-2);
    cursor: pointer;
}

.r-cost-features input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--v2-violet-bright);
}

.r-cost-features span,
.r-cost-features small {
    display: block;
}

.r-cost-features small {
    margin-top: 0.25rem;
    color: var(--v2-ink-soft);
    font-weight: 400;
}

.r-cost-output {
    max-width: 58rem;
    margin-top: 2rem;
    padding: 2rem;
    border-top: 1px solid var(--v2-ink-line);
    border-bottom: 1px solid var(--v2-ink-line);
}

.r-cost-output > span {
    color: var(--v2-violet-bright);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.r-cost-output > strong {
    display: block;
    margin: 0.35rem 0;
    color: var(--v2-ink-text);
    font: 650 clamp(2.5rem, 8vw, 5.5rem)/1 var(--v2-display);
}

.r-cost-output p {
    margin: 0 0 1.5rem;
    color: var(--v2-ink-soft);
}

@media (max-width: 680px) {
    .r-cost-ledger-row,
    .r-cost-calculator-grid,
    .r-cost-features {
        grid-template-columns: 1fr;
    }

    .r-cost-ledger-row > strong {
        white-space: normal;
    }
}