/* ============================================================================
   Forge — V0-faithful port of app/forge/page.tsx.

   Sections wrap inside .forge-page. Per-section content uses .forge-section
   (full-bleed) + .forge-section-inner (max-width container). Premium chrome
   primitives reused across sections:
     • .forge-section-header — corner-bracketed gold/orange/violet/red title
     • .forge-divider .divider-<color> — animated 3-layer light-bar dividers
   ============================================================================ */

/* ─── Page shell ─────────────────────────────────────────────────────────── */
.forge-page {
    position: relative;
    z-index: 10;
    width: 100%;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
/*
 * The shared shell's <main> has padding-top: 2rem (var(--space-8)). Without
 * absorbing that the forge hero starts 2rem below the navbar, exposing the
 * body atmosphere bg in the gap — and the top-vignette starting at the
 * hero's edge then creates a visible horizontal seam at the gap boundary.
 * Pull the hero up by 2rem so it sits flush against the navbar; the
 * vignette + top-fill then blend seamlessly with the navbar's bottom edge.
 */
.forge-hero {
    position: relative;
    /*
     * Pull the hero up by the FULL nav-offset chain — body padding-top
     * (4.25rem reserved for the fixed nav) PLUS the shell's main padding
     * (var(--space-8) = 2rem). The hero then starts at viewport-top 0
     * and we re-add 4.25rem of internal padding-top so the content
     * still centers in the visible area below the navbar. Same pattern
     * as the landing hero. Without this, a 9px sliver of body atmosphere
     * bg shows between the navbar's actual ~52px height and the body's
     * 61.2px reservation — that sliver was the "strange line" the user
     * was seeing.
     */
    min-height: 100vh;
    margin-top: calc(-1 * (4.25rem + var(--space-8)));
    padding: 4.25rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.forge-hero-inner {
    /* Re-add internal breathing room since the section's own padding-bottom
       is 0 (visual padding moved into the floor-glow + content centering). */
    padding-bottom: 4rem;
}

.forge-hero-floor-glow {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 56rem;
    height: 30rem;
    pointer-events: none;
    background: radial-gradient(ellipse at bottom,
        rgba(255, 100, 50, 0.12) 0%,
        rgba(212, 175, 55, 0.06) 40%,
        transparent 70%);
    filter: blur(60px);
}
.forge-hero-top-vignette {
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 12rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

/*
 * Soft localized backdrop behind the hero text — V0 darkens the whole
 * background, but we want the painterly art to keep showing on the sides
 * (per product spec). A wide, vertically-shorter radial ellipse anchored
 * to the hero center darkens the readable area and fades to transparent
 * at the edges. Pure decoration, behind .forge-hero-inner.
 */
.forge-hero-text-fade {
    /*
     * Tall enough to cover the full text stack: eyebrow → title (2 lines)
     * → description → CTA → scroll-arrow. Gradient stays mostly opaque
     * in the inner 50% radius (so the title + eyebrow are uniformly dark),
     * then fades to transparent at the outer edge.
     */
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: min(85%, 64rem);
    height: 48rem;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.78) 35%,
        rgba(0, 0, 0, 0.60) 55%,
        rgba(0, 0, 0, 0.30) 78%,
        rgba(0, 0, 0, 0.08) 92%,
        transparent 100%);
    filter: blur(10px);
}

.forge-hero-inner {
    position: relative;
    max-width: 64rem;
    width: 100%;
    text-align: center;
}

/* ─── Eyebrow row (used by hero + final CTA) ─────────────────────────────── */
.forge-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.forge-eyebrow-row .line {
    height: 1px;
    width: 5rem;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5));
}
.forge-eyebrow-row .line:last-child {
    background: linear-gradient(270deg, transparent, rgba(212, 175, 55, 0.5));
}
.forge-eyebrow-row .text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: rgba(212, 175, 55, 0.85);
}
.forge-eyebrow-row.final .text {
    font-size: 0.8125rem;
    letter-spacing: 0.5em;
    color: rgba(212, 175, 55, 0.85);
}

/* ─── Big hero title ─────────────────────────────────────────────────────── */
.forge-hero-title {
    margin: 0 0 2rem;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4E287 20%, #D4AF37 55%, #8B5A2B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 30px rgba(212, 175, 55, 0.35));
}
@media (min-width: 768px)  { .forge-hero-title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .forge-hero-title { font-size: 5.25rem; } }

.forge-hero-desc {
    max-width: 36rem;
    margin: 0 auto 2.5rem;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.65;
    color: rgba(220, 220, 220, 0.85);
}
.forge-hero-desc .emphasis {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: #D4AF37;
}
@media (min-width: 768px) { .forge-hero-desc { font-size: 1.25rem; } }

.forge-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* ─── Primary CTA button (gold gradient, used in hero + final) ──────────── */
.forge-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #8B5A2B 0%, #D4AF37 40%, #F4E287 60%, #D4AF37 100%);
    color: #000;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow:
        0 4px 30px rgba(212, 175, 55, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, filter 0.3s ease;
}
.forge-cta-primary:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.forge-cta-primary svg {
    transition: transform 0.3s ease;
}
.forge-cta-primary:hover svg {
    transform: scale(1.1);
}

.forge-cta-primary.forge-cta-lg {
    padding: 1.25rem 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    gap: 0.75rem;
    box-shadow:
        0 8px 50px rgba(212, 175, 55, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ─── Scroll-down arrow ──────────────────────────────────────────────────── */
.forge-scroll-down {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    text-decoration: none;
    opacity: 0;
    animation: forgeFadeIn 0.8s ease 1.2s forwards;
}
@keyframes forgeFadeIn { to { opacity: 1; } }

.forge-scroll-down .text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.85);
}
.forge-scroll-down .chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -0.75rem;
    color: rgba(212, 175, 55, 0.85);
    animation: forgeBob 2s ease-in-out infinite;
}
.forge-scroll-down .chevrons svg:nth-child(2) {
    margin-top: -0.75rem;
    color: rgba(212, 175, 55, 0.85);
}
@keyframes forgeBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GENERIC SECTION + PREMIUM HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-section {
    position: relative;
    padding: 6rem 1rem;
    overflow: hidden;
}
/*
 * Section-wide soft dark backdrop. Sits behind all section content (z-index
 * default = 0, while .forge-section-inner has z-index 1 above). Provides
 * the same "spotlight" readability the hero gets — text inside cards and
 * banners reads cleanly even when the section's atmosphere bg has bright
 * details (sky, trees, etc.). Extends roughly the full inner area, fades
 * to transparent at the edges so the painterly art still shows beyond.
 */
.forge-section::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: min(92%, 80rem);
    height: 88%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.38) 60%,
        rgba(0, 0, 0, 0.16) 82%,
        transparent 100%);
    filter: blur(18px);
}
.forge-section-ambient {
    position: absolute;
    top: 50%; right: 50%;
    transform: translate(50%, -50%);
    width: 56rem;
    height: 32rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
    opacity: 0.2;
}
.forge-section-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
}
.forge-section-inner.forge-wide   { max-width: 80rem; }
.forge-section-inner.forge-medium { max-width: 72rem; }
.forge-section-inner.forge-narrow { max-width: 56rem; }

.forge-section-head {
    text-align: center;
    margin-bottom: 4rem;
}
.forge-section-sub {
    max-width: 36rem;
    margin: 1.5rem auto 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(160, 160, 160, 0.85);
}

