/* AICenter 2.0 checkout, purchase terms and "my subscriptions" (warm editorial; tokens from v2.css). */

.v2 .co { padding-block: var(--sp-6) var(--sp-8); }
.v2 .co__crumbs { margin-block-end: var(--sp-4); }
.v2 .co__h1 { font-family: var(--font-display); font-size: var(--fs-7); line-height: 1.15; margin: 0 0 var(--sp-5); color: var(--ink); }
.v2 .co__h2 { font-family: var(--font-display); font-size: var(--fs-5); margin: 0 0 var(--sp-4); }
.v2 .co__h3 { font-size: var(--fs-3); font-weight: 700; margin: 0 0 var(--sp-2); }
.v2 .co__lead { font-size: var(--fs-4); color: var(--ink-2); max-inline-size: var(--measure); }
.v2 .co__narrow { max-inline-size: 760px; }

.v2 .co__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .v2 .co__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-7); }
  .v2 .co__pay { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-4)); }
}

.v2 .co__summary, .v2 .co__pay {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: clamp(var(--sp-4), 3vw, var(--sp-6)); box-shadow: var(--shadow-1);
}
.v2 .co__kicker { font-family: var(--font-ui); font-size: var(--fs-1); font-weight: 700; letter-spacing: .02em; color: var(--accent); margin: 0 0 var(--sp-2); }
.v2 .co__name { font-family: var(--font-display); font-size: var(--fs-6); line-height: 1.2; margin: 0 0 var(--sp-2); }
.v2 .co__desc { color: var(--ink-2); margin: 0 0 var(--sp-4); max-inline-size: var(--measure); }
.v2 .co__price { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; }
.v2 .co__price strong { font-family: var(--font-display); font-size: var(--fs-7); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.v2 .co__price span { color: var(--ink-2); font-size: var(--fs-3); }
.v2 .co__vat { color: var(--muted); font-size: var(--fs-1); margin: var(--sp-1) 0 var(--sp-5); }

.v2 .co__box { background: var(--surface-2); border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); margin-block-end: var(--sp-4); }
.v2 .co__box p { margin: 0 0 var(--sp-2); }
.v2 .co__box p:last-child { margin-block-end: 0; }
.v2 .co__box--recurring { border-inline-start: 4px solid var(--accent); }
.v2 .co__box--soon { border-inline-start: 4px solid var(--positive); }
.v2 .co__list { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--sp-1); }
.v2 .co__biz { color: var(--muted); font-size: var(--fs-1); margin: var(--sp-4) 0 0; }
.v2 .co a:not(.c-btn) { color: var(--accent); text-underline-offset: 3px; }
.v2 .co a:not(.c-btn):hover { color: var(--accent-hover); }

/* form */
.v2 .co__form { display: grid; gap: var(--sp-4); }
.v2 .co__methods { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.v2 .co__legend { font-weight: 700; font-size: var(--fs-3); margin-block-end: var(--sp-3); padding: 0; }
.v2 .co__method { position: relative; }
.v2 .co__method input { position: absolute; opacity: 0; inset-block-start: 50%; inset-inline-start: 14px; inline-size: 1px; block-size: 1px; }
.v2 .co__method label {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-block-size: 64px; cursor: pointer;
  padding: var(--sp-3) var(--sp-4); padding-inline-start: 44px; border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface); transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  position: relative;
}
.v2 .co__method label::before {
  content: ""; position: absolute; inset-inline-start: 14px; inset-block-start: 50%; translate: 0 -50%;
  inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface);
}
.v2 .co__method input:checked + label { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.v2 .co__method input:checked + label::before { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--surface); background: var(--accent); }
.v2 .co__method input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.v2 .co__method label:hover { border-color: var(--ink-2); }
.v2 .co__method-name { font-weight: 700; font-size: var(--fs-3); color: var(--ink); }
.v2 .co__method-via { font-size: var(--fs-1); color: var(--muted); }

.v2 .co__buyer { display: grid; gap: var(--sp-3); }
.v2 .co__buyer[hidden] { display: none; }
.v2 .co__hint, .v2 .co__account { font-size: var(--fs-1); color: var(--ink-2); margin: 0; }
.v2 .co__ltr { direction: ltr; text-align: start; }
.v2 .co__buyer .c-input { inline-size: 100%; min-block-size: 48px; }
.v2 .co__buyer label { font-weight: 600; }

