.subscription-checkout {
    --checkout-green-dark: #0c3f25;
    --checkout-green: #197241;
    --checkout-green-soft: #f2f7f1;
    --checkout-yellow: #f9d82b;
    --checkout-coral: #ff7950;
    --checkout-bg: #fffdf4;
    --checkout-white: #fff;
    --checkout-muted: #59655d;
    color: var(--checkout-green-dark);
    background: var(--checkout-bg);
    font-family: "Outfit", sans-serif;
    overflow-x: clip;
}

.subscription-checkout *,
.subscription-checkout *::before,
.subscription-checkout *::after {
    box-sizing: border-box;
}

.subscription-container {
    width: min(1180px, calc(100% - 3rem));
    margin: 0 auto;
}

.subscription-hero {
    position: relative;
    padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3.25rem, 5vw, 4.75rem);
    background:
        radial-gradient(circle at 85% 20%, rgba(249, 216, 43, 0.2), transparent 24%),
        radial-gradient(circle at 10% 90%, rgba(25, 114, 65, 0.1), transparent 28%),
        var(--checkout-bg);
    text-align: center;
}

.subscription-hero__inner {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.subscription-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(25, 114, 65, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--checkout-green);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.subscription-eyebrow span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--checkout-yellow);
    box-shadow: 0 0 0 4px rgba(249, 216, 43, 0.18);
}

.subscription-hero h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2.6rem, 5.5vw, 4.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.02;
    text-wrap: balance;
}

.subscription-hero > .subscription-container > p:not(.subscription-eyebrow) {
    max-width: 760px;
    margin: 1.25rem auto 0;
    color: var(--checkout-muted);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.7;
}

.subscription-hero__actions,
.subscription-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.75rem;
}

.subscription-button {
    display: inline-flex;
    min-height: 3.2rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.subscription-button:hover {
    transform: translateY(-2px);
}

.subscription-button--primary {
    background: var(--checkout-green-dark);
    color: #fff;
    box-shadow: 0 12px 28px rgba(12, 63, 37, 0.16);
}

.subscription-button--primary:hover {
    background: var(--checkout-green);
    color: #fff;
}

.subscription-button--outline {
    border-color: rgba(12, 63, 37, 0.3);
    background: rgba(255, 255, 255, 0.7);
    color: var(--checkout-green-dark);
}

.subscription-button--outline:hover {
    border-color: var(--checkout-green);
    background: #fff;
    color: var(--checkout-green);
}

.subscription-hero__assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1.6rem;
    color: var(--checkout-green-dark);
    font-size: 0.9rem;
    font-weight: 650;
}

.subscription-hero__assurance span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.subscription-hero__assurance i {
    color: var(--checkout-green);
}

.subscription-flow {
    padding: 0 0 clamp(5rem, 8vw, 7rem);
}

.checkout-draft-notice {
    display: flex;
    max-width: 960px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto 1.5rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid rgba(25, 114, 65, 0.22);
    border-radius: 1rem;
    background: var(--checkout-green-soft);
    color: var(--checkout-green-dark);
}

.checkout-draft-notice > div {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.86rem;
    line-height: 1.5;
}

.checkout-draft-notice i {
    margin-top: 0.2rem;
    color: var(--checkout-green);
}

.checkout-draft-notice button {
    flex: 0 0 auto;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--checkout-green);
    border-radius: 999px;
    background: #fff;
    color: var(--checkout-green);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;
}

.checkout-draft-notice button:hover:not(:disabled) {
    background: var(--checkout-green-dark);
    color: #fff;
}

.checkout-draft-notice button:disabled {
    opacity: 0.65;
}

.checkout-steps {
    position: relative;
    display: grid;
    max-width: 760px;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
    padding: 0;
    list-style: none;
}

.checkout-steps::before {
    position: absolute;
    top: 1.05rem;
    right: 12.5%;
    left: 12.5%;
    height: 2px;
    background: rgba(12, 63, 37, 0.14);
    content: "";
}

.checkout-steps li {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.65rem;
    color: #849087;
    text-align: center;
}

.checkout-steps__number {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 2px solid #dce2dc;
    border-radius: 50%;
    background: var(--checkout-bg);
    font-size: 0.82rem;
    font-weight: 750;
}

.checkout-steps__label {
    font-size: 0.88rem;
    font-weight: 650;
}

