:root {
    --dc-background:#eee8dc;
    --dc-surface:#f7f3ea;
    --dc-card:#ffffff;
    --dc-text:#272820;
    --dc-muted:#66665d;
    --dc-accent:#55614b;
    --dc-border:rgba(39,40,32,.14);
    --dc-radius:20px;
    --dc-max-width:920px;
    --dc-heading:
        Georgia,
        "Times New Roman",
        serif;
    --dc-body:
        Arial,
        Helvetica,
        sans-serif;
}

* {
    box-sizing:border-box;
}

html {
    background:var(--dc-background);
    color:var(--dc-text);
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body {
    margin:0;
    min-width:320px;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255,255,255,.7),
            transparent 38%
        ),
        var(--dc-background);
    color:var(--dc-text);
    font-family:var(--dc-body);
    -webkit-font-smoothing:antialiased;
}

button,
input {
    font:inherit;
}

button {
    cursor:pointer;
}

.page {
    width:min(
        100%,
        var(--dc-max-width)
    );
    margin:0 auto;
    padding:42px 16px 48px;
}

.hero {
    max-width:680px;
    margin:0 auto 48px;
    text-align:center;
}

.eyebrow,
.section-kicker,
.summary-kicker {
    margin:0 0 12px;
    color:var(--dc-accent);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.22em;
}

.hero h1 {
    margin:0;
    font-family:var(--dc-heading);
    font-size:clamp(
        2.5rem,
        9vw,
        4.8rem
    );
    font-weight:400;
    line-height:.98;
    letter-spacing:-.045em;
}

.hero-copy {
    max-width:540px;
    margin:20px auto 0;
    color:var(--dc-muted);
    font-size:1rem;
    line-height:1.6;
}

.section-heading {
    margin:0 0 22px;
}

.section-heading h2,
.summary-card h2 {
    margin:0;
    font-family:var(--dc-heading);
    font-size:clamp(
        1.8rem,
        6vw,
        2.6rem
    );
    font-weight:400;
    line-height:1.05;
}

.plans-section {
    margin-bottom:52px;
}

.plans-grid {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:14px;
}

.plan-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:22px;
    border:1px solid var(--dc-border);
    border-radius:var(--dc-radius);
    background:var(--dc-surface);
}

.plan-code {
    margin:0;
    font-family:var(--dc-heading);
    font-size:1.45rem;
}

.plan-description {
    min-height:78px;
    margin:12px 0 20px;
    color:var(--dc-muted);
    font-size:.9rem;
    line-height:1.5;
}

.price-block {
    display:grid;
    gap:12px;
    margin-top:auto;
    padding-top:18px;
    border-top:
        1px solid
        var(--dc-border);
}

.price-block div {
    display:flex;
    align-items:baseline;
    justify-content:
        space-between;
    gap:12px;
}

.price-block span {
    color:var(--dc-muted);
    font-size:.76rem;
}

.price-block strong {
    text-align:right;
    font-size:1rem;
}

.price-block small {
    color:var(--dc-muted);
    font-size:.72rem;
    font-weight:400;
}

.choose-plan,
.continue-button,
.secondary-button {
    width:100%;
    min-height:48px;
    margin-top:20px;
    border:0;
    border-radius:12px;
    background:#181818;
    color:#fff;
    font-weight:700;
    text-decoration:none;
}

.choose-plan.is-selected {
    background:var(--dc-accent);
}

.form-section {
    max-width:680px;
    margin:0 auto;
    scroll-margin-top:24px;
}

.contract-form,
.summary-card {
    padding:24px;
    border:1px solid var(--dc-border);
    border-radius:var(--dc-radius);
    background:var(--dc-card);
}

.contract-form {
    display:grid;
    gap:17px;
}

.contract-form label {
    display:grid;
    gap:7px;
    font-size:.82rem;
    font-weight:700;
}

.contract-form input {
    width:100%;
    min-height:48px;
    padding:11px 13px;
    border:
        1px solid
        rgba(39,40,32,.2);
    border-radius:11px;
    outline:none;
    background:#fff;
    color:var(--dc-text);
    font-size:16px;
}

.contract-form input:focus {
    border-color:
        var(--dc-accent);
    box-shadow:
        0 0 0 3px
        rgba(85,97,75,.12);
}

.selected-plan {
    padding:14px 16px;
    border-radius:13px;
    background:#f1f4ef;
}

.selected-plan span {
    display:block;
    margin-bottom:4px;
    color:var(--dc-muted);
    font-size:.72rem;
}

.continue-button {
    margin-top:4px;
}

.continue-button:disabled {
    cursor:not-allowed;
    opacity:.42;
}

.form-note {
    margin:0;
    color:var(--dc-muted);
    text-align:center;
    font-size:.76rem;
}

.error-box {
    margin:0 0 15px;
    padding:13px 15px;
    border-radius:12px;
    background:#fff0f0;
    font-size:.85rem;
}

.summary-card {
    max-width:680px;
    margin:40px auto;
}

.summary-grid {
    display:grid;
    grid-template-columns:
        1fr 1fr;
    gap:1px;
    margin:26px 0;
    overflow:hidden;
    border:
        1px solid
        var(--dc-border);
    border-radius:14px;
    background:
        var(--dc-border);
}

.summary-grid div {
    min-width:0;
    padding:16px;
    background:#fff;
}

.summary-grid span {
    display:block;
    margin-bottom:5px;
    color:var(--dc-muted);
    font-size:.72rem;
}

.summary-grid strong {
    display:block;
    overflow-wrap:anywhere;
}

.safe-note {
    margin:18px 0 0;
    padding:13px 15px;
    border-radius:12px;
    background:#eef7ee;
    font-size:.84rem;
}

.secondary-button {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#181818;
    border:1px solid var(--dc-border);
}

.footer {
    margin-top:60px;
    padding-top:20px;
    text-align:center;
}

.footer div {
    width:42px;
    height:1px;
    margin:0 auto 18px;
    background:
        var(--dc-accent);
    opacity:.5;
}

.footer p {
    margin:0;
    font-family:var(--dc-heading);
    font-size:1rem;
}

.footer span {
    display:block;
    margin-top:5px;
    color:var(--dc-muted);
    font-size:.7rem;
}

@media (
    max-width:760px
) {
    .page {
        padding:
            34px 14px
            38px;
    }

    .hero {
        margin-bottom:38px;
    }

    .plans-grid {
        grid-template-columns:
            1fr;
    }

    .plan-description {
        min-height:0;
    }
}

@media (
    max-width:440px
) {
    .summary-grid {
        grid-template-columns:
            1fr;
    }

    .contract-form,
    .summary-card {
        padding:18px;
    }
}