.v2 .co__terms { display: flex; align-items: flex-start; gap: var(--sp-3); }
.v2 .co__terms input { inline-size: 24px; block-size: 24px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.v2 .co__terms input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.v2 .co__field-err { color: var(--negative); font-size: var(--fs-1); font-weight: 600; margin: 4px 0 0; }
.v2 .co__field-err[hidden] { display: none; }
.v2 [aria-invalid="true"] { border-color: var(--negative) !important; }

.v2 .co__error { border: 2px solid var(--negative); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--negative) 6%, var(--surface)); }
.v2 .co__error[hidden] { display: none; }
.v2 .co__error:focus-visible { outline: 3px solid var(--negative); outline-offset: 2px; }
.v2 .co__error-title { font-weight: 700; margin: 0 0 var(--sp-1); }
.v2 .co__error ul { margin: 0; padding-inline-start: 1.2em; }
.v2 .co__error a { color: var(--negative) !important; font-weight: 600; }

.v2 .co__submit[disabled] { opacity: .75; cursor: progress; }
.v2 .co__secure { font-size: var(--fs-1); color: var(--muted); margin: 0; }

/* return page */
.v2 .co__state {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-4); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-5) var(--sp-6); margin-block-end: var(--sp-4);
}
.v2 .co__state-mark { grid-row: span 2; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 3px solid var(--line-strong); }
.v2 .co__state[data-state="pending"] .co__state-mark { border-color: var(--line-strong); border-block-start-color: var(--accent); animation: co-spin 1s linear infinite; }
.v2 .co__state[data-state="paid"] .co__state-mark { border-color: var(--positive); background: var(--positive); box-shadow: inset 0 0 0 10px var(--surface); }
.v2 .co__state[data-state="failed"] .co__state-mark,
.v2 .co__state[data-state="canceled"] .co__state-mark,
.v2 .co__state[data-state="missing"] .co__state-mark { border-color: var(--negative); }
.v2 .co__state-title { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 700; margin: 0; }
.v2 .co__state-text { margin: 0; color: var(--ink-2); }
.v2 .co__order-line { color: var(--ink-2); font-size: var(--fs-1); }
.v2 .co__actions { margin-block: var(--sp-4); }
.v2 .co__actions[hidden] { display: none; }
@keyframes co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v2 .co__state[data-state="pending"] .co__state-mark { animation: none; border-style: dashed; } }

/* purchase terms */
.v2 .pt { padding-block: var(--sp-6) var(--sp-8); }
.v2 .pt__body { max-inline-size: var(--measure); }
.v2 .pt__body h2 { font-family: var(--font-display); font-size: var(--fs-5); margin: var(--sp-6) 0 var(--sp-2); }
.v2 .pt__body p, .v2 .pt__body li { line-height: 1.75; }
.v2 .pt__body ul, .v2 .pt__body ol { padding-inline-start: 1.3em; }
.v2 .pt__toc { background: var(--surface-2); border-radius: var(--r-2); padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-4) var(--sp-5); }
.v2 .pt__toc ol { margin: 0; columns: 2 220px; }
.v2 .pt__toc a { display: inline-block; min-block-size: 24px; }
.v2 .pt__meta { color: var(--muted); font-size: var(--fs-1); }

/* my subscriptions */
.v2 .as { padding-block: var(--sp-6) var(--sp-8); }
.v2 .as__cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-block-end: var(--sp-6); }
.v2 .as__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.v2 .as__card h3 { font-size: var(--fs-4); margin: 0; }
.v2 .as__card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-3); margin: 0; font-size: var(--fs-2); }
.v2 .as__card dt { color: var(--muted); }
.v2 .as__card dd { margin: 0; font-weight: 600; }
.v2 .as__confirm { border-inline-start: 4px solid var(--negative); background: var(--surface-2); border-radius: var(--r-2); padding: var(--sp-4); }
.v2 .as__flash { border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); margin-block-end: var(--sp-4); border: 1px solid var(--line); background: var(--surface); }
.v2 .as__flash--ok { border-inline-start: 4px solid var(--positive); }
.v2 .as__flash--err { border-inline-start: 4px solid var(--negative); }
.v2 .as__table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); }
.v2 .as__table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.v2 .as__table th, .v2 .as__table td { text-align: start; padding: var(--sp-3); border-block-end: 1px solid var(--line); vertical-align: top; }
.v2 .as__table th { color: var(--muted); font-size: var(--fs-1); font-weight: 600; background: var(--surface-2); }
.v2 .as__table tr:last-child td { border-block-end: 0; }
.v2 .as__status { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-1); font-weight: 600; }
.v2 .as__status--paid, .v2 .as__status--active { color: var(--positive); }
.v2 .as__status--failed, .v2 .as__status--refunded, .v2 .as__status--canceled, .v2 .as__status--cancel_requested { color: var(--negative); }
