body:has(.riko-billing-admin) .container-main { min-width: 0; }
.riko-billing-admin {
    color: var(--riko-text);
    background: var(--riko-surface);
    border: 1px solid var(--riko-line);
    border-radius: 6px;
    padding: clamp(16px, 2vw, 28px);
    max-width: 1600px;
}
.riko-billing-admin *, .riko-billing-admin *::before, .riko-billing-admin *::after { box-sizing: border-box; }
.riko-billing-admin h2 { color: var(--riko-ink); font-size: 1.25rem; margin: 0 0 12px; }
.riko-billing-admin a { color: var(--riko-link); text-underline-offset: 3px; }
.riko-billing-admin :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--riko-focus); outline-offset: 3px; }
.riko-billing-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; border-bottom: 1px solid var(--riko-line-strong); margin-bottom: 20px; }
.riko-billing-nav a { padding: 10px 2px; text-decoration: none; border-bottom: 3px solid transparent; }
.riko-billing-nav a:hover { border-bottom-color: var(--riko-line-strong); }
.riko-billing-nav a[aria-current="page"] { color: var(--riko-ink); border-bottom-color: var(--riko-action); font-weight: 700; }
.riko-billing-notice { color: var(--riko-warning); background: var(--riko-warning-surface); border-inline-start: 3px solid var(--riko-warning); padding: 12px 16px; }
.riko-billing-intro { max-width: 95ch; margin-bottom: 24px; }
.riko-billing-section { border-top: 1px solid var(--riko-line); margin-top: 28px; padding-top: 24px; }
.riko-billing-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; border-block: 1px solid var(--riko-line); margin: 24px 0; }
.riko-billing-summary > div { padding: 16px 0; }
.riko-billing-summary dt { color: var(--riko-muted); font-weight: 400; }
.riko-billing-summary dd { color: var(--riko-ink); font-size: 1.75rem; line-height: 1.3; font-variant-numeric: tabular-nums; margin: 4px 0 0; }
.riko-billing-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.riko-billing-search { flex: 1 1 260px; }
.riko-billing-filters > div { min-width: 140px; }
.riko-billing-admin label { display: block; color: var(--riko-ink); font-weight: 600; margin-bottom: 6px; }
.riko-billing-admin :is(.form-control, .form-select) { color: var(--riko-text); background-color: var(--riko-surface); border: 1px solid var(--riko-line-strong); border-radius: 4px; min-height: 42px; width: 100%; }
.riko-billing-admin :is(.form-control, .form-select):focus { border-color: var(--riko-focus); box-shadow: none; }
.riko-billing-admin input::placeholder { color: var(--riko-muted); opacity: 1; }
.riko-billing-button { display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 9px 16px; border: 1px solid var(--riko-action); border-radius: 4px; color: var(--riko-action-contrast) !important; background: var(--riko-action); font: inherit; font-weight: 600; line-height: 1.3; text-decoration: none !important; cursor: pointer; }
.riko-billing-button:hover { color: var(--riko-action-contrast) !important; background: var(--riko-action-hover); border-color: var(--riko-action-hover); }
.riko-billing-button.is-secondary { color: var(--riko-link) !important; background: var(--riko-surface); border-color: var(--riko-line-strong); }
.riko-billing-button.is-secondary:hover { background: var(--riko-action-soft); border-color: var(--riko-action-line); }
.riko-billing-button.is-danger { color: var(--riko-danger) !important; background: var(--riko-danger-surface); border-color: var(--riko-danger); }
.riko-billing-button:disabled { color: var(--riko-muted) !important; background: var(--riko-surface-soft); border-color: var(--riko-line); cursor: not-allowed; }
.riko-billing-result-count { color: var(--riko-muted); }
.riko-billing-revenue-scope { max-width: 110ch; color: var(--riko-muted); }
.riko-billing-revenue-table caption { color: var(--riko-muted); caption-side: top; padding: 0 0 10px; text-align: start; }
.riko-billing-revenue-table :is(time, td:not(:nth-child(4))) { font-variant-numeric: tabular-nums; }
.riko-billing-revenue-filters input[type="date"] { min-width: 160px; }
.riko-billing-table-scroll { overflow-x: auto; max-width: 100%; margin: 12px 0; }
.riko-billing-table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.riko-billing-table :is(th, td) { text-align: start; vertical-align: top; padding: 13px 12px; border-bottom: 1px solid var(--riko-line); }
.riko-billing-table thead th { color: var(--riko-ink); background: var(--riko-surface-soft); border-bottom-color: var(--riko-line-strong); white-space: nowrap; }
.riko-billing-table tbody th { font-weight: 600; }
.riko-billing-table tbody tr:hover { background: var(--riko-surface-soft); }
.riko-billing-table small, .riko-billing-admin .riko-billing-form small, .riko-billing-provider-list small { display: block; color: var(--riko-muted); margin-top: 5px; }
.riko-billing-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.riko-billing-status { display: inline-block; padding: 3px 7px; border: 1px solid var(--riko-line); border-radius: 3px; color: var(--riko-text); background: var(--riko-surface-soft); font-size: .875rem; }
.riko-billing-status.is-success { color: var(--riko-success); background: var(--riko-success-surface); border-color: var(--riko-success); }
.riko-billing-status.is-warning { color: var(--riko-warning); background: var(--riko-warning-surface); border-color: var(--riko-warning); }
.riko-billing-status.is-danger { color: var(--riko-danger); background: var(--riko-danger-surface); border-color: var(--riko-danger); }
.riko-billing-empty { border: 1px solid var(--riko-line); background: var(--riko-surface-soft); padding: 20px; margin: 16px 0; }
.riko-billing-detail-cell { min-width: 130px; max-width: 400px; overflow-wrap: anywhere; }
.riko-billing-admin summary { color: var(--riko-link); cursor: pointer; padding: 4px 0; }
.riko-billing-admin details[open] > summary { margin-bottom: 10px; }
.riko-billing-facts { margin: 12px 0; }
.riko-billing-facts > div { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 12px; border-bottom: 1px solid var(--riko-line); padding: 10px 0; }
.riko-billing-facts dt { color: var(--riko-muted); font-weight: 400; }
.riko-billing-facts dd { margin: 0; overflow-wrap: anywhere; }
.riko-billing-provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.riko-billing-provider-list > div { border-inline-start: 2px solid var(--riko-line-strong); padding-inline-start: 16px; }
.riko-billing-provider-list dt { color: var(--riko-ink); margin-bottom: 10px; }
.riko-billing-provider-list dd { margin: 0; }
.riko-billing-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; max-width: 950px; margin: 18px 0; }
.riko-billing-form > div { min-width: 0; }
.riko-billing-form-wide { grid-column: 1 / -1; }
.riko-billing-detail-cell .riko-billing-form { grid-template-columns: minmax(220px, 1fr); }
.riko-billing-inline-form { min-width: 240px; margin: 12px 0; }
.riko-billing-inline-form p { margin: 12px 0; }
.riko-billing-verify { margin-top: 16px; }
.riko-billing-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 20px 0; }
/* Public page wrappers share the surrounding reading surface. Panels and
   controls retain their own backgrounds; the template supplies the page gutter. */
