.checkout-page { background: #fafaf7; }
html:has(.checkout-page) { scroll-behavior: auto; }
.checkout-page .studio-header { gap: 20px; }
.checkout-page .desktop-links { gap: 22px; }
.checkout-page .desktop-links a[aria-current="page"] { color: var(--green); }
.checkout-page .menu-toggle { display: none; }
.checkout-page .button:hover { transform: none; }
.checkout-main { width: min(1160px, calc(100% - 80px)); margin: 0 auto; padding: 48px 0 54px; }
.checkout-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.checkout-intro .eyebrow { color: var(--green); margin-bottom: 12px; font-size: 11px; }
.checkout-intro h1 { font-size: 44px; line-height: 1.12; }
.checkout-intro p:last-child { font-size: 15px; color: var(--muted); margin: 16px 0 0; }
.subscription-shortcut { display: flex; flex-direction: column; gap: 7px; padding: 10px 0; color: var(--green); }
.subscription-shortcut > span { font-size: 15px; font-weight: 650; text-decoration: underline; text-underline-offset: 6px; }
.subscription-shortcut > span > span { margin-left: 14px; }
.subscription-shortcut small { color: var(--muted); font-size: 12px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 72px; align-items: start; }
.checkout-selection { min-width: 0; }
.checkout-selection > h2 { font-size: 21px; margin: 0 0 24px; }
.checkout-controls fieldset { padding: 0; border: 0; margin: 0 0 22px; min-width: 0; }
.checkout-controls legend { font-size: 12px; color: var(--muted); margin-bottom: 10px; padding: 0; }
.package-segments, .stage-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid #aebbb1; border-radius: 6px; overflow: visible; }
.package-segments label, .stage-segments label { position: relative; min-width: 0; cursor: pointer; }
.package-segments label + label, .stage-segments label + label { border-left: 1px solid #aebbb1; }
.package-segments input, .stage-segments input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.package-segments label > span { min-height: 78px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 16px; }
.package-segments strong { font-size: 16px; font-weight: 650; }
.package-segments small { font-size: 12px; }
.package-segments input:checked + span, .stage-segments input:checked + span { background: var(--green); color: white; }
.package-segments label:first-child > span, .stage-segments label:first-of-type > span { border-radius: 5px 0 0 5px; }
.package-segments label:last-child > span, .stage-segments label:last-child > span { border-radius: 0 5px 5px 0; }
.package-segments input:focus-visible + span, .stage-segments input:focus-visible + span { outline: 3px solid #b23b5d; outline-offset: 4px; position: relative; z-index: 1; }
.stage-segments { display: flex; width: fit-content; max-width: 100%; }
.stage-segments label { flex: 1 1 auto; }
.stage-segments label[data-stage-option="deposit"] { border-left: 0; }
.stage-segments label > span { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 10px 20px; font-size: 13px; font-weight: 600; }
.payment-entry { padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 114px; }
.payment-entry .entry-kicker { color: var(--green); font-size: 11px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; }
.payment-entry h3 { font-size: 29px; line-height: 1.2; text-wrap: pretty; max-width: 490px; }
.entry-description { font-size: 14px; color: var(--muted); margin: 14px 0 22px; }
.entry-schedule { margin: 0 0 20px; }
.entry-schedule > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.entry-schedule dt { color: var(--muted); }
.entry-schedule dd { margin: 0; text-align: right; font-weight: 600; }
.entry-condition { font-size: 13px; border-left: 2px solid var(--green); padding-left: 14px; margin: 0; }
.entry-checkout { margin-top: 22px; }
.checkout-ready .entry-checkout { display: none; }
.checkout-notes { border-top: 1px solid var(--line); padding-top: 24px; }
.checkout-notes h2 { font-size: 17px; margin-bottom: 12px; }
.checkout-notes > p { font-size: 13px; margin-bottom: 14px; }
.checkout-page .fine-print { font-size: 12px; line-height: 1.6; color: var(--muted); }
.checkout-notes details { border-top: 1px solid var(--line); margin-top: 22px; }
.checkout-notes summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 16px 0; line-height: 1.5; }
.checkout-notes details p { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.checkout-sidebar { position: sticky; top: 110px; min-width: 0; }
.checkout-summary { border: 1px solid #c5d1c7; border-top: 3px solid var(--green); background: #f0f3ed; padding: 20px 24px 22px; border-radius: 6px; }
.summary-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.summary-heading .eyebrow { margin: 0; color: var(--green); font-size: 10px; }
.summary-heading .icon-button { width: 44px; height: 44px; background: transparent; border-color: transparent; }
.summary-heading .icon-button:hover { background: #e1e9df; border-color: #b6c5ba; }
.checkout-summary h2 { font-size: 21px; line-height: 1.2; }
.summary-amount { margin: 12px 0 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.summary-amount strong { font-size: 40px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary-amount span { font-size: 12px; color: var(--muted); }
.summary-details { margin: 0 0 18px; }
.summary-details > div { display: flex; gap: 16px; justify-content: space-between; border-top: 1px solid #ccd5ca; padding: 11px 0; font-size: 12px; line-height: 1.5; }
.summary-details dt { color: var(--muted); flex: 1; }
.summary-details dd { margin: 0; text-align: right; max-width: 56%; font-weight: 600; }
.summary-condition { font-size: 12px; margin-bottom: 16px; line-height: 1.6; }
.summary-checkout { width: 100%; justify-content: space-between; min-height: 50px; }
.summary-checkout[aria-disabled="true"], .entry-checkout[aria-disabled="true"] { background: #dee4dc; color: #505d53; border-color: #c2cec3; cursor: not-allowed; }
.summary-footnote { font-size: 11px; color: #526056; margin: 12px 0 0; line-height: 1.55; }
.copy-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--green); }
.copy-status:not(:empty) { margin-top: 12px; }
.copy-fallback { display: block; font-size: 12px; margin-top: 12px; }
.copy-fallback input { width: 100%; min-width: 0; margin-top: 6px; padding: 10px; background: white; border: 1px solid #809b87; border-radius: 3px; font-size: 12px; }
.monthly-note { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.monthly-note h2 { font-size: 18px; }
.monthly-note > p { font-size: 12px; margin: 10px 0 14px; color: var(--muted); }
.monthly-note dl { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0 12px; }
.monthly-note dt { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.monthly-note dd { margin: 0; font-size: 17px; font-weight: 650; }
.monthly-note dd span { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.monthly-note .text-link { font-size: 13px; gap: 12px; }
.checkout-help { padding: 24px 0 0; margin: 32px 0 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.checkout-help a { text-decoration: underline; text-underline-offset: 3px; color: var(--green); }
.checkout-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 28px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.checkout-dialog::backdrop { background: #122820b8; }
.confirm-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.confirm-heading .eyebrow { font-size: 10px; color: var(--green); margin: 0; }
.checkout-dialog h2 { font-size: 27px; }
.checkout-dialog #confirm-description { margin: 12px 0 20px; color: var(--muted); font-size: 13px; }
.confirm-payment { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.confirm-payment p { font-size: 14px; margin: 0; }
.confirm-payment p + p { margin-top: 8px; }
.confirm-payment strong { font-size: 34px; font-weight: 600; }
.confirm-payment span { font-size: 12px; color: var(--muted); }
.confirm-condition { font-size: 12px; margin: 16px 0; }
.confirm-check { display: flex; align-items: start; gap: 12px; padding: 10px 0; min-height: 44px; cursor: pointer; font-size: 13px; line-height: 1.6; }
.confirm-check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.confirm-notes { font-size: 12px; color: var(--muted); margin: 14px 0 20px; }
.confirm-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.confirm-actions .button { justify-content: center; gap: 14px; }
.checkout-dialog > .fine-print { margin: 14px 0 0; font-size: 11px; }
.checkout-page:has(dialog[open]) { overflow: hidden; }
.checkout-page .mobile-menu { max-height: calc(100dvh - 24px); overflow-y: auto; }
@media (max-width: 1200px) {
  .checkout-page .desktop-links { gap: 16px; font-size: 12px; }
  .checkout-layout { gap: 40px; grid-template-columns: minmax(0, 1fr) 350px; }
}
@media (max-width: 1100px) {
  .checkout-page .desktop-links a:nth-child(4) { display: block; }
  .checkout-page .studio-header { height: auto; min-height: 74px; flex-wrap: wrap; padding: 18px 5%; }
  .checkout-page .desktop-links { display: flex; flex-wrap: wrap; width: 100%; order: 3; gap: 8px 22px; }
  .checkout-ready .checkout-page .desktop-links { display: none; }
  .checkout-ready .checkout-page .menu-toggle { display: grid; width: 44px; height: 44px; }
  .checkout-ready .checkout-page .studio-header { height: 74px; padding: 0 5%; flex-wrap: nowrap; }
  .checkout-main { width: calc(100% - 48px); padding-top: 32px; }
  .checkout-layout { gap: 30px; grid-template-columns: minmax(0, 1fr) 310px; }
  .checkout-sidebar { top: 94px; }
  .checkout-summary { padding: 16px 20px 20px; }
  .package-segments label > span { padding: 12px; }
}
@media (max-width: 760px) {
  .checkout-page .header-project { display: none; }
  .checkout-main { width: calc(100% - 40px); padding: 26px 0 36px; }
  .checkout-intro { display: block; padding-bottom: 24px; margin-bottom: 24px; }
  .checkout-intro h1 { font-size: 34px; }
  .checkout-intro p:last-child { font-size: 13px; margin-top: 12px; }
  .checkout-intro .eyebrow { font-size: 10px; margin-bottom: 10px; }
  .desktop-break { display: none; }
  .subscription-shortcut { margin-top: 10px; padding: 8px 0; }
  .subscription-shortcut > span { font-size: 13px; }
  .subscription-shortcut small { display: none; }
  .checkout-layout { display: flex; flex-direction: column; gap: 0; }
  .checkout-selection, .checkout-sidebar { width: 100%; }
  .checkout-selection > h2 { font-size: 18px; margin-bottom: 20px; }
  .checkout-sidebar { position: static; }
  .checkout-ready .checkout-selection { display: contents; }
  .checkout-ready .checkout-selection > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .checkout-ready .checkout-controls { width: 100%; order: 1; }
  .checkout-ready .payment-entries { width: 100%; order: 3; margin-top: 26px; }
  .checkout-ready .checkout-sidebar { display: contents; }
  .checkout-ready .checkout-summary { order: 2; width: 100%; position: relative; display: flex; flex-direction: column; }
  .checkout-ready .monthly-note { order: 5; width: 100%; }
  .checkout-ready .checkout-notes { order: 4; width: 100%; margin-top: 28px; }
  .package-segments label > span { min-height: 68px; padding: 10px 12px; gap: 4px; }
  .package-segments strong { font-size: 14px; }
  .package-segments small { font-size: 10px; }
  .checkout-controls fieldset { margin-bottom: 18px; }
  .checkout-controls legend { font-size: 11px; margin-bottom: 8px; }
  .stage-segments { width: 100%; }
  .stage-segments label > span { font-size: 12px; padding: 10px 12px; }
  .payment-entry { padding: 22px 0; }
  .payment-entry h3 { font-size: 25px; }
  .entry-description { font-size: 13px; margin: 12px 0 18px; }
  .entry-schedule > div { font-size: 12px; gap: 16px; }
  .entry-schedule dd { max-width: 52%; }
  .entry-condition { font-size: 12px; }
  .checkout-summary { padding: 16px 20px 20px; }
  .summary-amount strong { font-size: 38px; }
  .summary-heading { min-height: 18px; margin-bottom: 6px; padding-right: 44px; }
  .summary-heading { order: 0; }
  .checkout-summary h2 { order: 1; }
  .summary-amount { order: 2; }
  .summary-condition { order: 3; }
  .summary-checkout { order: 4; }
  .summary-footnote { order: 5; margin-bottom: 14px; }
  .summary-details { order: 6; }
  .copy-status { order: 7; }
  .copy-fallback { order: 8; }
  .summary-heading .copy-link { position: absolute; top: 12px; right: 14px; }
  .checkout-summary h2 { font-size: 18px; padding-right: 40px; }
  .summary-amount { margin: 8px 0 16px; }
  .summary-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-bottom: 12px; }
  .summary-details > div { display: block; padding: 9px 0; }
  .summary-details dd { text-align: left; max-width: none; margin-top: 3px; }
  .summary-details > div:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; }
  .summary-details > div:last-child dd { max-width: 64%; text-align: right; }
  .summary-condition { margin-bottom: 12px; }
  .monthly-note { padding: 24px 0 0; margin-top: 26px; }
  .checkout-dialog { padding: 18px 20px; }
  .checkout-dialog h2 { font-size: 24px; }
  .confirm-actions .button { padding: 12px 14px; font-size: 12px; }
  .checkout-page .studio-footer { padding-bottom: 30px; }
}
@media (max-width: 360px) {
  .checkout-main { width: calc(100% - 32px); }
  .checkout-intro h1 { font-size: 30px; }
  .package-segments label > span { padding: 10px 8px; }
  .package-segments small { font-size: 10px; }
  .checkout-summary { padding: 14px 16px 18px; }
  .summary-amount strong { font-size: 34px; }
  .confirm-actions { gap: 8px; }
  .confirm-actions .button { padding: 12px; gap: 8px; }
  .checkout-dialog { width: calc(100% - 20px); padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-page *, .checkout-page *::before, .checkout-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}