/**
 * Alto Valle IT: minimalist page components shared by the funnel, partner,
 * hosting and checkout pages. Scoped to body.site-ui. Vaca Muerta opts in;
 * Malvinas is untouched.
 * Same language as the home, portfolio, blog and tools: copy on the left gutter,
 * hairline rows instead of cards, 10px images, flat inputs with white focus.
 */

/* Headings and heroes -------------------------------------------------------- */
body.site-ui .section-heading,
body.site-ui .section-subtitle {
    text-align: left;
}

body.site-ui .section-subtitle {
    margin-left: 0;
    margin-right: 0;
}

body.site-ui .landing-hero:not(.analyzer-hero) {
    max-height: none;
    text-align: left;
    justify-content: flex-start;
}

body.site-ui .landing-hero:not(.analyzer-hero) .container {
    width: 100%;
    text-align: left;
}

body.site-ui.standalone-page--centered:not(.legal-page) .container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

body.site-ui .landing-hero:not(.analyzer-hero) .hero-inner {
    max-width: none;
    margin: 0;
    padding: 0;
}

body.site-ui .landing-hero:not(.analyzer-hero) .hero-heading {
    max-width: 16em;
    text-wrap: balance;
}

body.site-ui .landing-hero:not(.analyzer-hero) .hero-subtitle {
    max-width: 48ch;
    margin-left: 0;
    margin-right: 0;
}

body.site-ui .section-cta {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--button-gap);
}

body.site-ui .section-cta .btn-primary {
    width: auto;
}

/* Two-column section: lead on the left, content on the right ------------------ */
body.site-ui :is(.faq-section, .capture-section) > .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4rem;
    align-items: start;
}

body.site-ui :is(.faq-section, .capture-section) > .container > .section-heading {
    margin-bottom: 0;
}

body.site-ui .capture-section > .container {
    grid-template-rows: auto 1fr;
}

body.site-ui .capture-section > .container > :is(.section-heading, .section-subtitle) {
    grid-column: 1;
}

body.site-ui .capture-section > .container > .section-subtitle {
    margin-top: var(--type-title-gap);
    margin-bottom: 0;
}

body.site-ui .capture-section > .container > :is(.capture-card, .card) {
    grid-column: 2;
    grid-row: 1 / span 2;
}

body.site-ui .faq-section > .container > .section-cta {
    grid-column: 2;
}

@media (max-width: 1024px) {
    body.site-ui :is(.faq-section, .capture-section) > .container {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }

    body.site-ui .faq-section > .container > .section-cta {
        grid-column: 1;
    }

    body.site-ui .capture-section > .container {
        grid-template-rows: none;
    }

    body.site-ui .capture-section > .container > :is(.capture-card, .card) {
        grid-column: 1;
        grid-row: auto;
    }
}