.riko-billing-site { color: var(--riko-text); background: transparent; border: 1px solid var(--riko-line); border-radius: 8px; padding: clamp(18px, 3vw, 36px); max-width: 1200px; margin-inline: auto; overflow-wrap: anywhere; }
.riko-billing-site--plans { max-width: none; margin-inline: 0; padding: 0; border: 0; border-radius: 0; }
.riko-billing-site *, .riko-billing-site *::before, .riko-billing-site *::after { box-sizing: border-box; }
.riko-billing-site h1 { color: var(--riko-ink); font-size: clamp(1.7rem, 3vw, 2.25rem); margin: 24px 0 16px; line-height: 1.2; }
.riko-billing-site a { color: var(--riko-link); text-underline-offset: 3px; }
.riko-billing-site :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--riko-focus); outline-offset: 3px; }
.riko-billing-site-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; border-bottom: 1px solid var(--riko-line); padding-bottom: 16px; }
.riko-billing-site-nav a[aria-current] { color: var(--riko-ink); font-weight: 700; text-decoration-thickness: 2px; }
.riko-billing-site-intro { max-width: 80ch; }
.riko-billing-site-note { color: var(--riko-muted); max-width: 85ch; }
.riko-billing-site-notice { color: var(--riko-warning); background: var(--riko-warning-surface); border-inline-start: 3px solid var(--riko-warning); padding: 12px 16px; margin: 24px 0; }
.riko-billing-site-table-scroll { overflow-x: auto; max-width: 100%; margin: 24px 0; }
.riko-billing-site-table { width: 100%; border-collapse: collapse; }
.riko-billing-site-table :is(th, td) { border-bottom: 1px solid var(--riko-line); padding: 14px 12px; text-align: start; vertical-align: top; min-width: 100px; }
.riko-billing-site-table thead th { color: var(--riko-ink); background: var(--riko-surface-soft); font-size: .875rem; }
.riko-billing-site-table tbody th { color: var(--riko-ink); font-weight: 600; }
.riko-billing-offers-table .riko-billing-mobile-label { display: none; }
.riko-billing-site-table small { display: block; color: var(--riko-muted); font-weight: 400; font-size: .875rem; margin-top: 6px; }
.riko-billing-site-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.riko-billing-site-button { display: inline-flex; align-items: center; justify-content: center; color: var(--riko-action-contrast) !important; background: var(--riko-action); border: 1px solid var(--riko-action); border-radius: 4px; min-height: 44px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important; }
.riko-billing-site-button:hover { color: var(--riko-action-contrast) !important; background: var(--riko-action-hover); border-color: var(--riko-action-hover); }
.riko-billing-site-checkout { display: flex; flex-direction: column; align-items: stretch; gap: 8px; max-width: 270px; min-width: 200px; }
.riko-billing-site-checkout label { color: var(--riko-ink); font-size: .875rem; }
.riko-billing-site-checkout select { color: var(--riko-text); background: var(--riko-surface); border: 1px solid var(--riko-line-strong); border-radius: 4px; padding: 8px; min-height: 44px; font: inherit; }
.riko-billing-site-facts { max-width: 850px; margin: 24px 0; }
.riko-billing-site-facts > div { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 20px; border-bottom: 1px solid var(--riko-line); padding: 14px 0; }
.riko-billing-site-facts dt { color: var(--riko-muted); font-weight: 400; }
.riko-billing-site-facts dd { margin: 0; color: var(--riko-ink); }
.riko-billing-renew { max-width: 900px; margin: 0 auto; padding: clamp(18px, 3vw, 36px); background: var(--riko-surface); border: 1px solid var(--riko-line); border-radius: 12px; }
.riko-billing-renew .riko-billing-account-heading { margin-top: 0; }
.riko-billing-renew-facts { max-width: none; }
.riko-billing-renew-facts dd small { display: block; margin-top: 5px; color: var(--riko-muted); font-size: .875rem; font-weight: 400; }
.riko-billing-renew-note { color: var(--riko-text); max-width: 70ch; line-height: 1.6; }
.riko-billing-renew-confirm { margin: 24px 0; }
.riko-billing-renew-confirm .riko-billing-site-button { max-width: 100%; white-space: normal; text-align: center; }
.riko-billing-renew-back { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--riko-line); }
/* Keep secondary actions distinct from the template's generic submit buttons. */
:is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary,
html body #tm-content :is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary { background: var(--riko-surface); color: var(--riko-link) !important; border-color: var(--riko-action-line); }
:is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary:is(:hover, :focus),
html body #tm-content :is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary:is(:hover, :focus) { background: var(--riko-action-soft-hover); color: var(--riko-link) !important; }
.riko-billing-site-pagination { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.riko-billing-account-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--riko-line-strong); margin: 28px 0 18px; }
.riko-billing-account-tabs a { padding: 10px 0; border-bottom: 3px solid transparent; text-decoration: none; }
.riko-billing-account-tabs a[aria-current="page"] { color: var(--riko-ink); border-bottom-color: var(--riko-action); font-weight: 700; }
.riko-billing-access { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 22px; margin: 26px 0; background: var(--riko-surface-soft); border: 1px solid var(--riko-line-strong); border-inline-start: 4px solid var(--riko-line-strong); }
.riko-billing-access.is-active { border-inline-start-color: var(--riko-success); }
.riko-billing-access h2, .riko-billing-plans-help h2 { color: var(--riko-ink); font-size: 1.25rem; margin: 0 0 12px; }
.riko-billing-access p { max-width: 75ch; margin-bottom: 12px; }
.riko-billing-access-actions { display: flex; flex-direction: column; align-items: start; gap: 14px; flex-shrink: 0; }
.riko-billing-access-dates { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 20px 0 0; }
.riko-billing-access-dates dt { color: var(--riko-muted); font-size: .875rem; font-weight: 400; }
.riko-billing-access-dates dd { color: var(--riko-ink); margin: 2px 0 0; }
.riko-billing-current-plan { padding: 12px 16px; background: var(--riko-success-surface); color: var(--riko-success); border-inline-start: 3px solid var(--riko-success); }
.riko-billing-current-plan a { margin-inline-start: 12px; }
.riko-billing-plans-help { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; border-top: 1px solid var(--riko-line); padding-top: 26px; margin-top: 30px; }
.riko-billing-plan-benefits { margin: 28px 0 34px; }
.riko-billing-site :is(.riko-billing-plan-benefits, .riko-billing-plan-offers, .riko-billing-plan-comparison) h2 { color: var(--riko-ink); font-size: 1.4rem; line-height: 1.3; margin: 0 0 16px; }
.riko-billing-plan-benefits dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.riko-billing-plan-benefits dl > div { min-width: 0; border-top: 1px solid var(--riko-line); padding: 18px 0; }
.riko-billing-plan-benefits dt { color: var(--riko-ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin-bottom: 7px; }
.riko-billing-plan-benefits dd { margin: 0; max-width: 65ch; }
.riko-billing-plan-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 22px; }
.riko-billing-plan-offers, .riko-billing-plan-comparison { border-top: 1px solid var(--riko-line-strong); padding-top: 28px; margin-top: 30px; scroll-margin-top: 24px; }
.riko-billing-plan-offers .riko-billing-account-tabs { margin-top: 20px; }
.riko-billing-comparison-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.riko-billing-comparison-channels > section { min-width: 0; }
.riko-billing-comparison-channels h3 { color: var(--riko-ink); font-size: 1.125rem; line-height: 1.35; margin: 8px 0 12px; }
.riko-billing-access-comparison :is(th, td) { padding: 12px 10px; }
.riko-billing-access-comparison .is-jumbo :is(th, td) { color: var(--riko-ink); background: var(--riko-action-soft); font-weight: 700; }
/* Both download channels share the same prominent Jumbo row. Keep each
   foreground paired with the action surface, including the template cascade. */