/* Premium SectionHeader — uses --sec-color / --sec-rgb / --right-color / --right-rgb */
.forge-section-header {
    --sec-color: #D4AF37;
    --sec-rgb: 212,175,55;
    --right-color: #D4AF37;
    --right-rgb: 212,175,55;
    position: relative;
    display: inline-block;
}
.forge-section-header .bloom {
    position: absolute;
    inset: -1.5rem;
    border-radius: 1rem;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(var(--sec-rgb), 0.08) 0%, transparent 70%);
    filter: blur(12px);
}
.forge-section-header .bg-panel {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    /*
     * Two-layer stack — colored tint at the corners (V0's two-tone effect)
     * sits on top of a near-opaque dark base so the title is readable
     * regardless of the atmosphere bg behind the section.
     */
    background:
        linear-gradient(135deg,
            rgba(var(--sec-rgb), 0.16) 0%,
            transparent 35%,
            transparent 65%,
            rgba(var(--right-rgb), 0.12) 100%),
        linear-gradient(135deg, rgba(14, 12, 8, 0.94) 0%, rgba(8, 6, 4, 0.97) 100%);
    border: 1px solid rgba(var(--sec-rgb), 0.22);
    box-shadow:
        0 0 80px rgba(var(--sec-rgb), 0.1),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(var(--sec-rgb), 0.18),
        inset 0 -1px 0 rgba(var(--sec-rgb), 0.06);
}
.forge-section-header .scan-lines {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg,
        transparent, transparent 2px,
        rgba(255, 255, 255, 0.018) 2px,
        rgba(255, 255, 255, 0.018) 3px);
}
.forge-section-header .top-shimmer {
    position: absolute;
    top: 0;
    right: 1rem;
    left: 1rem;
    height: 1px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, rgba(var(--sec-rgb), 0.5), transparent);
}
.forge-section-header .bracket {
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    pointer-events: none;
}
.forge-section-header .bracket.tl {
    top: -0.375rem; right: -0.375rem;
    border-top: 2.5px solid var(--sec-color);
    border-right: 2.5px solid var(--sec-color);
}
.forge-section-header .bracket.tr {
    top: -0.375rem; left: -0.375rem;
    border-top: 2.5px solid var(--sec-color);
    border-left: 2.5px solid var(--sec-color);
}
.forge-section-header .bracket.tr.right {
    border-top-color: var(--right-color);
    border-right-color: var(--right-color);
}
.forge-section-header .bracket.bl {
    bottom: -0.375rem; right: -0.375rem;
    border-bottom: 2.5px solid var(--sec-color);
    border-right: 2.5px solid var(--sec-color);
}
.forge-section-header .bracket.br {
    bottom: -0.375rem; left: -0.375rem;
    border-bottom: 2.5px solid var(--sec-color);
    border-left: 2.5px solid var(--sec-color);
}
.forge-section-header .bracket.br.right {
    border-bottom-color: var(--right-color);
    border-right-color: var(--right-color);
}
.forge-section-header .title {
    position: relative;
    margin: 0;
    padding: 1.5rem 3rem;
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sec-color);
    text-shadow:
        0 0 80px rgba(var(--sec-rgb), 0.6),
        0 0 30px rgba(var(--sec-rgb), 0.3),
        0 2px 6px rgba(0, 0, 0, 0.9);
}
.forge-section-header .title .slash {
    margin: 0 1rem;
    color: rgba(150, 150, 150, 0.85);
    font-weight: 300;
}
@media (min-width: 768px) {
    .forge-section-header .title { font-size: 2.5rem; padding: 1.75rem 4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   "WHAT'S INCLUDED" cards
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-include-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px)  { .forge-include-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .forge-include-grid { grid-template-columns: repeat(3, 1fr); } }

.forge-include-card {
    position: relative;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(24, 22, 15, 0.98) 0%, rgba(10, 8, 6, 1) 100%);
    border: 1px solid rgba(212, 175, 55, 0.14);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(212, 175, 55, 0.09),
        inset 0 0 0 0.5px rgba(212, 175, 55, 0.04);
    overflow: hidden;

    opacity: 0;
    transform: translateY(24px);
    animation: forgeCardIn 0.6s ease forwards;
    animation-delay: calc(var(--stagger, 0) * 80ms);

    transition: border-color 0.5s ease;
}
@keyframes forgeCardIn { to { opacity: 1; transform: translateY(0); } }
.forge-include-card:hover { border-color: rgba(212, 175, 55, 0.28); }

.forge-include-card .bracket {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.forge-include-card:hover .bracket { opacity: 1; }
.forge-include-card .bracket.tl { top: 0; right: 0;     border-top: 1px solid #D4AF37; border-right: 1px solid #D4AF37; }
.forge-include-card .bracket.tr { top: 0; left: 0;    border-top: 1px solid #D4AF37; border-left: 1px solid #D4AF37; }
.forge-include-card .bracket.bl { bottom: 0; right: 0;  border-bottom: 1px solid #D4AF37; border-right: 1px solid #D4AF37; }
.forge-include-card .bracket.br { bottom: 0; left: 0; border-bottom: 1px solid #D4AF37; border-left: 1px solid #D4AF37; }

.forge-include-card .hover-top-glow {
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 5rem;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.07) 0%, transparent 100%);
    transition: opacity 0.5s ease;
}
.forge-include-card:hover .hover-top-glow { opacity: 1; }

.forge-include-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.04) 100%);
    box-shadow:
        0 0 24px rgba(212, 175, 55, 0.12),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    color: #D4AF37;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}

.forge-include-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}
.forge-include-body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(160, 160, 160, 0.85);
}
.forge-mono {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: #D4AF37;
}

/* Perks banner */
.forge-perks-banner {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(90deg,
        rgba(212, 175, 55, 0.06) 0%,
        rgba(22, 20, 14, 0.9) 30%,
        rgba(22, 20, 14, 0.9) 70%,
        rgba(212, 175, 55, 0.06) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow:
        0 0 50px rgba(212, 175, 55, 0.07),
        inset 0 1px 0 rgba(212, 175, 55, 0.1);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}
.forge-perks-banner .trophy {
    display: inline-flex;
    color: #D4AF37;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
}
.forge-perks-label {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
}
.forge-perk {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(160, 160, 160, 0.85);
}
.forge-perk .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D4AF37;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION DIVIDER (3-layer light bar)
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-divider {
    --core: #D4AF37;
    --glow: rgba(212, 175, 55, 0.6);
    position: relative;
    width: 100%;
    padding: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.forge-divider span {
    position: absolute;
    inset-inline: 0;
    height: 1px;
}
.forge-divider .outer-glow {
    background: linear-gradient(90deg, transparent 5%, var(--glow) 30%, var(--glow) 70%, transparent 95%);
    filter: blur(20px);
    opacity: 0.8;
}
.forge-divider .mid-glow {
    background: linear-gradient(90deg, transparent 10%, var(--glow) 35%, var(--glow) 65%, transparent 90%);
    filter: blur(8px);
    opacity: 0.9;
}
.forge-divider .core-line {
    background: linear-gradient(90deg, transparent 15%, var(--core) 40%, var(--core) 60%, transparent 85%);
    opacity: 0.4;
}

.forge-divider.divider-gold    { --core: #D4AF37; --glow: rgba(212, 175, 55, 0.6); }
.forge-divider.divider-ember   { --core: #FB923C; --glow: rgba(251, 146, 60, 0.5); }
.forge-divider.divider-violet  { --core: #8B5CF6; --glow: rgba(139, 92, 246, 0.5); }
.forge-divider.divider-crimson { --core: #EF4444; --glow: rgba(239, 68, 68, 0.45); }

/* Blue-gold split divider — overrides the simple gradients. */
.forge-divider.divider-split .outer-glow {
    background: linear-gradient(90deg, transparent 5%, rgba(212,175,55,0.55) 30%, rgba(212,175,55,0.55) 50%, rgba(96,165,250,0.55) 50%, rgba(96,165,250,0.55) 70%, transparent 95%);
}
.forge-divider.divider-split .mid-glow {
    background: linear-gradient(90deg, transparent 10%, rgba(212,175,55,0.6) 35%, rgba(212,175,55,0.6) 50%, rgba(96,165,250,0.6) 50%, rgba(96,165,250,0.6) 65%, transparent 90%);
}
.forge-divider.divider-split .core-line {
    background: linear-gradient(90deg, transparent 15%, #D4AF37 40%, #D4AF37 50%, #60A5FA 50%, #60A5FA 60%, transparent 85%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROL BOARD (orange-accent panel + 9 sliders)
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-board {
    position: relative;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(160deg,
        rgba(26, 23, 16, 0.99) 0%,
        rgba(10, 8, 6, 1) 60%,
        rgba(20, 17, 12, 0.99) 100%);
    border: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(212, 175, 55, 0.04),
        inset 0 1px 0 rgba(212, 175, 55, 0.14),
        inset 0 0 140px rgba(212, 175, 55, 0.025);
    overflow: hidden;
}
@media (min-width: 768px)  { .forge-board { padding: 3rem 2.5rem; } }

.forge-board-bolt {
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 65% 35%, #888 0%, #444 40%, #1a1a1a 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.6);
}
.forge-board-bolt.tl { top: 1rem; right: 1rem; }
.forge-board-bolt.tr { top: 1rem; left: 1rem; }
.forge-board-bolt.bl { bottom: 1rem; right: 1rem; }
.forge-board-bolt.br { bottom: 1rem; left: 1rem; }

.forge-board-shimmer {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
}
.forge-board-top-fill {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 6rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, transparent 100%);
}

.forge-slider-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px)  { .forge-slider-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .forge-slider-grid { grid-template-columns: repeat(3, 1fr); } }

/* Individual slider card */
.forge-slider-card {
    position: relative;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(22, 20, 14, 0.98) 0%, rgba(12, 10, 8, 1) 100%);
    border: 1px solid rgba(251, 146, 60, 0.18);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(251, 146, 60, 0.08);
    overflow: hidden;

    opacity: 0;
    transform: translateY(20px);
    animation: forgeCardIn 0.5s ease forwards;
    animation-delay: calc(var(--stagger, 0) * 80ms);

    transition: box-shadow 0.4s ease;
}
.forge-slider-card:hover {
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        inset 0 0 40px rgba(251, 146, 60, 0.06),
        inset 0 1px 0 rgba(251, 146, 60, 0.08);
}

.forge-slider-card .bracket {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
    border-color: rgba(251, 146, 60, 0.5);
}
.forge-slider-card .bracket.tl { top: 0; right: 0;     border-top: 1px solid; border-right: 1px solid; }
.forge-slider-card .bracket.tr { top: 0; left: 0;    border-top: 1px solid; border-left: 1px solid; }
.forge-slider-card .bracket.bl { bottom: 0; right: 0;  border-bottom: 1px solid; border-right: 1px solid; }
.forge-slider-card .bracket.br { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }

.forge-slider-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.forge-slider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.18) 0%, rgba(251, 146, 60, 0.04) 100%);
    box-shadow:
        0 0 16px rgba(251, 146, 60, 0.12),
        inset 0 1px 0 rgba(251, 146, 60, 0.2);
    color: #FB923C;
}
.forge-slider-text { flex: 1 1 auto; min-width: 0; }
.forge-slider-label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.forge-slider-desc {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: rgba(206, 188, 152, 0.95);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Slider track */
.forge-slider-track {
    position: relative;
    height: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.forge-slider-track .ticks {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
    pointer-events: none;
}
.forge-slider-track .ticks span {
    width: 1px;
    height: 0.375rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
}
.forge-slider-track .fill {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg,
        rgba(251, 146, 60, 0.3) 0%,
        rgba(251, 146, 60, 0.6) 40%,
        #FB923C 70%,
        rgba(255, 255, 255, 0.3) 100%);
    box-shadow:
        0 0 14px rgba(251, 146, 60, 0.55),
        0 0 5px rgba(251, 146, 60, 0.7);
}
.forge-slider-track .thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 30%,
        rgba(255, 255, 255, 0.4) 0%,
        #FB923C 25%,
        rgba(251, 146, 60, 0.8) 55%,
        rgba(251, 146, 60, 0.4) 100%);
    box-shadow:
        0 0 18px rgba(251, 146, 60, 0.8),
        0 0 35px rgba(251, 146, 60, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(251, 146, 60, 0.3);
    pointer-events: none;
}

.forge-slider-range {
    margin: 0;
    text-align: center;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    color: rgba(212, 175, 55, 0.85);
}

/* Native range sits invisibly on top of the visual track */
.forge-slider-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.forge-board-foot {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: rgba(206, 188, 152, 0.95);
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(212, 175, 55, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND TIMELINE (3 glowing dials)
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-dial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .forge-dial-grid { grid-template-columns: repeat(3, 1fr); } }

.forge-dial {
    --dial-color: #D4AF37;
    --dial-rgb: 212,175,55;
    position: relative;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    /* Two-layer: colored corner tints on top of a solid dark base. */
    background:
        linear-gradient(160deg,
            rgba(var(--dial-rgb), 0.12) 0%,
            transparent 30%,
            transparent 70%,
            rgba(var(--dial-rgb), 0.06) 100%),
        linear-gradient(160deg, rgba(18, 14, 10, 0.96) 0%, rgba(10, 8, 6, 0.98) 100%);
    border: 1px solid rgba(var(--dial-rgb), 0.25);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(var(--dial-rgb), 0.08),
        inset 0 1px 0 rgba(var(--dial-rgb), 0.15);
    overflow: hidden;

    opacity: 0;
    transform: translateY(30px);
    animation: forgeCardIn 0.7s ease forwards;
    animation-delay: calc(var(--stagger, 0) * 150ms);
}

.forge-dial .bracket {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    border-color: rgba(var(--dial-rgb), 0.5);
}
.forge-dial .bracket.tl { top: 0; right: 0;     border-top: 2px solid; border-right: 2px solid; }
.forge-dial .bracket.tr { top: 0; left: 0;    border-top: 2px solid; border-left: 2px solid; }
.forge-dial .bracket.bl { bottom: 0; right: 0;  border-bottom: 2px solid; border-right: 2px solid; }
.forge-dial .bracket.br { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }

.forge-dial .top-light {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 8rem;
    opacity: 0.2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--dial-rgb), 0.4) 0%, transparent 100%);
}

