/*
 * The landing page's three routes, and The Reality's three figures.
 *
 * What was here: three divs carrying a chevron, so they read as
 * clickable and were not; emoji as structural icons; and copy promising
 * things the platform does not hold. The replacement is a list of routes
 * that each go somewhere, set as a contents page rather than as three
 * identical tiles — alternatives, not a sequence, so they are ruled and
 * not numbered.
 */

/*
 * The heading starts where the routes start. A centred header above a
 * left-aligned list makes the eye find the beginning of the content
 * twice — the same reason the dashboard headings moved left in #69.
 */
.features-section .section-header,
.features-section .section-title,
.features-section .section-description,
.features-section .section-eyebrow,
.reality-header,
.reality-title,
.reality-subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.routes {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--rule);
}

.routes li { border-bottom: var(--rule); }

.route {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-5) 0;
    text-decoration: none;
    /* Content on the left, the action on the right, so the eye lands on
       the title and the hand lands on the verb. */
    grid-template-columns: 1fr;
}

@media (min-width: 860px) {
    .route {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
        gap: var(--s-5);
        align-items: start;
    }
}

.route-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.route-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1.15;
    color: #F1F5F9;
}

.route-count {
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: #34D399;
}

.route-body {
    max-width: var(--measure);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    line-height: 1.65;
    color: #CBD5E1;
}

.route-go {
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-height: 2.5rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-control);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    font-weight: 600;
    color: #F1F5F9;
    white-space: nowrap;
    transition: border-color 160ms ease, background-color 160ms ease,
        color 160ms ease;
}

.route:hover .route-go,
.route:focus-visible .route-go {
    background: #34D399;
    border-color: #34D399;
    color: #04210F;
}

/*
 * The whole row is the link, so the whole row takes the focus ring. A
 * ring around the verb alone would point at a fragment of the target.
 */
.route:focus-visible {
    outline: 2px solid #34D399;
    outline-offset: 4px;
}

@media (pointer: coarse) {
    .route-go { min-height: 44px; }
}

/* ---------- The Reality ---------- */

.reality-eyebrow {
    margin: 0 0 var(--s-2);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: #94A3B8;
    text-transform: none;
    letter-spacing: 0;
}

/*
 * Figures of record, set like the ones on the dashboard: the serif,
 * tabular, square, and the provenance ruled off beneath rather than
 * trailing after them in grey.
 */
.reality-card {
    border-radius: var(--r-none);
    text-align: left;
}

.reality-card:hover { transform: none; }

.reality-stat {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.reality-source {
    border-top: var(--rule);
}


/*
 * The two Explore controls became anchors when QUAL-01 was closed, and
 * an anchor inherits the link underline that a button never had. They
 * are still buttons to look at; only what they are made of changed.
 */
a.btn-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}