.checkout-steps li.is-active,
.checkout-steps li.is-complete {
    color: var(--checkout-green-dark);
}

.checkout-steps li.is-active .checkout-steps__number {
    border-color: var(--checkout-green-dark);
    background: var(--checkout-green-dark);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(25, 114, 65, 0.1);
}

.checkout-steps li.is-complete .checkout-steps__number {
    border-color: var(--checkout-green);
    background: var(--checkout-green);
    color: #fff;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.checkout-card,
.plan-summary {
    border: 1px solid rgba(12, 63, 37, 0.12);
    background: var(--checkout-white);
    box-shadow: 0 18px 50px rgba(12, 63, 37, 0.07);
}

.checkout-card {
    min-width: 0;
    padding: clamp(1.4rem, 4vw, 3rem);
    border-radius: 1.75rem;
}

.checkout-card__header {
    margin-bottom: 2.25rem;
}

.checkout-card__step,
.plan-summary__eyebrow {
    margin: 0 0 0.65rem;
    color: var(--checkout-green);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.checkout-card__header h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.checkout-card__header > p:last-child {
    max-width: 650px;
    margin: 0.8rem 0 0;
    color: var(--checkout-muted);
    line-height: 1.65;
}

.checkout-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0 0 2rem;
    border: 0;
}

.checkout-fieldset + .checkout-fieldset {
    padding-top: 2rem;
    border-top: 1px solid rgba(12, 63, 37, 0.1);
}

.checkout-fieldset legend {
    margin: 0 0 0.85rem;
    color: var(--checkout-green-dark);
    font-size: 1rem;
    font-weight: 750;
}

.checkout-fieldset__hint {
    margin: -0.4rem 0 1rem;
    color: var(--checkout-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.checkout-options {
    display: grid;
    gap: 0.75rem;
}

.checkout-options--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkout-options--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkout-option,
.goal-option {
    position: relative;
    cursor: pointer;
}

.checkout-option input,
.goal-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.checkout-option > span {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(12, 63, 37, 0.17);
    border-radius: 0.9rem;
    background: #fff;
    color: var(--checkout-green-dark);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.checkout-option:hover > span,
.checkout-option input:focus-visible + span {
    border-color: var(--checkout-green);
}

.checkout-option input:focus-visible + span {
    outline: 3px solid rgba(25, 114, 65, 0.15);
    outline-offset: 2px;
}

.checkout-option.is-selected > span {
    border-color: var(--checkout-green-dark);
    background: var(--checkout-green-dark);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(12, 63, 37, 0.14);
}

.checkout-option.is-selected > span i {
    color: inherit;
}

.goal-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.goal-option {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(12, 63, 37, 0.13);
    border-radius: 1rem;
    background: #fffefb;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.goal-option:hover,
.goal-option:has(input:focus-visible) {
    border-color: var(--checkout-green);
}

.goal-option.is-selected {
    border-color: var(--checkout-green);
    background: var(--checkout-green-soft);
}

.goal-option__check {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    place-items: center;
    margin-top: 0.1rem;
    border: 1.5px solid #b9c5bc;
    border-radius: 50%;
    color: transparent;
    font-size: 0.55rem;
}

.goal-option.is-selected .goal-option__check {
    border-color: var(--checkout-green);
    background: var(--checkout-green);
    color: #fff;
}

.goal-option > span:last-child {
    display: block;
    min-width: 0;
}

.goal-option strong,
.goal-option small {
    display: block;
}

.subscription-addons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.subscription-addon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgba(12, 63, 37, 0.13);
    border-radius: 1rem;
    background: #fffefb;
}

.subscription-addon.is-selected {
    border-color: var(--checkout-green);
    background: var(--checkout-green-soft);
}

.subscription-addon__icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(25, 114, 65, 0.1);
    color: var(--checkout-green);
}

.subscription-addon h3,
.subscription-addon p {
    margin: 0;
}

.subscription-addon h3 {
    font-size: 0.95rem;
}

.subscription-addon p {
    margin-top: 0.25rem;
    color: var(--checkout-muted);
    font-size: 0.76rem;
}

.subscription-addon label span {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--checkout-muted);
    font-size: 0.7rem;
}

.subscription-addon select {
    min-height: 2.55rem;
    padding: 0.45rem 1.8rem 0.45rem 0.65rem;
    border: 1px solid rgba(12, 63, 37, 0.18);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--checkout-green-dark);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
}

.subscription-addon .checkout-error {
    grid-column: 1 / -1;
}

.goal-option strong {
    font-size: 0.92rem;
    line-height: 1.35;
}

.goal-option small {
    margin-top: 0.3rem;
    color: var(--checkout-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.checkout-field {
    min-width: 0;
}

.checkout-field--full {
    grid-column: 1 / -1;
}

.checkout-field label {
    display: block;
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.checkout-field label span {
    color: var(--checkout-muted);
    font-size: 0.76rem;
    font-weight: 500;
}

.checkout-field input,
.checkout-field textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(12, 63, 37, 0.18);
    border-radius: 0.8rem;
    background: #fffefb;
    color: var(--checkout-green-dark);
    font: inherit;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.checkout-field textarea {
    min-height: 7rem;
    resize: vertical;
}

.checkout-field input:focus,
.checkout-field textarea:focus {
    border-color: var(--checkout-green);
    box-shadow: 0 0 0 3px rgba(25, 114, 65, 0.1);
}

.checkout-field > small {
    display: block;
    margin-top: 0.45rem;
    color: var(--checkout-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.location-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
}

.location-input button {
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--checkout-green);
    border-radius: 0.8rem;
    background: #fff;
    color: var(--checkout-green);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.location-input button:hover {
    background: var(--checkout-green-soft);
}

.serviceability-note {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: var(--checkout-green-soft);
}

.serviceability-note > i {
    margin-top: 0.2rem;
    color: var(--checkout-green);
}

.serviceability-note strong,
.serviceability-note span {
    display: block;
}

.serviceability-note strong {
    font-size: 0.9rem;
}

.serviceability-note span {
    margin-top: 0.25rem;
    color: var(--checkout-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.checkout-error {
    margin: 0.5rem 0 0;
    color: #b42318;
    font-size: 0.8rem;
    font-weight: 600;
}

.checkout-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(12, 63, 37, 0.1);
}

.checkout-primary,
.checkout-back,
.payment-success a {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.checkout-primary {
    width: 100%;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--checkout-green-dark);
    background: var(--checkout-green-dark);
    color: #fff;
    box-shadow: 0 10px 24px rgba(12, 63, 37, 0.16);
}

.checkout-primary--compact {
    width: auto;
    min-width: 155px;
}

.checkout-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--checkout-green);
    box-shadow: 0 13px 28px rgba(12, 63, 37, 0.2);
}

.checkout-primary:disabled {
    cursor: wait;
    opacity: 0.7;
}

.checkout-back {
    padding: 0.75rem 0;
    border: 0;
    background: transparent;
    color: var(--checkout-green);
}

.review-section {
    padding: 1.3rem;
    border: 1px solid rgba(12, 63, 37, 0.11);
    border-radius: 1.15rem;
    background: #fffefb;
}

.review-section + .review-section {
    margin-top: 1rem;
}

.review-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.review-section h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
}

.review-section__heading button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--checkout-green);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
}

.review-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 1.1rem 0 0;
}