/* The glowing icon ring */
.forge-dial-ring {
    position: relative;
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1.5rem;
}
.forge-dial-ring .dial-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--dial-rgb), 0.3) 0%, transparent 70%);
    filter: blur(10px);
    animation: forgeDialPulse 2.5s ease-in-out infinite;
}
@keyframes forgeDialPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.06); }
}
.forge-dial-ring .dial-conic {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
    padding: 2px;
    background: conic-gradient(
        from 0deg,
        rgba(var(--dial-rgb), 0.6),
        rgba(var(--dial-rgb), 0.1),
        rgba(var(--dial-rgb), 0.6));
}
.forge-dial-ring .dial-inner {
    position: absolute;
    inset: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 65% 25%, rgba(var(--dial-rgb), 0.25) 0%, rgba(10, 8, 6, 0.95) 60%);
    border: 1px solid rgba(var(--dial-rgb), 0.4);
    box-shadow:
        inset 0 0 30px rgba(var(--dial-rgb), 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.05);
    color: var(--dial-color);
    filter: drop-shadow(0 0 8px var(--dial-color));
}
.forge-dial-ring .dial-badge {
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--dial-color) 0%, rgba(var(--dial-rgb), 0.6) 100%);
    color: #000;
    box-shadow:
        0 0 20px rgba(var(--dial-rgb), 0.7),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.forge-dial-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--dial-color);
    text-shadow: 0 0 20px rgba(var(--dial-rgb), 0.5);
}
.forge-dial-desc {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(160, 160, 160, 0.85);
}

/* "Round ends at WW lvl 100" trophy banner */
.forge-trophy-banner {
    position: relative;
    margin: 3rem auto 0;
    max-width: 36rem;
    padding: 1.25rem 2rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.07) 0%, rgba(12, 10, 8, 0.95) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow:
        0 0 40px rgba(212, 175, 55, 0.06),
        inset 0 1px 0 rgba(212, 175, 55, 0.1);
    text-align: center;
}
.forge-trophy-banner .shimmer-top {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}
.forge-trophy-banner p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(210, 210, 210, 0.85);
}
.forge-trophy-banner .trophy-icon {
    display: inline-flex;
    margin-left: 0.5rem;
    color: #D4AF37;
    vertical-align: middle;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.6));
}
.forge-trophy-banner .accent {
    color: #D4AF37;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   YOUR SIDE / OUR SIDE — 2-column split
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) { .forge-split-grid { grid-template-columns: 1fr 1fr; } }

.forge-side {
    position: relative;
    padding: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    height: 100%;
}
.forge-side-blue {
    /* Blue tint preserved at the top-left corner over a solid dark base. */
    background:
        linear-gradient(145deg,
            rgba(96, 165, 250, 0.15) 0%,
            rgba(96, 165, 250, 0.0) 55%,
            transparent 100%),
        linear-gradient(145deg, rgba(20, 24, 36, 0.96) 0%, rgba(10, 8, 6, 0.98) 100%);
    border: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow:
        0 12px 50px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(96, 165, 250, 0.04),
        inset 0 1px 0 rgba(96, 165, 250, 0.12);
}
.forge-side-gold {
    /* Gold tint preserved at the top-left corner over a solid dark base. */
    background:
        linear-gradient(145deg,
            rgba(212, 175, 55, 0.15) 0%,
            rgba(212, 175, 55, 0.0) 55%,
            transparent 100%),
        linear-gradient(145deg, rgba(28, 24, 16, 0.96) 0%, rgba(10, 8, 6, 0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow:
        0 12px 50px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(212, 175, 55, 0.04),
        inset 0 1px 0 rgba(212, 175, 55, 0.12);
}
.forge-side .top-shimmer {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    pointer-events: none;
}
.forge-side-blue .top-shimmer { background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.4), transparent); }
.forge-side-gold .top-shimmer { background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent); }
.forge-side .bracket {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
}
.forge-side-blue .bracket.tl { top: 0; right: 0;     border-top: 2px solid rgba(96, 165, 250, 0.5); border-right: 2px solid rgba(96, 165, 250, 0.5); }
.forge-side-blue .bracket.tr { top: 0; left: 0;    border-top: 2px solid rgba(96, 165, 250, 0.5); border-left: 2px solid rgba(96, 165, 250, 0.5); }
.forge-side-blue .bracket.bl { bottom: 0; right: 0;  border-bottom: 2px solid rgba(96, 165, 250, 0.5); border-right: 2px solid rgba(96, 165, 250, 0.5); }
.forge-side-blue .bracket.br { bottom: 0; left: 0; border-bottom: 2px solid rgba(96, 165, 250, 0.5); border-left: 2px solid rgba(96, 165, 250, 0.5); }
.forge-side-gold .bracket.tl { top: 0; right: 0;     border-top: 2px solid rgba(212, 175, 55, 0.5); border-right: 2px solid rgba(212, 175, 55, 0.5); }
.forge-side-gold .bracket.tr { top: 0; left: 0;    border-top: 2px solid rgba(212, 175, 55, 0.5); border-left: 2px solid rgba(212, 175, 55, 0.5); }
.forge-side-gold .bracket.bl { bottom: 0; right: 0;  border-bottom: 2px solid rgba(212, 175, 55, 0.5); border-right: 2px solid rgba(212, 175, 55, 0.5); }
.forge-side-gold .bracket.br { bottom: 0; left: 0; border-bottom: 2px solid rgba(212, 175, 55, 0.5); border-left: 2px solid rgba(212, 175, 55, 0.5); }

