/* ==========================================================================
   AstrophotoMarket.com homepage (redesign 2026-10, WP-C)
   Builds on public/site/css/apm.css (tokens + components). px units only
   (Metronic sets html{font-size:13px}). Loaded after apm.css.
   ========================================================================== */

.home {
    display: block;
    flex-shrink: 0; /* public <body> is a flex column */
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.home-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin-top: calc(-1 * var(--apm-header-h));
    padding: calc(var(--apm-header-h) + 28px) 0 96px;
    background: var(--apm-bg-deep);
    color: var(--apm-text-secondary);
}

/* Below 992px: text first, right under the header; the photo is a compact band after the
   buttons and trust row (owner request 2026-10-02). No viewport-height sizing here. */
.home-hero__inner {
    position: relative;
    width: 100%;
    order: 1;
}

.home-hero__photo {
    position: relative;
    order: 2;
    z-index: 0;
    height: 180px;
    margin: 28px var(--apm-gutter) 0;
    overflow: hidden;
    border: 1px solid var(--apm-border-light);
    border-radius: var(--apm-radius-lg);
    background: var(--apm-bg-deep);
    box-shadow: 0 24px 50px -30px rgba(255, 127, 0, .35);
}

.home-hero__photo picture,
.home-hero__img {
    display: block;
    width: 100%;
    height: 100%;
}

.home-hero__img {
    object-fit: cover;
    object-position: 44% 16%;
}

/* Phones and tablets: a quiet backdrop behind the text (no photo behind it). */
.home-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 80% 45% at 85% 0%, rgba(64, 110, 255, .14) 0%, transparent 100%),
        radial-gradient(ellipse 70% 40% at 0% 60%, rgba(255, 127, 0, .08) 0%, transparent 100%),
        linear-gradient(180deg, var(--apm-bg-deep) 0%, var(--apm-bg-deep) 70%, var(--apm-bg) 100%);
}

.home-hero__glow {
    z-index: -2; /* under the shade, so the bottom fade covers it too */
    top: auto;
    bottom: -280px;
    left: -220px;
    opacity: .7;
}

.home-hero__content {
    max-width: 660px;
}