.review-list div {
    min-width: 0;
}

.review-list dt {
    color: var(--checkout-muted);
    font-size: 0.75rem;
}

.review-list dd {
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-weight: 650;
}

.review-calculation {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(12, 63, 37, 0.1);
    color: var(--checkout-muted);
    font-size: 0.85rem;
}

.review-addons {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(12, 63, 37, 0.1);
}

.review-addons h4,
.review-addons p {
    margin: 0;
}

.review-addons h4 {
    font-size: 0.9rem;
}

.review-addons p {
    margin-top: 0.45rem;
    color: var(--checkout-muted);
    font-size: 0.82rem;
}

.review-addons ul {
    display: grid;
    gap: 0.45rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
}

.review-addons li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--checkout-muted);
    font-size: 0.82rem;
}

.review-addons strong {
    color: var(--checkout-green-dark);
}

.review-calculation strong {
    color: var(--checkout-green-dark);
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    text-align: right;
}

.review-calculation strong small {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--checkout-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.review-assurances {
    display: grid;
    gap: 0.65rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.review-assurances li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--checkout-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.review-assurances i {
    width: 1rem;
    margin-top: 0.15rem;
    color: var(--checkout-green);
    text-align: center;
}

.payment-note {
    margin: 0.75rem auto 0;
    color: var(--checkout-muted);
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: center;
}

.plan-summary {
    position: sticky;
    top: 6.5rem;
    min-width: 0;
    padding: 2rem;
    border-radius: 1.75rem;
    background: var(--checkout-green-dark);
    color: #fff;
}

.plan-summary__eyebrow {
    color: #bad9c8;
}

.plan-summary h2 {
    margin: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 780;
    letter-spacing: -0.03em;
}

.plan-summary dl {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.plan-summary dl div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.plan-summary dt {
    color: #bad0c2;
    font-size: 0.82rem;
}

.plan-summary dd {
    max-width: 62%;
    margin: 0;
    font-size: 0.84rem;
    font-weight: 650;
    text-align: right;
}

.plan-summary__daily {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.plan-summary__daily strong {
    color: var(--checkout-yellow);
    font-size: 2.65rem;
    letter-spacing: -0.05em;
    line-height: 1;
}

.plan-summary__daily span,
.plan-summary__math {
    color: #bad0c2;
}

.plan-summary__math {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
}

.plan-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.plan-summary__total span {
    font-size: 0.86rem;
    font-weight: 650;
}

.plan-summary__total strong {
    font-size: 1.45rem;
}

.plan-summary__delivery {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1.25rem 0 0;
    padding: 0.85rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    color: #d8e6dd;
    font-size: 0.78rem;
    line-height: 1.45;
}

.plan-summary__delivery i {
    margin-top: 0.15rem;
    color: var(--checkout-yellow);
}

.payment-success {
    padding: clamp(1.5rem, 5vw, 3.5rem) 0;
    text-align: center;
}

.payment-success > span {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--checkout-green-soft);
    color: var(--checkout-green);
    font-size: 1.4rem;
}

.payment-success h3 {
    margin: 0;
    font-size: 1.8rem;
}

.payment-success p {
    max-width: 540px;
    margin: 0.85rem auto 1.5rem;
    color: var(--checkout-muted);
    line-height: 1.65;
}

.payment-success a {
    padding: 0.8rem 1.35rem;
    background: var(--checkout-green-dark);
    color: #fff;
}

.subscription-content-section {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.subscription-content-section h2,
.subscription-content-section h3,
.subscription-final-cta h2 {
    color: var(--checkout-green-dark);
    font-family: "Outfit", sans-serif;
}

.subscription-section-eyebrow {
    margin: 0 0 0.9rem;
    color: var(--checkout-green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.subscription-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.subscription-section-heading h2,
.subscription-story__content h2,
.subscription-delivery h2,
.subscription-faq__intro h2,
.subscription-final-cta h2 {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
    text-wrap: balance;
}

.subscription-section-heading > p,
.subscription-section-heading > div + p,
.subscription-section-heading--center > p,
.subscription-section-lead,
.subscription-delivery__inner > div > p:last-child,
.subscription-faq__intro > p {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 1.04rem;
    line-height: 1.75;
}

.subscription-section-heading--center {
    display: block;
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.subscription-section-heading--center h2 {
    margin-bottom: 1rem;
}

.subscription-story {
    background: #fff;
}

.subscription-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.subscription-story__media {
    position: relative;
    min-height: 520px;
}

.subscription-story__media > img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border-radius: 2rem;
    object-fit: cover;
    box-shadow: 0 24px 55px rgba(12, 63, 37, 0.14);
}

.subscription-story__media::before {
    position: absolute;
    z-index: -1;
    right: -1.25rem;
    bottom: -1.25rem;
    width: 55%;
    height: 52%;
    border-radius: 1.75rem;
    background: var(--checkout-yellow);
    content: "";
}

.subscription-story__note {
    position: absolute;
    right: -1.5rem;
    bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 280px;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: var(--checkout-green-dark);
    color: #fff;
    box-shadow: 0 16px 35px rgba(12, 63, 37, 0.22);
}

.subscription-story__note > i {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--checkout-yellow);
    color: var(--checkout-green-dark);
}

.subscription-story__note strong,
.subscription-story__note span {
    display: block;
}

.subscription-story__note strong {
    font-size: 0.9rem;
}

.subscription-story__note span {
    margin-top: 0.18rem;
    color: #d6e4db;
    font-size: 0.76rem;
    line-height: 1.4;
}

.subscription-story__content h2 {
    margin-bottom: 1.25rem;
}

.subscription-checklist {
    display: grid;
    gap: 0.8rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.subscription-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--checkout-green-dark);
    line-height: 1.55;
}

.subscription-checklist i {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    place-items: center;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: rgba(25, 114, 65, 0.12);
    color: var(--checkout-green);
    font-size: 0.65rem;
}

.subscription-inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    margin-top: 2rem;
}

.subscription-inline-links a,
.subscription-delivery__facts > a,
.subscription-faq__intro > a {
    color: var(--checkout-green);
    font-weight: 750;
    text-decoration: none;
}

.subscription-inline-links a:hover,
.subscription-delivery__facts > a:hover,
.subscription-faq__intro > a:hover {
    color: var(--checkout-green-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.subscription-audiences {
    background: var(--checkout-bg);
}

.subscription-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.subscription-audience-grid article {
    padding: 1.5rem;
    border: 1px solid rgba(12, 63, 37, 0.1);
    border-radius: 1.4rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(12, 63, 37, 0.05);
}

.subscription-audience-grid article > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 1rem;
    background: var(--checkout-green-soft);
    color: var(--checkout-green);
    font-size: 1.1rem;
}

.subscription-audience-grid h3,
.subscription-audience-grid p {
    margin: 0;
}

.subscription-audience-grid h3 {
    margin-top: 1.2rem;
    font-size: 1.12rem;
}

.subscription-audience-grid p {
    margin-top: 0.65rem;
    color: var(--checkout-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.subscription-process {
    background: var(--checkout-green-dark);
}

.subscription-process .subscription-section-eyebrow,
.subscription-final-cta .subscription-section-eyebrow {
    color: var(--checkout-yellow);
}

.subscription-process .subscription-section-heading h2,
.subscription-process .subscription-section-heading > p,
.subscription-final-cta h2 {
    color: #fff;
}

.subscription-process .subscription-section-heading > p {
    color: #c8d9ce;
}

.subscription-process__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.subscription-process__steps li {
    position: relative;
    min-width: 0;
    padding: 1.5rem 1.2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.subscription-process__steps li:first-child {
    border-left: 0;
}

.subscription-process__steps li > span {
    color: var(--checkout-yellow);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.subscription-process__steps li > i {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin: 1rem 0 1.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--checkout-yellow);
}

.subscription-process__steps h3,
.subscription-process__steps p {
    margin: 0;
}

.subscription-process__steps h3 {
    color: #fff;
    font-size: 1.05rem;
}

.subscription-process__steps p {
    margin-top: 0.65rem;
    color: #c8d9ce;
    font-size: 0.85rem;
    line-height: 1.6;
}

.subscription-plan-guide {
    background: #fff;
}

.subscription-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.subscription-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border: 1px solid rgba(12, 63, 37, 0.13);
    border-radius: 1.5rem;
    background: var(--checkout-bg);
}

.subscription-plan-card.is-highlighted {
    border-color: var(--checkout-green-dark);
    background: var(--checkout-green-dark);
    color: #fff;
    box-shadow: 0 20px 45px rgba(12, 63, 37, 0.16);
}

.subscription-plan-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--checkout-yellow);
    color: var(--checkout-green-dark);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.subscription-plan-card__duration {
    margin: 0 0 0.65rem;
    color: var(--checkout-green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.subscription-plan-card.is-highlighted .subscription-plan-card__duration {
    color: var(--checkout-yellow);
}

.subscription-plan-card h3,
.subscription-plan-card > p:not(.subscription-plan-card__duration):not(.subscription-plan-card__badge) {
    margin: 0;
}

.subscription-plan-card h3 {
    font-size: 1.55rem;
}

.subscription-plan-card.is-highlighted h3 {
    color: #fff;
}

.subscription-plan-card > p:not(.subscription-plan-card__duration):not(.subscription-plan-card__badge) {
    margin-top: 0.75rem;
    color: var(--checkout-muted);
    line-height: 1.6;
}

.subscription-plan-card.is-highlighted > p:not(.subscription-plan-card__duration):not(.subscription-plan-card__badge) {
    color: #c8d9ce;
}

.subscription-plan-card__price {
    margin: 1.5rem 0;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(12, 63, 37, 0.12);
}

.subscription-plan-card.is-highlighted .subscription-plan-card__price {
    border-color: rgba(255, 255, 255, 0.14);
}

.subscription-plan-card__price span,
.subscription-plan-card__price small {
    display: block;
    color: var(--checkout-muted);
    font-size: 0.76rem;
}

.subscription-plan-card.is-highlighted .subscription-plan-card__price span,
.subscription-plan-card.is-highlighted .subscription-plan-card__price small {
    color: #c8d9ce;
}

.subscription-plan-card__price strong {
    display: block;
    margin: 0.2rem 0;
    color: var(--checkout-green-dark);
    font-size: 2.3rem;
    letter-spacing: -0.045em;
    line-height: 1;
}

.subscription-plan-card.is-highlighted .subscription-plan-card__price strong {
    color: var(--checkout-yellow);
}

.subscription-plan-card > a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--checkout-green);
    font-weight: 750;
    text-decoration: none;
}

.subscription-plan-card.is-highlighted > a {
    color: #fff;
}

.subscription-plan-guide__note {
    margin: 1.5rem 0 0;
    color: var(--checkout-muted);
    text-align: center;
}

.subscription-plan-guide__note a {
    color: var(--checkout-green);
    font-weight: 750;
}

.subscription-delivery {
    background: var(--checkout-bg);
}

.subscription-delivery__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center;
}

.subscription-delivery h2 {
    margin-bottom: 1.15rem;
}

.subscription-delivery__facts {
    display: grid;
    gap: 0.75rem;
}

.subscription-delivery__facts p {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(12, 63, 37, 0.1);
    border-radius: 1rem;
    background: #fff;
    color: var(--checkout-muted);
    line-height: 1.55;
}

.subscription-delivery__facts i {
    width: 1.2rem;
    margin-top: 0.2rem;
    color: var(--checkout-green);
    text-align: center;
}

.subscription-delivery__facts strong {
    color: var(--checkout-green-dark);
}

.subscription-delivery__facts > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.subscription-faq {
    background: #fff;
}

.subscription-faq__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: start;
}

.subscription-faq__intro {
    position: sticky;
    top: 7rem;
}

.subscription-faq__intro h2 {
    margin-bottom: 1rem;
}

.subscription-faq__intro > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.subscription-faq__items {
    border-top: 1px solid rgba(12, 63, 37, 0.14);
}

.subscription-faq details {
    border-bottom: 1px solid rgba(12, 63, 37, 0.14);
}

.subscription-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.3rem 0;
    color: var(--checkout-green-dark);
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 750;
    list-style: none;
}

.subscription-faq summary::-webkit-details-marker {
    display: none;
}

.subscription-faq summary i {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.subscription-faq summary i::before,
.subscription-faq summary i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.8rem;
    height: 2px;
    background: var(--checkout-green);
    content: "";
    transform: translate(-50%, -50%);
}

.subscription-faq summary i::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 160ms ease;
}

.subscription-faq details[open] summary i::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.subscription-faq details > div {
    padding: 0 2.5rem 1.35rem 0;
}

.subscription-faq details p {
    margin: 0;
    color: var(--checkout-muted);
    line-height: 1.7;
}

.subscription-final-cta {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--checkout-green);
}