.forge-side-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.forge-side-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}
.forge-side-blue .forge-side-icon {
    background: rgba(96, 165, 250, 0.12);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.1);
    color: #60A5FA;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.6));
}
.forge-side-gold .forge-side-icon {
    background: rgba(212, 175, 55, 0.12);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
    color: #D4AF37;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
}
.forge-side-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.forge-side-blue .forge-side-title { color: #60A5FA; }
.forge-side-gold .forge-side-title { color: #D4AF37; }
.forge-side-eyebrow {
    margin: 0.125rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(206, 188, 152, 0.95);
}

.forge-side-grid {
    display: grid;
    gap: 0.75rem;
}
.forge-side-grid.two-col {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .forge-side-grid.two-col { grid-template-columns: 1fr 1fr; } }
.forge-side-grid.single-col { grid-template-columns: 1fr; }

.forge-side-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.75rem;

    opacity: 0;
    transform: translateY(8px);
    animation: forgeCardIn 0.4s ease forwards;
    animation-delay: calc(var(--stagger, 0) * 60ms);
}
.forge-side-blue .forge-side-item {
    background: rgba(96, 165, 250, 0.04);
    border: 1px solid rgba(96, 165, 250, 0.1);
}
.forge-side-gold .forge-side-item {
    background: rgba(212, 175, 55, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.1);
}
.forge-side-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
}
.forge-side-blue .forge-side-item-icon {
    background: rgba(96, 165, 250, 0.12);
    color: #60A5FA;
}
.forge-side-gold .forge-side-item-icon {
    background: rgba(212, 175, 55, 0.12);
    color: #D4AF37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.1);
}
.forge-side-item .label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
}
.forge-side-item .desc {
    margin: 0.125rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: rgba(206, 188, 152, 0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CODE OF CONDUCT (red-accent)
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-conduct-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wax-seal floating scroll icon — overlaps the top of the card */
.forge-conduct-seal {
    position: relative;
    z-index: 2;
    margin-bottom: -1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #F4E287 0%, #D4AF37 45%, #8B5A2B 100%);
    box-shadow:
        0 0 40px rgba(212, 175, 55, 0.6),
        0 4px 24px rgba(212, 175, 55, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.4);
    color: #000;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.forge-conduct-card {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(160deg,
        rgba(40, 34, 22, 0.98) 0%,
        rgba(22, 18, 12, 0.99) 50%,
        rgba(18, 14, 10, 1) 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.7),
        0 0 120px rgba(212, 175, 55, 0.04),
        inset 0 0 120px rgba(212, 175, 55, 0.02);
    padding: 3.5rem 2.5rem 2.5rem;
}
@media (min-width: 768px) { .forge-conduct-card { padding: 4rem 3.5rem 3rem; } }

.forge-conduct-card .top-shimmer {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(212, 175, 55, 0.6) 30%,
        rgba(212, 175, 55, 0.6) 70%,
        transparent 95%);
}
.forge-conduct-card .top-fill {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.07) 0%, transparent 100%);
}
.forge-conduct-card .bracket {
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    pointer-events: none;
    border-color: rgba(212, 175, 55, 0.55);
}
.forge-conduct-card .bracket.tl { top: 0; right: 0;     border-top: 2px solid; border-right: 2px solid; }
.forge-conduct-card .bracket.tr { top: 0; left: 0;    border-top: 2px solid; border-left: 2px solid; }
.forge-conduct-card .bracket.bl { bottom: 0; right: 0;  border-bottom: 2px solid; border-right: 2px solid; }
.forge-conduct-card .bracket.br { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }

.forge-conduct-block { margin-bottom: 2rem; }
.forge-conduct-block:last-child { margin-bottom: 0; }

.forge-conduct-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.forge-conduct-title.gold { color: #D4AF37; }
.forge-conduct-title.red  { color: #EF4444; }
.forge-conduct-title .icon { display: inline-flex; }
.forge-conduct-title.gold .icon { filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.5)); }
.forge-conduct-title.red  .icon { filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5)); }

.forge-conduct-intro {
    margin: 0 0 1.5rem;
    padding-right: 2rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.65;
    color: rgba(206, 188, 152, 0.95);
    font-style: italic;
}

.forge-conduct-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.forge-conduct-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
}
.forge-conduct-item.green {
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.12);
}
.forge-conduct-item.red {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.18);
    box-shadow: inset 0 0 40px rgba(239, 68, 68, 0.03);
}
.forge-conduct-item .bullet {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin-top: 0.125rem;
}
.forge-conduct-item.green .bullet {
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
}
.forge-conduct-item.red .bullet {
    background: rgba(239, 68, 68, 0.18);
    color: #F87171;
}
.forge-conduct-item p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(210, 210, 210, 0.85);
}

.forge-conduct-divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 2.5rem 0;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.2) 50%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL CTA — vault-styled
   ═══════════════════════════════════════════════════════════════════════════ */
.forge-final-cta {
    position: relative;
}
.forge-final-bloom {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(212, 175, 55, 0.07) 0%, transparent 70%);
}

.forge-vault {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(160deg,
        rgba(30, 26, 17, 0.97) 0%,
        rgba(12, 10, 6, 1) 50%,
        rgba(22, 19, 13, 0.98) 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.04),
        0 40px 120px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(212, 175, 55, 0.05);
}
.forge-vault .top-shimmer {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(212, 175, 55, 0.6) 35%,
        rgba(244, 226, 135, 0.8) 50%,
        rgba(212, 175, 55, 0.6) 65%,
        transparent 95%);
}
.forge-vault .bottom-shimmer {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 15%,
        rgba(212, 175, 55, 0.3) 40%,
        rgba(212, 175, 55, 0.3) 60%,
        transparent 85%);
}
.forge-vault .top-fill {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 10rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.07) 0%, transparent 100%);
}
.forge-vault .scan-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: repeating-linear-gradient(0deg,
        transparent, transparent 2px,
        rgba(255, 255, 255, 1) 2px,
        rgba(255, 255, 255, 1) 3px);
}
.forge-vault .bracket {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    pointer-events: none;
    border-color: rgba(212, 175, 55, 0.55);
}
.forge-vault .bracket.tl { top: 0; right: 0;     border-top: 2px solid; border-right: 2px solid; }
.forge-vault .bracket.tr { top: 0; left: 0;    border-top: 2px solid; border-left: 2px solid; }
.forge-vault .bracket.bl { bottom: 0; right: 0;  border-bottom: 2px solid; border-right: 2px solid; }
.forge-vault .bracket.br { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.forge-vault .side-accent {
    position: absolute;
    top: 2.5rem;
    bottom: 2.5rem;
    width: 1px;
    pointer-events: none;
}
.forge-vault .side-accent.left  { right: 0; }
.forge-vault .side-accent.right { left: 0; }
.forge-vault .side-accent {
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.15) 30%, rgba(212, 175, 55, 0.15) 70%, transparent);
}

.forge-vault-body {
    position: relative;
    padding: 4rem 2rem;
    text-align: center;
}
@media (min-width: 768px) { .forge-vault-body { padding: 5rem 4rem; } }

.forge-vault-title {
    margin: 0 0 1.5rem;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFFDE0 0%, #F4E287 25%, #D4AF37 60%, #8B5A2B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 24px rgba(212, 175, 55, 0.35));
}
@media (min-width: 768px) { .forge-vault-title { font-size: 3.75rem; } }

/* Ornamental divider — line, solid dot, short line, ring dot, short line, solid dot, line */
.forge-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0;
}
.forge-ornament .line {
    height: 1px;
    flex: 1 1 0;
    max-width: 5rem;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35));
}
.forge-ornament .line:last-child {
    background: linear-gradient(270deg, transparent, rgba(212, 175, 55, 0.35));
}
.forge-ornament .line.short {
    flex: 0 0 2rem;
    background: rgba(212, 175, 55, 0.35);
}
.forge-ornament .dot.solid {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: #D4AF37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}
.forge-ornament .dot.ring {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.6);
}

.forge-vault-desc {
    margin: 0.5rem auto 0.5rem;
    max-width: 32rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(160, 160, 160, 0.85);
}
.forge-vault-tagline {
    margin: 0 0 3rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.85);
}

.forge-vault-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.forge-vault-foot {
    margin: 1.5rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
}

/* ─── Reduced-motion safety ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .forge-include-card,
    .forge-slider-card,
    .forge-dial,
    .forge-side-item,
    .forge-scroll-down,
    .forge-scroll-down .chevrons,
    .forge-dial-ring .dial-pulse,
    .forge-cta-primary { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   FORGE READABILITY PASS 2026-08-20

   Scoped to .forge-page so the generic class names cannot escape this page.
   At the FOOT because these override base rules of equal specificity and only
   win on source order.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── Supporting copy: 11.7px was the single most common size on the page ── */
.forge-page .text,
.forge-page .forge-slider-desc,
.forge-page .forge-side-eyebrow,
.forge-page .forge-side-item .desc,
.forge-page .forge-vault-tagline,
.forge-page .forge-vault-foot      { font-size: 0.9375rem; }   /* 13.5px */

/* Monospaced range readouts and the numeral badge stay a step down: they are
   annotations on a control, not prose. */
.forge-page .forge-slider-range    { font-size: 0.875rem; }    /* 12.6px */
.forge-page .dial-badge            { font-size: 0.875rem; }

