.demonstration-chooser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.demonstration-choice { display: grid; gap: .35rem; min-height: 6.2rem; padding: .85rem; border: 1px solid rgba(98, 221, 255, .25); border-radius: .7rem; color: #e9f7ff; background: rgba(2, 13, 23, .62); text-align: left; }
.demonstration-choice:hover, .demonstration-choice:focus-visible { border-color: var(--cyan); }
.demonstration-choice[data-state="selected"] { border-color: var(--mint); box-shadow: inset 0 0 0 1px rgba(114, 239, 207, .32); background: rgba(23, 104, 87, .18); }
.demonstration-choice small { color: var(--muted); font-size: .75rem; }
.connection-assistance { display: grid; gap: .75rem; padding: 1rem; border: 1px solid rgba(98, 221, 255, .3); border-radius: .75rem; background: rgba(3, 22, 36, .7); }
.connection-assistance > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.connection-assistance span { color: var(--muted); font-size: .78rem; }
.connection-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.connection-option { display: grid; grid-template-columns: auto 1fr; gap: .65rem; padding: .75rem; border: 1px solid rgba(98, 221, 255, .2); border-radius: .65rem; background: rgba(2, 12, 22, .56); cursor: pointer; }
.connection-option input { width: auto; margin-top: .2rem; }
.connection-option b, .connection-option small { display: block; }
.connection-option small { margin-top: .2rem; color: var(--muted); font-size: .73rem; }
.connection-option em { display: block; margin-top: .25rem; color: #9fe9ff; font-size: .7rem; font-style: normal; font-weight: 800; }
.connection-empty { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.confirmation-receipt dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.confirmation-controls { display: grid; justify-items: end; gap: .65rem; flex: 0 0 auto; }
.cancel-activation-draft { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .72rem; border: 1px solid rgba(255, 143, 129, .66); border-radius: .65rem; color: #ffd0ca; background: rgba(99, 31, 31, .2); }
.cancel-activation-draft:hover, .cancel-activation-draft:focus-visible { border-color: #ff9e91; background: rgba(125, 38, 38, .34); }
.cancel-activation-draft span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid currentColor; border-radius: 50%; color: inherit; font-size: 1.25rem; line-height: 1; }
.cancel-activation-draft b { font-size: .78rem; }
.contract-application-launcher { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
.contract-application-launcher h2 { margin: .25rem 0 .45rem; font-size: clamp(1.45rem, 2.7vw, 2.25rem); }
.contract-application-launcher p:not(.eyebrow) { max-width: 760px; margin: 0; color: #bfd1dd; }
.open-contract-application { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-width: 240px; padding: .9rem 1rem; color: #031019; background: linear-gradient(135deg, var(--mint), var(--cyan)); font-weight: 900; }
.open-contract-application span { font-size: 1.2rem; }
.contract-application-panel[hidden], .contract-application-launcher[hidden] { display: none; }
.contract-application-status { min-height: 1.25rem; margin-top: .55rem !important; color: #9fe9ff !important; font-size: .78rem; font-weight: 800; }
.selected-plan-summary { margin-top: .55rem !important; color: #86efd0 !important; font-size: .82rem; font-weight: 800; }
.plan-price-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: 1rem; border: 1px solid rgba(114, 239, 207, .28); border-radius: .8rem; background: rgba(18, 92, 75, .1); }
.plan-price-summary > div { display: grid; gap: .3rem; padding: .75rem; border-radius: .55rem; background: rgba(2, 15, 24, .48); }
.plan-price-summary span { color: var(--muted); font-size: .72rem; }
.plan-price-summary b, .plan-price-summary strong { color: #e8fff8; font-size: .95rem; }
.plan-price-summary strong { color: var(--mint); }
.plan-price-summary p { grid-column: 1 / -1; margin: .1rem 0 0; color: #9db2c1; font-size: .75rem; line-height: 1.55; }
.plan-price-summary[data-state="empty"] { border-color: rgba(98, 221, 255, .22); background: rgba(3, 22, 36, .45); }
.production-passage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; padding: 1rem; border: 1px solid rgba(98, 221, 255, .24); border-radius: .8rem; background: rgba(3, 22, 36, .58); }
.production-passage > div { display: grid; gap: .25rem; }
.production-passage span { color: var(--cyan); font-size: .68rem; font-weight: 900; }
.production-passage b { color: #eefaff; }
.production-passage small { color: var(--muted); line-height: 1.45; }
.production-passage p { grid-column: 1 / -1; margin: .35rem 0 0; padding-top: .75rem; border-top: 1px solid rgba(98, 221, 255, .15); color: #a9bdca; font-size: .76rem; line-height: 1.55; }
.capability-contract-chooser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 1rem; border: 1px solid rgba(98, 221, 255, .28); border-radius: .8rem; }
.capability-contract-chooser legend { padding: 0 .35rem; color: #dff7ff; font-size: .8rem; font-weight: 850; }
.capability-contract-chooser label { display: grid; grid-template-columns: auto 1fr; gap: .65rem; padding: .8rem; border: 1px solid rgba(98, 221, 255, .2); border-radius: .65rem; background: rgba(2, 15, 24, .5); cursor: pointer; }
.capability-contract-chooser label:has(input:checked) { border-color: var(--mint); background: rgba(23, 104, 87, .18); }
.capability-contract-chooser input { width: auto; margin-top: .2rem; }
.capability-contract-chooser b, .capability-contract-chooser small, .capability-contract-chooser em { display: block; }
.capability-contract-chooser small { margin-top: .25rem; color: var(--muted); }
.capability-contract-chooser em { margin-top: .35rem; color: var(--mint); font-size: .72rem; font-style: normal; font-weight: 850; }
.capability-contract-chooser[data-state="free"] { opacity: .58; }
.capability-contract-chooser[data-state="free"] label { cursor: not-allowed; }
@media (max-width: 820px) { .confirmation-receipt dl, .demonstration-chooser, .connection-options, .plan-price-summary, .production-passage, .capability-contract-chooser { grid-template-columns: 1fr; } .connection-assistance > div:first-child { display: grid; } .contract-application-launcher { grid-template-columns: 1fr; } .open-contract-application { width: 100%; } }