:root {
    --ink: #172033;
    --muted: #667085;
    --line: #e4e9f1;
    --surface: rgba(255, 255, 255, 0.94);
    --primary: #1959d1;
    --primary-dark: #1045aa;
    --teal: #0b8f83;
    --danger: #c9363e;
    --warning: #b66b06;
    --shadow: 0 28px 80px rgba(20, 40, 80, 0.13);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: #f4f7fb;
    font-family: "DM Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.embed-mode { min-width: 0; background: transparent; }
.embed-shell { min-height: 0; overflow: visible; }
.embed-mode .main-content { display: block; padding: 0; }
.embed-form { width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.embed-form #dynamic-form { padding: 24px; }
.embed-form .form-alert { margin: 0 24px 20px; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.page-shell {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
}

.ambient {
    position: fixed;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .55;
}

.ambient-one { top: -290px; right: -150px; background: radial-gradient(circle, #b6d7ff, transparent 68%); }
.ambient-two { bottom: -360px; left: -160px; background: radial-gradient(circle, #b4ebe2, transparent 68%); }

.site-header {
    display: flex;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 25px 0;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-family: Manrope, sans-serif;
    font-weight: 800;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    box-shadow: 0 8px 22px rgba(25, 89, 209, .25);
}

.brand-mark svg, .secure-label svg, .button svg { width: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.secure-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #557087;
    font-size: .86rem;
    font-weight: 600;
}

.secure-label svg { width: 17px; }
.main-content { display: grid; flex: 1; width: 100%; padding: 25px 20px 55px; place-items: start center; }

.form-card, .state-card {
    width: min(960px, 100%);
    border: 1px solid rgba(218, 226, 238, .9);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.form-card { overflow: hidden; }
.form-heading { padding: 42px 48px 32px; background: linear-gradient(145deg, rgba(232, 241, 255, .75), rgba(232, 250, 247, .7)); }
.eyebrow { margin: 0 0 9px; color: var(--primary); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { font-family: Manrope, sans-serif; }
h1 { margin: 0; font-size: clamp(1.85rem, 4vw, 2.65rem); line-height: 1.12; letter-spacing: -.035em; }
.form-description { max-width: 720px; margin: 14px 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }

.step-navigation { display: flex; padding: 22px 48px; gap: 8px; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid var(--line); }
.step-pill { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; color: #7b8494; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.step-pill::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid #bdc7d7; border-radius: 50%; background: white; }
.step-pill.active { color: var(--primary); }
.step-pill.active::before { border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px rgba(25,89,209,.13); }
.step-pill.complete { color: var(--teal); }
.step-pill.complete::before { border-color: var(--teal); background: var(--teal); }

#dynamic-form { padding: 38px 48px 34px; }
.step-header { margin-bottom: 28px; }
.step-kicker { margin: 0 0 5px; color: var(--teal); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.step-title { margin: 0; font-size: 1.45rem; }
.step-description { margin: 7px 0 0; color: var(--muted); line-height: 1.55; }
.fields-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 18px; align-items: start; }
.field-wrap { min-width: 0; grid-column: span 6; }
.width-1-6 { grid-column: span 1; }
.width-2-6 { grid-column: span 2; }
.width-3-6 { grid-column: span 3; }
.width-4-6 { grid-column: span 4; }
.width-5-6 { grid-column: span 5; }
.width-6-6 { grid-column: span 6; }
.position-center { justify-self: center; width: 100%; }
.position-right { justify-self: end; width: 100%; }
.align-center { text-align: center; }
.align-right { text-align: right; }

.field-label { display: block; margin-bottom: 7px; color: #303a4c; font-size: .9rem; font-weight: 700; }
.required-mark { color: var(--danger); }
.field-help { margin: 7px 1px 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.control {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #cfd7e4;
    border-radius: 10px;
    outline: none;
    color: var(--ink);
    background: white;
    transition: border-color .16s, box-shadow .16s;
}
.control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25, 89, 209, .12); }
.control[disabled] { color: #8b94a4; background: #f0f3f7; cursor: not-allowed; }
textarea.control { min-height: 112px; resize: vertical; }
.field-invalid .control, .field-invalid .choice-card { border-color: var(--danger); }
.field-error { margin-top: 6px; color: var(--danger); font-size: .79rem; font-weight: 600; }
.is-condition-pending { display: none; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; }
.choice-card { display: flex; min-height: 48px; padding: 11px 13px; align-items: flex-start; gap: 10px; border: 1px solid #d7deea; border-radius: 11px; background: white; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.choice-card:hover { border-color: #9ab6e9; transform: translateY(-1px); }
.choice-card:has(input:checked) { border-color: var(--primary); background: #f2f6ff; box-shadow: 0 0 0 2px rgba(25,89,209,.08); }
.choice-card input { margin: 3px 0 0; accent-color: var(--primary); }
.choice-selector { display: flex; flex: 1; align-items: flex-start; gap: 10px; cursor: pointer; }
.choice-card-quantity { flex-direction: column; cursor: default; }
.query-quantity-field { display: flex; width: 100%; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; }
.query-quantity-field .control { width: 110px; margin-left: auto; padding: 8px 10px; }
.query-quantity-select { width: min(320px, 100%); margin-top: 10px; }
.choice-label { display: block; font-weight: 600; }
.choice-price { display: block; margin-top: 4px; color: var(--teal); font-size: .84rem; font-weight: 700; }

.content-block { padding: 15px 17px; border-left: 4px solid #91a4bd; border-radius: 10px; background: #f5f7fa; line-height: 1.6; }
.content-block h3 { margin: 0 0 5px; font-size: 1rem; }
.content-info { border-color: #2878cf; background: #edf6ff; }
.content-success { border-color: #138b70; background: #edfaf6; }
.content-warning { border-color: #d78a16; background: #fff8e8; }
.content-error { border-color: #ce4850; background: #fff1f2; }
.success-panel { text-align: center; }
.success-panel h3 { font-size: 1.25rem; }
.success-reset-button { margin-top: 12px; }

.summary-panel { display: grid; gap: 16px; }
.summary-section { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe; }
.summary-section h3 { margin: 0 0 13px; font-size: 1rem; }
.summary-row { display: flex; padding: 8px 0; justify-content: space-between; gap: 20px; border-top: 1px dashed #d9e0eb; font-size: .9rem; }
.summary-row:first-of-type { border-top: 0; }
.summary-row span:first-child { color: var(--muted); }
.summary-total { padding: 20px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--primary), var(--teal)); }
.summary-total-row { display: flex; justify-content: space-between; gap: 20px; }
.summary-total-row + .summary-total-row { margin-top: 7px; }
.summary-total-row:last-child { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.35); font-size: 1.12rem; font-weight: 800; }

.form-alert { margin: 24px 48px 0; padding: 13px 15px; border: 1px solid #f0c4c7; border-radius: 10px; color: #9e252d; background: #fff3f4; font-size: .9rem; }
.form-alert-bottom, .embed-form .form-alert-bottom { margin: 28px 0 0; }
.form-alert-bottom + .form-actions { margin-top: 16px; }
.form-actions { display: flex; margin-top: 36px; padding-top: 24px; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.button { display: inline-flex; min-height: 45px; padding: 10px 18px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; font-weight: 700; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--primary); box-shadow: 0 8px 18px rgba(25,89,209,.22); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: #465268; background: #edf1f6; }
.button[hidden] { display: none; }
.step-counter { color: var(--muted); font-size: .82rem; font-weight: 600; }

.state-card { max-width: 620px; margin-top: 7vh; padding: 58px 45px; text-align: center; }
.state-card h1 { font-size: clamp(1.65rem, 4vw, 2.2rem); }
.state-card > p:last-child { max-width: 440px; margin: 14px auto 0; color: var(--muted); line-height: 1.65; }
.state-icon { display: grid; width: 62px; height: 62px; margin: 0 auto 22px; place-items: center; border-radius: 20px; color: #7b8ba3; background: #eef2f7; }
.state-icon svg { width: 31px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.site-footer { display: flex; padding: 0 20px 25px; justify-content: center; gap: 5px; color: #7d8796; font-size: .78rem; text-align: center; }
.site-footer a { color: var(--primary); font-weight: 700; text-underline-offset: 2px; }
.embed-footer { padding: 8px 14px 14px; flex-wrap: wrap; background: transparent; }

.legal-main { padding-top: 12px; }
.legal-card { width: min(900px, 100%); padding: 44px 48px; border: 1px solid rgba(218, 226, 238, .9); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.legal-card h1 { margin-bottom: 10px; }
.legal-intro { margin: 0 0 34px; color: var(--muted); line-height: 1.65; }
.legal-section + .legal-section { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-section h2 { margin: 0 0 14px; font-size: 1.25rem; }
.legal-section h3 { margin: 22px 0 8px; font-size: 1rem; }
.legal-section p, .legal-section li { color: #465268; line-height: 1.7; }
.legal-section p { margin: 9px 0; }
.legal-section ul { margin: 10px 0; padding-left: 21px; }
.legal-section a { color: var(--primary); }
.legal-details { display: grid; grid-template-columns: minmax(150px, .45fr) 1fr; margin: 0; gap: 0; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.legal-details dt, .legal-details dd { margin: 0; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.legal-details dt { color: #344054; background: #f7f9fc; font-weight: 700; }
.legal-details dd { color: #465268; }
.legal-details dt:last-of-type, .legal-details dd:last-of-type { border-bottom: 0; }
.legal-updated { margin-top: 34px; color: var(--muted); font-size: .82rem; }

@media (max-width: 700px) {
    .site-header { width: calc(100% - 28px); padding: 17px 0; }
    .secure-label span { display: none; }
    .main-content { padding: 10px 12px 32px; }
    .form-card, .state-card { border-radius: 17px; }
    .form-heading { padding: 29px 22px 24px; }
    .step-navigation { padding: 17px 22px; }
    .step-pill { flex: 0 0 auto; }
    #dynamic-form { padding: 27px 22px 24px; }
    .form-alert { margin: 18px 22px 0; }
    .fields-grid { display: block; }
    .field-wrap + .field-wrap { margin-top: 20px; }
    .form-actions { flex-wrap: wrap; }
    .step-counter { order: -1; width: 100%; text-align: center; }
    .button { flex: 1; }
    .state-card { padding: 42px 24px; }
    .embed-form #dynamic-form { padding: 18px 14px; }
    .embed-form .form-alert { margin: 0 14px 16px; }
    .embed-form .form-alert-bottom { margin: 24px 0 0; }
    .site-footer { flex-direction: column; }
    .legal-card { padding: 30px 22px; border-radius: 17px; }
    .legal-details { display: block; }
    .legal-details dt { padding-bottom: 3px; border-bottom: 0; }
    .legal-details dd { padding-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}