/* ─── Prose: anything a visitor actually reads goes to body size ─────────── */
.forge-page .forge-conduct-intro,
.forge-page .forge-dial-desc,
.forge-page .forge-board-foot,
.forge-page .forge-perk,
.forge-page .forge-slider-label,
.forge-page .forge-side-item .label,
.forge-page .forge-trophy-banner p,
.forge-page .forge-trophy-banner .accent { font-size: 1rem; }  /* 14.4px */

/* ─── Density ─────────────────────────────────────────────────────────────
   The page runs 6,615px, 9.2 screens at 1280x720, and 2,036px of that - 31% -
   is section padding, section headers and the gap under them. Six sections at
   86.4px top AND bottom is the biggest single contributor. Trimming to 4.5rem
   and tightening the header gap gives back roughly 370px without making
   anything feel cramped; the hero is left alone since it is a full-viewport
   panel by design. */
.forge-page .forge-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
.forge-page .forge-section-head {
    margin-bottom: 2.5rem;
}

/* ─── Live control board ─────────────────────────────────────────────────
   The sliders now print their value as you drag. The readout is the loudest
   thing on the card because it is the thing that moves; the two bounds sit
   quietly under the track and label themselves from the spec. */
.forge-page .forge-slider-out {
    display: block;
    margin-top: 0.6rem;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: 0.005em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    color: #F2E6C4;
    white-space: nowrap;
}
.forge-page .forge-slider-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.forge-page .forge-slider-range .sep {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(212,175,55,0.22), rgba(212,175,55,0.06));
}

/* ════════════════════════════════════════════════════════════════════════════
   FORGE DENSITY PASS 2026-08-20 — the page was too long for what it says.

   Before this file: 6,615px, 9.2 screens at 1280x720, with 2,036px (31%) going
   to section padding, section headers and the gap beneath them. The readability
   pass above already took it to ~6,250. This block goes after the remaining
   structural air: section padding, the header stack, grid gaps and card
   padding. Nothing here shrinks type or weakens contrast - both were just
   raised, and the point is to spend less height on emptiness, not on words.
   ──────────────────────────────────────────────────────────────────────────── */