@media screen and (forced-colors: none) {
    .riko-billing-site--plans .riko-billing-access-comparison tr.is-jumbo { background: var(--riko-action); background-image: linear-gradient(110deg, var(--riko-action), var(--riko-action-hover)); }
    #tm-content .riko-billing-site--plans .riko-billing-access-comparison tr.is-jumbo :is(th, td) { color: var(--riko-action-contrast); background: transparent; border-block: 1px solid color-mix(in srgb, var(--riko-action-contrast) 35%, transparent); font-weight: 700; }
    #tm-content .riko-billing-site--plans .riko-billing-access-comparison tr.is-jumbo > :first-child { box-shadow: inset 4px 0 0 var(--riko-action-contrast); }
}
@media (forced-colors: active) {
    #tm-content .riko-billing-site--plans .riko-billing-access-comparison tr.is-jumbo :is(th, td) { color: CanvasText; background: Canvas; border-block: 2px solid CanvasText; box-shadow: none; }
}
.riko-billing-jumbo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.riko-billing-jumbo-gallery img { display: block; width: 100%; height: auto; border-radius: 5px; }
.riko-billing-agreement { border-bottom: 1px solid var(--riko-line); padding: 24px 0; }
.riko-billing-agreement h2 { color: var(--riko-ink); font-size: 1.25rem; margin: 0 0 12px; }
.riko-billing-agreement summary { color: var(--riko-link); cursor: pointer; padding: 8px 0; }
.riko-billing-agreement details[open] > summary { margin-bottom: 12px; }
@media (max-width: 1199px) {
    /* Only this administrator component: let Atum's title shrink beside its controls. */
    body:has(.riko-billing-admin) .header-title { min-width: 0; flex: 1 1 auto; }
    body:has(.riko-billing-admin) .header-title > .d-flex.align-items-center { min-width: 0; max-width: 100%; }
    body:has(.riko-billing-admin) .header-title > .d-flex.align-items-center > .container-title { min-width: 0; max-width: 100%; flex: 1 1 auto; }
    body:has(.riko-billing-admin) .header-title > .d-flex.align-items-center > .container-title > .page-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 767px) {
    .riko-billing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
    .riko-billing-provider-list, .riko-billing-form { grid-template-columns: minmax(0, 1fr); }
    .riko-billing-form-wide { grid-column: auto; }
    .riko-billing-filters > div { flex: 1 1 100%; }
    .riko-billing-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .riko-billing-site-facts > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .riko-billing-offers-scroll { overflow: visible; }
    .riko-billing-offers-table, .riko-billing-offers-table tbody { display: block; width: 100%; min-width: 0; }
    .riko-billing-offers-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .riko-billing-offers-table tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; border: 1px solid var(--riko-line-strong); border-radius: 4px; margin-bottom: 16px; }
    .riko-billing-offers-table :is(th, td) { display: block; min-width: 0; padding: 0; border: 0; }
    .riko-billing-offers-table :is(th[scope="row"], .riko-billing-offer-payment) { grid-column: 1 / -1; }
    .riko-billing-offers-table .riko-billing-mobile-label { display: block; color: var(--riko-muted); font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
    .riko-billing-offers-table .riko-billing-site-amount { white-space: normal; }
    .riko-billing-offers-table .riko-billing-site-checkout { width: 100%; max-width: none; min-width: 0; }
    .riko-billing-offers-table :is(.riko-billing-site-button, select) { width: 100%; max-width: 100%; }
    .riko-billing-access { flex-direction: column; }
    .riko-billing-access-actions { flex-shrink: 1; }
    .riko-billing-plans-help, .riko-billing-jumbo-gallery, .riko-billing-plan-benefits dl, .riko-billing-comparison-channels { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
    .riko-billing-admin, .riko-billing-admin :is(.form-control, .form-select), .riko-billing-table thead th, .riko-billing-status, .riko-billing-empty, .riko-billing-notice { color: CanvasText; background: Canvas; border-color: CanvasText; }
    .riko-billing-admin a, .riko-billing-admin summary { color: LinkText; }
    .riko-billing-button, .riko-billing-button.is-secondary, .riko-billing-button.is-danger { color: ButtonText !important; background: ButtonFace; border-color: ButtonText; }
    .riko-billing-admin :focus-visible { outline-color: Highlight; }
    .riko-billing-site, .riko-billing-site-table thead th, .riko-billing-site-notice, .riko-billing-site-checkout select { color: CanvasText; background: Canvas; border-color: CanvasText; }
    .riko-billing-site a { color: LinkText; }
    .riko-billing-site-button, .riko-billing-site-button:hover, :is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary, :is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary:hover,
    html body #tm-content :is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary,
    html body #tm-content :is(.riko-billing-access-actions, .riko-payment-outcome) .riko-billing-site-button--secondary:is(:hover, :focus) { color: ButtonText !important; background: ButtonFace; border-color: ButtonText; }
    .riko-billing-site :focus-visible { outline-color: Highlight; }
}
@media print {
    .riko-billing-site-nav, .riko-billing-site-button, .riko-billing-site-pagination { display: none; }
    .riko-billing-site { border: 0; max-width: none; padding: 0; }
    .riko-billing-site-table-scroll { overflow: visible; }
}

/* Jumbo offers: scoped presentation; account and administrator layouts stay independent. */
.riko-billing-site--plans .riko-billing-jumbo-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 3vw, 44px); padding: clamp(22px, 3vw, 38px); margin-top: 22px; border: 1px solid var(--riko-brand); border-radius: 10px; color: var(--riko-on-brand); background-color: var(--riko-brand-deep); background-image: linear-gradient(110deg, color-mix(in srgb, var(--riko-brand-deep) 97%, transparent), color-mix(in srgb, var(--riko-brand-deep) 90%, transparent)), var(--riko-ambience-home-hero); background-position: center; background-size: cover; }
.riko-billing-site--plans .riko-billing-jumbo-hero { position: relative; isolation: isolate; overflow: hidden; }
.riko-billing-site--plans .riko-billing-jumbo-hero > * { position: relative; z-index: 1; }
.riko-billing-site--plans .riko-billing-jumbo-hero-copy { min-width: 0; }
.riko-billing-site--plans .riko-billing-jumbo-hero h1 { color: var(--riko-on-brand); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.08; margin: 6px 0 12px; letter-spacing: -.025em; }
/* Gravity applies important page-heading rules; keep this brand heading readable in both modes. */
#tm-content .riko-billing-site--plans .riko-billing-jumbo-hero h1 { color: var(--riko-on-brand) !important; font-size: clamp(2rem, 3.5vw, 3.5rem) !important; line-height: 1.08 !important; }
.riko-billing-site--plans .riko-billing-jumbo-hero p { color: var(--riko-on-brand); margin: 10px 0; max-width: 66ch; }
.riko-billing-site--plans .riko-billing-jumbo-hero :is(.riko-billing-site-intro, .riko-billing-jumbo-lead) { color: var(--riko-on-brand); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; }
.riko-billing-site--plans .riko-billing-jumbo-hero :is(.riko-billing-jumbo-eyebrow, .riko-billing-jumbo-hero-eyebrow) { color: var(--riko-on-brand-muted); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.riko-billing-site--plans .riko-billing-jumbo-hero :is(.riko-billing-jumbo-scope, .riko-billing-jumbo-hero-scope, .riko-billing-jumbo-free-note, .riko-billing-site-note) { color: var(--riko-on-brand-muted); font-size: .875rem; }
.riko-billing-site--plans .riko-billing-jumbo-hero a { color: var(--riko-on-brand); text-decoration-thickness: 1px; }
.riko-billing-site--plans .riko-billing-jumbo-hero :is(a, button):focus-visible { outline-color: var(--riko-focus-on-brand); }
.riko-billing-site--plans .riko-billing-jumbo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 22px 0 14px; }
.riko-billing-site--plans .riko-billing-jumbo-hero-actions > a:not(.riko-billing-site-button) { font-size: .9375rem; font-weight: 600; padding-block: 8px; }
.riko-billing-site--plans .riko-billing-jumbo-hero-visual { min-width: 0; margin: 0; }
.riko-billing-site--plans .riko-billing-jumbo-hero-visual img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; border-radius: 6px; }
.riko-billing-site--plans .riko-billing-jumbo-hero-visual figcaption { color: var(--riko-on-brand-muted); font-size: .75rem; line-height: 1.4; margin-top: 9px; text-align: end; }
.riko-billing-site--plans .riko-billing-plan-benefits { margin: 22px 0 28px; }
.riko-billing-site--plans .riko-billing-plan-benefits > h2 { font-size: 1.125rem; margin-bottom: 12px; }
.riko-billing-site--plans .riko-billing-plan-benefits dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.riko-billing-site--plans .riko-billing-plan-benefits dl > div { border-top: 0; border-inline-start: 2px solid var(--riko-action-line); padding: 2px 0 2px 14px; }
.riko-billing-site--plans .riko-billing-plan-benefits dt { font-size: .9375rem; line-height: 1.35; margin-bottom: 5px; }
.riko-billing-site--plans .riko-billing-plan-benefits dd { color: var(--riko-muted); font-size: .875rem; line-height: 1.45; }
.riko-billing-site--plans .riko-billing-plan-benefits > .riko-billing-site-note { max-width: none; font-size: .8125rem; line-height: 1.5; margin: 14px 0 0; }
.riko-billing-site--plans .riko-billing-plan-offers { padding-top: 24px; margin-top: 26px; }
.riko-billing-site--plans .riko-billing-jumbo-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 14px; }
.riko-billing-site--plans .riko-billing-jumbo-section-heading h2 { margin: 0; }
.riko-billing-site--plans .riko-billing-jumbo-section-heading p { color: var(--riko-muted); max-width: 72ch; margin: 0; }
.riko-billing-site--plans .riko-billing-plan-offers .riko-billing-account-tabs { margin-top: 16px; }
.riko-billing-site--plans .riko-billing-jumbo-offers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 24px 0 18px; }
.riko-billing-site--plans .riko-billing-jumbo-offer { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 1.7vw, 24px); border: 1px solid var(--riko-line-strong); border-radius: 7px; color: var(--riko-text); background: linear-gradient(145deg, var(--riko-surface), var(--riko-surface-soft)); box-shadow: 0 7px 20px color-mix(in srgb, var(--riko-brand-deep) 6%, transparent); }
.riko-billing-site--plans .riko-billing-jumbo-offer--annual { border-color: var(--riko-action); background: linear-gradient(145deg, var(--riko-action-soft), var(--riko-surface)); box-shadow: 0 0 0 1px var(--riko-action-line), 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 12%, transparent); }
.riko-billing-site--plans .riko-billing-jumbo-offer--annual::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--riko-action); pointer-events: none; }
.riko-billing-site--plans .riko-billing-jumbo-offer:focus-within { border-color: var(--riko-focus); }
.riko-billing-site--plans .riko-billing-jumbo-offer header > .riko-billing-jumbo-offer-label { display: block; color: var(--riko-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 7px; }
.riko-billing-site--plans .riko-billing-jumbo-offer h3 { color: var(--riko-ink); font-size: 1.375rem; line-height: 1.25; margin: 0; }
.riko-billing-site--plans .riko-billing-jumbo-offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; color: var(--riko-ink); font-variant-numeric: tabular-nums; margin: 20px 0 6px; }
.riko-billing-site--plans .riko-billing-jumbo-offer-price strong { font-size: clamp(2rem, 2.8vw, 2.75rem); font-weight: 750; line-height: 1.1; letter-spacing: -.035em; }
.riko-billing-site--plans .riko-billing-jumbo-offer-price span { font-size: .9375rem; font-weight: 600; }
.riko-billing-site--plans .riko-billing-jumbo-offer-period { color: var(--riko-text); font-size: .875rem; line-height: 1.45; margin: 0 0 14px; }
.riko-billing-site--plans .riko-billing-jumbo-offer-includes { color: var(--riko-muted); font-size: .8125rem; line-height: 1.45; border-top: 1px solid var(--riko-line); padding-top: 14px; margin: 0 0 18px; }
.riko-billing-site--plans .riko-billing-jumbo-offer .riko-billing-site-checkout { width: 100%; min-width: 0; max-width: none; margin-top: auto; }
.riko-billing-site--plans .riko-billing-jumbo-offer :is(select, .riko-billing-site-button) { width: 100%; max-width: 100%; white-space: normal; }
.riko-billing-site--plans .riko-billing-jumbo-offer > .riko-billing-site-button { margin-top: auto; }
.riko-billing-site--plans .riko-billing-jumbo-renewal-help { color: var(--riko-text); font-size: .9375rem; line-height: 1.5; }
.riko-billing-site--plans .riko-billing-jumbo-payment-notes { color: var(--riko-muted); font-size: .8125rem; line-height: 1.5; max-width: 90ch; margin-top: 20px; }
.riko-billing-site--plans .riko-billing-jumbo-payment-notes p { margin: 6px 0; }
.riko-billing-site--plans .riko-billing-plan-comparison { margin-top: 36px; }
.riko-billing-site--plans .riko-billing-comparison-channels { gap: 32px; }
.riko-billing-site--plans .riko-billing-jumbo-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 32px; border-top: 1px solid var(--riko-line); margin-top: 34px; padding-top: 28px; }
.riko-billing-site--plans .riko-billing-jumbo-story h2 { color: var(--riko-ink); font-size: 1.25rem; line-height: 1.3; margin: 0 0 12px; }
.riko-billing-site--plans .riko-billing-jumbo-story p { max-width: 65ch; margin: 0; }
.riko-billing-site--plans .riko-billing-jumbo-story .riko-billing-jumbo-eyebrow { color: var(--riko-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 7px; }
.riko-billing-site--plans .riko-billing-jumbo-story .riko-billing-jumbo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.riko-billing-site--plans .riko-billing-jumbo-story .riko-billing-jumbo-gallery img { width: 100%; height: auto; aspect-ratio: 100 / 53; object-fit: contain; background: var(--riko-surface-soft); }
.riko-billing-site--plans .riko-billing-jumbo-faq { border-top: 1px solid var(--riko-line); margin-top: 34px; padding-top: 26px; }
.riko-billing-site--plans .riko-billing-jumbo-faq h2 { color: var(--riko-ink); font-size: 1.25rem; line-height: 1.3; margin: 0 0 14px; }
.riko-billing-site--plans .riko-billing-jumbo-faq details { border-bottom: 1px solid var(--riko-line); padding: 0; }
.riko-billing-site--plans .riko-billing-jumbo-faq summary { color: var(--riko-ink); font-weight: 600; line-height: 1.45; cursor: pointer; min-height: 48px; padding: 14px 4px; }
.riko-billing-site--plans .riko-billing-jumbo-faq details[open] summary { color: var(--riko-link); }
.riko-billing-site--plans .riko-billing-jumbo-faq details p { max-width: 85ch; margin: 0 4px 18px; line-height: 1.6; }
.riko-billing-site--plans .riko-billing-jumbo-support { padding-top: 24px; }
.riko-billing-site--plans .riko-billing-jumbo-support h3 { color: var(--riko-ink); font-size: 1.125rem; margin: 0 0 10px; }
.riko-billing-site--plans .riko-billing-jumbo-support p { max-width: 70ch; margin: 0 0 12px; }
.riko-billing-site--plans .riko-billing-jumbo-support a { font-weight: 600; }
/* The annual offer keeps its accent without motion. The reflection runs only
   twice, pauses outside the viewport and never crosses payment controls. */
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    .riko-billing-site--plans .riko-billing-jumbo-offer { transition: border-color 230ms ease, box-shadow 230ms ease, transform 230ms cubic-bezier(.2, .65, .3, 1); }
    .riko-billing-site--plans .riko-billing-jumbo-offer--annual::after {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        width: 35%;
        height: 3px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, var(--riko-inverse), transparent);
        opacity: 0;
        animation: riko-jumbo-offer-reflection 2.4s ease-in-out 2;
        animation-play-state: paused;
    }
    html[data-riko-motion-running="true"] .riko-billing-site--plans .riko-billing-jumbo-offer--annual[data-riko-motion-loop="visible"]::after { animation-play-state: running; }
    @keyframes riko-jumbo-offer-reflection {
        0%, 6% { transform: translateX(-110%); opacity: 0; }
        12% { opacity: .85; }
        38% { transform: translateX(390%); opacity: .85; }
        44%, 100% { transform: translateX(390%); opacity: 0; }
    }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    html[data-riko-motion-enabled="true"] .riko-billing-site--plans .riko-billing-jumbo-offer:hover { transform: translateY(-3px); border-color: var(--riko-action); box-shadow: 0 12px 28px color-mix(in srgb, var(--riko-brand-deep) 14%, transparent); }
}
@media (min-width: 640px) {
    .riko-billing-site--plans .riko-billing-jumbo-offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 999px) {
    .riko-billing-site--plans .riko-billing-jumbo-offer:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .riko-billing-site--plans .riko-billing-jumbo-offers-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 959px) {
    .riko-billing-site--plans .riko-billing-jumbo-hero { gap: 20px; padding: 24px; }
    .riko-billing-site--plans .riko-billing-plan-benefits dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riko-billing-site--plans .riko-billing-jumbo-story { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 639px) {
    .riko-billing-site--plans .riko-billing-jumbo-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; margin-top: 18px; }
    .riko-billing-site--plans .riko-billing-jumbo-hero h1 { font-size: 2rem; margin-bottom: 8px; }
    .riko-billing-site--plans .riko-billing-jumbo-hero p { margin-block: 7px; }
    .riko-billing-site--plans .riko-billing-jumbo-hero :is(.riko-billing-site-intro, .riko-billing-jumbo-lead) { font-size: 1rem; line-height: 1.4; }
    .riko-billing-site--plans .riko-billing-jumbo-hero-actions { margin: 16px 0 10px; gap: 8px 16px; }
    .riko-billing-site--plans .riko-billing-jumbo-hero-actions > a { font-size: .875rem; }
    .riko-billing-site--plans .riko-billing-jumbo-hero-visual img { max-height: 128px; }
    .riko-billing-site--plans .riko-billing-jumbo-hero-visual figcaption { margin-top: 5px; font-size: .6875rem; }
    .riko-billing-site--plans .riko-billing-plan-benefits { margin: 18px 0 24px; }
    .riko-billing-site--plans .riko-billing-plan-benefits dl { gap: 14px 12px; }
    .riko-billing-site--plans .riko-billing-plan-benefits dl > div { padding-inline-start: 10px; }
    .riko-billing-site--plans .riko-billing-plan-benefits dt { font-size: .8125rem; }
    .riko-billing-site--plans .riko-billing-plan-benefits dd { font-size: .75rem; line-height: 1.4; }
    .riko-billing-site--plans .riko-billing-jumbo-section-heading { gap: 8px; }
    .riko-billing-site--plans .riko-billing-jumbo-offers-grid { gap: 14px; margin-top: 20px; }
    .riko-billing-site--plans .riko-billing-jumbo-offer { padding: 20px; }
    .riko-billing-site--plans .riko-billing-jumbo-offer-price strong { font-size: 2.25rem; }
    .riko-billing-site--plans .riko-billing-jumbo-story .riko-billing-jumbo-gallery { gap: 12px; }
}
@media (forced-colors: active) {
    .riko-billing-site--plans .riko-billing-jumbo-hero, .riko-billing-site--plans .riko-billing-jumbo-offer { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
    .riko-billing-site--plans .riko-billing-jumbo-offer--annual { outline: 2px solid CanvasText; outline-offset: 2px; }
    .riko-billing-site--plans .riko-billing-jumbo-offer--annual::before { content: none; }
    .riko-billing-site--plans .riko-billing-jumbo-hero :is(h1, p, figcaption) { color: CanvasText; }
    .riko-billing-site--plans .riko-billing-jumbo-hero a { color: LinkText; }
    .riko-billing-site--plans .riko-billing-jumbo-hero .riko-billing-site-button { color: ButtonText !important; background: ButtonFace; border-color: ButtonText; }
    .riko-billing-site--plans .riko-billing-jumbo-hero :is(a, button):focus-visible { outline-color: Highlight; }
}
@media print {
    .riko-billing-site--plans .riko-billing-jumbo-hero { background: var(--riko-artwork-surface); border-color: var(--riko-line); }
    .riko-billing-site--plans .riko-billing-jumbo-hero :is(h1, p, figcaption) { color: var(--riko-artwork-ink); }
    .riko-billing-site--plans .riko-billing-jumbo-offer { box-shadow: none; break-inside: avoid; }
    .riko-billing-site--plans .riko-billing-jumbo-offer--annual::before { content: none; }
}

/* A soft reflection stays behind the copy, photographs and payment navigation. */
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    .riko-billing-site--plans .riko-billing-jumbo-hero::after {
        content: "";
        position: absolute;
        inset: -35% auto -35% -42%;
        width: 36%;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 12%, color-mix(in srgb, var(--riko-inverse) 6%, transparent) 32%, color-mix(in srgb, var(--riko-inverse) 20%, transparent) 50%, color-mix(in srgb, var(--riko-inverse) 8%, transparent) 68%, transparent 88%);
        animation: riko-billing-jumbo-sheen 9s cubic-bezier(.2, .65, .35, 1) infinite;
    }
    html[data-riko-motion="ready"]:not([data-riko-motion-running="true"]) .riko-billing-site--plans .riko-billing-jumbo-hero::after { animation-play-state: paused; }
    @keyframes riko-billing-jumbo-sheen {
        0%, 8% { transform: translate3d(-140%, 0, 0) skewX(-18deg); opacity: 0; }
        12% { opacity: 1; }
        48% { transform: translate3d(600%, 0, 0) skewX(-18deg); opacity: 1; }
        52%, 100% { transform: translate3d(600%, 0, 0) skewX(-18deg); opacity: 0; }
    }
}
/* Member billing content only: the existing member menu and outer rail are untouched. */
.riko-billing-site--account .riko-billing-account-content { display: grid; gap: 24px; min-width: 0; padding-top: 4px; }
.riko-billing-site--account .riko-billing-account-heading h1 { margin: 0 0 16px; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.riko-billing-site--account .riko-billing-account-heading .riko-billing-site-intro { margin: 0; max-width: 76ch; color: var(--riko-muted); line-height: 1.65; }
.riko-billing-site--account .riko-billing-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, auto); align-items: center; gap: 24px 32px; margin: 0; padding: clamp(22px, 2.2vw, 32px); border: 1px solid var(--riko-line); border-inline-start: 4px solid var(--riko-action-line); border-radius: 14px; background: linear-gradient(115deg, var(--riko-surface-soft), color-mix(in srgb, var(--riko-surface-soft) 60%, var(--riko-action-soft))); box-shadow: 0 8px 24px color-mix(in srgb, var(--riko-brand-deep) 9%, transparent); }
.riko-billing-site--account .riko-billing-access.is-active { border-inline-start-color: var(--riko-success); }
.riko-billing-site--account .riko-billing-access.is-review { border-inline-start-color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-access:not(:has(> .riko-billing-access-actions)) { grid-template-columns: minmax(0, 1fr); }
.riko-billing-site--account .riko-billing-access-content { display: grid; gap: 20px; min-width: 0; }
.riko-billing-site--account .riko-billing-access-summary { min-width: 0; }
.riko-billing-site--account .riko-billing-access p { margin: 0; line-height: 1.65; }
.riko-billing-site--account .riko-billing-access .riko-billing-account-eyebrow { color: var(--riko-muted); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.riko-billing-site--account .riko-billing-access h2 { margin: 6px 0 8px; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -.015em; }
.riko-billing-site--account .riko-billing-access .riko-billing-site-note { margin-top: 12px; font-size: .9375rem; }
.riko-billing-site--account .riko-billing-access-dates { gap: 12px 32px; align-items: end; margin: 0; padding-top: 18px; border-top: 1px solid var(--riko-line); }
.riko-billing-site--account .riko-billing-access-dates dd { margin-top: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.riko-billing-site--account .riko-billing-access-expiry dd { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.25; letter-spacing: -.015em; }
.riko-billing-site--account .riko-billing-access-start dd { color: var(--riko-muted); font-size: .875rem; font-weight: 400; }
.riko-billing-site--account .riko-billing-access-actions { align-items: stretch; gap: 10px; min-width: 0; max-width: 330px; }
.riko-billing-site--account .riko-billing-access-actions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; }
.riko-billing-site--account .riko-billing-site-button { border-radius: 8px; padding: 12px 20px; line-height: 1.4; }
.riko-billing-site--account .riko-billing-account-history { min-width: 0; }
.riko-billing-site--account .riko-billing-account-history-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; padding: 0 24px; border-bottom: 1px solid var(--riko-line); }
.riko-billing-site--account .riko-billing-account-heading > .riko-billing-account-history-toolbar { margin-bottom: 18px; padding: 0; }
.riko-billing-site--account .riko-billing-account-tabs { gap: 0 24px; margin: 0; padding: 0; border-bottom: 0; }
.riko-billing-site--account .riko-billing-account-history-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; color: var(--riko-muted); }
.riko-billing-site--account .riko-billing-account-history-link[aria-current="page"] { color: var(--riko-link); font-weight: 600; }
.riko-billing-site--account .riko-billing-account-history-title { margin: 0 0 20px; font-size: 1.125rem; color: var(--riko-ink); }
.riko-billing-site--account .riko-billing-account-tabs a { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 2px; color: var(--riko-muted); line-height: 1.4; font-size: 17px; font-weight: 650; }
.riko-billing-site--account .riko-billing-account-tabs a:hover { color: var(--riko-ink); border-bottom-color: var(--riko-action-line); }
.riko-billing-site--account .riko-billing-account-tabs a[aria-current="page"] { color: var(--riko-link); border-bottom-color: var(--riko-action); }
.riko-billing-site--account .riko-billing-account-history-body { min-width: 0; }
.riko-billing-site--account .riko-billing-account-empty { padding: 26px; border: 1px solid var(--riko-line); border-radius: 12px; background: linear-gradient(120deg, var(--riko-surface), var(--riko-surface-soft)); }
.riko-billing-site--account .riko-billing-account-empty-title { margin: 0 0 8px; color: var(--riko-ink); font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.riko-billing-site--account .riko-billing-account-empty p { margin: 0; max-width: 76ch; color: var(--riko-muted); font-size: .9375rem; line-height: 1.65; }
.riko-billing-site--account .riko-billing-site-table-scroll { margin: 0; }
.riko-billing-site--account .riko-billing-site-table { font-size: .9375rem; }
.riko-billing-site--account .riko-billing-site-table :is(th, td) { padding: 18px 16px; }
.riko-billing-site--account .riko-billing-site-table :is(th, td):first-child { padding-inline-start: 6px; }
.riko-billing-site--account .riko-billing-site-table :is(th, td):last-child { padding-inline-end: 0; }
.riko-billing-site--account .riko-billing-site-table thead th { padding-block: 0 14px; background: transparent; color: var(--riko-muted); font-size: .8125rem; font-weight: 600; border-bottom-color: var(--riko-line-strong); }
.riko-billing-site--account .riko-billing-site-table tbody tr:last-child > :is(th, td) { border-bottom: 0; }
.riko-billing-site--account .riko-billing-site-table .riko-billing-site-amount { text-align: end; }
.riko-billing-site--account .riko-billing-invoices { border-collapse: separate; border-spacing: 0 10px; }
.riko-billing-site--account .riko-billing-invoices tbody tr > :is(th, td) { padding: 18px; border-block: 1px solid var(--riko-line); background: linear-gradient(180deg, var(--riko-surface-soft), color-mix(in srgb, var(--riko-surface-soft) 75%, var(--riko-surface))); vertical-align: middle; }
.riko-billing-site--account .riko-billing-invoices tbody tr:last-child > :is(th, td) { border-bottom: 1px solid var(--riko-line); }
.riko-billing-site--account .riko-billing-invoices tbody tr > th:first-child { min-width: 170px; padding-inline-start: 20px; border-inline-start: 4px solid var(--riko-line-strong); border-radius: 12px 0 0 12px; }
.riko-billing-site--account .riko-billing-invoices tbody tr > td:last-child { padding-inline-end: 20px; border-inline-end: 1px solid var(--riko-line); border-radius: 0 12px 12px 0; }
.riko-billing-site--account .riko-billing-invoices tbody tr.is-success > th:first-child { border-inline-start-color: var(--riko-success); }
.riko-billing-site--account .riko-billing-invoices tbody tr.is-warning > th:first-child { border-inline-start-color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-invoices tbody tr.is-danger > th:first-child { border-inline-start-color: var(--riko-danger); }
.riko-billing-site--account .riko-billing-invoices .riko-billing-site-amount { color: var(--riko-ink); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.riko-billing-site--account .riko-billing-invoices .riko-billing-record-title { margin-top: 5px; font-size: .8125rem; }
.riko-billing-site--account .riko-billing-invoice-document { text-align: end; }
.riko-billing-site--account .riko-billing-invoice-pdf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 12px; border: 1px solid var(--riko-action-line); border-radius: 6px; background: var(--riko-action-soft); color: var(--riko-link); font-size: .8125rem; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; }
.riko-billing-site--account .riko-billing-invoice-pdf:hover { background: var(--riko-action-soft-hover); text-decoration: underline; }
.riko-billing-site--account .riko-billing-record-kind { display: block; margin-bottom: 4px; color: var(--riko-muted); font-size: .8125rem; font-weight: 400; }
.riko-billing-site--account .riko-billing-record-reference { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.riko-billing-site--account .riko-billing-record-title { max-width: 40ch; line-height: 1.5; }
.riko-billing-site--account .riko-billing-record-period { min-width: 175px; font-variant-numeric: tabular-nums; }
.riko-billing-site--account .riko-billing-record-status { display: inline-block; max-width: 24ch; padding: 4px 9px; border: 1px solid var(--riko-line); border-radius: 6px; background: var(--riko-surface-soft); color: var(--riko-ink); font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.riko-billing-site--account .riko-billing-record-status.is-success { color: var(--riko-success); background: var(--riko-success-surface); border-color: var(--riko-success); }
.riko-billing-site--account .riko-billing-record-status.is-warning { color: var(--riko-warning); background: var(--riko-warning-surface); border-color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-record-status.is-danger { color: var(--riko-danger); background: var(--riko-danger-surface); border-color: var(--riko-danger); }
.riko-billing-site--account .riko-billing-record-pending-note { display: block; margin-top: 5px; color: var(--riko-muted); font-size: .8125rem; }
.riko-billing-site--account .riko-billing-record-details { margin-top: 8px; font-size: .8125rem; font-weight: 400; }
.riko-billing-site--account .riko-billing-record-details summary { width: fit-content; min-height: 36px; padding-block: 8px; color: var(--riko-link); cursor: pointer; }
.riko-billing-site--account .riko-billing-record-details dl { display: grid; gap: 10px; margin: 4px 0 12px; }
.riko-billing-site--account .riko-billing-record-details dt { color: var(--riko-muted); }
.riko-billing-site--account .riko-billing-record-details dd { margin: 3px 0 0; color: var(--riko-text); overflow-wrap: anywhere; }
/* Duration additions share one account access; rows are events, not separate plans. */
.riko-billing-site--account .riko-billing-duration-heading { margin-bottom: 18px; }
.riko-billing-site--account .riko-billing-duration-heading h2 { margin: 0 0 8px; color: var(--riko-ink); font-size: 1.375rem; line-height: 1.35; letter-spacing: -.015em; }
.riko-billing-site--account .riko-billing-duration-heading p { max-width: 90ch; margin: 0; color: var(--riko-muted); font-size: .9375rem; line-height: 1.65; }
.riko-billing-site--account .riko-billing-duration-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--riko-line); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--riko-surface-soft) 75%, var(--riko-surface)), var(--riko-surface-soft)); box-shadow: 0 4px 14px color-mix(in srgb, var(--riko-brand-deep) 6%, transparent); }
.riko-billing-site--account .riko-billing-duration-entry { min-width: 0; padding: 20px 24px 8px; border-bottom: 1px solid var(--riko-line); border-inline-start: 3px solid transparent; }
.riko-billing-site--account .riko-billing-duration-entry:first-child { border-start-start-radius: 13px; }
.riko-billing-site--account .riko-billing-duration-entry:last-child { border-bottom: 0; border-end-start-radius: 13px; }
.riko-billing-site--account .riko-billing-duration-entry.is-warning { border-inline-start-color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-duration-entry.is-danger { border-inline-start-color: var(--riko-danger); }
.riko-billing-site--account .riko-billing-duration-main { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 2fr) minmax(110px, .6fr); align-items: center; gap: 16px 28px; }
.riko-billing-site--account .riko-billing-duration-label { display: block; margin-bottom: 5px; color: var(--riko-muted); font-size: .8125rem; line-height: 1.5; }
.riko-billing-site--account .riko-billing-duration-date { color: var(--riko-ink); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.riko-billing-site--account .riko-billing-duration-title { margin: 0; color: var(--riko-ink); font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.riko-billing-site--account .riko-billing-duration-status { margin: 5px 0 0; color: var(--riko-muted); font-size: .875rem; line-height: 1.5; }
.riko-billing-site--account .riko-billing-duration-entry.is-warning .riko-billing-duration-status { color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-duration-entry.is-danger .riko-billing-duration-status { color: var(--riko-danger); }
.riko-billing-site--account .riko-billing-duration-amount { min-width: 0; text-align: end; }
.riko-billing-site--account .riko-billing-duration-amount strong { display: block; color: var(--riko-ink); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; }
.riko-billing-site--account .riko-billing-duration-note { margin: 12px 0 0; color: var(--riko-text); font-size: .875rem; line-height: 1.6; }
.riko-billing-site--account .riko-billing-duration-details { margin-top: 8px; }
.riko-billing-site--account .riko-billing-duration-details summary { min-height: 44px; padding-block: 12px; line-height: 1.5; }
.riko-billing-site--account .riko-billing-duration-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; padding-bottom: 8px; }
.riko-billing-site--account .riko-billing-account-disclosure { margin-top: 18px; }
.riko-billing-site--account .riko-billing-account-disclosure > summary { display: inline-flex; max-width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--riko-line-strong); border-radius: 8px; background: var(--riko-surface); color: var(--riko-link); font-size: .875rem; font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
.riko-billing-site--account .riko-billing-account-disclosure > summary::-webkit-details-marker { display: none; }
.riko-billing-site--account .riko-billing-account-disclosure > summary:hover { background: var(--riko-action-soft); border-color: var(--riko-action-line); }
.riko-billing-site--account .riko-billing-history-count { color: var(--riko-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.riko-billing-site--account .riko-billing-account-disclosure[open] .riko-billing-history-chevron { transform: rotate(180deg); }
.riko-billing-site--account .riko-billing-history-body { padding-top: 18px; }
.riko-billing-site--account .riko-billing-history-note { margin: 0 0 16px; color: var(--riko-muted); font-size: .875rem; line-height: 1.6; }
.riko-billing-site--account .riko-billing-renewal-current { padding: 24px; border: 1px solid var(--riko-line); border-radius: 12px; background: linear-gradient(120deg, var(--riko-surface), var(--riko-surface-soft)); }
.riko-billing-site--account .riko-billing-renewal-current h2 { margin: 0 0 12px; color: var(--riko-ink); font-size: 1.25rem; line-height: 1.4; }
.riko-billing-site--account .riko-billing-current-renewal-status { display: block; color: var(--riko-ink); font-size: 1.5rem; line-height: 1.35; }
.riko-billing-site--account .riko-billing-renewal-current.is-warning .riko-billing-current-renewal-status { color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-renewal-current p { max-width: 85ch; margin: 12px 0 0; color: var(--riko-text); line-height: 1.65; }
@media (max-width: 640px) {
    .riko-billing-site--account .riko-billing-duration-entry { padding: 18px 16px 6px; }
    .riko-billing-site--account .riko-billing-duration-main { grid-template-columns: minmax(0, 1fr) minmax(90px, auto); gap: 16px; }
    .riko-billing-site--account .riko-billing-duration-date { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; }
    .riko-billing-site--account .riko-billing-duration-date .riko-billing-duration-label { margin: 0; }
    .riko-billing-site--account .riko-billing-duration-title { font-size: 1.375rem; }
    .riko-billing-site--account .riko-billing-duration-amount strong { font-size: 1.125rem; }
    .riko-billing-site--account .riko-billing-duration-details dl { grid-template-columns: minmax(0, 1fr); }
}
.riko-billing-site--account .riko-billing-site-pagination { align-items: center; justify-content: flex-end; gap: 20px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--riko-line); font-size: .9375rem; }
.riko-billing-site--account .riko-billing-site-pagination a { display: inline-flex; align-items: center; min-height: 44px; }
.riko-billing-site--account .riko-billing-renewal-note { max-width: 85ch; margin: 0; color: var(--riko-muted); font-size: .875rem; line-height: 1.65; }
.riko-billing-site--account .riko-billing-agreement { margin-top: 18px; padding: 24px; border: 1px solid var(--riko-line); border-inline-start: 4px solid var(--riko-line-strong); border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--riko-surface-soft) 75%, var(--riko-surface)), var(--riko-surface-soft)); box-shadow: 0 4px 14px color-mix(in srgb, var(--riko-brand-deep) 6%, transparent); }
.riko-billing-site--account .riko-billing-agreement.is-success { border-inline-start-color: var(--riko-success); }
.riko-billing-site--account .riko-billing-agreement.is-warning { border-inline-start-color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-agreement.is-danger { border-inline-start-color: var(--riko-danger); }
.riko-billing-site--account .riko-billing-agreement-heading h2 { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.riko-billing-site--account .riko-billing-agreement-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 16px 28px; }
.riko-billing-site--account .riko-billing-agreement-status { display: grid; gap: 5px; text-align: end; }
.riko-billing-site--account .riko-billing-agreement-status-label { color: var(--riko-muted); font-size: .8125rem; line-height: 1.5; }
.riko-billing-site--account .riko-billing-agreement-status-value { color: var(--riko-ink); font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.riko-billing-site--account .riko-billing-agreement-status-value.is-success { color: var(--riko-success); }
.riko-billing-site--account .riko-billing-agreement-status-value.is-warning { color: var(--riko-warning); }
.riko-billing-site--account .riko-billing-agreement-status-value.is-danger { color: var(--riko-danger); }
.riko-billing-site--account .riko-billing-agreement-explanation { max-width: 90ch; margin: 20px 0 0; color: var(--riko-text); font-size: .9375rem; line-height: 1.65; }
.riko-billing-site--account .riko-billing-agreement-provider-name { margin: 0 0 4px; color: var(--riko-muted); font-size: .8125rem; line-height: 1.5; }
.riko-billing-site--account .riko-billing-agreement .riko-billing-site-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: none; margin: 20px 0 8px; padding-top: 18px; border-top: 1px solid var(--riko-line); }
.riko-billing-site--account .riko-billing-agreement .riko-billing-site-facts > div { display: block; min-width: 0; padding: 0; border: 0; }
.riko-billing-site--account .riko-billing-agreement .riko-billing-site-facts dt { margin-bottom: 6px; font-size: .8125rem; }
.riko-billing-site--account .riko-billing-agreement .riko-billing-site-facts dd { line-height: 1.5; font-variant-numeric: tabular-nums; }
.riko-billing-site--account .riko-billing-agreement .riko-billing-site-facts dd small { display: block; margin-top: 4px; color: var(--riko-muted); font-size: .8125rem; }
.riko-billing-site--account .riko-billing-agreement-next dd { font-size: 1.125rem; }
.riko-billing-site--account .riko-billing-agreement-amount dd { color: var(--riko-ink); font-size: 1.375rem; font-weight: 700; }
.riko-billing-site--account .riko-billing-agreement-amount dd small { font-weight: 400; }
.riko-billing-site--account .riko-billing-agreement > .riko-billing-record-details summary { min-height: 36px; padding-block: 8px; }
.riko-billing-site--account .riko-billing-agreement-management { display: flex; flex-wrap: wrap; align-items: start; gap: 12px 24px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--riko-line); }
.riko-billing-site--account .riko-billing-agreement-change { margin: 0; }
.riko-billing-site--account .riko-billing-agreement-cancellation { flex: 1 1 260px; min-width: 0; }
.riko-billing-site--account .riko-billing-agreement-cancellation summary { width: fit-content; min-height: 44px; padding: 10px 0; color: var(--riko-danger); font-size: .875rem; line-height: 1.5; }
.riko-billing-site--account .riko-billing-agreement-cancellation p { max-width: 80ch; font-size: .9375rem; }
html body #tm-content .riko-billing-site--account .riko-billing-agreement-cancellation .riko-billing-site-button { color: var(--riko-danger) !important; background: var(--riko-danger-surface) !important; border-color: var(--riko-danger) !important; }
html body #tm-content .riko-billing-site--account .riko-billing-agreement-cancellation .riko-billing-site-button:is(:hover, :focus-visible) { color: var(--riko-danger) !important; background: var(--riko-danger-surface) !important; border-color: var(--riko-danger) !important; text-decoration: underline !important; }
.riko-billing-site--account .riko-billing-agreement-provider { margin: 16px 0 0; }
.riko-billing-site--account .riko-billing-agreement-provider a { display: inline-flex; align-items: center; min-height: 44px; }
.riko-billing-site--account .riko-billing-account-help { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; border-top: 1px solid var(--riko-line); padding-top: 16px; font-size: .875rem; }
.riko-billing-site--account .riko-billing-account-help p { margin: 0; color: var(--riko-muted); }
.riko-billing-site--account .riko-billing-account-help a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1200px) {
    .riko-billing-site--account .riko-billing-access-content:has(> .riko-billing-access-dates) { grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr); align-items: center; gap: 16px 32px; }
    .riko-billing-site--account .riko-billing-access-content > p { grid-column: 1 / -1; }
    .riko-billing-site--account .riko-billing-access-dates { display: grid; gap: 12px; padding-top: 0; padding-inline-start: 28px; border-top: 0; border-inline-start: 1px solid var(--riko-line); }
}
@media (max-width: 900px) {
    .riko-billing-site--account .riko-billing-agreement .riko-billing-site-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .riko-billing-site--account .riko-billing-account-content { gap: 24px; }
    .riko-billing-site--account .riko-billing-access { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px; }
    .riko-billing-site--account .riko-billing-access-actions { min-width: 0; width: 100%; max-width: none; gap: 8px; padding-top: 20px; border-top: 1px solid var(--riko-line); }
    .riko-billing-site--account .riko-billing-account-history-toolbar { padding-inline: 18px; }
    .riko-billing-site--account .riko-billing-account-tabs { gap: 0 18px; }
    .riko-billing-site--account .riko-billing-account-tabs a { min-height: 48px; font-size: .9375rem; }
    .riko-billing-site--account .riko-billing-account-empty { padding: 22px 18px; }
    .riko-billing-site--account .riko-billing-site-table.is-detailed { min-width: 680px; }
    .riko-billing-site--account .riko-billing-agreement .riko-billing-site-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .riko-billing-site--account .riko-billing-agreement { padding: 18px 16px; }
}
@media (max-width: 640px) {
    .riko-billing-site--account .riko-billing-agreement-status { width: 100%; padding-top: 16px; border-top: 1px solid var(--riko-line); text-align: start; }
    .riko-billing-site--account .riko-billing-site-table.is-summary thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .riko-billing-site--account .riko-billing-site-table.is-summary tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 18px 0; border-bottom: 1px solid var(--riko-line); }
    .riko-billing-site--account .riko-billing-site-table.is-summary tbody tr:last-child { border-bottom: 0; }
    .riko-billing-site--account .riko-billing-site-table.is-summary tbody :is(th, td) { display: block; min-width: 0; padding: 0; border: 0; text-align: start; }
    .riko-billing-site--account .riko-billing-site-table.is-summary tbody th { grid-column: 1 / -1; }
    .riko-billing-site--account .riko-billing-site-table.is-summary tbody td::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--riko-muted); font-size: .75rem; font-weight: 400; }
    .riko-billing-site--account .riko-billing-site-table.riko-billing-invoices tbody tr { margin-bottom: 12px; padding: 18px; border: 1px solid var(--riko-line); border-inline-start-width: 4px; border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--riko-surface-soft) 75%, var(--riko-surface)), var(--riko-surface-soft)); }
    .riko-billing-site--account .riko-billing-site-table.riko-billing-invoices tbody tr:last-child { border-bottom: 1px solid var(--riko-line); }
    .riko-billing-site--account .riko-billing-invoices tbody tr.is-success { border-inline-start-color: var(--riko-success); }
    .riko-billing-site--account .riko-billing-invoices tbody tr.is-warning { border-inline-start-color: var(--riko-warning); }
    .riko-billing-site--account .riko-billing-invoices tbody tr.is-danger { border-inline-start-color: var(--riko-danger); }
    .riko-billing-site--account .riko-billing-invoices tbody tr > :is(th, td), .riko-billing-site--account .riko-billing-invoices tbody tr:last-child > :is(th, td), .riko-billing-site--account .riko-billing-invoices tbody tr > th:first-child, .riko-billing-site--account .riko-billing-invoices tbody tr > td:last-child { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: start; }
    .riko-billing-site--account .riko-billing-invoice-document { grid-column: 1 / -1; }
    .riko-billing-site--account .riko-billing-invoice-document::before { display: none !important; }
}
@media (forced-colors: active) {
    .riko-billing-site--account :is(.riko-billing-access, .riko-billing-account-empty, .riko-billing-record-status) { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
    .riko-billing-site--account :is(.riko-billing-renewal-current, .riko-billing-account-disclosure > summary) { color: CanvasText; background: Canvas; border-color: CanvasText; }
    .riko-billing-site--account :is(.riko-billing-agreement, .riko-billing-invoices tbody tr, .riko-billing-invoices tbody tr > th, .riko-billing-invoices tbody tr > td) { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
    .riko-billing-site--account .riko-billing-duration-list { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
    .riko-billing-site--account .riko-billing-invoice-pdf { color: LinkText; background: Canvas; border-color: LinkText; }
    .riko-billing-site--account .riko-billing-agreement-cancellation summary { color: LinkText; }
    .riko-billing-site--account .riko-billing-account-tabs a[aria-current="page"] { border-bottom-color: Highlight; }
    .riko-billing-site--account .riko-billing-agreement-cancellation .riko-billing-site-button { color: ButtonText !important; background: ButtonFace; border-color: ButtonText; }
}
@media print {
    .riko-billing-site--account .riko-billing-renewal-current { background: none; }
    .riko-billing-site--account :is(.riko-billing-access, .riko-billing-account-empty, .riko-billing-duration-list, .riko-billing-duration-entry, .riko-billing-agreement, .riko-billing-invoices tbody tr, .riko-billing-invoices tbody tr > th, .riko-billing-invoices tbody tr > td) { background: none; box-shadow: none; }
    .riko-billing-site--account .riko-billing-site-table { min-width: 0; }
}

/* Payment follow-up and invoice details share the member navigation and keep
   their reading content on the same rail as the account history. */
.riko-billing-site:is(.riko-billing-site--attempt, .riko-billing-site--invoice) > h1 { margin-top: 0; }
.riko-billing-site:is(.riko-billing-site--attempt, .riko-billing-site--invoice) > p { max-width: 80ch; }
.riko-billing-site:is(.riko-billing-site--attempt, .riko-billing-site--invoice) .riko-billing-site-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; max-width: none; margin: 24px 0; border-top: 1px solid var(--riko-line); }
.riko-billing-site:is(.riko-billing-site--attempt, .riko-billing-site--invoice) .riko-billing-site-facts > div { display: block; min-width: 0; padding: 16px 0; }
.riko-billing-site:is(.riko-billing-site--attempt, .riko-billing-site--invoice) .riko-billing-site-facts dt { font-size: .875rem; }
.riko-billing-site:is(.riko-billing-site--attempt, .riko-billing-site--invoice) .riko-billing-site-facts dd { margin-top: 6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.riko-billing-payment-state { padding: 20px 24px; border: 1px solid var(--riko-line); border-inline-start: 3px solid var(--riko-action); border-radius: 6px; color: var(--riko-text); background: var(--riko-surface-soft); }
.riko-billing-payment-state h2 { margin: 0 0 12px; color: var(--riko-ink); font-size: 1.25rem; line-height: 1.35; }
.riko-billing-payment-state p { max-width: 80ch; margin: 0 0 16px; line-height: 1.6; }
.riko-billing-payment-state.is-paid { border-inline-start-color: var(--riko-success); }
.riko-billing-payment-state.is-review { border-inline-start-color: var(--riko-warning); }
.riko-billing-payment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; }
.riko-billing-payment-actions a, .riko-billing-record-download a { display: inline-flex; align-items: center; min-height: 44px; }
.riko-billing-site--account .riko-billing-record-download { margin-top: 4px; }
@media (max-width: 640px) {
    .riko-billing-site:is(.riko-billing-site--attempt, .riko-billing-site--invoice) .riko-billing-site-facts { grid-template-columns: minmax(0, 1fr); }
    .riko-billing-payment-state { padding: 18px; }
    .riko-billing-payment-state .riko-billing-site-button { width: 100%; }
}
@media (forced-colors: active) {
    .riko-billing-payment-state { color: CanvasText; background: Canvas; border-color: CanvasText; }
}

/* Payment return: status first, with a compact order summary beside it. */
.riko-payment-return { max-width: 1080px; margin: 40px auto 24px; }
.riko-payment-demo { width: fit-content; margin: 0 0 16px; padding: 7px 12px; border: 1px solid var(--riko-line); border-radius: 6px; color: var(--riko-muted); background: var(--riko-surface-soft); font-size: .8125rem; }
.riko-payment-receipt { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); overflow: hidden; border: 1px solid var(--riko-line); border-radius: 12px; background: var(--riko-surface); }
.riko-payment-outcome { min-width: 0; padding: clamp(24px, 4vw, 44px); }
.riko-payment-symbol { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; color: var(--riko-action); background: var(--riko-action-soft); font-size: 1.75rem; font-weight: 700; }
.riko-payment-receipt.is-paid .riko-payment-symbol { color: var(--riko-success); background: var(--riko-success-surface); }
.riko-payment-receipt.is-review .riko-payment-symbol { color: var(--riko-warning); background: var(--riko-warning-surface); }
.riko-payment-outcome h1 { margin: 0 0 16px; color: var(--riko-ink); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }
.riko-payment-outcome p { margin: 0 0 24px; max-width: 52ch; color: var(--riko-text); line-height: 1.65; }
.riko-payment-primary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.riko-payment-primary-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.riko-payment-summary { min-width: 0; padding: 32px; border-inline-start: 1px solid var(--riko-line); background: var(--riko-surface-soft); }
.riko-payment-summary-label { margin: 0 0 12px; font-size: .8125rem; color: var(--riko-muted); }
.riko-payment-summary h2 { margin: 0; color: var(--riko-ink); font-size: 1.125rem; line-height: 1.4; }
.riko-payment-summary .riko-payment-amount { margin: 18px 0 24px; color: var(--riko-ink); font-size: 2rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.riko-payment-amount span { font-size: .875rem; font-weight: 400; }
.riko-payment-summary dl { margin: 0; }
.riko-payment-summary dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; font-size: .875rem; }
.riko-payment-summary dt { color: var(--riko-muted); font-weight: 400; }
.riko-payment-summary dd { margin: 0; color: var(--riko-ink); overflow-wrap: anywhere; }
.riko-payment-details { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--riko-line); font-size: .8125rem; }
.riko-payment-details summary { display: list-item; min-height: 44px; padding-block: 10px; color: var(--riko-link); cursor: pointer; }
.riko-payment-details dl > div { display: block; }
.riko-payment-details dd { margin-top: 6px; }
.riko-payment-back { margin: 20px 0 0; font-size: .875rem; }
.riko-payment-back a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
    .riko-payment-return { margin: 24px auto 8px; }
    .riko-payment-receipt { grid-template-columns: minmax(0, 1fr); }
    .riko-payment-summary { padding: 24px; border-inline-start: 0; border-top: 1px solid var(--riko-line); }
    .riko-payment-primary-actions { align-items: stretch; flex-direction: column; gap: 8px; }
    .riko-payment-primary-actions .riko-billing-site-button, .riko-payment-outcome form .riko-billing-site-button { width: 100%; text-align: center; justify-content: center; }
    .riko-payment-demo { line-height: 1.5; }
}

