.oas-page {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(3, 9, 16, .74),
            rgba(3, 9, 16, .96)
        ),
        url("/assets/img/home-bg.png")
        center top / cover fixed;
}

.oas-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.oas-eyebrow {
    margin-bottom: 14px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;

    opacity: .46;
}


/* HERO */

.oas-hero {
    padding: 90px 0 45px;
}

.oas-hero h1 {
    margin: 0;

    font-size: clamp(47px, 6vw, 80px);
    line-height: .98;

    letter-spacing: -.05em;
}

.oas-lead {
    margin: 24px 0 0;

    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.4;
}

.oas-description {
    max-width: 680px;

    margin: 15px 0 0;

    font-size: 15px;
    line-height: 1.75;

    opacity: .66;
}


/* SEARCH */

.oas-search-section {
    padding: 20px 0 42px;
}

.oas-search-box {
    min-height: 74px;

    display: grid;
    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 15px;

    padding: 10px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;

    background: rgba(4,10,17,.74);

    box-shadow: 0 25px 70px rgba(0,0,0,.24);

    backdrop-filter: blur(10px);
}

.oas-search-type {
    padding-left: 10px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .11em;

    opacity: .40;
}

.oas-search-box input {
    min-width: 0;

    height: 50px;

    padding: 0 16px;

    border: 0;
    outline: 0;

    background: transparent;
    color: inherit;

    font: inherit;
    font-size: 18px;
}

.oas-search-box button {
    height: 50px;

    padding: 0 25px;

    border: 0;
    border-radius: 7px;

    background: #fff;
    color: #111820;

    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.oas-search-hints {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    align-items: center;

    margin-top: 11px;
}

.oas-search-hints > span {
    font-size: 9px;

    opacity: .34;
}

.oas-search-hints button {
    padding: 5px 8px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px;

    background: rgba(255,255,255,.025);
    color: inherit;

    font: inherit;
    font-size: 9px;

    opacity: .54;
}


/* RESULT */

.oas-result-section {
    padding-bottom: 110px;
}

.oas-result {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;

    background: rgba(4,10,17,.78);

    box-shadow: 0 30px 80px rgba(0,0,0,.24);

    backdrop-filter: blur(12px);
}

.oas-result-summary {
    min-height: 145px;

    display: grid;
    grid-template-columns: 80px 1fr auto;

    gap: 20px;

    align-items: center;

    padding: 25px 28px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.oas-brand-box {
    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;

    background: rgba(255,255,255,.045);

    font-size: 14px;
    font-weight: 800;
}

.oas-result-label {
    display: block;

    margin-bottom: 6px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .13em;

    opacity: .35;
}

.oas-summary-main h2 {
    margin: 0;

    font-size: 32px;
}

.oas-summary-main > p {
    margin: 5px 0 0;

    font-size: 13px;

    opacity: .56;
}

.oas-summary-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 13px;
}

.oas-summary-meta span {
    padding: 5px 8px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 4px;

    font-size: 8px;

    opacity: .43;
}

.oas-result-status {
    padding: 6px 9px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;

    opacity: .60;
}


/* TABS */

.oas-tabs {
    display: flex;

    gap: 2px;

    padding: 8px 12px 0;

    border-bottom: 1px solid rgba(255,255,255,.07);
}

.oas-tabs button {
    min-height: 43px;

    padding: 0 15px;

    border: 0;
    border-bottom: 2px solid transparent;

    background: transparent;
    color: inherit;

    font: inherit;
    font-size: 10px;

    opacity: .43;
}

.oas-tabs button.active {
    border-bottom-color: rgba(255,255,255,.7);

    font-weight: 700;

    opacity: 1;
}


/* BODY */

.oas-result-body {
    padding: 26px;
}

.oas-details,
.oas-data-block {
    margin-bottom: 31px;

    padding-bottom: 31px;

    border-bottom: 1px solid rgba(255,255,255,.065);
}

.oas-data-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: 0;
}

.oas-section-title {
    margin-bottom: 18px;
}

.oas-section-title span,
.oas-section-title strong {
    display: block;
}

.oas-section-title span {
    margin-bottom: 4px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;

    opacity: .31;
}

.oas-section-title strong {
    font-size: 13px;
}


/* DETAILS */

.oas-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255,255,255,.06);
    border-left: 1px solid rgba(255,255,255,.06);
}

.oas-detail-grid > div {
    min-height: 78px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0 15px;

    border-right: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.oas-detail-grid span {
    margin-bottom: 5px;

    font-size: 8px;

    opacity: .32;
}

.oas-detail-grid strong {
    font-size: 11px;
}


/* OE REFERENCES */

.oas-reference-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}

.oas-reference-list > div {
    padding: 16px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;

    background: rgba(255,255,255,.025);
}

.oas-reference-list code,
.oas-reference-list span {
    display: block;
}

.oas-reference-list code {
    font-size: 12px;
}

.oas-reference-list span {
    margin-top: 5px;

    font-size: 9px;

    opacity: .37;
}


/* ALTERNATIVES */

.oas-alternative-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}

.oas-alternative-list article {
    min-height: 85px;

    display: grid;
    grid-template-columns: 45px 1fr auto;

    gap: 11px;

    align-items: center;

    padding: 0 13px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;

    background: rgba(255,255,255,.025);
}