.forge-page .forge-section { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.forge-page .forge-section-head { margin-bottom: 1.75rem; }
.forge-page .forge-section-header { margin-bottom: 0.5rem; }
.forge-page .forge-section-sub { margin-top: 0.35rem; }

/* Grids and cards: the content is short, the boxes were generous. */
.forge-page .forge-slider-grid,
.forge-page .forge-dial-grid,
.forge-page .forge-include-grid,
.forge-page .forge-split-grid { gap: 1rem; }
.forge-page .forge-slider-card { padding: 1rem; }
.forge-page .forge-board { padding: 1.5rem; }

/* The dividers between sections were a full band of their own. */
.forge-page .forge-divider { margin-block: 0.5rem; }

/* Prohibited heading was 4.22:1 against its card - under AA at 16.2px. The
   lighter red measures 5.74:1 and still reads unmistakably as a warning. */
.forge-page .forge-conduct-title.red { color: #F87171; }

/* Dial titles carry a per-dial accent, so they had to be measured one by one
   rather than as a class: gold 8.11:1, red 4.85:1, violet 4.33:1 - only the
   violet actually failed, and only a per-ELEMENT sweep found it (a per-class
   sweep stops at the first match, which was the gold one). Both the violet and
   the red move a step lighter: 6.74:1 and 6.43:1, and the hue still reads.
   forge-dial-title accents */
.forge-page .forge-dial:nth-child(2) .forge-dial-title { color: #A78BFA; }
.forge-page .forge-dial:nth-child(3) .forge-dial-title { color: #F87171; }

/* ════════════════════════════════════════════════════════════════════════════
   ONE SCREEN: What is Included + Control Board + Round Timeline

   Three full-width sections with a divider band between each meant three
   viewports for one proposition. The feature list runs down the left; the
   board and the round schedule stack on the right. Below 1100px it falls back
   to the original single column, which is what a phone wants anyway.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    .forge-page .forge-duo {
        display: grid;
        grid-template-columns: 1fr 1.02fr;
        /* 0.75rem, not 1.25: the right column is two stacked panels and the row
           gap is what pushed the block 4px past the fold at 900px. */
        gap: 0.75rem;
        align-items: start;
        max-width: 82rem;
        margin-inline: auto;
        padding-inline: 1.5rem;
    }
    /* features spans both rows of the right-hand stack */
    .forge-page .forge-duo > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
    .forge-page .forge-duo > :nth-child(2) { grid-column: 2; grid-row: 1; }
    .forge-page .forge-duo > :nth-child(3) { grid-column: 2; grid-row: 2; }

    /* the sections lose their own outer padding and width caps inside the grid */
    .forge-page .forge-duo > .forge-section { padding-block: 0; }
    .forge-page .forge-duo .forge-section-inner { max-width: none; padding-inline: 0; }
    .forge-page .forge-duo .forge-section-head { margin-bottom: 1rem; }

    /* one column each: the cards are short, the columns are narrow */
    .forge-page .forge-duo .forge-include-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .forge-page .forge-duo .forge-slider-grid  { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .forge-page .forge-duo .forge-dial-grid    { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .forge-page .forge-duo .forge-slider-card  { padding: 0.75rem; }
    .forge-page .forge-duo .forge-board        { padding: 1rem; }
}

/* The three dials the board does not show are named here rather than dropped. */
.forge-page .forge-board-foot .more {
    display: block;
    margin-bottom: 0.3rem;
    color: rgba(222, 205, 168, 0.96);
    font-weight: 600;
}

/* ─── DUO COMPACTION ──────────────────────────────────────────────────────
   Measured inside the duo before touching anything:
     section headers 194 + 194 + 150 = 538px   (the single biggest item)
     include cards   222px each, 3 rows = 688px
     round dials     407px
   The decorated header panel is built for a full-width section; at column
   width it is mostly ornament. Everything here is spacing and ornament -
   no type is shrunk and no contrast touched, both were just fixed. */
@media (min-width: 1100px) {
    /* Header: keep the title, drop the tall decorated frame around it. */
    .forge-page .forge-duo .forge-section-header {
        padding: 0.5rem 0.9rem;
        min-height: 0;
    }
    .forge-page .forge-duo .forge-section-header .bracket,
    .forge-page .forge-duo .forge-section-header .scan-lines,
    .forge-page .forge-duo .forge-section-header .bloom { display: none; }
    .forge-page .forge-duo .forge-section-header .title { font-size: 1.25rem; }
    .forge-page .forge-duo .forge-section-sub {
        margin-top: 0.3rem;
        font-size: 0.9375rem;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .forge-page .forge-duo .forge-section-head { margin-bottom: 0.85rem; }

    /* Include cards: same content, less air. */
    .forge-page .forge-duo .forge-include-card { padding: 0.85rem; }
    .forge-page .forge-duo .forge-include-body {
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .forge-page .forge-duo .forge-perks-banner { padding: 0.75rem 0.9rem; }

    /* Slider cards: the corner brackets cost height they do not earn here. */
    .forge-page .forge-duo .forge-slider-card .bracket { display: none; }
    .forge-page .forge-duo .forge-slider-out { margin-top: 0.35rem; font-size: 1.125rem; }
    .forge-page .forge-duo .forge-board-foot { margin-top: 0.75rem; }

    /* Round dials: the ring graphic is the whole 407px. */
    .forge-page .forge-duo .forge-dial { padding: 0.85rem; }
    .forge-page .forge-duo .forge-dial-ring,
    .forge-page .forge-duo .forge-dial-face { width: 4.5rem; height: 4.5rem; }
    .forge-page .forge-duo .forge-dial-desc {
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .forge-page .forge-duo .forge-trophy-banner { padding: 0.7rem 0.9rem; }
}

/* ─── DUO COMPACTION ROUND 2 ──────────────────────────────────────────────
   After round 1 the block was 1,268px against a 900px viewport. Remaining
   measured costs: section head 142 x3, include card 182 x3 rows, slider card
   122 x3 rows, dial 234. Same rule as before - spacing and ornament only. */
@media (min-width: 1100px) {
    .forge-page .forge-duo .forge-section-sub {
        font-size: 0.875rem;
        -webkit-line-clamp: 1;
        opacity: 0.92;
    }
    .forge-page .forge-duo .forge-section-head { margin-bottom: 0.6rem; }
    .forge-page .forge-duo .forge-section-header { padding: 0.35rem 0.8rem; }
    .forge-page .forge-duo .forge-section-header .title { font-size: 1.125rem; }

    .forge-page .forge-duo .forge-include-card { padding: 0.7rem; }
    .forge-page .forge-duo .forge-include-body { -webkit-line-clamp: 2; font-size: 0.875rem; }
    .forge-page .forge-duo .forge-include-grid { gap: 0.6rem; }
    .forge-page .forge-duo .forge-perks-banner { padding: 0.6rem 0.8rem; }

    .forge-page .forge-duo .forge-slider-card { padding: 0.6rem 0.7rem; }
    .forge-page .forge-duo .forge-slider-grid { gap: 0.6rem; }
    .forge-page .forge-duo .forge-slider-desc { -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .forge-page .forge-duo .forge-board { padding: 0.85rem; }

    .forge-page .forge-duo .forge-dial-ring,
    .forge-page .forge-duo .forge-dial-face { width: 3.25rem; height: 3.25rem; }
    .forge-page .forge-duo .forge-dial { padding: 0.7rem; }
    .forge-page .forge-duo .forge-dial-desc { -webkit-line-clamp: 2; }
    .forge-page .forge-duo .forge-dial-grid { gap: 0.6rem; }
    .forge-page .forge-duo .forge-trophy-banner { padding: 0.55rem 0.8rem; margin-top: 0.6rem; }
}

/* ─── DUO FINAL TRIM ──────────────────────────────────────────────────────
   Last 172px. The board drops from 6 sliders to 4 (a whole row) and names the
   other five in the footnote instead - owner sanctioned. Plus the footnote and
   the timeline header give back a little. */
@media (min-width: 1100px) {
    .forge-page .forge-duo .forge-board-foot { margin-top: 0.55rem; line-height: 1.45; }
    .forge-page .forge-duo .forge-board-foot .more { margin-bottom: 0.15rem; }
    .forge-page .forge-duo > :nth-child(3) .forge-section-head { margin-bottom: 0.45rem; }
    .forge-page .forge-duo > :nth-child(3) .forge-section-sub { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FORGE SECTION PLATES 2026-08-20

   Every section sat directly on the fixed background image, so the artwork read
   straight through the copy. Same treatment the landing uses: a soft radial
   darkening behind each section, eased to nothing before the top and bottom
   edges so neighbouring plates blend instead of meeting at a visible seam.
   Ported from .section-band::before in landing.css; the alphas are exposed as
   --band-a1/a2/a3 there and kept here so one section can sit deeper than
   another without a second implementation.

   z-index: -1 puts it behind the content but still inside the section, and the
   sections already establish a stacking context, so it cannot slide under the
   page background.
   ──────────────────────────────────────────────────────────────────────────── */
.forge-page .forge-section,
.forge-page .forge-duo { position: relative; isolation: isolate; }

.forge-page .forge-section::before,
.forge-page .forge-duo::before {
    content: '';
    position: absolute;
    /* bleeds past the section so adjacent plates overlap rather than butt */
    /* See PLATE BLEED FIX at the foot of this file for why these values. */
    inset: -5rem -100%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(95% 68% at var(--band-focus, 50%) 44%,
            rgba(30, 22, 10, var(--band-a1, 0.52)) 0%,
            rgba(13, 10, 5, var(--band-a2, 0.72)) 46%,
            rgba(6, 4, 2, var(--band-a3, 0.84)) 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 var(--band-in, 12%), #000 var(--band-out, 88%), transparent 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0%, #000 var(--band-in, 12%), #000 var(--band-out, 88%), transparent 100%);
}

/* The duo already carries its own plate; its three child sections must not
   stack three more on top of it. */
.forge-page .forge-duo .forge-section::before { display: none; }

/* The hero is a full-viewport panel with its own treatment - leave it. */
.forge-page .forge-hero::before { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   DUO PANEL LANGUAGE 2026-08-20

   Owner: "make it symmetric, the Round Timeline part is ugly, the designs do
   not look good". What was actually wrong, measured:
     - three DIFFERENT header treatments: centred decorated plates of 273px,
       320px and 257px inside columns of equal width, so each panel announced
       itself differently and none lined up with anything
     - the subtitles were clamped to one line and broke mid-sentence on an
       ellipsis - my own doing in the compaction pass, and it read as broken
     - the three dials each carried their own accent (gold / violet / red),
       which is three visual systems in one 565px column
     - the columns ended at different heights, so the block had a ragged foot

   One language now: a left-aligned title with a rule running to the edge of
   its column, identical on all three panels; one card treatment; flush feet.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {

    /* ── Headers: one rule, one alignment, full column width ───────────── */
    .forge-page .forge-duo .forge-section-head {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin-bottom: 0.8rem;
        text-align: right;
    }
    .forge-page .forge-duo .forge-section-header {
        flex: 0 0 auto;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        text-align: right;
    }
    .forge-page .forge-duo .forge-section-header .bg-panel,
    .forge-page .forge-duo .forge-section-header .top-shimmer { display: none; }
    .forge-page .forge-duo .forge-section-header .title {
        font-size: 1.0625rem;
        letter-spacing: 0.16em;
        white-space: nowrap;
    }
    /* the rule that finishes the line, same idea as the Server Details heads */
    .forge-page .forge-duo .forge-section-head::after {
        content: '';
        flex: 1 1 auto;
        height: 1px;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--sec-color, #D4AF37) 34%, transparent),
            rgba(212, 175, 55, 0.05));
    }
    /* clamped-to-one-line subtitles broke mid-sentence; the titles carry it */
    .forge-page .forge-duo .forge-section-sub { display: none; }

    /* The dial-card overrides that lived here went with the dial markup when
       the compact strip won the comparison. */
    /* ── Flush feet ────────────────────────────────────────────────────── */
    .forge-page .forge-duo { align-items: stretch; }
    .forge-page .forge-duo > .forge-section { display: flex; flex-direction: column; }
    .forge-page .forge-duo .forge-section-inner { display: flex; flex-direction: column; flex: 1 1 auto; }
    /* the feature grid takes the slack so both columns end level */
    .forge-page .forge-duo .forge-include-grid { flex: 1 1 auto; align-content: stretch; }
    .forge-page .forge-duo .forge-board { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FORGE CARD REDESIGN 2026-08-20

   Owner: the framed corners look wrong and the icons do not sit with the box
   or the text.

   1. THE CORNERS. 48 .bracket spans draw a notch at each corner of every card.
      That is the same motif already removed site-wide during the Hall of Fame
      rebuild (manual panel, CTA, /halloffame, and Server Details this week).
      Forge was the last place still drawing it. Gone.

   2. THE ICONS. The card stacked icon / title / body as three block rows, so a
      6px glyph sat alone on its own line above the heading and the body text
      started a third of the way down. The icon is now a chip in its own column
      beside the text it labels, which is what makes it read as belonging to
      the card rather than floating in it.

   3. THE VOIDS. Stretching the cards to flush the column feet left a block of
      dead space under short copy. Content centres in the card now, so the
      slack splits evenly and reads as breathing room instead of a gap.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── 1. The notched corners, everywhere on this page ────────────────────── */
.forge-page .bracket { display: none !important; }

/* ─── 2. Icon beside its text, not above it ──────────────────────────────── */
.forge-page .forge-include-card {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
    align-content: center;
    border-radius: 0.85rem;
    border: 1px solid rgba(212, 175, 55, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.forge-page .forge-include-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border-radius: 0.6rem;
    background: rgba(212, 175, 55, 0.09);
    border: 1px solid rgba(212, 175, 55, 0.16);
    color: #E3C766;
}
.forge-page .forge-include-title { grid-column: 2; grid-row: 1; margin: 0; line-height: 1.25; }
.forge-page .forge-include-body  { grid-column: 2; grid-row: 2; margin: 0; }

/* a quiet lift instead of a drawn frame */
.forge-page .forge-include-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.26);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ─── 3. Same chip treatment for the slider and dial icons ───────────────── */
.forge-page .forge-slider-icon,
.forge-page .forge-dial-icon {
    border-radius: 0.5rem;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.14);
}
.forge-page .forge-slider-card {
    border-radius: 0.7rem;
    border: 1px solid rgba(212, 175, 55, 0.12);
}

/* ─── FEET WITHOUT VOIDS ──────────────────────────────────────────────────
   Stretching the feature grid flushed the column feet but inflated every card
   to 210px around 80px of content - 130px of dead space each, which is the
   opposite of the compaction this page needed. The cards size to their content
   again; the "Also included" banner takes the slack and sits on the foot, so
   the columns still end level and nothing is padded to get there. */
@media (min-width: 1100px) {
    .forge-page .forge-duo .forge-include-grid {
        flex: 0 0 auto;
        align-content: start;
    }
    .forge-page .forge-duo .forge-include-card { align-content: start; }
        /* The grid takes the slack (flex:1 + space-between), so margin-top:auto had
       nothing left to push against and the last feature row sat flush on the
       banner. A real margin instead. */
    .forge-page .forge-duo .forge-perks-banner { margin-top: auto; padding-top: 0; }
    /* the board does the same on the right so both feet land together */
    .forge-page .forge-duo .forge-board { flex: 0 0 auto; }
    .forge-page .forge-duo .forge-board-foot { margin-top: auto; }
}

/* ─── Round Timeline, compact variant (?tl=compact) ───────────────────────
   A track with three numbered nodes and their labels beneath - the same
   construction as the Server Details timeline, so it is a language already on
   the site rather than a fourth one. Roughly half the height of the dial
   cards, and it stops competing with the control board above it.
   ⚠ Temporary: delete this block with the loser of the comparison. */
.forge-page .forge-tlstrip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding-top: 0.35rem;
}
/* the track sits behind the nodes and stops short of both ends so it reads as
   a span between steps, not a rule across the panel */
.forge-page .forge-tlstrip-track {
    position: absolute;
    right: 16%; left: 16%;
    top: 1.15rem;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(212,175,55,0.05), rgba(212,175,55,0.30) 20%,
        rgba(212,175,55,0.30) 80%, rgba(212,175,55,0.05));
}
.forge-page .forge-tlstrip-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.forge-page .forge-tlstrip-step .node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #120D06;
    background: linear-gradient(140deg, var(--dial-color, #D4AF37) 0%,
        color-mix(in srgb, var(--dial-color, #D4AF37) 62%, #000) 100%);
    box-shadow: 0 0 10px rgba(var(--dial-rgb, 212,175,55), 0.35);
}
.forge-page .forge-tlstrip-step .label {
    margin: 0.45rem 0 0.15rem;
    font-family: 'Cinzel', serif;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #E8D9B0;
    line-height: 1.25;
}
.forge-page .forge-tlstrip-step .desc {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(206, 188, 152, 0.95);
    /* no clamp: three equal columns size to the longest description, and
       clipping a sentence mid-word is what made the old captions look broken */
}

/* ─── LEFT COLUMN AS A LIST ───────────────────────────────────────────────
   Two columns of feature cards inside one half of the duo gave each card about
   250px. That is not enough for a title plus a body: titles wrapped to two
   lines and every body clipped mid-word ("Complete isolation for securit...",
   "Your world stay..."). Clipped copy is what made this side-by-side look
   broken rather than compact.

   One column at full half-width gives each row ~500px: the title fits on one
   line, the body fits without a clamp, and the rows share the column rhythm
   with the board opposite instead of fighting it. The leftover height is
   distributed BETWEEN the rows, so the column fills evenly and no card is
   padded out to fake it.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    /* ⚠ NOT align-content: space-between. Measured: it placed the last row at
       1572-1632 while the grid box ended at 1608, so the final card hung 24px
       outside its own container and overlapped the banner below it. A fixed
       row gap plus margin-top:auto on the banner gives the same even rhythm
       and cannot overlap, whatever the copy does. */
    .forge-page .forge-duo .forge-include-grid {
        grid-template-columns: 1fr;
        row-gap: 2.1rem;
        flex: 0 0 auto;
        align-content: start;
    }
    .forge-page .forge-duo .forge-include-card {
        grid-template-columns: 2.25rem 1fr;
        column-gap: 0.8rem;
        row-gap: 0.1rem;
        padding: 0.7rem 0.85rem;
    }
    .forge-page .forge-duo .forge-include-icon { width: 2.25rem; height: 2.25rem; }
    .forge-page .forge-duo .forge-include-title { font-size: 1rem; }
    /* the clamp was the whole problem - at this width the copy simply fits */
    .forge-page .forge-duo .forge-include-body {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* ─── PLATE BLEED FIX ─────────────────────────────────────────────────────
   Two faults, both measured:

   1. NOT FULL WIDTH. .forge-duo is capped at 82rem and centred, so its plate
      was 1181px inside a 1280px viewport while every other plate was the full
      1280 - a hard vertical seam down both sides of that block. The plate now
      bleeds -100% horizontally (three times the element width, centred), which
      covers any viewport without touching vw. ⚠ NOT 100vw: vw includes the
      scrollbar, and that is exactly the arithmetic that caused the mobile
      side-scroll on the landing page.

   2. THE FADE DIED BETWEEN SECTIONS. Measured 101px of section padding between
      every pair of plated blocks, against a bleed of only ~47px each (-6% of a
      varying section height, which is also why one bled 36px and another 48).
      94 < 101, so the plates never met and a bright band of raw background
      showed through every seam. A FIXED 5rem bleed gives 144px of overlap
      against a 101px gap, and the mask keeps the join soft.

   overflow-x: clip on the page so a plate three times the viewport width can
   never create a horizontal scrollbar. clip, not hidden: hidden would make the
   page a scroll container and break any sticky descendant.
   ──────────────────────────────────────────────────────────────────────────── */
.forge-page { overflow-x: clip; }

/* More of the plate solid, less of it in the fade, so the overlap actually
   reads as continuous darkness rather than two ghosts meeting. */
.forge-page .forge-section::before,
.forge-page .forge-duo::before {
    --band-in: 7%;
    --band-out: 93%;
}

/* ════════════════════════════════════════════════════════════════════════════
   THE TRIO: provided / yours / not allowed

   Your Side / Our Side (793px, two panels) and Code of Conduct (611px, one
   panel plus its own header, wax seal and divider band) answered one question
   between them. They are now three parallel columns under a single header.

   The three panels sit in DIFFERENT parents in the markup - two inside
   .forge-split-grid, one inside .forge-conduct-wrap - so the wrappers are
   flattened with display:contents and the panels become direct grid items.
   That is what makes three equal columns possible without restructuring the
   PHP. ⚠ display:contents removes the box entirely, so those wrappers must not
   be carrying background, padding or borders - checked, they are not.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    .forge-page .forge-trio {
        display: grid;
        /* col 1 is wider: it carries 8 items against 3 in each of the others,
           and at an equal third it was 371px - too narrow to run them in two
           sub-columns without clipping, which is the fault we already hit on the
           feature list. See TRIO BALANCE at the foot of this file. */
        grid-template-columns: 1.55fr 1fr 1fr;
        gap: 0.9rem;
        align-items: stretch;
        max-width: 82rem;
        margin-inline: auto;
        padding: 3.25rem 1.5rem;
    }

    /* flatten every wrapper between .forge-trio and the three panels */
    .forge-page .forge-trio > .forge-section,
    .forge-page .forge-trio .forge-section-inner,
    .forge-page .forge-trio .forge-split-grid,
    .forge-page .forge-trio .forge-conduct-wrap { display: contents; }

    /* one header for the three, spanning the full row */
    .forge-page .forge-trio .forge-section-head {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin: 0 0 0.2rem;
    }
    /* the second section keeps its heading in the markup for no-JS / narrow
       layouts, but in the trio the red panel titles itself */
    .forge-page .forge-trio > .forge-section:nth-of-type(2) .forge-section-head { display: none; }
    .forge-page .forge-trio .forge-section-header {
        flex: 0 0 auto; padding: 0; background: none; border: 0; box-shadow: none;
    }
    .forge-page .forge-trio .forge-section-header .bg-panel,
    .forge-page .forge-trio .forge-section-header .top-shimmer,
    .forge-page .forge-trio .forge-section-header .bloom,
    .forge-page .forge-trio .forge-section-header .scan-lines { display: none; }
    .forge-page .forge-trio .forge-section-header .title {
        font-size: 1.0625rem; letter-spacing: 0.16em; white-space: nowrap;
    }
    .forge-page .forge-trio .forge-section-head::after {
        content: ''; flex: 1 1 auto; height: 1px;
        background: linear-gradient(90deg, rgba(212,175,55,0.30), rgba(212,175,55,0.05));
    }
    .forge-page .forge-trio .forge-section-sub { display: none; }

    /* the floating wax seal belonged to a full-width chapter, not a column */
    .forge-page .forge-trio .forge-conduct-seal,
    .forge-page .forge-trio .forge-conduct-divider { display: none; }

    /* one card language across all three */
    .forge-page .forge-trio .forge-side,
    .forge-page .forge-trio .forge-conduct-card {
        margin: 0;
        padding: 1rem;
        border-radius: 0.85rem;
        height: 100%;
    }
    /* the provided column lists in one column like the features list opposite */
    .forge-page .forge-trio .forge-side-grid { grid-template-columns: 1fr; gap: 0.45rem; }
}

/* ─── TRIO BALANCE ────────────────────────────────────────────────────────
   Measured: panel 1 held 589px of content across 8 items, panels 2 and 3 held
   221px and 196px across 3 each. Equal-height columns therefore stretched to
   760px and left 495px and 545px of dead space in the two short ones.

   Two changes: panel 1 runs its items in two sub-columns (it now has the width
   for it), which halves its content height; and every item grid uses
   grid-auto-rows: 1fr so the rows share the panel height evenly and the items
   centre inside them. The slack ends up distributed between rows instead of
   pooling at the bottom, and unlike align-content: space-between it cannot
   place a row outside its own container. */
@media (min-width: 1100px) {
    .forge-page .forge-trio .forge-side-blue .forge-side-grid {
        grid-template-columns: 1fr 1fr;
    }
    .forge-page .forge-trio .forge-side-grid,
    .forge-page .forge-trio .forge-conduct-items {
        grid-auto-rows: 1fr;
        align-content: stretch;
        /* ⚠ was height:100% - a percentage against a flex container whose
           content box also holds the head, so the grid ran 6px past the
           panel's padding and only overflow:hidden kept it in. Take the slack
           as a flex item instead. */
        flex: 1 1 auto;
        min-height: 0;
    }
    .forge-page .forge-trio .forge-side-item,
    .forge-page .forge-trio .forge-conduct-item {
        display: flex;
        align-items: center;
    }
    /* the panel becomes a column so its item grid can take the slack */
    .forge-page .forge-trio .forge-side,
    .forge-page .forge-trio .forge-conduct-card,
    .forge-page .forge-trio .forge-conduct-block { display: flex; flex-direction: column; }
    .forge-page .forge-trio .forge-conduct-block { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TRIO POLISH + THE PLATE THAT WAS OFF SCREEN   2026-08-20

   Owner, on the merged YOUR SIDE / OUR SIDE block: it does not look good, it
   should be more aesthetic and more orderly, the headings are barely visible -
   they are too small, and this section and the one after it need the black
   fade behind them like the first block has, copied from the landing page.

   All four faults, measured at 1920x1080:

   1. NO PLATE ON THE TRIO. .forge-trio > .forge-section is display:contents
      (that is what lets the three panels become grid items), and a box that
      generates no box generates no ::before either - so the whole block sat on
      raw artwork. The plate moves to .forge-trio itself.

   2. NO PLATE ON ANY PLAIN SECTION EITHER. The original .forge-section::before
      (a small blurred spotlight) is still in the cascade, and the plate rule
      never reset its width/height/transform/filter. An absolutely positioned
      box given left AND right AND width is over-constrained, so `right` is
      dropped: measured on .forge-final-cta, the plate was 1152px wide at
      left:-1920px and then translated another -576px - entirely off screen.
      That is why the fade "disappears between sections". Reset all four.

   3. INVERTED HIERARCHY. The section heading rendered at 15.3px while the
      panel headings under it rendered at 18px - the senior title was the
      smallest type in its own block, which is exactly what "barely visible"
      means. Section headings go to 1.5rem/21.6px, above the 18px panels.

   4. THREE DIFFERENT HEADS. Measured 45px / 67px / 19px tall, so the three
      item grids started at three different heights and the block read as
      ragged. One head shape (see forge.php), one min-height, one baseline.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── 1 + 2. The plate ───────────────────────────────────────────────────── */
.forge-page .forge-trio { position: relative; isolation: isolate; }

.forge-page .forge-section::before,
.forge-page .forge-duo::before,
.forge-page .forge-trio::before {
    /* ⚠ inherited from the old spotlight rule and never reset - see fault 2 */
    width: auto;
    height: auto;
    transform: none;
    filter: none;
}

/* The trio carries the plate for its children, the same way the duo does. */
.forge-page .forge-trio::before {
    content: '';
    position: absolute;
    inset: -5rem -100%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(95% 68% at var(--band-focus, 50%) 44%,
            rgba(30, 22, 10, var(--band-a1, 0.52)) 0%,
            rgba(13, 10, 5, var(--band-a2, 0.72)) 46%,
            rgba(6, 4, 2, var(--band-a3, 0.84)) 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 var(--band-in, 7%), #000 var(--band-out, 93%), transparent 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0%, #000 var(--band-in, 7%), #000 var(--band-out, 93%), transparent 100%);
}
/* ⚠ an abspos ::before is NOT a grid item, so this cannot add a fourth column */
.forge-page .forge-trio .forge-section::before { display: none; }

/* ─── The EXPLORE jump ───────────────────────────────────────────────────
   #features starts at the exact foot of the full-viewport hero, so the anchor
   put its own heading underneath the 52px fixed nav and the jump read as
   overshooting. Clear the nav plus a little air. */
.forge-page #features { scroll-margin-top: 6.5rem; }

/* ─── 3. Hierarchy: the section heading outranks the panels again ────────── */
@media (min-width: 1100px) {
    .forge-page .forge-duo .forge-section-header .title,
    .forge-page .forge-trio .forge-section-header .title {
        font-size: 1.5rem;
        letter-spacing: 0.14em;
    }
    /* the rule finishing the line was almost invisible over the artwork */
    .forge-page .forge-duo .forge-section-head::after,
    .forge-page .forge-trio .forge-section-head::after {
        height: 1px;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--sec-color, #D4AF37) 48%, transparent),
            rgba(212, 175, 55, 0.04));
    }
    .forge-page .forge-trio .forge-section-head { margin-bottom: 0.55rem; }
}

/* The red column's chip and name carry their own accent. ⚠ OUTSIDE the media
   query: .forge-side-icon and .forge-side-title get their colour from
   .forge-side-blue / .forge-side-gold, and the conduct card is neither - below
   1100px the chip would render with no fill and the name with inherited text
   colour. */
.forge-page .forge-conduct-head .forge-side-icon {
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
    color: #F87171;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.55));
}
.forge-page .forge-conduct-head .forge-side-title { color: #F87171; }

/* ─── 4. One head shape across the three columns ─────────────────────────── */
/* The conduct column now titles itself (forge.php), so its section header is
   redundant at every width, not just inside the trio grid. */
.forge-page .forge-trio > .forge-section:nth-of-type(2) .forge-section-head { display: none; }

@media (min-width: 1100px) {
    .forge-page .forge-trio {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 1.05rem;
    }
    .forge-page .forge-trio .forge-side,
    .forge-page .forge-trio .forge-conduct-card { padding: 1.15rem; }

    /* one baseline for all three item grids */
    .forge-page .forge-trio .forge-side-head {
        min-height: 4.75rem;
        align-items: center;
        margin-bottom: 0.9rem;
    }
    .forge-page .forge-trio .forge-side-title {
        text-wrap: balance;
        line-height: 1.2;
    }

    /* the consequence line reads as a lead, then the list starts */
    .forge-page .forge-trio .forge-conduct-intro {
        margin: 0 0 0.9rem;
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    /* ⚠ .forge-conduct-items is display:flex in its base rule, so the
       grid-auto-rows:1fr written for it above did nothing and its three items
       stopped 139px short of the panel foot - the dead space in the owner's
       screenshot. Make it a real grid and the rows share the height like the
       other two columns. */
    .forge-page .forge-trio .forge-conduct-items {
        display: grid;
        gap: 0.55rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   ONE SCRIM, NO SEAMS   2026-08-20

   Owner: "look at the gaps in the fade - fix it." Screenshots showed a lighter
   band across the full width at every join between two darkened blocks.

   Per-band plates cannot be made seamless, and widening the bleed does not
   help - it only changes which kind of seam you get. Translucent layers
   COMPOSITE, they do not add:

     two plates at 0.84 overlapping   ->  1-(1-0.84)^2 = 0.97   (darker band)
     two mask fades meeting half way  ->  1-(1-0.42)^2 = 0.66   (lighter band)

   Measured before this change: 101px of section padding between blocks against
   a 72px bleed each side, so the plates met with 43px of overlap while their
   own mask fades were 60px and 70px - the fades were still mid-flight when
   they met. That is the light band in the screenshots. Bleeding further would
   have put both plates at full strength in the overlap and produced a dark
   band in the same place.

   So: one layer for the whole page. Everything below the hero sits in
   .forge-body (forge.php) and that carries a single continuous darkening. One
   layer has no joins, so no seam of either kind is possible.

   The hero stays outside it and keeps its own treatment.
   ──────────────────────────────────────────────────────────────────────────── */

/* the per-band plates this replaces */
.forge-page .forge-section::before,
.forge-page .forge-duo::before,
.forge-page .forge-trio::before { display: none; }

.forge-page .forge-body { position: relative; isolation: isolate; }

.forge-page .forge-body::before {
    content: '';
    position: absolute;
    /* ⚠ -100% not 100vw: three times the element width, centred, covers any
       viewport without counting the scrollbar - the arithmetic that caused the
       landing page's mobile side-scroll. .forge-page is overflow-x: clip. */
    /* ⚠ bleeds 6rem past both ends on purpose: the fade-in then happens inside
       the hero's own dark foot and the fade-out under the footer's own
       gradient, so neither join lands on bare artwork. */
    inset: -6rem -100% -6rem;
    z-index: -1;
    pointer-events: none;
    /* Very wide ellipse: over a 2600px column the vertical falloff is spread
       across more than a thousand pixels and reads as atmosphere, while the
       horizontal falloff still keeps the middle of the artwork a little
       brighter than the edges - the same spotlight the landing bands have. */
    background:
        radial-gradient(125% 105% at 50% 50%,
            rgba(30, 22, 10, var(--scrim-a1, 0.60)) 0%,
            rgba(13, 10, 5, var(--scrim-a2, 0.78)) 55%,
            rgba(6, 4, 2, var(--scrim-a3, 0.87)) 100%);
    /* soft join with the hero above and the page foot below */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0, #000 6rem, #000 calc(100% - 8rem), transparent 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0, #000 6rem, #000 calc(100% - 8rem), transparent 100%);
}

/* ─── The feet, after the two banners came out ────────────────────────────
   The "Also included" strip was the element carrying margin-top:auto, so it
   was what pushed the left column's foot down to meet the right one. With it
   gone the feature grid was flex:0 0 auto again and the column ended 92px
   short of its neighbour.

   The grid takes the slack itself now. Measured, that is 92px over three rows,
   so the cards go from 60px to about 90px - breathing room, not the 210px
   around 80px of content that made stretching wrong the first time (the right
   column was 98px taller then, and carried the dial cards). */
@media (min-width: 1100px) {
    .forge-page .forge-duo .forge-include-grid {
        flex: 1 1 auto;
        align-content: stretch;
    }
    .forge-page .forge-duo .forge-include-card { align-content: center; }
}