/* Ordering Amp Connect: onboarding days, your details, the order terms and payment, in one card under the plan */
.co { display: grid; gap: 22px; margin-top: 16px; padding: clamp(18px, 2vw, 26px); border-radius: 14px; background: var(--ha-white); }
.co[hidden] { display: none; }
.co-plan { margin: 0; font: 700 16px/1.4 var(--ha-font-sans); color: var(--ha-ink); }
.co-days { margin: 0; padding: 0; border: 0; min-width: 0; }
.co-days legend { margin: 0 0 12px; padding: 0; font: 800 20px/1.25 var(--ha-font-sans); color: var(--ha-ink); }
.co-day-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.co-day-row span { box-sizing: border-box; width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-pages { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.co-pages button { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 700 15px/1 var(--ha-font-sans); color: var(--ha-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.co-pages button:disabled { color: var(--ha-ink-faint); text-decoration: none; cursor: default; }
.co-pages button:focus-visible { outline: 3px solid var(--ha-bloom); outline-offset: 2px; }
.co .rq { margin-top: 0; }
.co-agree { display: grid; gap: 8px; }
.co-agree[hidden] { display: none; }
.co-agree label { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 700 16px/1.35 var(--ha-font-sans); color: var(--ha-ink); cursor: pointer; }
.co-agree input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ha-ink); }
.co-agree input:focus-visible { outline: 3px solid var(--ha-bloom); outline-offset: 2px; }
.co-terms summary { min-height: 44px; display: inline-flex; align-items: center; font: 600 15px/1.3 var(--ha-font-sans); color: var(--ha-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.co-terms summary:focus-visible { outline: 3px solid var(--ha-bloom); outline-offset: 2px; }
.co-terms ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; font: 500 15px/1.5 var(--ha-font-sans); color: var(--ha-support-on-paper); }
.co-back { margin-top: 16px; }
@media (max-width: 600px) {
  .co-day-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .co-day-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}