:root {
    --distrato-bg: #f3f1eb;
    --distrato-surface: #ffffff;
    --distrato-surface-soft: #f8f6f1;
    --distrato-ink: #162432;
    --distrato-muted: #5c6c78;
    --distrato-line: #d7dedf;
    --distrato-accent: #9f6b22;
    --distrato-accent-soft: #f3eadb;
    --distrato-success: #1f6b4f;
    --distrato-danger: #a03d31;
    --distrato-shadow: 0 20px 50px rgba(22, 36, 50, 0.08);
    --distrato-radius: 24px;
}

.distrato-shell {
    padding: clamp(14px, 3vw, 32px);
    background:
        radial-gradient(circle at top left, rgba(159, 107, 34, 0.08), transparent 28%),
        linear-gradient(180deg, #efece4 0%, #f5f6f4 100%);
    color: var(--distrato-ink);
    overflow-x: clip;
}

.distrato-shell * {
    box-sizing: border-box;
}

.distrato-shell img,
.distrato-shell canvas {
    max-width: 100%;
}

.distrato-stage {
    display: grid;
    gap: 20px;
    width: min(100%, 1200px);
    max-width: 100%;
    margin: 0 auto;
}

.distrato-stage > *,
.distrato-summary-grid > *,
.distrato-grid > *,
.distrato-clause-grid > * {
    min-width: 0;
    max-width: 100%;
}

.distrato-topbar,
.distrato-hero,
.distrato-card,
.distrato-access-card,
.distrato-payment,
.distrato-clause,
.distrato-panel,
.distrato-stat {
    border: 1px solid var(--distrato-line);
    border-radius: var(--distrato-radius);
    background: var(--distrato-surface);
    box-shadow: var(--distrato-shadow);
}

.distrato-topbar,
.distrato-hero,
.distrato-card,
.distrato-access-card {
    padding: clamp(20px, 3vw, 34px);
}

.distrato-access-card {
    width: min(100%, 560px);
    max-width: 100%;
    margin: 0 auto;
}

.distrato-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding-block: 18px;
}

.distrato-topbar p {
    margin: 10px 0 0;
    color: var(--distrato-muted);
    font: 600 0.95rem/1.5 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    max-width: 100%;
    border-radius: 999px;
    background: var(--distrato-accent-soft);
    color: var(--distrato-accent);
    font: 700 11px/1 "Avenir Next", "Segoe UI", sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: normal;
}

.distrato-hero h1,
.distrato-section-head h2,
.distrato-card h3,
.distrato-clause h3,
.distrato-access-card h1 {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    letter-spacing: -0.02em;
    color: var(--distrato-ink);
}

.distrato-hero h1,
.distrato-access-card h1 {
    margin-top: 18px;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.04;
}

.distrato-hero__lead,
.distrato-access-card__lead {
    max-width: 780px;
    margin: 18px 0 0;
    color: var(--distrato-muted);
    font: 500 1rem/1.72 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-summary-grid,
.distrato-grid {
    display: grid;
    gap: 16px;
}

.distrato-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-top: 24px;
}

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

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

.distrato-stat,
.distrato-panel,
.distrato-payment,
.distrato-clause {
    padding: 22px;
}