.oas-alt-brand {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 6px;

    font-size: 8px;
    font-weight: 800;
}

.oas-alternative-list strong,
.oas-alternative-list span {
    display: block;
}

.oas-alternative-list strong {
    font-size: 10px;
}

.oas-alternative-list span {
    margin-top: 4px;

    font-size: 8px;

    opacity: .39;
}

.oas-alternative-list small {
    font-size: 7px;

    opacity: .32;
}


/* VEHICLE TABLE */

.oas-vehicle-table {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
}

.oas-table-head,
.oas-table-row {
    display: grid;

    grid-template-columns:
        1fr
        1.2fr
        1fr
        100px;

    gap: 12px;

    align-items: center;

    padding: 0 15px;
}

.oas-table-head {
    min-height: 38px;

    background: rgba(255,255,255,.025);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;

    opacity: .34;
}

.oas-table-row {
    min-height: 54px;

    border-top: 1px solid rgba(255,255,255,.05);

    font-size: 10px;
}

.oas-table-row > span {
    opacity: .52;
}

.oas-table-row small {
    justify-self: end;

    font-size: 8px;

    opacity: .42;
}


/* HEADINGS */

.oas-heading {
    max-width: 780px;

    margin-bottom: 46px;
}

.oas-heading h2,
.oas-api-layout h2,
.oas-final h2 {
    margin: 0;

    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;

    letter-spacing: -.035em;
}


/* LOGIC */

.oas-logic-section {
    padding: 105px 0;

    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);

    background: rgba(0,0,0,.17);
}

.oas-logic-flow {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    gap: 11px;

    align-items: center;
}

.oas-logic-flow > div {
    min-height: 145px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 20px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;

    background: rgba(255,255,255,.035);
}

.oas-logic-flow span {
    margin-bottom: auto;

    font-size: 8px;
    font-weight: 800;

    opacity: .27;
}

.oas-logic-flow strong {
    font-size: 14px;
}

.oas-logic-flow small {
    margin-top: 4px;

    font-size: 9px;

    opacity: .39;
}

.oas-logic-flow > b {
    font-weight: 400;

    opacity: .24;
}


/* API */

.oas-api-section {
    padding: 105px 0;
}

.oas-api-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 80px;

    align-items: center;
}

.oas-api-layout p {
    max-width: 620px;

    margin-top: 18px;

    font-size: 15px;
    line-height: 1.75;

    opacity: .65;
}

.oas-code-panel {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 11px;

    background: rgba(4,10,17,.67);
}

.oas-code-top {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 17px;

    border-bottom: 1px solid rgba(255,255,255,.06);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .11em;

    opacity: .45;
}

.oas-code-panel pre {
    overflow: auto;

    margin: 0;

    padding: 22px;

    font-size: 12px;
    line-height: 1.7;
}

.oas-endpoint-chain {
    border-top: 1px solid rgba(255,255,255,.06);
}

.oas-endpoint-chain > div {
    min-height: 44px;

    display: grid;
    grid-template-columns: 110px 1fr;

    align-items: center;

    padding: 0 17px;

    border-bottom: 1px solid rgba(255,255,255,.04);
}

.oas-endpoint-chain > div:last-child {
    border-bottom: 0;
}

.oas-endpoint-chain span {
    font-size: 7px;
    font-weight: 800;

    opacity: .30;
}

.oas-endpoint-chain code {
    font-size: 9px;

    opacity: .57;
}


/* FINAL */

.oas-final {
    padding: 70px 0 110px;
}

.oas-final-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;

    padding: 43px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;

    background: rgba(255,255,255,.05);
}

.oas-final-actions {
    display: flex;

    gap: 10px;

    flex-shrink: 0;
}

.oas-final-actions a {
    min-height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;
}

.oas-primary {
    background: #fff;
    color: #111820;
}

.oas-secondary {
    border: 1px solid rgba(255,255,255,.18);

    color: inherit;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .oas-api-layout {
        grid-template-columns: 1fr;
    }

    .oas-alternative-list,
    .oas-reference-list {
        grid-template-columns: 1fr;
    }

    .oas-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {

    .oas-shell {
        width: min(100% - 28px, 1180px);
    }

    .oas-hero {
        padding: 65px 0 35px;
    }

    .oas-search-box {
        grid-template-columns: 1fr;
    }

    .oas-search-type {
        padding: 5px;
    }

    .oas-result-summary {
        grid-template-columns: 60px 1fr;
    }

    .oas-result-status {
        grid-column: 1 / -1;

        justify-self: start;
    }

    .oas-tabs {
        overflow-x: auto;
    }

    .oas-tabs button {
        white-space: nowrap;
    }

    .oas-detail-grid {
        grid-template-columns: 1fr;
    }

    .oas-table-head,
    .oas-table-row {
        grid-template-columns: 1fr 1fr;
    }

    .oas-table-head span:nth-child(3),
    .oas-table-head span:nth-child(4),
    .oas-table-row span:nth-child(3),
    .oas-table-row small {
        display: none;
    }

    .oas-logic-flow {
        grid-template-columns: 1fr;
    }

    .oas-logic-flow > b {
        text-align: center;

        transform: rotate(90deg);
    }

    .oas-final-panel {
        display: block;
    }

    .oas-final-actions {
        display: block;

        margin-top: 28px;
    }

    .oas-final-actions a {
        margin-top: 8px;
    }
}