/* FAQ accordion: hairline rows ----------------------------------------------- */
body.site-ui .faq-accordion {
    max-width: none;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.site-ui .faq-accordion__item {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body.site-ui .faq-accordion__question {
    justify-content: flex-start;
    padding: 1.25rem 2.5rem 1.25rem 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    font: var(--type-heading);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui .faq-accordion__question:hover {
    background: transparent;
}

body.site-ui .faq-accordion__question-text {
    padding: 0;
}

body.site-ui .faq-accordion__icon {
    right: 0;
    color: var(--text-secondary);
}

body.site-ui .faq-accordion__answer {
    padding: 0 0 1.5rem;
}

body.site-ui .faq-accordion__answer p {
    max-width: 60ch;
    font: var(--type-lead);
    letter-spacing: 0;
    color: var(--text-secondary);
}

/* Solution cards: three hairline columns ------------------------------------- */
body.site-ui .solution-section .section-heading {
    margin-bottom: 3rem;
}

body.site-ui .solution-cards {
    gap: 3rem;
    margin-bottom: 0;
}

body.site-ui .solution-card {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.site-ui .solution-card__image-wrap {
    border-radius: 10px;
}

body.site-ui .solution-card__body {
    margin-top: 1.5rem;
}

body.site-ui .solution-card__title {
    margin: 0 0 var(--type-title-gap);
    font: var(--type-heading);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui .solution-card__text {
    font: var(--type-lead);
}

/* How it works: numbered hairline columns ------------------------------------ */
body.site-ui .how-it-works-section .section-heading {
    margin-bottom: 0;
}

body.site-ui .how-it-works-section .section-subtitle {
    margin-bottom: 0;
}

body.site-ui .how-steps {
    max-width: none;
    margin: 3rem 0 0;
    gap: 3rem;
}

body.site-ui .how-step {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.site-ui .how-step__num {
    position: static;
    transform: none;
    order: -1;
    width: auto;
    height: auto;
    margin: 0 0 1.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    color: var(--text-secondary);
}

body.site-ui .how-step__num::before {
    content: "0";
}

body.site-ui .how-step__icon {
    display: none;
}

body.site-ui .how-step__title {
    margin: 0 0 var(--type-title-gap);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

/* Start project -------------------------------------------------------------- */
body.site-ui.start-project-page .landing-hero {
    display: flex;
    align-items: flex-end;
    min-height: calc(72svh - var(--site-chrome-offset, 72px));
    padding-top: calc(var(--section-space) * 0.5);
    padding-bottom: calc(var(--section-space) * 0.6);
}

body.site-ui.start-project-page .landing-hero .hero-heading {
    max-width: 13em;
    margin-bottom: 1.25rem;
    font: var(--type-hero);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui.start-project-page .landing-hero .hero-subtitle {
    max-width: 44ch;
    margin-bottom: var(--button-gap);
    font: var(--type-lead);
    color: var(--text-secondary);
}

body.site-ui.start-project-page .landing-hero.landing-hero--center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

body.site-ui.start-project-page .landing-hero.landing-hero--center .container,
body.site-ui.start-project-page .landing-hero.landing-hero--center .hero-inner {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.site-ui.start-project-page .landing-hero.landing-hero--center .hero-heading,
body.site-ui.start-project-page .landing-hero.landing-hero--center .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

body.site-ui.start-project-page .landing-hero .hero-cta,
body.site-ui.start-project-page .landing-hero.landing-hero--center .hero-cta {
    align-items: center;
}

body.site-ui.start-project-page .capture-promise-section {
    padding-top: 0;
    padding-bottom: var(--section-space);
}

body.site-ui.start-project-page .capture-promise-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    max-width: none;
    margin: 0;
    text-align: left;
}

body.site-ui.start-project-page .capture-hero-media {
    grid-column: 2;
    grid-row: 1 / span 2;
}

body.site-ui.start-project-page .capture-promise-heading {
    grid-column: 1;
    grid-row: 1;
    max-width: 34ch;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font: var(--type-lead);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
    text-wrap: pretty;
}

body.site-ui.start-project-page .capture-promise-cta {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    margin-top: var(--button-gap);
}

body.site-ui.start-project-page .capture-promise-section--center .capture-promise-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    gap: 1.75rem;
}

body.site-ui.start-project-page .capture-promise-section--center .capture-hero-media,
body.site-ui.start-project-page .capture-promise-section--center .capture-promise-heading {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
}

body.site-ui.start-project-page .capture-promise-section--center .capture-hero-media {
    order: 0;
}

body.site-ui.start-project-page .capture-promise-section--center .capture-promise-heading {
    order: 1;
    max-width: 42rem;
    margin: 0 auto;
    padding-top: 0;
    border-top: 0;
    text-align: center;
}

body.site-ui.start-project-page .capture-hero-media__frame {
    max-width: none;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: #000000;
    box-shadow: none;
    overflow: hidden;
    transform: none;
}

body.site-ui .sp-carousel__arrow {
    width: 40px;
    height: 40px;
    border-color: rgba(255, 255, 255, 0.4);
    background: #000000;
    box-shadow: none;
    backdrop-filter: none;
}

body.site-ui .sp-carousel__arrow:hover:not([disabled]) {
    border-color: #ffffff;
    background: #000000;
}

body.site-ui .sp-carousel__arrow--prev {
    left: 12px;
}

body.site-ui .sp-carousel__arrow--next {
    right: 12px;
}

body.site-ui .sp-carousel__viewport:focus-visible {
    outline-color: #ffffff;
}

@media (max-width: 1024px) {
    body.site-ui.start-project-page .capture-promise-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 2rem;
    }

    body.site-ui.start-project-page .capture-hero-media,
    body.site-ui.start-project-page .capture-promise-heading,
    body.site-ui.start-project-page .capture-promise-cta {
        grid-column: 1;
        grid-row: auto;
    }

    body.site-ui.start-project-page .capture-hero-media {
        order: 3;
    }
}

/* Lead capture form: flat, no card ------------------------------------------- */
body.site-ui .capture-card {
    min-width: 0;
    max-width: 32rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.site-ui .capture-form-steps-nav {
    justify-content: flex-start;
    margin: 0 0 1.5rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
}

body.site-ui .capture-form-step-pill--active .capture-form-step-pill__dot,
body.site-ui .capture-form-step-pill--complete .capture-form-step-pill__dot {
    background-color: #ffffff;
}

body.site-ui .capture-form-step-pill__dot {
    background-color: rgba(255, 255, 255, 0.3);
}

body.site-ui .capture-step1-label,
body.site-ui .capture-step2-label {
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

body.site-ui .capture-form .form-input,
body.site-ui .capture-form .form-textarea {
    height: 48px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 1rem;
}

body.site-ui .capture-form .form-textarea {
    height: auto;
    min-height: 7rem;
}

body.site-ui .capture-form .form-input:hover,
body.site-ui .capture-form .form-textarea:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

body.site-ui .capture-form .form-input:focus,
body.site-ui .capture-form .form-textarea:focus {
    border-color: #ffffff;
    background: transparent;
    box-shadow: none;
}

body.site-ui .capture-form .form-input:-webkit-autofill,
body.site-ui .capture-form .form-input:-webkit-autofill:hover,
body.site-ui .capture-form .form-input:-webkit-autofill:focus {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 100px #000000 inset !important;
    box-shadow: 0 0 0 100px #000000 inset !important;
}

body.site-ui .capture-form .form-actions .btn-primary {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
}

body.site-ui .capture-form .form-trust {
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    color: var(--text-secondary);
}

/* Phone field: same height, border and white focus as the other inputs ------- */
body.site-ui .phone-selector-trigger {
    height: 48px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px 0 0 4px;
    background-color: transparent;
}

body.site-ui .phone-selector-trigger:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

body.site-ui .phone-selector-trigger:focus {
    border-color: #ffffff;
}

body.site-ui .phone-number-inner {
    height: 48px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: transparent;
}

body.site-ui .phone-number-inner:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

body.site-ui .phone-number-inner:focus-within {
    border-color: #ffffff;
    background: transparent;
}

body.site-ui .phone-input-group__number .form-input,
body.site-ui .phone-input-prefix {
    font-size: 1rem;
}

body.site-ui .phone-input-group__number .form-input:-webkit-autofill,
body.site-ui .phone-input-group__number .form-input:-webkit-autofill:hover,
body.site-ui .phone-input-group__number .form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px #000000 inset;
    box-shadow: 0 0 0 100px #000000 inset;
}

body.site-ui .phone-selector-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: #000000;
}

body.site-ui .phone-selector-search {
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body.site-ui .phone-selector-search-input {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
}

body.site-ui .phone-selector-search-input:focus {
    border-color: #ffffff;
}

body.site-ui .phone-selector-option:hover,
body.site-ui .phone-selector-option:focus,
body.site-ui .phone-selector-option[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Cards are flat everywhere in this vertical ---------------------------------- */
body.site-ui .card {
    border-radius: 10px;
    box-shadow: none;
}

body.site-ui .card:hover {
    box-shadow: none;
}

body.site-ui .card:focus-within {
    outline-color: #ffffff;
}

body.site-ui .hero-cta {
    align-items: flex-start;
}

/* Partners ------------------------------------------------------------------- */
body.site-ui .partners-landing-hero .hero-heading {
    max-width: 16em;
}

body.site-ui .partners-landing__split {
    gap: 3rem;
}

body.site-ui .partners-landing__surface {
    padding: 1.5rem 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.site-ui .partners-landing__surface--accent {
    border-top-color: rgba(255, 255, 255, 0.18);
}

body.site-ui .partners-landing__card-title {
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui .partners-landing__surface p {
    max-width: 48ch;
    font: var(--type-lead);
    color: var(--text-secondary);
}

body.site-ui .partners-landing__types-grid {
    gap: 3rem;
}

body.site-ui .partners-type-card {
    height: auto;
    min-height: 0;
    padding: 1.5rem 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.site-ui .partners-type-card__icon {
    color: var(--text-secondary);
}

body.site-ui .partners-type-card__title {
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

/* Hosting / plans ------------------------------------------------------------- */
body.site-ui.website-infrastructure-page .features-grid {
    gap: 3rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

body.site-ui.website-infrastructure-page .feature-card,
body.site-ui.website-infrastructure-page .feature-card--highlight,
body.site-ui.website-infrastructure-page .feature-card:hover,
body.site-ui.website-infrastructure-page .feature-card--highlight:hover {
    padding: 1.5rem 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

body.site-ui.website-infrastructure-page .feature-card--highlight,
body.site-ui.website-infrastructure-page .feature-card--highlight:hover {
    border-top-color: #ffffff;
}

body.site-ui.website-infrastructure-page .feature-card h3 {
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
    color: var(--text-primary);
}

body.site-ui.website-infrastructure-page .feature-card .badge,
body.site-ui.website-infrastructure-page .section-cta .badge {
    padding: 0 0 0.25rem;
    border: 0;
    border-bottom: 1px solid #ffffff;
    border-radius: 0;
    background: transparent;
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    color: #ffffff;
}

body.site-ui.website-infrastructure-page .feature-card .price {
    font-size: 2.4rem;
    letter-spacing: 0;
}

body.site-ui.website-infrastructure-page .plan-divider {
    background: rgba(255, 255, 255, 0.18);
}

body.site-ui.website-infrastructure-page .plan-section-title {
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    color: var(--text-secondary);
}

body.site-ui.website-infrastructure-page .plan-includes li i.fa-check {
    color: #ffffff;
}

body.site-ui.website-infrastructure-page .plan-includes li {
    opacity: 1;
    color: var(--text-secondary);
}

body.site-ui.website-infrastructure-page .period-dropdown__label {
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    text-transform: uppercase;
    color: var(--text-secondary);
}

body.site-ui.website-infrastructure-page .period-dropdown__trigger,
body.site-ui.website-infrastructure-page .period-dropdown__trigger:hover,
body.site-ui.website-infrastructure-page .period-dropdown__details[open] .period-dropdown__trigger {
    height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
}

body.site-ui.website-infrastructure-page .period-dropdown__trigger:hover,
body.site-ui.website-infrastructure-page .period-dropdown__details[open] .period-dropdown__trigger {
    border-color: #ffffff;
}

body.site-ui.website-infrastructure-page .period-dropdown__trigger:focus-visible,
body.site-ui.website-infrastructure-page .period-dropdown__option:focus-visible {
    outline-color: #ffffff;
}

body.site-ui.website-infrastructure-page .period-dropdown__chevron {
    color: #ffffff;
}

body.site-ui.website-infrastructure-page .period-dropdown__menu {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: #000000;
    box-shadow: none;
}

body.site-ui.website-infrastructure-page .period-dropdown__option {
    border-radius: 2px;
}

body.site-ui.website-infrastructure-page .period-dropdown__badge {
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid #ffffff;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
}

body.site-ui.website-infrastructure-page .hosting-faq__wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.site-ui.website-infrastructure-page .hosting-faq__title,
body.site-ui.website-infrastructure-page .hosting-faq__subtitle {
    grid-column: 1;
    margin-left: 0;
    text-align: left;
}

body.site-ui.website-infrastructure-page .hosting-faq__subtitle {
    margin-bottom: 0;
}

body.site-ui.website-infrastructure-page .hosting-faq__accordion {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-top-color: rgba(255, 255, 255, 0.18);
}

body.site-ui.website-infrastructure-page .hosting-faq__item {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

body.site-ui.website-infrastructure-page .hosting-faq__summary {
    font: var(--type-heading);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui.website-infrastructure-page .hosting-faq__summary:focus-visible {
    outline-color: #ffffff;
}

body.site-ui.website-infrastructure-page .hosting-faq__body {
    font: var(--type-lead);
    color: var(--text-secondary);
}

@media (max-width: 1024px) {
    body.site-ui.website-infrastructure-page .features-grid {
        grid-template-columns: 1fr;
    }

    body.site-ui.website-infrastructure-page .hosting-faq__wrap {
        display: block;
    }

    body.site-ui.website-infrastructure-page .hosting-faq__subtitle {
        margin-bottom: 2rem;
    }
}

/* Standalone pages (404, request received) ----------------------------------- */
body.site-ui .standalone-page--centered {
    justify-content: flex-start;
}

body.site-ui .standalone-page--centered .container {
    max-width: none;
    margin: 0;
    text-align: left;
}

body.site-ui .standalone-page__title,
body.site-ui .standalone-page__subtitle,
body.site-ui .standalone-page__cta {
    margin-left: 0;
    text-align: left;
}

body.site-ui .standalone-page__title {
    max-width: 14em;
    text-wrap: balance;
}

/* Hosting checkout ------------------------------------------------------------ */
body.site-ui .checkout-layout__container {
    text-align: left;
}

body.site-ui .checkout-layout__container--narrow,
body.site-ui .checkout-layout__container--plans {
    max-width: none;
    margin: 0;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

body.site-ui .checkout-flow,
body.site-ui .checkout-flow__back,
body.site-ui .checkout-page__header,
body.site-ui .checkout-flow__paypal-error {
    margin-left: 0;
    text-align: left;
}

body.site-ui .checkout-flow__headline,
body.site-ui .checkout-page--choose .checkout-flow__headline {
    margin-inline: 0;
    max-width: 16em;
    text-align: left;
}

body.site-ui .checkout-flow__paypal-wrap {
    align-items: flex-start;
    margin-left: 0;
}

body.site-ui .checkout-page__cta-row {
    justify-content: flex-start;
}

body.site-ui .checkout-plans {
    gap: 3rem;
    text-align: left;
}

body.site-ui .checkout-plan {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.site-ui .checkout-plan--recommended {
    border-top-color: #ffffff;
}

body.site-ui .checkout-plan__name {
    font: var(--type-heading);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
    color: var(--text-primary);
}

body.site-ui .checkout-plan__badge {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #ffffff;
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    color: #ffffff;
}

body.site-ui .checkout-plan__price {
    color: var(--text-primary);
    letter-spacing: 0;
}

body.site-ui .checkout-plan__features-wrap {
    max-width: none;
    margin-inline: 0;
}

body.site-ui .checkout-plan__features li {
    opacity: 1;
    color: var(--text-secondary);
}

body.site-ui .checkout-plan__features li i.fa-check {
    color: #ffffff;
}

body.site-ui .checkout-plan__button {
    max-width: none;
    padding: 0 20px;
    font-size: 14px;
}

body.site-ui .checkout-period-dropdown__menu {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: #000000;
    box-shadow: none;
}

body.site-ui .checkout-period-dropdown__trigger:focus-visible {
    outline-color: #ffffff;
}

/* Legal pages ----------------------------------------------------------------- */
body.site-ui .legal-page {
    padding-top: calc(var(--section-space) * 0.75);
}

body.site-ui .legal-page > .container {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4rem;
    row-gap: 0;
    align-items: start;
}

body.site-ui .legal-page__title {
    grid-column: 1;
    grid-row: 1 / span 20;
    margin: 0;
    font: var(--type-title);
    letter-spacing: var(--type-tracking);
    text-align: left;
    text-wrap: balance;
}

body.site-ui .legal-section {
    grid-column: 2;
    margin: 0;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.site-ui .legal-section__heading {
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui .legal-section__body {
    max-width: 60ch;
}

@media (max-width: 1024px) {
    body.site-ui .legal-page > .container {
        display: block;
    }

    body.site-ui .legal-page__title {
        margin-bottom: 2rem;
    }
}

/* Checkout terms / privacy (ops documents) ------------------------------------ */
body.site-ui .ops-doc {
    margin: 0;
    text-align: left;
}

body.site-ui .ops-doc__headline {
    margin: 0;
    max-width: 14em;
}

body.site-ui .ops-doc__text {
    margin-left: 0;
}

body.site-ui .ops-doc__section-title {
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui .checkout-layout__container--legal {
    max-width: none;
    margin: 0;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* Success states ------------------------------------------------------------- */
body.site-ui .form-success,
body.site-ui .capture-form .form-success {
    padding: 0;
    text-align: left;
}

body.site-ui .form-success .success-icon,
body.site-ui .capture-form .success-icon {
    width: auto;
    height: auto;
    margin: 0 0 1.5rem;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-size: 1.5rem;
    justify-content: flex-start;
}

body.site-ui .form-success :is(h2, h3),
body.site-ui .form-success .capture-form-intro__title {
    margin: 0 0 var(--type-title-gap);
    font: var(--type-heading);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
    color: var(--text-primary);
}

body.site-ui .form-success p {
    margin: 0 0 1rem;
    font: var(--type-lead);
    color: var(--text-secondary);
}

body.site-ui .form-success .form-actions {
    margin-top: var(--button-gap);
}

/* Newsletter confirmation modal ------------------------------------------------ */
body.site-ui .newsletter-modal__backdrop {
    background: rgba(0, 0, 0, 0.8);
}

body.site-ui .newsletter-modal__box {
    max-width: 28rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: #000000;
    box-shadow: none;
    text-align: left;
}

body.site-ui .newsletter-modal__title {
    margin: 0 0 var(--type-title-gap);
    font: var(--type-heading);
    letter-spacing: var(--type-tracking);
    text-transform: uppercase;
}

body.site-ui .newsletter-modal__text {
    margin-bottom: var(--button-gap);
    font: var(--type-lead);
}

/* Portfolio hero: same left-aligned statement as the other heroes ------------- */
body.site-ui .portfolio-hero {
    justify-content: flex-start;
    max-height: none;
    text-align: left;
    padding-top: calc(var(--section-space) * 0.75);
    padding-bottom: calc(var(--section-space) * 0.5);
}

body.site-ui .portfolio-hero .container {
    width: 100%;
    text-align: left;
}

body.site-ui .portfolio-hero .hero-inner {
    max-width: none;
    margin: 0;
    padding: 0;
}

body.site-ui .portfolio-hero .hero-heading {
    max-width: 14em;
    text-wrap: balance;
}

body.site-ui .portfolio-hero .hero-subtitle {
    max-width: 48ch;
    margin-left: 0;
    margin-right: 0;
}

body.site-ui .portfolio-hero .hero-cta {
    align-items: flex-start;
}