/* Billing administration: organise the working links by task and make the
   overview lead to the exact lists behind its figures. */
/* A validated payment return starts with this compact server-rendered status.
   Preserve the native hidden state even when component layout rules set display. */
.riko-payment-return [hidden] { display: none !important; }
.riko-payment-wait, .riko-payment-noscript { max-width: 42rem; margin: clamp(32px, 7vw, 80px) auto; padding: 24px 16px; text-align: center; color: var(--riko-text); }
.riko-payment-wait h1, .riko-payment-noscript h1 { margin: 20px 0 12px; color: var(--riko-ink); font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.35; }
.riko-payment-wait p, .riko-payment-noscript p { margin: 0 0 20px; color: var(--riko-muted); line-height: 1.65; overflow-wrap: anywhere; }
.riko-payment-wait-spinner { display: inline-block; width: 32px; height: 32px; box-sizing: border-box; border: 3px solid var(--riko-line); border-top-color: var(--riko-action); border-radius: 50%; animation: riko-payment-wait-spin .9s linear infinite; }
.riko-payment-wait-recovery { margin-top: 24px; }
.riko-payment-wait-recovery .riko-payment-primary-actions { justify-content: center; }
.riko-payment-wait-recovery .riko-payment-details { text-align: start; }
.riko-payment-wait-recovery .riko-payment-details p { margin: 12px 0; }
@keyframes riko-payment-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .riko-payment-wait-spinner { animation: none; } }
@media (forced-colors: active) { .riko-payment-wait-spinner { border-color: CanvasText; border-top-color: Highlight; } }
.riko-billing-admin .riko-billing-nav { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 20px 28px; padding-bottom: 16px; }
.riko-billing-nav-group { min-width: 0; }
.riko-billing-nav-group__label { display: block; color: var(--riko-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.riko-billing-nav-group__links { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.riko-billing-nav-group__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 0; line-height: 1.4; }
.riko-billing-admin .riko-billing-attention { border-top: 0; margin-top: 20px; padding-top: 0; }
.riko-billing-action-list { list-style: none; padding: 0; margin: 0; }
.riko-billing-action-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 8px 0; border-bottom: 1px solid var(--riko-line); }
.riko-billing-action-list > li > div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.riko-billing-action-list strong { color: var(--riko-ink); min-width: 3ch; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.riko-billing-action-list > li > a { display: inline-flex; align-items: center; min-height: 40px; flex-shrink: 0; }
.riko-billing-admin .riko-billing-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; }
.riko-billing-summary dd a { display: inline-block; min-height: 44px; text-decoration: none; }
.riko-billing-summary dd a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.riko-billing-list-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0 8px; }
.riko-billing-list-toolbar .riko-billing-result-count { margin: 0; font-variant-numeric: tabular-nums; }
.riko-billing-list-toolbar .riko-billing-pagination { margin: 0; }
.riko-billing-filter-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin: 20px 0 0; }
@media (max-width: 1100px) {
    .riko-billing-admin .riko-billing-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riko-billing-admin .riko-billing-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .riko-billing-admin .riko-billing-nav { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .riko-billing-nav-group__label { margin-bottom: 2px; }
    .riko-billing-nav-group__links { gap: 0 14px; }
    .riko-billing-admin .riko-billing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riko-billing-action-list > li { align-items: start; flex-direction: column; gap: 0; }
    .riko-billing-action-list > li > a { margin-inline-start: calc(3ch + 12px); }
}

/* Review one server quote; every colour follows the shared Rikoooo palette. */
.riko-billing-site--renew .riko-billing-renew--summary { max-width: 1040px; padding: clamp(20px, 3vw, 36px); }
.riko-billing-renew--summary .riko-billing-account-heading { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--riko-line); }
.riko-billing-renew--summary .riko-billing-account-heading h1 { margin-block: 6px 12px; font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.2; }
.riko-billing-renew--summary .riko-billing-account-heading > p:last-child { max-width: 66ch; margin-bottom: 0; color: var(--riko-muted); line-height: 1.6; }
.riko-billing-renew-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: start; gap: clamp(24px, 3vw, 36px); }
.riko-billing-renew-selection { min-width: 0; }
.riko-billing-renew-label { margin: 0 0 6px; color: var(--riko-muted); font-size: .875rem; font-weight: 600; }
.riko-billing-renew-duration { margin: 0; color: var(--riko-ink); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.025em; }
.riko-billing-renew-mode { margin: 10px 0 24px; color: var(--riko-text); font-size: .9375rem; }
.riko-billing-renew-dates { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
.riko-billing-renew-dates.has-transition { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.riko-billing-renew--summary .riko-billing-renew-facts { margin: 0; }
.riko-billing-renew--summary .riko-billing-renew-facts dt { color: var(--riko-muted); font-size: .875rem; font-weight: 500; line-height: 1.5; }
.riko-billing-renew--summary .riko-billing-renew-facts dd { margin: 6px 0 0; color: var(--riko-ink); line-height: 1.4; overflow-wrap: anywhere; }
.riko-billing-renew-date { padding: 16px; border: 1px solid var(--riko-line); border-radius: 8px; background: var(--riko-surface-soft); }
.riko-billing-renew-date dd { font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.riko-billing-renew-date--new { border-color: var(--riko-action-line); background: var(--riko-action-soft); }
.riko-billing-renew--summary .riko-billing-renew-date--new dt { color: var(--riko-text); }
.riko-billing-renew-date-arrow { align-self: center; color: var(--riko-muted); font-size: 1.25rem; }
.riko-billing-renew--summary .riko-billing-renew-note { margin: 20px 0 0; font-size: .9375rem; line-height: 1.65; }
.riko-billing-renew-payment { min-width: 0; padding: clamp(20px, 2.5vw, 28px); color: var(--riko-text); background: var(--riko-surface-soft); border: 1px solid var(--riko-line-strong); border-top: 3px solid var(--riko-action); border-radius: 10px; }
.riko-billing-renew--summary .riko-billing-renew-total dt { color: var(--riko-text); font-weight: 650; }
.riko-billing-renew--summary .riko-billing-renew-total dd { margin-top: 10px; }
.riko-billing-renew-total strong { display: block; color: var(--riko-ink); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.1; }
.riko-billing-renew-payment-once { margin: 12px 0 0; color: var(--riko-muted); font-size: .875rem; line-height: 1.5; }
.riko-billing-renew--summary .riko-billing-renew-payment-details { margin-top: 22px; }
.riko-billing-renew-payment-details > div { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--riko-line); }
.riko-billing-renew-payment-details dd { font-size: 1rem; font-weight: 650; }
.riko-billing-renew--summary .riko-billing-renew-payment-details small { display: block; margin-top: 6px; color: var(--riko-muted); font-size: .875rem; font-weight: 400; line-height: 1.5; }
.riko-billing-renew--summary .riko-billing-renew-confirm { margin: 24px 0 0; }
.riko-billing-renew--summary .riko-billing-renew-confirm .riko-billing-site-button { width: 100%; min-height: 48px; white-space: normal; }
.riko-billing-renew-payment .riko-billing-site-notice { margin: 20px 0 0; font-size: .9375rem; line-height: 1.6; }
.riko-billing-renew--summary .riko-billing-renew-back { margin-top: 30px; font-size: .9375rem; }
@media (max-width: 760px) {
    .riko-billing-renew-layout { grid-template-columns: minmax(0, 1fr); }
    .riko-billing-renew--summary .riko-billing-account-heading { margin-bottom: 24px; padding-bottom: 20px; }
    .riko-billing-renew-mode { margin-bottom: 18px; }
}
@media (max-width: 460px) {
    .riko-billing-renew-dates.has-transition { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .riko-billing-renew-date-arrow { display: none; }
    .riko-billing-renew-date { padding: 12px 14px; }
    .riko-billing-renew-date > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; gap: 14px; }
    .riko-billing-renew--summary .riko-billing-renew-date dd { margin: 0; text-align: end; }
    .riko-billing-renew-payment { padding: 20px; }
}