.home-hero__eyebrow {
    margin-bottom: 18px;
    background: rgba(7, 10, 18, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.home-hero__title {
    margin: 0 0 18px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.home-hero__title .apm-hl {
    text-shadow: none;
}

.home-hero__lead {
    max-width: 590px;
    margin: 0 0 26px;
    color: #D4DAE8;
}

.home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: var(--apm-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.home-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-hero__trust .apm-icon {
    color: var(--apm-free);
    flex-shrink: 0;
}

/* Credit chip: sits on the bottom edge of the photo band below 992px. */
.home-hero__credit {
    position: relative;
    order: 3;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    margin: -42px calc(var(--apm-gutter) + 10px) 0;
}

@media (max-width: 479.98px) {
    .home-hero__ctas .apm-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .home-hero__trust {
        font-size: 13px;
        gap: 8px 16px;
    }

    .home-hero__credit .apm-credit {
        font-size: 11px;
    }
}

@media (max-width: 767.98px) {
    .home-hero__lead {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .home-hero {
        padding-top: calc(var(--apm-header-h) + 40px);
        padding-bottom: 124px;
    }

    .home-hero__photo {
        margin-top: 36px;
    }
}

/* Desktop (>= 992px): full-bleed photo on the right, text on the left. */
@media (min-width: 992px) {
    .home-hero {
        flex-direction: row;
        align-items: center;
        min-height: max(640px, 86vh);
        padding: calc(var(--apm-header-h) + 72px) 0 150px;
    }

    .home-hero__photo {
        position: absolute;
        inset: 0;
        left: 18%;
        z-index: -3;
        height: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    }

    .home-hero__img {
        object-position: 40% 30%;
    }

    /* Protect the text column only; the bottom fades into the page. */
    .home-hero__shade {
        background:
            linear-gradient(180deg,
                rgba(7, 10, 18, .5) 0%,
                rgba(7, 10, 18, 0) 20%,
                rgba(7, 10, 18, 0) 66%,
                var(--apm-bg) 100%),
            linear-gradient(90deg,
                var(--apm-bg-deep) 0%,
                rgba(4, 6, 12, .9) 30%,
                rgba(4, 6, 12, .55) 46%,
                rgba(4, 6, 12, .12) 62%,
                rgba(4, 6, 12, 0) 75%);
    }

    /* Faint dot grid on the dark text side keeps the foundation rhythm. */
    .home-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--apm-dots);
        -webkit-mask-image: radial-gradient(ellipse 45% 70% at 12% 50%, #000 0%, transparent 100%);
        mask-image: radial-gradient(ellipse 45% 70% at 12% 50%, #000 0%, transparent 100%);
        pointer-events: none;
    }

    .home-hero__trust {
        margin-top: 26px;
    }

    .home-hero__credit {
        position: absolute;
        top: auto;
        bottom: 116px;
        right: var(--apm-gutter);
        left: var(--apm-gutter);
        margin: 0;
    }
}

@media (min-width: 1200px) {
    .home-hero__photo {
        left: 30%;
    }

    .home-hero__img {
        object-position: 50% 32%;
    }

    .home-hero__trust {
        font-size: 15px;
    }
}

/* Stats strip overlapping the hero bottom edge */
.home-stats {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin-top: -56px;
}

.home-stats__panel {
    margin: 0;
}

.home-stats__panel {
    list-style: none;
}

.home-stat {
    margin: 0;
}

.home-stats .apm-stat__value,
.home-stats .apm-stat__label {
    display: block;
    margin: 0;
}

.home-stats .apm-stat__label {
    margin-top: 6px;
    font-weight: 500;
}

/* Linked stat cells: the whole cell is the link; restrained hover/focus. */
.home-stat__link {
    display: block;
    margin: -6px -10px -6px -8px;
    padding: 6px 10px 6px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none !important;
    transition: background-color .25s var(--apm-ease);
}

.home-stat__link .apm-stat__value {
    transition: color .25s var(--apm-ease);
}

.home-stat__arrow {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: -2px;
    color: var(--apm-accent-light);
    opacity: .55;
    transition: opacity .25s var(--apm-ease), transform .25s var(--apm-ease);
}

.home-stat__link--free .home-stat__arrow {
    color: var(--apm-free-light);
}

.home-stat__link:hover,
.home-stat__link:focus-visible {
    background: rgba(255, 127, 0, .06);
}

.home-stat__link--free:hover,
.home-stat__link--free:focus-visible {
    background: rgba(34, 197, 94, .07);
}

.home-stat__link:hover .apm-stat__value,
.home-stat__link:focus-visible .apm-stat__value {
    color: var(--apm-accent-light);
}

.home-stat__link--free:hover .apm-stat__value,
.home-stat__link--free:focus-visible .apm-stat__value {
    color: var(--apm-free-light);
}

.home-stat__link:hover .home-stat__arrow,
.home-stat__link:focus-visible .home-stat__arrow {
    opacity: 1;
    transform: translateX(3px);
}

.home-stat__link:focus-visible {
    outline: 2px solid var(--apm-accent-light);
    outline-offset: 2px;
}

/* Phones: long labels wrap, so the arrow sits in the cell's top-right corner instead. */
@media (max-width: 767.98px) {
    .home-stat__link {
        position: relative;
        padding-right: 22px;
    }

    .home-stat__arrow {
        position: absolute;
        top: 12px;
        right: 4px;
        margin: 0;
    }
}

@media (min-width: 768px) {
    .home-stats {
        margin-top: -84px;
    }

    .home-stats .apm-stat__value {
        font-size: 38px;
    }
}

@media (min-width: 1200px) {
    .home-stats .apm-stat__value {
        font-size: 44px;
    }
}

.home-error {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin-top: 32px;
}

/* --------------------------------------------------------------------------
   2. Top-10 rails
   -------------------------------------------------------------------------- */

.home-ranked__list {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
}

.home-ranked__item {
    margin: 0;
}

/* Keyboard focus stays visible inside the scroll rail (no clipping). */
.home-ranked__item .apm-card:focus-visible {
    outline-offset: -2px;
}

/* Paid rail: subtle orange wash at the top of the section. */
.home-ranked--paid {
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 127, 0, .07) 0%, transparent 100%),
        var(--apm-bg);
}

/* Free rail: green identity (hairline, wash, eyebrow). */
.home-ranked--free {
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(34, 197, 94, .08) 0%, transparent 100%),
        var(--apm-bg-subtle);
}

.home-ranked--free::before {
    background: linear-gradient(90deg, transparent 0%, rgba(34, 197, 94, .5) 50%, transparent 100%);
}

.home .home-ranked--free .apm-heading__link,
.home .home-ranked--free .apm-heading__link:hover {
    color: var(--apm-free-light);
}

/* --------------------------------------------------------------------------
   3. How it works (three-way tabs; home.js adds .is-enhanced)
   Without JS the three panels are simply stacked and the tab row stays hidden.
   -------------------------------------------------------------------------- */

.home-how {
    --how-interval: 7000ms;
    position: relative;
}

.home-how__tabs {
    display: none;
}

.home-how__panels {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.home-how__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--apm-border-light);
    border-radius: var(--apm-radius-xl);
    background:
        radial-gradient(ellipse 60% 70% at 22% 45%, rgba(255, 127, 0, .07) 0%, transparent 70%),
        linear-gradient(160deg, #0F1626 0%, #0A0F1B 100%);
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9);
}

.home-how__panel--blue {
    background:
        radial-gradient(ellipse 60% 70% at 22% 45%, rgba(64, 110, 255, .1) 0%, transparent 70%),
        linear-gradient(160deg, #0F1626 0%, #0A0F1B 100%);
}

.home-how__panel--free {
    background:
        radial-gradient(ellipse 60% 70% at 22% 45%, rgba(34, 197, 94, .07) 0%, transparent 70%),
        linear-gradient(160deg, #0F1626 0%, #0A0F1B 100%);
}

/* Faint dot grid inside the stage */
.home-how__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--apm-dots);
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 25% 50%, #000 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 60% at 25% 50%, #000 0%, transparent 100%);
    pointer-events: none;
}

/* Illustration: black background removed with screen blending, edges faded with a radial mask. */
.home-how__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px 12px 0;
}

