.labs-link {
    color: var(--text-fill-1);
    transition: all 0.2s ease-in;
}

.labs-link:hover {
    background-color: var(--brand-agility);
}

.labs-featured-item {
    display: flex;
    gap: var(--space-8);
    flex-direction: column;
    padding: var(--space-24) var(--space-16);
    border-bottom: 1px solid var(--surface-fill-4);
}

.benchmark-table {
    margin-bottom: 0;
}

.benchmark-table th {
    font-family: var(--font-eyebrow);
    font-weight: 500;
    background-color: var(--surface-fill-3);
    font-size: var(--label-m);
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>td {
    border-color: var(--surface-fill-3);
    padding: var(--space-8) var(--space-12);
}

.benchmark-table th,
.benchmark-table td {
    white-space: nowrap;
    vertical-align: middle;
    padding: var(--space-8);
}

.tier-pill {
    display: inline-block;
    padding: 2px var(--space-8);
    border-radius: 4px;
    font-size: var(--body-s);
    font-weight: 600;
    line-height: var(--line-height-130);
}

.tier-pill--economy {
    background-color: var(--surface-fill-3);
    color: var(--text-fill-1);
}

.tier-pill--mid {
    background-color: var(--text-fill-4);
    color: var(--surface-fill-1);
}

.tier-pill--frontier {
    background-color: var(--text-fill-1);
    color: var(--surface-fill-1);
}

.benchmark-table .cell-callout {
    background-color: #fff2a8;
    font-weight: 600;
}

/* clips to ~10.5 rows so row 11 reads as half-shown. JS reads this
               value back, so it must stay a declared custom property. */
.benchmark-clip {
    --benchmark-clip-h: 448px;

    position: relative;
    overflow: hidden;
    transition: max-height var(--motion-duration-slow) var(--motion-easing-standard);
}

.benchmark-clip.is-collapsed {
    max-height: var(--benchmark-clip-h);
}

.benchmark-fade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 140px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--surface-fill-2));
    transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
}

.benchmark-clip.is-collapsed .benchmark-fade {
    opacity: 1;
}

/* button only appears once JS can drive it */
.benchmark-expand-wrap {
    display: none;
}

.benchmark-expand-wrap.is-ready {
    display: block;
}

.labs-trend-graphic-box {
    border: 1px solid var(--gray-12);
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    /* fill the stretched grid cell so both cards match height regardless of copy length */
    height: 100%;
}

.labs-trend-graphic-box p {
    max-width: 350px;
}

/* the card is a flex column, so the footer button would otherwise stretch full width */
.labs-trend-graphic-box .btn {
    align-self: center;
}

/* pin the stats + chart to the card's bottom so the slack from equal-height
   cards lands above them, not underneath */
/* margin-top:auto keeps the stats on a shared baseline across cards, so the
   slack from unequal copy lengths collects above them rather than below */
.labs-trend-metrics {
    margin-top: auto;
    margin-bottom: var(--space-12);
    justify-content: space-between;
}

.githubBtn {
    border: 1px solid var(--surface-fill-3);
    background: var(--brand-depth);
    padding: var(--space-16);
    display: flex;
    align-items: center;
    gap: var(--space-12);
    color: var(--text-fill-1);
    font-family: var(--font-eyebrow);
    font-size: var(--eyebrow-s);
    text-decoration: none;
    transition: all var(--motion-duration-fast) var(--motion-easing-standard);
}

.githubBtn i {
    font-size: var(--body-l);
    transition: all 0.2s ease-in-out;
}

/* global a:hover sets color:inherit, which reads dark here; override explicitly */
.githubBtn:hover,
.githubBtn:focus {
    background: var(--brand-agility);
    border-color: var(--brand-agility);
    color: var(--brand-depth);
}

.githubBtn:hover i,
.githubBtn:focus i {
    color: var(--brand-depth);
}

.latestItem {
    position: relative;
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--surface-fill-3);
}

.latestTag {
    color: var(--text-fill-3);
    font-size: var(--label-m);
}

.latestTitle {
    color: var(--text-fill-1);
    font-size: var(--title-l);
    transition: all 0.2s ease-in-out;
}

.latestCTA {
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.latestItem:hover .latestCTA {
    opacity: 1;
}

.latestItem:hover .latestTitle {
    background-color: var(--brand-agility);
}