.checkout-page { min-height: 100vh; background: #f4f1e9; }
.checkout-header { background: rgba(255,253,248,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.checkout-header-inner { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.hold-indicator { display: flex; align-items: center; gap: 9px; padding: 8px 13px; background: #edf3d1; border-radius: 99px; }.hold-pulse { width: 8px; height: 8px; border-radius: 50%; background: #67a84d; box-shadow: 0 0 0 5px rgba(103,168,77,.12); }.hold-indicator p,.hold-indicator small,.hold-indicator strong { display: block; margin: 0; }.hold-indicator small { color: var(--ink-soft); font-size: 7px; text-transform: uppercase; letter-spacing: .5px; }.hold-indicator strong { font-size: 12px; }.hold-indicator.expired { background: #f5d6ce; }.hold-indicator.expired .hold-pulse { background: #cf5a4c; }
.checkout-exit { color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.checkout-layout { display: grid; grid-template-columns: 180px minmax(0,680px) 285px; justify-content: center; gap: 45px; padding-top: 52px; padding-bottom: 90px; }
.checkout-steps { align-self: start; position: sticky; top: 25px; }.checkout-steps ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.checkout-steps li { position: relative; display: flex; align-items: start; gap: 11px; min-height: 69px; color: #98a19f; }.checkout-steps li:not(:last-child)::after { content: ""; position: absolute; top: 29px; bottom: 0; left: 13px; width: 1px; background: #ccd0cb; }.checkout-steps li > span { position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #ccd0cb; border-radius: 50%; background: #f4f1e9; font-size: 9px; font-weight: 800; }.checkout-steps li p,.checkout-steps li strong,.checkout-steps li small { display: block; margin: 0; }.checkout-steps li strong { margin-top: 2px; font-size: 10px; }.checkout-steps li small { margin-top: 1px; font-size: 7px; }.checkout-steps li.active,.checkout-steps li.complete { color: var(--ink); }.checkout-steps li.active > span { background: var(--ink); border-color: var(--ink); color: white; }.checkout-steps li.complete > span { background: var(--lime); border-color: var(--lime); font-size: 0; }.checkout-steps li.complete > span::after { content: "✓"; font-size: 10px; }.checkout-steps li.complete::after { background: #91a449; }
.stub-legend { display: flex; gap: 9px; margin-top: 25px; padding: 12px; background: var(--lilac); border-radius: 13px; }.stub-legend > span { align-self: start; padding: 4px 5px; border-radius: 5px; background: var(--ink); color: white; font-size: 7px; font-weight: 900; }.stub-legend p,.stub-legend strong,.stub-legend small { display: block; margin: 0; }.stub-legend strong { font-size: 8px; }.stub-legend small { margin-top: 2px; color: var(--ink-soft); font-size: 7px; line-height: 1.35; }
.checkout-flow { min-width: 0; }.flow-progress { height: 4px; margin-bottom: 35px; overflow: hidden; background: #dcddd8; border-radius: 99px; }.flow-progress span { display: block; width: 25%; height: 100%; background: var(--ink); transition: width .35s; }
.checkout-step { display: none; }.checkout-step.active { display: block; animation: stepIn .3s ease; }.checkout-step h1 { margin: 0; font-size: clamp(39px,4.3vw,56px); line-height: 1.03; letter-spacing: -3.4px; }.step-lead { max-width: 590px; margin: 17px 0 30px; color: var(--ink-soft); font-size: 13px; }
.step-form { display: grid; gap: 17px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.field > span { display: block; margin: 0 0 6px 3px; font-size: 9px; font-weight: 800; }.field > span small { color: var(--ink-soft); font-weight: 500; }.field input { width: 100%; height: 53px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); outline: none; }.field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(24,48,43,.07); }
.privacy-callout { display: flex; align-items: center; gap: 13px; padding: 15px; background: var(--lilac); border-radius: 14px; }.privacy-callout > span { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%; font: 23px Georgia,serif; }.privacy-callout p,.privacy-callout strong,.privacy-callout small { display: block; margin: 0; }.privacy-callout strong { font-size: 10px; }.privacy-callout small { color: var(--ink-soft); font-size: 8px; }
.check-field { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }.check-field input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }.check-field span,.check-field strong,.check-field small { display: block; }.check-field strong { font-size: 10px; }.check-field small { color: var(--ink-soft); font-size: 8px; }.check-field button { align-self: center; padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 8px; text-decoration: underline; }
.step-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; padding-top: 20px; border-top: 1px solid var(--line); }.back-link { padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 10px; font-weight: 700; }.step-actions .button { min-width: 170px; }
.choice-field,.safety-field,.scenario-selector { margin: 0; padding: 0; border: 0; }.choice-field legend,.safety-field legend { margin-bottom: 11px; font-size: 12px; font-weight: 800; }.large-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.large-choices input,.pill-choices input,.scenario-selector input { position: absolute; opacity: 0; pointer-events: none; }.large-choices label,.pill-choices label,.scenario-selector label { cursor: pointer; }.large-choices span { min-height: 57px; display: flex; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 10px; font-weight: 700; }.large-choices input:checked + span { background: var(--lime); border-color: var(--lime); }
.pill-choices { display: flex; flex-wrap: wrap; gap: 8px; }.pill-choices span { display: block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); font-size: 9px; }.pill-choices input:checked + span { background: var(--ink); border-color: var(--ink); color: white; }
.safety-field { padding: 18px; background: #eeeae0; border-radius: 15px; }.safety-field legend { float: left; width: 100%; }.safety-field > p { clear: both; margin: 0 0 13px; color: var(--ink-soft); font-size: 9px; }.crisis-response { margin-top: 14px; padding: 13px; background: #f5d3cc; border-left: 3px solid #bd493f; }.crisis-response strong { font-size: 10px; }.crisis-response p { margin: 4px 0 0; font-size: 8px; }
.quote-card { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 17px; }.quote-card > div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; font-size: 10px; }.quote-card > div span { color: var(--ink-soft); }.quote-card .quote-total { margin-top: 8px; padding-top: 17px; border-top: 1px solid var(--line); font-size: 16px; }.quote-card > small { display: block; margin-top: 9px; color: var(--ink-soft); font-size: 7px; text-align: right; }
.policy-card { margin-top: 12px; padding: 18px; background: var(--sage); border-radius: 17px; }.policy-title { display: flex; align-items: center; gap: 10px; }.policy-title > span { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--ink); border-radius: 50%; }.policy-title p,.policy-title strong,.policy-title small { display: block; margin: 0; }.policy-title strong { font-size: 11px; }.policy-title small { color: var(--ink-soft); font-size: 8px; }.policy-card ul { margin: 15px 0 0; padding-left: 18px; color: #42534f; font-size: 9px; }.policy-card li { margin: 5px 0; }.compact-form { margin-top: 15px; gap: 8px; }
.provider-stub { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }.stub-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 14px 17px; border-bottom: 1px solid var(--line); }.stub-head > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: var(--ink); color: var(--lime); font-size: 9px; font-weight: 900; }.stub-head p,.stub-head strong,.stub-head small { display: block; margin: 0; }.stub-head strong { font-size: 10px; }.stub-head small { color: var(--ink-soft); font-size: 7px; }.stub-head > b { padding: 5px 7px; border-radius: 5px; background: var(--lime); font-size: 7px; }
.fake-card { height: 150px; display: flex; align-items: end; justify-content: space-between; margin: 20px; padding: 22px; border-radius: 16px; background: linear-gradient(135deg,#243f39,#152823); color: white; box-shadow: 0 20px 35px rgba(24,48,43,.18); }.fake-card span,.fake-card small { display: block; }.fake-card span { font-size: 16px; letter-spacing: 2px; }.fake-card small { margin-top: 6px; color: rgba(255,255,255,.5); font-size: 7px; letter-spacing: 1px; }.fake-card > strong { font-style: italic; }
.scenario-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 20px 20px; }.scenario-selector legend { grid-column: 1/-1; margin-bottom: 8px; font-size: 9px; font-weight: 800; }.scenario-selector span { min-height: 57px; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; }.scenario-selector b,.scenario-selector small { display: block; }.scenario-selector b { font-size: 9px; }.scenario-selector small { color: var(--ink-soft); font-size: 7px; }.scenario-selector input:checked + span { background: #edf3d1; border-color: var(--ink); }
.stub-console { margin-top: 11px; overflow: hidden; border: 1px dashed #9aa39f; border-radius: 12px; background: #ece9e1; }.stub-console > button { width: 100%; display: flex; justify-content: space-between; padding: 11px 13px; border: 0; background: none; cursor: pointer; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }.stub-console-log { padding: 10px; }.stub-console #stub-console-log { max-height: 150px; overflow: auto; padding: 10px 13px; border-top: 1px dashed #9aa39f; font: 8px/1.6 monospace; }.stub-console #stub-console-log p { margin: 0; }.stub-console #stub-console-log span { color: #4b7f43; }
.pay-button { min-width: 240px !important; justify-content: space-between; }.pay-button strong { padding-left: 20px; border-left: 1px solid rgba(24,48,43,.2); }
.processing-step,.success-step,.failure-step { padding-top: 25px; text-align: center; }.processing-step .step-lead,.success-step .step-lead,.failure-step .step-lead { margin-left: auto; margin-right: auto; }.processing-spinner { position: relative; width: 95px; height: 95px; margin: 0 auto 32px; }.processing-spinner i { position: absolute; border-radius: 50%; border: 1px solid var(--ink); animation: orbit 2s linear infinite; }.processing-spinner i:nth-child(1) { inset: 0; }.processing-spinner i:nth-child(2) { inset: 13px; animation-direction: reverse; }.processing-spinner i:nth-child(3) { inset: 36px; background: var(--lime); border: 0; }
.processing-timeline { max-width: 500px; margin: 35px auto 0; text-align: left; }.processing-timeline > div { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }.processing-timeline > div > span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; font-size: 8px; }.processing-timeline p,.processing-timeline strong,.processing-timeline small { display: block; margin: 0; }.processing-timeline strong { font-size: 10px; }.processing-timeline small { font-size: 8px; }.processing-timeline .done { color: var(--ink); }.processing-timeline .done > span { background: var(--lime); border-color: var(--lime); }.processing-timeline .failed { color: #a33e37; }.processing-timeline .failed > span { background: #f5d3cc; border-color: #a33e37; }
.success-mark,.failure-mark { display: grid; place-items: center; width: 95px; height: 95px; margin: 0 auto 30px; border-radius: 50%; background: var(--lime); font-size: 38px; font-weight: 900; }.failure-mark { background: #f5d3cc; color: #a33e37; }.success-appointment { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; margin: 30px 0 12px; padding: 17px; background: var(--paper); border-radius: 15px; text-align: left; }.success-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lilac); font: 18px Georgia,serif; }.success-appointment strong,.success-appointment span { display: block; }.success-appointment strong { font-size: 10px; }.success-appointment span { color: var(--ink-soft); font-size: 8px; }.success-appointment > div:last-child { text-align: right; }
.meeting-stub { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px dashed #7a8783; border-radius: 14px; text-align: left; }.meeting-stub > span { padding: 5px 7px; border-radius: 5px; background: var(--ink); color: var(--lime); font-size: 7px; font-weight: 900; }.meeting-stub small,.meeting-stub code { display: block; }.meeting-stub small { color: var(--ink-soft); font-size: 7px; }.meeting-stub code { margin-top: 3px; font-size: 8px; }.meeting-stub button { border: 0; background: none; cursor: pointer; font-size: 8px; font-weight: 800; }.success-actions { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }.stub-report { margin-top: 25px; text-align: left; }.stub-report summary { cursor: pointer; color: var(--ink-soft); font-size: 9px; }.stub-report ul { padding: 15px 15px 15px 30px; background: var(--paper); border-radius: 12px; font: 8px/1.6 monospace; }.failure-code { max-width: 440px; margin: 25px auto; padding: 14px; border: 1px solid #d3aaa3; background: #f5d3cc; }.failure-code span,.failure-code strong { display: block; }.failure-code span { font-size: 7px; text-transform: uppercase; }.failure-code strong { margin-top: 4px; font: 10px monospace; }

.order-summary { align-self: start; position: sticky; top: 25px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }.summary-person { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.summary-person > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: var(--lilac); font: 15px Georgia,serif; }.summary-person p,.summary-person strong,.summary-person small { display: block; margin: 0; }.summary-person strong { font-size: 10px; }.summary-person small { color: var(--ink-soft); font-size: 8px; }.order-summary dl { margin: 13px 0; }.order-summary dl div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 8px; }.order-summary dt { color: var(--ink-soft); }.order-summary dd { margin: 0; text-align: right; font-weight: 800; }.summary-total { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; }.summary-total strong { font-size: 16px; }.summary-safe { display: flex; gap: 8px; margin-top: 14px; }.summary-safe > span { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); font-size: 9px; }.summary-safe p,.summary-safe strong,.summary-safe small { display: block; margin: 0; }.summary-safe strong { font-size: 8px; }.summary-safe small { color: var(--ink-soft); font-size: 7px; }.summary-change { width: 100%; margin-top: 15px; padding: 8px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 8px; text-decoration: underline; }

.legal-dialog,.action-dialog { width: min(540px,calc(100% - 24px)); padding: 0; border: 0; border-radius: 23px; background: transparent; }.legal-dialog::backdrop,.action-dialog::backdrop { background: rgba(13,31,27,.72); backdrop-filter: blur(8px); }.legal-dialog article,.action-dialog article { position: relative; padding: 35px; background: var(--paper); }.legal-dialog .dialog-close { position: absolute; top: 18px; right: 18px; }.legal-dialog h2,.action-dialog h2 { margin: 0 0 18px; font-size: 31px; letter-spacing: -1.5px; }.legal-dialog h3 { margin-top: 22px; font-size: 13px; }.legal-dialog p,.legal-dialog li,.action-dialog p { color: var(--ink-soft); font-size: 10px; }.action-dialog article { text-align: center; }.action-lock { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; background: var(--lime); font: 34px Georgia,serif; }.action-dialog .button { width: 100%; margin-top: 15px; }.cancel-action { margin-top: 15px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 9px; text-decoration: underline; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 1050px) { .checkout-layout { grid-template-columns: 150px minmax(0,650px); }.order-summary { grid-column: 2; position: static; display: none; } }
@media (max-width: 760px) { .checkout-header-inner { height: 65px; }.checkout-header .brand span { display: none; }.checkout-exit { font-size: 0; }.checkout-exit::after { content: "×"; font-size: 22px; }.checkout-layout { display: block; padding-top: 30px; }.checkout-steps { position: static; }.checkout-steps ol { grid-template-columns: repeat(4,1fr); margin-bottom: 28px; }.checkout-steps li { min-height: auto; justify-content: center; }.checkout-steps li::after,.checkout-steps li p { display: none; }.stub-legend { display: none; }.flow-progress { margin-bottom: 28px; }.checkout-step h1 { font-size: 41px; letter-spacing: -2.5px; }.form-grid,.large-choices,.scenario-selector { grid-template-columns: 1fr; }.step-actions { align-items: stretch; flex-direction: column-reverse; }.step-actions .button { width: 100%; }.back-link { text-align: center; }.success-appointment { grid-template-columns: auto 1fr; }.success-appointment > div:last-child { grid-column: 1/-1; padding-top: 10px; border-top: 1px solid var(--line); text-align: left; }.meeting-stub { grid-template-columns: auto 1fr; }.meeting-stub button { grid-column: 1/-1; }.success-actions { flex-direction: column; }.legal-dialog article,.action-dialog article { padding: 30px 20px; } }