.home-how__art-glow {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 70%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 127, 0, .18) 0%, transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}

.home-how__panel--blue .home-how__art-glow {
    background: radial-gradient(circle, rgba(64, 110, 255, .22) 0%, transparent 65%);
}

.home-how__panel--free .home-how__art-glow {
    background: radial-gradient(circle, rgba(34, 197, 94, .16) 0%, transparent 65%);
}

.home-how__img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}

.home-how__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
    padding: 0 22px 26px;
}

.home-how__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--apm-accent-light);
    font-family: var(--apm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home-how__panel--blue .home-how__kicker { color: #9DB5FF; }
.home-how__panel--free .home-how__kicker { color: var(--apm-free-light); }

.home-how__kicker-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 6px;
    opacity: .9;
}

.home-how__promise {
    margin: 0;
    color: var(--apm-text);
    font-family: var(--apm-font-display);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* Numbered mini-steps with a connecting rail */
.home-how__steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.home-how__steps::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(180deg, var(--apm-accent-border) 0%, var(--apm-border-light) 100%);
}

.home-how__step {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 0;
}

.home-how__step-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--apm-accent-border);
    border-radius: 11px;
    background: #121A2C;
    color: var(--apm-accent-light);
    font-family: var(--apm-font-mono);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.home-how__panel--blue .home-how__step-num {
    border-color: rgba(64, 110, 255, .45);
    color: #9DB5FF;
}

