.featured,
.three-panel,
.built-around,
.categories,
.info-newsletter {
    padding-block: clamp(.5rem, 1vw, .85rem)
}

.hero {
    position: relative;
    overflow: hidden
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: var(--sp-6);
    padding-block: clamp(2rem, 4vw, 3.25rem);
    min-height: min(60vh, 480px)
}

.hero__title {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: -.01em
}

.hero__title-line {
    display: block;
    white-space: nowrap
}

.hero__title-line--accent {
    color: var(--color-accent)
}

.hero__lead {
    margin-top: var(--sp-4);
    max-width: 46ch
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-5)
}

.hero__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: var(--sp-6)
}

.hero__features .feature {
    padding-inline: clamp(.75rem, 1.6vw, 1.35rem)
}

.hero__features .feature:first-child {
    padding-inline-start: 0
}

.hero__features .feature+.feature {
    border-left: 1px solid var(--color-border)
}

.hero__features .feature__label {
    max-width: 10ch
}

.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 320px
}

.hero__molecule {
    width: min(100%, 460px);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 24px var(--accent-glow))
}

.hero__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
    opacity: .7
}

.three-panel__grid {
    display: grid;
    grid-template-columns: .92fr 2.08fr;
    gap: var(--sp-4);
    align-items: stretch
}

.three-panel .feature-panel:not(.brand-story) {
    padding: var(--sp-5)
}

.feature-panel {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3)
}

.feature-panel__title {
    font-size: var(--fs-h3)
}

.feature-panel .btn {
    align-self: flex-start;
    margin-top: auto
}

.explorer {
    position: relative;
    overflow: hidden;
    height: clamp(260px, 22vw, 360px)
}

.explorer__media {
    position: absolute;
    top: -4%;
    right: -22%;
    z-index: 0;
    pointer-events: none;
    opacity: .7
}

.explorer__media svg,
.explorer__img {
    width: auto;
    height: 190px;
    filter: drop-shadow(0 0 20px var(--accent-glow))
}

.explorer__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 22ch
}

.brand-story {
    flex-direction: row;
    gap: 0;
    padding: 0;
    overflow: hidden;
    height: clamp(260px, 22vw, 360px)
}

.brand-story__text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
    padding: var(--sp-6)
}

.brand-story__text .btn {
    align-self: flex-start;
    margin-top: auto
}

.brand-story__media {
    flex: 0 0 50%;
    overflow: hidden;
    align-self: stretch;
    background: #0a1626;
    position: relative;
    height: 100%
}

.brand-story__media:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #0d1728eb, #0d172859 26%, #0d172814 55%, #0d172847), linear-gradient(180deg, rgba(6, 12, 24, .3) 0%, transparent 35%, rgba(6, 12, 24, .45) 100%), radial-gradient(120% 90% at 75% 15%, rgba(27, 178, 238, .14), transparent 60%);
    mix-blend-mode: normal
}

.brand-story__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    display: block
}

.doc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4)
}

.doc-card {
    padding: var(--sp-5);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    flex: 1;
    transition: border-color var(--dur) var(--ease)
}

.doc-card__body {
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.doc-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border))
}

.doc-card__icon {
    color: var(--color-accent)
}

.doc-card__icon svg,
.doc-card__icon img {
    width: 36px;
    height: 36px;
    object-fit: contain
}

.doc-card__title {
    font-family: var(--font-head);
    font-weight: var(--fw-semi);
    font-size: 1.02rem;
    color: var(--color-text)
}

.doc-card__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-accent);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    white-space: nowrap
}

.doc-card__link svg {
    width: 15px;
    height: 15px
}

.built-around__panel {
    display: grid;
    grid-template-columns: .7fr 2.3fr;
    gap: clamp(1.25rem, 2.4vw, 2rem);
    align-items: center;
    padding: clamp(1.1rem, 1.9vw, 1.6rem);
    position: relative;
    overflow: hidden
}

.built-around__media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 200px
}

.built-around__media svg,
.built-around__img {
    width: min(100%, 260px);
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 18px var(--accent-glow))
}

.built-around__glow {
    opacity: .5
}

.built-around__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5)
}

.built-around__head {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.built-around__head .lead {
    max-width: 52ch
}

.built-around__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0
}

.built-around__features .feature__title {
    font-size: .97rem
}

.built-around__features .feature {
    padding-inline: clamp(.6rem, 1.1vw, 1rem)
}

.built-around__features .feature:first-child {
    padding-inline-start: 0
}

.built-around__features .feature+.feature {
    border-left: 1px solid var(--color-border)
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4)
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .4rem;
    min-height: 200px;
    padding: var(--sp-5);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease)
}

.category-card:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, #0f2942, #0a1626 60%)
}

.category-card--1:before {
    background: linear-gradient(160deg, #123650, #081320 65%)
}

.category-card--2:before {
    background: linear-gradient(160deg, #0f2c47, #0a1a2b 65%)
}

.category-card--3:before {
    background: linear-gradient(160deg, #14314a, #0b1a29 65%)
}

.category-card--4:before {
    background: linear-gradient(160deg, #0e3350, #091724 65%)
}

.category-card--has-image:before {
    display: none
}

.category-card:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 90% at 80% 0%, var(--accent-wash), transparent 60%)
}

.category-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border))
}