.subscription-final-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: center;
}

.subscription-final-cta p:last-child {
    max-width: 670px;
    margin: 0.9rem 0 0;
    color: #e1ede5;
    font-size: 1.02rem;
    line-height: 1.65;
}

.subscription-final-cta__actions {
    flex-wrap: nowrap;
    margin-top: 0;
}

.subscription-button--light {
    background: var(--checkout-yellow);
    color: var(--checkout-green-dark);
}

.subscription-button--light:hover {
    background: #ffe569;
    color: var(--checkout-green-dark);
}

.subscription-button--ghost {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.subscription-button--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

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

    .plan-summary {
        position: static;
        grid-row: 1;
    }

    .plan-summary dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-story__grid,
    .subscription-delivery__inner,
    .subscription-faq__grid,
    .subscription-final-cta__inner {
        grid-template-columns: 1fr;
    }

    .subscription-story__media {
        width: min(620px, calc(100% - 1.5rem));
    }

    .subscription-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscription-process__steps li,
    .subscription-process__steps li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }

    .subscription-process__steps li:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .subscription-plan-grid {
        grid-template-columns: 1fr;
    }

    .subscription-faq__intro {
        position: static;
    }

    .subscription-final-cta__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .checkout-draft-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .checkout-draft-notice button {
        align-self: flex-start;
    }

    .subscription-container {
        width: min(100% - 2rem, 1180px);
    }

    .subscription-hero {
        padding: 3.5rem 0 3rem;
    }

    .checkout-card,
    .plan-summary {
        border-radius: 1.3rem;
    }

    .goal-options,
    .subscription-addons,
    .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-field--full {
        grid-column: auto;
    }

    .location-input {
        grid-template-columns: 1fr;
    }

    .review-list {
        grid-template-columns: 1fr;
    }

    .subscription-section-heading {
        display: block;
    }

    .subscription-section-heading > p,
    .subscription-section-heading > div + p {
        margin-top: 1rem;
    }

    .subscription-process__steps li,
    .subscription-process__steps li:nth-child(even),
    .subscription-process__steps li:first-child {
        display: grid;
        grid-template-columns: 2.65rem minmax(0, 1fr);
        column-gap: 0.9rem;
        row-gap: 0.45rem;
        padding: 1.35rem 0;
        border-top: 0;
        border-left: 0;
    }

    .subscription-process__steps li:not(:first-child)::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 3.55rem;
        height: 1px;
        background: rgba(255, 255, 255, 0.14);
        content: '';
    }

    .subscription-process__steps li > span {
        display: grid;
        grid-row: 1 / span 2;
        width: 2.65rem;
        height: 2.65rem;
        place-items: center;
        align-self: start;
        border: 1px solid rgba(246, 210, 55, 0.48);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        letter-spacing: 0.04em;
    }

    .subscription-process__steps li > i {
        display: none;
    }

    .subscription-process__steps h3,
    .subscription-process__steps p {
        grid-column: 2;
    }

    .subscription-process__steps h3 {
        align-self: end;
        padding-top: 0.05rem;
    }

    .subscription-process__steps p {
        margin-top: 0;
    }

    .subscription-story__media,
    .subscription-story__media > img {
        min-height: 430px;
    }
}