.home-how__panel--free .home-how__step-num {
    border-color: var(--apm-free-border);
    color: var(--apm-free-light);
}

.home-how__step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 1px;
}

.home-how__step-title {
    color: var(--apm-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.home-how__step-text {
    color: var(--apm-text-secondary);
    font-size: 14.5px;
    line-height: 1.55;
}

.home-how__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.home-how__fact {
    max-width: 100%;
    height: auto;
    min-height: 26px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

.home-how__fact .apm-icon {
    flex-shrink: 0;
}

.home-how__fact .apm-icon {
    color: var(--apm-accent-light);
}

.home-how__fact--free {
    border-color: var(--apm-free-border);
    color: var(--apm-free-light);
}

.home-how__fact--free .apm-icon {
    color: var(--apm-free-light);
}

.home-how__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 479.98px) {
    .home-how__ctas,
    .home-how__ctas .apm-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 768px) {
    .home-how__body {
        padding: 0 36px 36px;
    }

    .home-how__promise {
        font-size: 28px;
    }

    .home-how__art {
        padding: 20px 20px 0;
    }

    .home-how__img {
        max-width: 560px;
    }
}

/* Desktop: illustration left, story right. */
@media (min-width: 992px) {
    .home-how__panel {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-height: 520px;
    }

    .home-how__art {
        padding: 28px 0 28px 28px;
        align-self: stretch;
    }

    .home-how__img {
        width: 118%;
        max-width: 700px;
        margin: 0 -9%;
    }

    .home-how__body {
        padding: 44px 48px 44px 8px;
    }

    .home-how__promise {
        font-size: 30px;
    }
}

@media (min-width: 1200px) {
    .home-how__promise {
        font-size: 32px;
    }

    .home-how__body {
        padding-right: 60px;
    }
}

/* ---- Enhanced (JS): tab row + panels stacked in one grid cell ---- */

.home-how.is-enhanced .home-how__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 980px;
    margin: 0 auto 22px;
    padding: 6px;
    border: 1px solid var(--apm-border-light);
    border-radius: 18px;
    background: rgba(11, 16, 28, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.home-how.is-enhanced .home-how__panels {
    display: grid;
    gap: 0;
}

.home-how.is-enhanced .home-how__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.995);
    transition: opacity .45s var(--apm-ease), transform .45s var(--apm-ease), visibility 0s linear .45s;
}

.home-how.is-enhanced .home-how__panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s var(--apm-ease) .05s, transform .5s var(--apm-ease) .05s, visibility 0s;
}

.home-how.is-enhanced .home-how__panel.is-active .home-how__img {
    animation: home-how-float 7s ease-in-out infinite alternate;
}

@keyframes home-how-float {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

/* Tabs */
.home-how__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 64px;
    padding: 10px 14px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--apm-text-secondary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .25s var(--apm-ease), border-color .25s var(--apm-ease), color .25s var(--apm-ease);
}

.home-how__tab:hover {
    background: rgba(255, 255, 255, .03);
    color: var(--apm-text);
}

.home-how__tab:focus-visible {
    outline: 2px solid var(--apm-accent-light);
    outline-offset: 2px;
}

.home-how__tab.is-active {
    border-color: var(--apm-accent-border);
    background: linear-gradient(160deg, var(--apm-surface-elevated) 0%, var(--apm-surface) 100%);
    color: var(--apm-text);
    box-shadow: 0 12px 30px -18px rgba(255, 127, 0, .5);
}

.home-how__tab--blue.is-active {
    border-color: rgba(64, 110, 255, .45);
    box-shadow: 0 12px 30px -18px rgba(64, 110, 255, .6);
}

.home-how__tab--free.is-active {
    border-color: var(--apm-free-border);
    box-shadow: 0 12px 30px -18px rgba(34, 197, 94, .5);
}

.home-how__tab .apm-icon-tile {
    flex-shrink: 0;
    opacity: .75;
    transition: opacity .25s var(--apm-ease);
}

.home-how__tab.is-active .apm-icon-tile {
    opacity: 1;
}

