.mac-demo [hidden] { display: none !important; }
.connector-picker { display: grid; grid-template-columns: repeat(4,1fr); width: min(620px,100%); gap: 6px; padding: 6px; margin: 0 auto 28px; border: 1px solid #e2dfda; border-radius: 12px; background: #f6f5f3; }
.connector-picker legend { margin: 0 auto 10px; padding-inline: 8px; font-size: 12px; color: #77736c; }
.connector-picker label { position: relative; display: block; margin: 0; min-width: 0; cursor: pointer; }
.connector-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.connector-picker span { display: block; text-align: center; padding: 12px 8px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; color: #67645e; transition: background .15s,color .15s; }
.connector-picker input:checked + span { background: #fff; color: #b64006; border-color: #e7d4c9; box-shadow: 0 2px 5px #31200d08; }
.connector-picker label:hover span { background: #ffffff90; }
.connector-picker input:focus-visible + span { outline: 2px solid #923405; outline-offset: 2px; }
.mac-demo .connector-toolbar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 16px; padding: 22px 28px; margin: 0; border-bottom: 1px solid #e9e9e6; background: #fff; }
.mac-demo .connector-toolbar label { display: grid; gap: 7px; font-size: 12px; color: #585854; min-width: 0; }
.mac-demo .connector-toolbar input, .mac-demo .connector-toolbar select { width: 100%; min-width: 0; height: 44px; border: 1px solid #d8d8d3; background: #fcfcfb; border-radius: 7px; color: #292929; font: inherit; font-size: 14px; padding: 10px 12px; }
.mac-demo .connector-toolbar button { grid-column: -2 / -1; }
.mac-demo .connector-toolbar button, .mac-demo #connector-compare { background: var(--orange-bright); border-color: #ff792e; color: #292929; }
.mac-demo .connector-toolbar button:hover:not(:disabled), .mac-demo #connector-compare:hover:not(:disabled) { background: #ff762f; }
.mac-demo #connector-status { margin: 0; color: #5c5c56; font-size: 12px; line-height: 1.6; }
.mac-demo #connector-status.warning { color: #88410c; }
.mac-demo .connector-option .provider-label { text-transform: capitalize; font-size: 10px; letter-spacing: .015em; margin-bottom: 12px; }
.mac-demo .connector-option h2 { margin-top: 12px; }
.mac-demo .connector-option .price small { display: block; font-size: 10px; margin-top: 3px; color: #737067; }
.connector-facts { margin: 0 0 18px; font-size: 11px; }
.connector-facts > div { display: grid; grid-template-columns: 75px minmax(0,1fr); gap: 8px; padding-block: 7px; border-top: 1px solid #f0eee9; }
.connector-facts dt { color: #817c73; }
.connector-facts dd { margin: 0; color: #49463f; overflow-wrap: anywhere; }
.mac-demo .connector-attribution a { font-size: inherit; }
.mac-demo #connector-compare-controls { position: sticky; bottom: -24px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px -28px 0; padding: 14px 28px; border-block: 1px solid #e4e4dd; background: #fffffff5; backdrop-filter: blur(12px); }
.mac-demo #connector-compare-controls p { margin: 0; font-size: 12px; }
.mac-demo :is(#connector-comparison,#connector-handoff):not(:empty) { margin-top: 24px; padding: 24px; border: 1px solid #deded7; border-radius: 10px; background: #fff; }
.mac-demo :is(#connector-comparison,#connector-handoff) h2 { font-size: 26px; margin-bottom: 12px; }
.mac-demo #connector-handoff p { font-size: 14px; line-height: 1.6; }
.mac-demo #connector-handoff .small { font-size: 12px; }
.mac-demo .connector-destination { font-size: 13px; }
.mac-demo #connector-handoff { background: #f6f9f3; }
@media(max-width:800px) {
  .mac-demo .connector-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px; }
  .mac-demo #connector-compare-controls { margin-inline: -20px; padding-inline: 20px; }
}
@media(max-width:600px) {
  .connector-picker { margin-bottom: 22px; gap: 3px; padding: 4px; }
  .connector-picker span { font-size: 12px; padding: 11px 3px; }
  .mac-demo .connector-toolbar { padding: 16px; gap: 14px 10px; }
  .mac-demo .connector-toolbar input, .mac-demo .connector-toolbar select { font-size: 16px; }
  .mac-demo .connector-toolbar button { grid-column: 1 / -1; }
  .mac-demo #connector-compare-controls { bottom: -20px; margin-inline: -16px; padding: 12px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .mac-demo :is(#connector-comparison,#connector-handoff):not(:empty) { padding: 16px; }
  .mac-demo :is(#connector-comparison,#connector-handoff) h2 { font-size: 23px; }
}

#demo-window .demo-next-step { display:inline-flex; align-items:center; justify-content:center; min-height:52px; margin:4px 0 22px; padding:13px 24px; border:1px solid #ff681e; border-radius:9px; background:#ff5a0a; color:#fff; font-size:18px; font-weight:600; line-height:1.35; text-decoration:none; box-shadow:0 3px 10px #ff5a0a20; }
#demo-window .demo-next-step:hover { background:#e94e00; }
#demo-window .demo-next-step:focus-visible { outline:3px solid #242424; outline-offset:3px; }
@media(max-width:600px) { #demo-window .demo-next-step { width:100%; } }

@media(max-width:360px) {
  .mac-demo .connector-toolbar { grid-template-columns: minmax(0,1fr); }
}

#demo-window .demo-next-step.is-disabled { background:#f2f1ef; border-color:#e1dfdc; color:#99948e; box-shadow:none; cursor:not-allowed; margin-bottom:0; }