.category-card__eyebrow {
    font-family: var(--font-head);
    font-weight: var(--fw-semi);
    font-size: .66rem;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent)
}

.category-card__title {
    font-family: var(--font-head);
    font-weight: var(--fw-semi);
    font-size: 1rem;
    line-height: 1.3;
    color: #fff;
    padding-right: 3.1rem
}

.category-card__arrow {
    position: absolute;
    bottom: var(--sp-5);
    right: var(--sp-5);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    display: grid;
    place-items: center;
    background: #060c1866;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease)
}

.category-card__arrow svg {
    width: 18px;
    height: 18px
}

.category-card:hover .category-card__arrow {
    background: var(--color-accent);
    color: var(--color-on-accent)
}

.info-newsletter__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: start
}

.info-newsletter .section-title {
    font-size: clamp(1.45rem, 2.1vw, 2.05rem)
}

.info-review>.section-title {
    margin-top: .2rem
}

.info-review>.lead {
    margin-bottom: var(--sp-5);
    max-width: 44ch
}

.info-review .info-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3)
}

.info-review .info-tile {
    padding: var(--sp-4);
    gap: .4rem
}

.info-review .info-tile__title {
    font-size: .9rem;
    line-height: 1.3
}

.newsletter {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 2.2vw, 1.85rem)
}

.newsletter__glow {
    position: absolute;
    right: -10%;
    top: -30%;
    width: 60%;
    height: 120%;
    z-index: 0;
    background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
    opacity: .5
}

.newsletter__graphic {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    opacity: .8;
    pointer-events: none
}

.newsletter__graphic img {
    width: 190px;
    height: auto;
    display: block
}

@media (max-width:560px) {
    .newsletter__graphic {
        display: none
    }
}

.newsletter__body {
    position: relative;
    z-index: 1
}

.newsletter__form {
    display: flex;
    gap: .6rem;
    margin-top: var(--sp-5);
    flex-wrap: wrap
}

.newsletter__form input[type=email] {
    flex: 1;
    min-width: 200px;
    background: var(--color-panel-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    color: var(--color-text)
}

.newsletter__form input[type=email]::placeholder {
    color: var(--color-text-dim)
}

.newsletter__form input[type=email]:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--ring-accent)
}

.newsletter__note {
    margin-top: .75rem;
    font-size: var(--fs-small)
}

.newsletter__msg {
    margin-top: var(--sp-4);
    font-size: var(--fs-small);
    padding: .6rem .9rem;
    border-radius: var(--radius-sm)
}

.newsletter__msg--ok {
    color: var(--color-success);
    background: #35c48a1a;
    border: 1px solid rgba(53, 196, 138, .3)
}

.newsletter__msg--err {
    color: var(--color-danger);
    background: #e5573b1a;
    border: 1px solid rgba(229, 87, 59, .3)
}

.newsletter__hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
    margin: 0
}

@media (max-width:1080px) {
    .three-panel__grid {
        grid-template-columns: 1fr 1fr
    }

    .doc-stack {
        grid-column: 1 / -1;
        flex-direction: row
    }

    .built-around__features {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-5) 0
    }

    .built-around__features .feature:nth-child(-n+2) {
        padding-block-end: var(--sp-5)
    }

    .built-around__features .feature:nth-child(odd) {
        padding-inline-start: 0
    }

    .built-around__features .feature:nth-child(odd)+.feature {
        border-left: 1px solid var(--color-border)
    }

    .built-around__features .feature:nth-child(3) {
        border-left: 0
    }

    .info-review .info-tiles {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:900px) {
    .hero__inner {
        grid-template-columns: 1fr
    }

    .hero__visual {
        order: -1;
        min-height: 260px
    }

    .info-newsletter__grid {
        grid-template-columns: 1fr
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .explorer__media {
        position: static;
        opacity: 1;
        margin-bottom: var(--sp-3)
    }

    .explorer__media svg,
    .explorer__img {
        height: 130px
    }

    .explorer__body {
        max-width: none
    }
}

@media (max-width:680px) {
    .three-panel__grid {
        grid-template-columns: 1fr
    }

    .brand-story {
        flex-direction: column
    }

    .brand-story__media {
        flex: 0 0 auto;
        min-height: 200px
    }

    .doc-stack {
        flex-direction: column
    }

    .built-around__panel {
        grid-template-columns: 1fr;
        padding: var(--sp-5);
        gap: var(--sp-6)
    }

    .built-around__features {
        grid-template-columns: 1fr;
        gap: var(--sp-5)
    }

    .built-around__features .feature {
        padding-inline: 0;
        padding-block-end: 0;
        border-left: 0 !important
    }

    .hero__features {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-5) 0
    }

    .hero__features .feature:nth-child(odd) {
        padding-inline-start: 0
    }

    .hero__features .feature:nth-child(3) {
        border-left: 0
    }

    .hero__features .feature__label {
        max-width: none
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (max-width:460px) {
    .hero__title-line {
        white-space: normal
    }

    .category-grid,
    .info-tiles,
    .info-review .info-tiles {
        grid-template-columns: 1fr
    }

    .newsletter__form .btn {
        width: 100%
    }

    .hero__features {
        grid-template-columns: 1fr
    }

    .hero__features .feature {
        padding-inline: 0;
        border-left: 0 !important
    }
}