.home-how__tab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.home-how__tab-label {
    font-family: var(--apm-font-display);
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.home-how__tab-short {
    display: none;
}

.home-how__tab-hint {
    color: var(--apm-text-muted);
    font-size: 12.5px;
    line-height: 1.3;
}

/* Auto-advance progress line on the active tab */
.home-how__tab-progress {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .06);
    opacity: 0;
    transition: opacity .25s var(--apm-ease);
}

.home-how__tab-progress > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--apm-gradient-accent);
    transform: scaleX(0);
    transform-origin: left center;
}

.home-how__tab--blue .home-how__tab-progress > span { background: linear-gradient(90deg, #6F8FFF, #406EFF); }
.home-how__tab--free .home-how__tab-progress > span { background: linear-gradient(90deg, #86EFAC, #22C55E); }

.home-how.is-auto .home-how__tab.is-active .home-how__tab-progress {
    opacity: 1;
}

.home-how.is-auto .home-how__tab.is-active .home-how__tab-progress > span {
    animation: home-how-progress var(--how-interval) linear forwards;
}

.home-how.is-auto.is-paused .home-how__tab.is-active .home-how__tab-progress > span {
    animation-play-state: paused;
}

@keyframes home-how-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Phones: compact segmented control with short labels (44px+ targets), illustration above text. */
@media (max-width: 767.98px) {
    .home-how.is-enhanced .home-how__tabs {
        gap: 4px;
        padding: 4px;
        margin-bottom: 16px;
        border-radius: 15px;
    }

    .home-how__tab {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        min-height: 72px;
        padding: 10px 6px 12px;
        text-align: center;
    }

    .home-how__tab-text {
        align-items: center;
    }

    .home-how__tab-label {
        font-size: 13px;
    }

    .home-how__tab-full {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .home-how__tab-short {
        display: inline;
    }

    .home-how__tab-hint {
        display: none;
    }

    .home-how__tab-progress {
        left: 10px;
        right: 10px;
        bottom: 4px;
    }

    .home-how__art {
        max-height: 260px;
        overflow: hidden;
    }

    /* Shorter panels keep their content at the top of the shared grid cell. */
    .home-how.is-enhanced .home-how__panel {
        align-content: start;
    }

    .home-how__img {
        max-width: 360px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .home-how__tab-hint {
        display: none;
    }

    .home-how.is-enhanced .home-how__panel {
        align-content: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-how.is-enhanced .home-how__panel,
    .home-how.is-enhanced .home-how__panel.is-active {
        transform: none;
        transition: none;
    }

    .home-how.is-enhanced .home-how__panel.is-active .home-how__img {
        animation: none;
    }

    .home-how__tab-progress {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   4. Recently added
   -------------------------------------------------------------------------- */

/* Relative-time label in a row above each card (never collides with the card's own pills). */
.home-recent__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-recent__item > .apm-card {
    flex-grow: 1;
    height: auto;
}

.home-recent__when {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--apm-border-light);
    background: rgba(16, 23, 38, .7);
    color: var(--apm-text-secondary);
    font-family: var(--apm-font-mono);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.home-recent__when .apm-icon {
    color: var(--apm-text-muted);
}

.home-recent__when--fresh {
    border-color: var(--apm-accent-border);
    color: var(--apm-accent-light);
}

.home-recent__when--fresh .apm-icon {
    color: var(--apm-accent-light);
}

/* --------------------------------------------------------------------------
   5. Community leaders
   -------------------------------------------------------------------------- */

.home-leaders__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-leaders__grid > li {
    margin: 0;
    min-width: 0;
}

@media (min-width: 768px) {
    .home-leaders__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

.home-leader {
    position: relative;
}

.home-leader__pos {
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--apm-text-muted);
    font-size: 12px;
}

.home-leader__avatar {
    position: relative;
}

/* The avatar image sits on top of the initials; if it fails it removes itself. */
.home-leader__avatar img {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

@media (max-width: 767.98px) {
    .home-leader {
        padding: 22px 12px 18px;
        gap: 12px;
    }

    .home-leader .apm-author-card__name {
        font-size: 15px;
    }

    .home-leader .apm-avatar {
        width: 60px;
        height: 60px;
    }

    .home-leader .apm-avatar__initials {
        font-size: 20px;
    }

    .home-leader .apm-pill,
    .home-leader .apm-chip {
        font-size: 11px;
    }
}

.home-leaders__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 32px;
    padding: 18px 20px;
    border: 1px dashed var(--apm-border-light);
    border-radius: var(--apm-radius);
    background: rgba(16, 23, 38, .5);
}

.home-leaders__cta-text {
    flex: 1 1 260px;
    margin: 0;
    color: var(--apm-text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. Showcase
   -------------------------------------------------------------------------- */

.home-showcase__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 72%);
    gap: 14px;
    margin: 0 calc(-1 * var(--apm-gutter));
    padding: 4px var(--apm-gutter) 8px;
    scroll-padding-left: var(--apm-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
}

.home-showcase__grid::-webkit-scrollbar {
    display: none;
}

.home-showcase__item {
    margin: 0;
    min-width: 0;
    scroll-snap-align: start;
}

@media (min-width: 600px) {
    .home-showcase__grid { grid-auto-columns: minmax(220px, 44%); }
}

@media (min-width: 992px) {
    .home-showcase__grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 210px;
        gap: 16px;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .home-showcase__grid--bento {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: 200px;
    }

    .home-showcase__grid--bento .home-showcase__item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .home-showcase__grid--bento .home-showcase__item:nth-child(8) {
        grid-column: span 2;
    }
}

@media (min-width: 1200px) {
    .home-showcase__grid--bento {
        grid-auto-rows: 220px;
    }
}

.home-showcase__link {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--apm-border);
    border-radius: var(--apm-radius);
    background: #0A0F1A;
    text-decoration: none !important;
    transition: border-color .3s var(--apm-ease), box-shadow .3s var(--apm-ease), transform .3s var(--apm-ease);
}

@media (min-width: 992px) {
    .home-showcase__link {
        aspect-ratio: auto;
    }
}

.home-showcase__link:hover {
    border-color: var(--apm-accent-border);
    box-shadow: var(--apm-shadow-card-hover);
    transform: translateY(-3px);
}

.home-showcase__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--apm-ease);
}

.home-showcase__link:hover .home-showcase__img {
    transform: scale(1.04);
}

.home-showcase__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 36px 14px 12px;
    background: linear-gradient(180deg, transparent 0%, rgba(4, 6, 12, .85) 70%);
}

.home-showcase__title {
    overflow: hidden;
    color: var(--apm-text);
    font-family: var(--apm-font-display);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-showcase__author {
    overflow: hidden;
    color: var(--apm-text-muted);
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   7. Ecosystem
   -------------------------------------------------------------------------- */

.home-eco__card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 100%;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 768px) {
    .home-eco__card {
        padding: 36px;
    }
}

.home-eco__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: .2;
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
    transition: opacity .4s var(--apm-ease);
}

.home-eco__card:hover .home-eco__bg {
    opacity: .32;
}

.home-eco__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-eco__label {
    color: var(--apm-accent-light);
    font-family: var(--apm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.home-eco__card--log .home-eco__label {
    color: #9DB5FF;
}

.home-eco__title {
    margin: 4px 0 0;
}

@media (min-width: 1200px) {
    .home-eco__title {
        font-size: 26px;
    }
}

.home-eco__text {
    margin: 0;
    max-width: 520px;
}

.home-eco__points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    flex-grow: 1;
}

.home-eco__points li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--apm-text);
    font-size: 15px;
    font-weight: 500;
}

.home-eco__link {
    padding-left: 0;
    padding-right: 0;
}

/* --------------------------------------------------------------------------
   8. FAQ
   -------------------------------------------------------------------------- */

.home-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-faq__item {
    border: 1px solid var(--apm-border);
    border-radius: var(--apm-radius);
    background: var(--apm-gradient-surface);
    transition: border-color .3s var(--apm-ease);
}

.home-faq__item[open] {
    border-color: var(--apm-accent-border);
}

.home-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    color: var(--apm-text);
    font-family: var(--apm-font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}

.home-faq__q::-webkit-details-marker {
    display: none;
}

.home-faq__q:focus-visible {
    outline: 2px solid var(--apm-accent-light);
    outline-offset: 2px;
    border-radius: var(--apm-radius);
}

.home-faq__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--apm-accent-tint);
    color: var(--apm-accent-light);
    transition: transform .3s var(--apm-ease);
}

.home-faq__item[open] .home-faq__icon {
    transform: rotate(180deg);
}

.home-faq__a {
    padding: 0 20px 20px;
    color: var(--apm-text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .home-faq__q {
        padding: 20px 24px;
        font-size: 18px;
    }

    .home-faq__a {
        padding: 0 24px 22px;
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   9. Final CTA band
   -------------------------------------------------------------------------- */

.home-cta {
    padding-top: 56px;
}

@media (min-width: 1024px) {
    .home-cta {
        padding-top: 80px;
    }
}

.home-cta__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 64px 22px 54px;
    border: 1px solid var(--apm-border-light);
    border-radius: var(--apm-radius-xl);
    text-align: center;
    box-shadow: 0 40px 80px -50px rgba(255, 127, 0, .35);
}

.home-cta__panel .apm-photo {
    border-radius: inherit;
}

.home-cta__shade {
    background:
        radial-gradient(ellipse 70% 75% at 50% 50%, rgba(7, 10, 18, .62) 0%, rgba(7, 10, 18, .35) 100%),
        linear-gradient(180deg, rgba(7, 10, 18, .1) 0%, rgba(7, 10, 18, .45) 100%) !important;
}

.home-cta__title {
    max-width: 760px;
}

@media (min-width: 1200px) {
    .home-cta__title {
        font-size: 56px;
    }
}

.home-cta__text {
    max-width: 520px;
    color: #DDE2EE;
}

.home-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.home-cta__credit {
    margin-top: 10px;
    color: rgba(194, 201, 219, .7);
    font-size: 11.5px;
}

@media (min-width: 768px) {
    .home-cta__panel {
        padding: 104px 48px 72px;
    }
}

@media (max-width: 479.98px) {
    .home-cta__actions .apm-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   10. Card tag collision (foundation card, narrow top-10 columns)
   When a card has both a left tag (premium / tutorial) and an award tag on the
   right, the left tags collapse to icon-only so the two rows never overlap.
   -------------------------------------------------------------------------- */

.home .apm-card__media:has(.apm-card__tags--right) .apm-card__tags:not(.apm-card__tags--right) .apm-tag {
    gap: 0;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 0;
}

.home .apm-card__media:has(.apm-card__tags--right) .apm-card__tags:not(.apm-card__tags--right) .apm-tag .apm-icon {
    margin: 0;
}

/* Showcase tile whose image failed to load: keep the caption on a neutral tile. */
.home-showcase__link.is-missing {
    background: radial-gradient(ellipse at 30% 20%, rgba(64, 110, 255, .18) 0%, transparent 60%), var(--apm-surface);
}

/* Recently added on phones: same peeking scroll rail as the top-10 lists instead of 8 stacked cards. */
@media (max-width: 559.98px) {
    .home-recent__grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: minmax(236px, 78%);
        gap: 14px;
        margin: 0 calc(-1 * var(--apm-gutter));
        padding: 4px var(--apm-gutter) 12px;
        scroll-padding-left: var(--apm-gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .home-recent__grid::-webkit-scrollbar {
        display: none;
    }

    .home-recent__grid > * {
        scroll-snap-align: start;
    }
}

/* 8 cards: 2 columns on tablets, 4 from 992px (avoid a 3 + 3 + 2 layout). */
@media (min-width: 992px) {
    .home-recent__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}