@media (max-width: 480px) {
    .subscription-container {
        width: min(100% - 1.25rem, 1180px);
    }

    .subscription-hero h1 {
        font-size: 2.45rem;
    }

    .subscription-hero__assurance {
        align-items: center;
        flex-direction: column;
    }

    .subscription-hero__actions,
    .subscription-final-cta__actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-button {
        width: 100%;
    }

    .checkout-steps {
        margin-bottom: 1.7rem;
    }

    .checkout-steps__label {
        font-size: 0.66rem;
    }

    .checkout-card {
        padding: 1.15rem;
    }

    .checkout-card__header {
        margin-bottom: 1.65rem;
    }

    .checkout-options--three,
    .checkout-options--two {
        grid-template-columns: 1fr;
    }

    .checkout-option > span {
        min-height: 3.1rem;
    }

    .subscription-addon {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .subscription-addon label {
        grid-column: 1 / -1;
    }

    .plan-summary {
        padding: 1.4rem;
    }

    .plan-summary dl {
        grid-template-columns: 1fr;
    }

    .review-calculation {
        align-items: flex-start;
        flex-direction: column;
    }

    .review-calculation strong {
        text-align: left;
    }

    .checkout-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .checkout-primary--compact {
        width: 100%;
    }

    .subscription-content-section {
        padding: 4rem 0;
    }

    .subscription-story__media {
        width: calc(100% - 0.75rem);
        min-height: 360px;
    }

    .subscription-story__media > img {
        min-height: 360px;
        border-radius: 1.35rem;
    }

    .subscription-story__note {
        right: -0.75rem;
        bottom: 1rem;
        max-width: 245px;
    }

    .subscription-audience-grid,
    .subscription-process__steps {
        grid-template-columns: 1fr;
    }

    .subscription-process__steps li,
    .subscription-process__steps li:nth-child(even),
    .subscription-process__steps li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }

    .subscription-process__steps li:first-child {
        border-top: 0;
    }

    .subscription-plan-card__badge {
        position: static;
        align-self: flex-start;
        margin-bottom: 1rem;
    }

    .subscription-faq details > div {
        padding-right: 0;
    }
}