.distrato-stat span,
.distrato-payment__brand {
    display: block;
    margin-bottom: 10px;
    color: var(--distrato-muted);
    font: 700 0.78rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.distrato-stat strong,
.distrato-payment strong {
    display: block;
    color: var(--distrato-ink);
    font: 700 clamp(1.1rem, 2vw, 1.45rem)/1.3 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-section-head {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.distrato-section-head h2 {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    line-height: 1.08;
}

.distrato-panel,
.distrato-payment,
.distrato-clause {
    background: var(--distrato-surface-soft);
}

.distrato-panel--highlight {
    background: linear-gradient(180deg, #f6efe4, #fffdf9);
}

.distrato-panel h3,
.distrato-clause h3 {
    margin-bottom: 12px;
    font-size: 1.16rem;
}

.distrato-panel h4 {
    margin: 18px 0 8px;
    color: var(--distrato-muted);
    font: 700 0.78rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.distrato-panel p,
.distrato-clause p,
.distrato-note,
.distrato-list,
.distrato-field span,
.distrato-check span,
.distrato-payment p,
.distrato-feedback {
    margin: 0;
    color: var(--distrato-ink);
    font: 500 0.98rem/1.72 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-hero h1,
.distrato-access-card h1,
.distrato-section-head h2,
.distrato-card h3,
.distrato-clause h3,
.distrato-panel p,
.distrato-clause p,
.distrato-list li,
.distrato-note,
.distrato-feedback,
.distrato-link-button,
.distrato-button,
.distrato-total strong,
.distrato-total span,
.distrato-list strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.distrato-list {
    display: grid;
    gap: 10px;
    padding-left: 20px;
}

.distrato-list--ordered {
    padding-left: 24px;
}

.distrato-clause-grid {
    display: grid;
    gap: 16px;
}

.distrato-total {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--distrato-accent-soft);
    color: var(--distrato-ink);
}

.distrato-finance-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.distrato-finance-breakdown div {
    padding: 14px;
    border: 1px solid var(--distrato-line);
    border-radius: 16px;
    background: var(--distrato-surface-soft);
}

.distrato-finance-breakdown span,
.distrato-finance-breakdown strong {
    display: block;
}

.distrato-finance-breakdown span {
    margin-bottom: 6px;
    color: var(--distrato-muted);
    font: 700 0.75rem/1.35 "Avenir Next", "Segoe UI", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.distrato-finance-breakdown strong {
    color: var(--distrato-ink);
    font: 800 1rem/1.35 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-total span {
    font: 700 0.84rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.distrato-total strong {
    font: 700 clamp(1.35rem, 2vw, 1.8rem)/1.2 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-note {
    margin-top: 14px;
    color: var(--distrato-muted);
}

.distrato-form,
.distrato-login-form {
    display: grid;
    gap: 16px;
}

.distrato-field {
    display: grid;
    gap: 8px;
}

.distrato-field input {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px solid var(--distrato-line);
    border-radius: 16px;
    background: #ffffff;
    color: var(--distrato-ink);
    font: 600 0.98rem/1.3 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-signature-pad {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--distrato-line);
    border-radius: 22px;
    background: #fcfbf8;
}

.distrato-signature-pad__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    color: var(--distrato-muted);
    font: 700 0.9rem/1.4 "Avenir Next", "Segoe UI", sans-serif;
}

#distrato-signature-canvas {
    display: block;
    width: 100%;
    min-height: 240px;
    border: 1px dashed #b8c4c8;
    border-radius: 18px;
    background: #ffffff;
    touch-action: none;
    cursor: crosshair;
}

.distrato-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--distrato-line);
    border-radius: 18px;
    background: #fbfaf6;
}

.distrato-check input {
    margin-top: 3px;
}

.distrato-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.distrato-button,
.distrato-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    max-width: 100%;
    border-radius: 999px;
    text-decoration: none;
    font: 700 0.95rem/1 "Avenir Next", "Segoe UI", sans-serif;
    text-align: center;
}

.distrato-button {
    border: 0;
    cursor: pointer;
}

.distrato-button--primary,
.distrato-link-button {
    background: #162432;
    color: #ffffff;
}

.distrato-button--secondary {
    background: #ffffff;
    color: var(--distrato-ink);
    border: 1px solid var(--distrato-line);
}

.distrato-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--distrato-accent);
    font: 700 0.9rem/1 "Avenir Next", "Segoe UI", sans-serif;
    cursor: pointer;
}

.distrato-alert {
    padding: 14px 16px;
    border-radius: 16px;
    font: 700 0.92rem/1.5 "Avenir Next", "Segoe UI", sans-serif;
}

.distrato-alert--error,
.distrato-feedback.is-error {
    background: #fdf0ed;
    color: var(--distrato-danger);
}

.distrato-feedback.is-success {
    color: var(--distrato-success);
}

.distrato-card--success {
    background: linear-gradient(180deg, #ffffff, #f2f8f4);
}

.distrato-signed-image {
    display: block;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--distrato-line);
    border-radius: 18px;
    background: #ffffff;
}

@media (max-width: 980px) {
    .distrato-summary-grid,
    .distrato-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .distrato-shell {
        padding: 12px;
    }

    .distrato-grid--2,
    .distrato-summary-grid {
        grid-template-columns: 1fr;
    }

    .distrato-topbar,
    .distrato-signature-pad__head,
    .distrato-form__actions,
    .distrato-total {
        flex-direction: column;
        align-items: stretch;
    }

    #distrato-signature-canvas {
        min-height: 220px;
    }
}

@media print {
    .distrato-shell {
        padding: 0;
        background: #ffffff;
    }

    .distrato-topbar,
    .distrato-button,
    .distrato-link,
    .distrato-link-button {
        display: none !important;
    }

    .distrato-topbar,
    .distrato-hero,
    .distrato-card,
    .distrato-access-card,
    .distrato-payment,
    .distrato-clause,
    .distrato-panel,
    .distrato-stat {
        box-shadow: none;
        border-color: #d9d9d9;
        background: #ffffff;
    }
}