/* CheQout Financing brand layer over Bootstrap 5.3.
   Colours come from the CheQout pages on shopley.com: purple leads, gold is an accent
   only, and lilac is used on purple grounds. Load after bootstrap.min.css and
   dataTables.bootstrap5.min.css so the component variables below win. */

:root {
  color-scheme: light;
  --cq-black: #000000;
  --cq-ink: #101010;
  --cq-ink-2: #3b3a38;
  --cq-muted: #66635f;
  --cq-ground: #edecea;
  --cq-surface: #ffffff;
  --cq-surface-2: #f7f6f4;
  --cq-border: #d7d6d4;
  --cq-field-border: #c4c1bc;
  --cq-purple: #7c358d;          /* feature cards, "Smarter Decisions" line */
  --cq-purple-hover: #6a2d79;
  --cq-purple-active: #5a2667;
  --cq-purple-on-black: #a45bbb; /* purple type on black, 4.8:1 */
  --cq-lilac: #e7aaf7;           /* headings on purple only */
  --cq-lilac-tint: #f4e8f8;
  --cq-gold: #efb357;            /* rules and rings only; fails as text on white */
  --cq-gold-text: #b07818;
  --cq-gold-tint: #fbecd3;
  --cq-danger: #b4381f;
  --cq-font: "Alexandria", "Segoe UI", Arial, sans-serif;
  --cq-radius-surface: .25rem;   /* panels, like the site's feature cards */
  --cq-radius-field: .375rem;
  --cq-radius-action: 2rem;      /* buttons and paging are pills */

  --bs-body-font-family: var(--cq-font);
  --bs-body-font-size: .9rem;
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.55;
  --bs-body-bg: var(--cq-ground);
  --bs-body-color: var(--cq-ink);
  --bs-secondary-color: var(--cq-muted);
  --bs-border-color: var(--cq-border);
  --bs-border-radius: var(--cq-radius-field);
  --bs-link-color: var(--cq-purple);
  --bs-link-color-rgb: 124,53,141;
  --bs-link-hover-color: var(--cq-purple-active);
  --bs-link-hover-color-rgb: 90,38,103;
  --bs-focus-ring-color: rgba(124,53,141,.35);
  --bs-primary: var(--cq-purple);
  --bs-primary-rgb: 124,53,141;
  --bs-danger: var(--cq-danger);
  --bs-danger-rgb: 180,56,31;
  --bs-form-invalid-color: var(--cq-danger);
  --bs-form-invalid-border-color: var(--cq-danger);
}

body { background: var(--cq-ground); color: var(--cq-ink); }

/* Sticky footer: the WebForms <form> wraps the whole page, so it is the flex column.
   main grows, which pushes the footer to the bottom of the window on short pages and
   leaves it below the content on long ones. */
html { height: 100%; }
body { min-height: 100%; }
body > form { display: flex; flex-direction: column; min-height: 100vh; }
body > form > main { flex: 1 0 auto; }
body > form > .site-footer { flex-shrink: 0; }
b, strong { font-weight: 700; }
.table, .form-control, .form-select, .form-label, .dropdown-item, .pagination, .dt-container, .btn { font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--cq-font); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.num, .cardno { font-variant-numeric: tabular-nums; }
.cardno { letter-spacing: .03em; white-space: nowrap; }

/* One shared page gutter, used by the navbar, the band and main.
   width:100% matters: main is a flex item of the sticky-footer column, and auto side
   margins cancel the default stretch, which would shrink it to its content width. */
.shell { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 768px) { .shell { padding-inline: 1.5rem; } }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-family: var(--cq-font);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--cq-radius-action);
  --bs-btn-padding-x: 1.2rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .9rem;
}
.btn-sm { --bs-btn-border-radius: var(--cq-radius-action); --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .25rem; --bs-btn-font-size: .8rem; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--cq-purple); --bs-btn-border-color: var(--cq-purple);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cq-purple-hover); --bs-btn-hover-border-color: var(--cq-purple-hover);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cq-purple-active); --bs-btn-active-border-color: var(--cq-purple-active);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--cq-purple); --bs-btn-disabled-border-color: var(--cq-purple);
  --bs-btn-focus-shadow-rgb: 124,53,141;
}
.btn-secondary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--cq-black); --bs-btn-border-color: var(--cq-black);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2a2a2a; --bs-btn-hover-border-color: #2a2a2a;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #3a3a3a; --bs-btn-active-border-color: #3a3a3a;
  --bs-btn-focus-shadow-rgb: 16,16,16;
}
.btn-outline-dark {
  --bs-btn-color: var(--cq-ink); --bs-btn-border-color: #b3b0ab;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cq-ink); --bs-btn-hover-border-color: var(--cq-ink);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cq-ink); --bs-btn-active-border-color: var(--cq-ink);
  --bs-btn-focus-shadow-rgb: 16,16,16;
}
.btn-outline-danger {
  --bs-btn-color: var(--cq-danger); --bs-btn-border-color: #deaa9e;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cq-danger); --bs-btn-hover-border-color: var(--cq-danger);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #97301a; --bs-btn-active-border-color: #97301a;
  --bs-btn-focus-shadow-rgb: 180,56,31;
}

/* ---------- Navbar ---------- */
.cq-nav {
  background: var(--cq-black);
  --bs-navbar-color: rgba(255,255,255,.75);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-padding-y: 0;
  --bs-navbar-toggler-border-color: var(--cq-gold);
  --bs-navbar-toggler-border-radius: 50%;
  --bs-navbar-toggler-padding-x: .55rem;
  --bs-navbar-toggler-padding-y: .55rem;
  --bs-navbar-toggler-focus-width: .2rem;
}
.cq-nav .navbar-brand {
  display: flex; align-items: center; gap: .5rem; padding-block: .7rem;
}
/* The bag icon is taller than the letters, so the wordmark's baseline sits below the middle
   of the PNG. Measured at a 30px render: the logo baseline lands 1.65px lower than the menu
   text, and this lifts it onto the same line. Re-measure if the artwork is ever replaced. */
.cq-nav .navbar-brand img { height: 30px; width: auto; transform: translateY(-1.65px); }
/* Same size and weight as the menu items, so the row reads as one line of type. */
.cq-nav .navbar-brand small { font-weight: 300; font-size: .92rem; color: rgba(255,255,255,.72); letter-spacing: 0; }
.cq-nav .nav-link { font-weight: 400; font-size: .92rem; padding: 1.15rem .9rem !important; }
/* The underline is a background, not ::after: Bootstrap uses ::after for the caret. */
.cq-nav .nav-link.active {
  background: linear-gradient(var(--cq-gold), var(--cq-gold)) no-repeat left .9rem bottom 0 / calc(100% - 1.8rem) 2px;
}
@media (max-width: 991.98px) {
  .cq-nav .nav-link { padding: .65rem .25rem !important; }
  .cq-nav .nav-link.active { background: none; box-shadow: inset 2px 0 0 var(--cq-gold); padding-left: .75rem !important; }
  .cq-nav .navbar-collapse { padding-bottom: .75rem; border-top: 1px solid rgba(255,255,255,.12); }
}
.dropdown-menu {
  --bs-dropdown-border-color: var(--cq-border);
  --bs-dropdown-border-radius: var(--cq-radius-field);
  --bs-dropdown-link-active-bg: var(--cq-lilac-tint);
  --bs-dropdown-link-active-color: var(--cq-purple-active);
  --bs-dropdown-link-hover-bg: var(--cq-surface-2);
  --bs-dropdown-item-padding-y: .45rem;
  --bs-dropdown-font-size: .9rem;
  --bs-dropdown-header-color: var(--cq-muted);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.avatar {
  width: 2rem; height: 2rem; border-radius: 50%; color: var(--cq-gold); border: 1.5px solid var(--cq-gold);
  display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600;
}

/* ---------- Header band: the page's one bold element ---------- */
.band { background: var(--cq-black); color: #fff; }
.band .shell { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem 2.25rem; }
.band .area {
  font-weight: 800; text-transform: uppercase; color: var(--cq-purple-on-black);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); line-height: .95; letter-spacing: -.01em; margin: 0 0 .7rem;
}
.band h1 { color: #fff; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; margin: 0; }
.band p.lede { color: rgba(255,255,255,.8); max-width: 58ch; margin: .5rem 0 0; }
.band .band-note { font-size: .8rem; color: rgba(255,255,255,.75); border: 1px solid rgba(239,179,87,.7); border-radius: var(--cq-radius-action); padding: .35rem .85rem; }

/* ---------- Sections on the ground ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin: 2.25rem 0 1rem; }
.section-head h2 { font-size: 1.3rem; margin: 0; }
.section-head p { margin: 0; color: var(--cq-muted); }

.card {
  /* Bootstrap defaults --bs-card-bg to --bs-body-bg, and --bs-body-bg is the ground colour,
     so every card rendered #edecea on #edecea - invisible except for its hairline border.
     --cq-surface is the white the cards were always meant to sit on. Most obvious on the
     login page, which is a single card alone on the ground. */
  --bs-card-bg: var(--cq-surface);
  --bs-card-border-color: var(--cq-border);
  --bs-card-border-radius: var(--cq-radius-surface);
  --bs-card-inner-border-radius: calc(var(--cq-radius-surface) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
}
.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block: .9rem; }
.card-title { font-size: 1.05rem; margin: 0; }
.meta { color: var(--cq-muted); font-size: .85rem; }

/* ---------- Forms ---------- */
.form-label { font-size: .82rem; font-weight: 500; color: var(--cq-ink-2); margin-bottom: .3rem; }
.form-label .req { color: var(--cq-purple); margin-left: .15rem; font-weight: 700; }
.form-control, .form-select { --bs-border-color: var(--cq-field-border); border-radius: var(--cq-radius-field); padding-block: .5rem; font-size: .9rem; background-color: var(--cq-surface); }
.form-control:focus, .form-select:focus { border-color: var(--cq-purple); box-shadow: 0 0 0 .22rem rgba(124,53,141,.2); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 .22rem rgba(180,56,31,.2); }
.invalid-feedback, .field-error { font-size: .8rem; font-weight: 400; color: var(--cq-danger); }
.input-group-text { background: var(--cq-surface-2); border-color: var(--cq-field-border); color: var(--cq-muted); font-weight: 400; }
.form-text { color: var(--cq-muted); font-size: .8rem; }
.search-form { padding-bottom: 1.5rem; border-bottom: 1px solid var(--cq-border); }
/* ASP.NET validators: keep them inline and in the error colour. */
.validator { font-size: .8rem; color: var(--cq-danger); display: block; margin-top: .25rem; }

/* ---------- Tables and DataTables ---------- */
.table {
  --bs-table-bg: var(--cq-surface);
  --bs-table-striped-bg: var(--cq-surface-2);
  --bs-table-hover-bg: var(--cq-lilac-tint);
  --bs-table-border-color: #e8e6e3;
  margin-bottom: 0 !important;
  font-size: .88rem;
}
.table > thead th {
  font-weight: 600; font-size: .8rem; color: var(--cq-ink);
  background: var(--cq-surface) !important; border-bottom: 2px solid var(--cq-ink); white-space: nowrap; padding-block: .75rem;
}
.table > tbody td { vertical-align: middle; padding-block: .6rem; }
.table td.actions, .table th.actions { white-space: nowrap; text-align: right; }
.card-link-cell { font-weight: 500; color: var(--cq-purple); text-decoration: underline; text-decoration-color: #d6bade; text-underline-offset: 3px; }
.card-link-cell:hover { text-decoration-color: currentColor; }
/* DataTables 2 with the Bootstrap 5 integration renders plain .row wrappers. */
div.dt-container > .row { --bs-gutter-x: 0; margin: 0 !important; padding: .9rem 1.25rem; align-items: center; row-gap: .6rem; column-gap: 1rem; }
div.dt-container > .row.dt-layout-table { padding: 0; }
div.dt-container > .row.dt-layout-table > * { overflow-x: auto; }
div.dt-container > .row > .col-md-auto { flex: 0 1 auto; width: auto; }
div.dt-container .dt-search input { border-radius: var(--cq-radius-action); padding-inline: .95rem; width: 16rem; max-width: 100%; }
div.dt-container .dt-length select { border-radius: var(--cq-radius-action); }
div.dt-container .dt-info { color: var(--cq-muted); font-size: .85rem; padding-top: 0 !important; }
div.dt-container .dt-search label, div.dt-container .dt-length label { font-size: .85rem; color: var(--cq-muted); }
.pagination {
  --bs-pagination-color: var(--cq-ink);
  --bs-pagination-border-color: transparent;
  --bs-pagination-bg: transparent;
  --bs-pagination-hover-bg: var(--cq-surface-2);
  --bs-pagination-hover-color: var(--cq-ink);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(124,53,141,.3);
  --bs-pagination-focus-bg: var(--cq-surface-2);
  --bs-pagination-focus-color: var(--cq-ink);
  --bs-pagination-active-bg: var(--cq-purple);
  --bs-pagination-active-border-color: var(--cq-purple);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  --bs-pagination-disabled-color: #a9a6a1;
  --bs-pagination-font-size: .85rem;
  gap: .2rem; margin: 0;
}
.pagination .page-link { border-radius: var(--cq-radius-action) !important; min-width: 2.1rem; text-align: center; font-variant-numeric: tabular-nums; }
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after { opacity: .3; }
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after { opacity: 1; color: var(--cq-purple); }

/* ---------- Status: semantic, kept separate from the brand accent ---------- */
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 500; padding: .18rem .6rem .18rem .5rem; border-radius: var(--cq-radius-action); white-space: nowrap; }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
/* One pill per card status, never shared: two statuses wearing one colour is the pill
   telling the reader they are the same thing. The seven below are the whole of
   dbo.vChildWithMaster.ChildStatusDescription; a missing description gets no pill at all. */
.status-activated    { background: #e2f0e6;              color: #1d6b3a; }  /* live */
.status-registered   { background: var(--cq-lilac-tint); color: var(--cq-purple); }  /* not yet live */
.status-deferred     { background: #e3e9f2;              color: #2f4f74; }  /* paused, deliberately */
.status-collections  { background: var(--cq-gold-tint);  color: #7a4b00; }  /* money trouble */
.status-blocked      { background: #f7e1db;              color: #8a2a15; }  /* stopped, needs a person */
.status-deactivated  { background: #e6e5e3;              color: #55524e; }  /* switched off */
.status-writeoff     { background: #46423f;              color: #f2f0ed; }  /* terminal: the loss is taken */

/* A card with no status description renders an empty chip - a colour and a dot saying nothing.
   ::before is a pseudo-element and does not defeat :empty, so this hides the whole pill. */
.status:empty { display: none; }

/* ---------- Selected card: purple panel with a lilac heading ---------- */
.selected-card { display: grid; gap: .1rem; background: var(--cq-purple); color: #fff; border-radius: var(--cq-radius-surface); padding: .9rem 1rem 1rem; max-width: 26rem; }
.selected-card .who { font-size: 1.15rem; font-weight: 700; color: var(--cq-lilac); line-height: 1.25; }
.selected-card .cardno { font-size: .95rem; }

/* ---------- Alerts, modal ---------- */
.alert { --bs-alert-border-radius: var(--cq-radius-surface); --bs-alert-padding-y: .8rem; font-size: .88rem; border: 0; }
.alert-success { --bs-alert-bg: #e2f0e6; --bs-alert-color: #174f2c; }
.alert-warning { --bs-alert-bg: var(--cq-gold-tint); --bs-alert-color: #5e3a00; }
.alert-danger { --bs-alert-bg: #f7e1db; --bs-alert-color: #7d2512; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.modal { --bs-modal-border-radius: var(--cq-radius-field); --bs-modal-border-color: transparent; --bs-modal-header-border-color: #e8e6e3; --bs-modal-footer-border-color: #e8e6e3; }
.modal-title { font-size: 1.15rem; }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .6; }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
.summary dt { font-weight: 300; color: var(--cq-muted); }
.summary dd { margin: 0; font-weight: 500; }
.summary dd.amount { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

/* ---------- Dashboard ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.tile { display: grid; gap: .35rem; justify-items: start; background: var(--cq-surface); border: 1px solid var(--cq-border); border-radius: var(--cq-radius-surface); padding: 1.1rem 1.2rem 1.2rem; }
.tile-label { font-size: .82rem; color: var(--cq-ink-2); font-weight: 500; }
.tile-value { font-size: 2rem; font-weight: 700; line-height: 1; color: #a9a6a1; font-variant-numeric: tabular-nums; }
.tile-soon { font-size: .72rem; font-weight: 500; color: var(--cq-purple); background: var(--cq-lilac-tint); border-radius: var(--cq-radius-action); padding: .15rem .6rem; }

.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.quick-link { display: grid; gap: .3rem; background: var(--cq-surface); border: 1px solid var(--cq-border); border-left: 3px solid var(--cq-purple); border-radius: var(--cq-radius-surface); padding: 1rem 1.2rem; text-decoration: none; color: var(--cq-ink); }
.quick-link:hover { border-left-color: var(--cq-purple-active); background: var(--cq-lilac-tint); color: var(--cq-ink); }
.quick-title { font-weight: 700; font-size: 1rem; }
.quick-note { font-size: .82rem; color: var(--cq-muted); }

/* ---------- The rail beside one account, grouped by what you are trying to do ---------- */
/* margin-top matches .section-head's 2.25rem, which is what the right-hand column's first
   heading gets. Without it the rail's first group label sat flush against the black band
   while the content beside it had clear air - the two columns start at the same line now.
   Sticky is unaffected: margin sets where the rail STARTS, top: where it parks once stuck. */
.account-rail { position: sticky; top: 1rem; margin-top: 2.25rem; }
.account-rail h2 {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cq-muted); margin: 1.4rem 0 .4rem;
}
.account-rail h2:first-child { margin-top: 0; }
.account-rail ul { list-style: none; margin: 0; padding: 0; }
.account-rail a {
  display: block; padding: .38rem .7rem; border-left: 2px solid var(--cq-border);
  text-decoration: none; color: var(--cq-ink); font-size: .9rem;
}
.account-rail a:hover { border-left-color: var(--cq-purple); background: var(--cq-lilac-tint); color: var(--cq-ink); }
.account-rail a[aria-current="page"] { border-left-color: var(--cq-purple); color: var(--cq-purple); font-weight: 700; }

/* ---------- Read-only label/value pairs ---------- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.field-grid dt { font-size: .78rem; color: var(--cq-muted); font-weight: 500; }
.field-grid dd { margin: .1rem 0 0; font-size: 1rem; }

/* ---------- Log in ---------- */
.auth-page { display: grid; place-items: center; min-height: 60vh; padding-block: clamp(2rem, 6vh, 4rem); }
.auth-card { width: 100%; max-width: 24rem; }
.auth-card .card-body { padding: 1.75rem; }
.auth-title { font-size: 1.5rem; margin: 0; }
.auth-lede { color: var(--cq-muted); margin: .25rem 0 1.5rem; font-size: .85rem; }
.auth-failure:not(:empty) {
  background: #f7e1db; color: #7d2512; border-radius: var(--cq-radius-surface);
  padding: .7rem .9rem; margin-bottom: 1rem; font-size: .88rem;
}
.auth-card .validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Report viewer: keep Reboot away from the RV15 toolbar ---------- */
.rv-host { background: var(--cq-surface); border: 1px solid var(--cq-border); border-radius: var(--cq-radius-surface); padding: .5rem; overflow-x: auto; }
.rv-host *, .rv-host *::before, .rv-host *::after { box-sizing: content-box; }
.rv-host table { border-collapse: separate; }
.rv-host img { vertical-align: baseline; }

/* ---------- flatpickr ---------- */
.flatpickr-calendar { font-family: var(--cq-font); border-radius: var(--cq-radius-field); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--cq-purple); border-color: var(--cq-purple); color: #fff; }
.flatpickr-day.today { border-color: var(--cq-gold); }
.flatpickr-day.today:hover { background: var(--cq-gold-tint); color: var(--cq-ink); border-color: var(--cq-gold); }

/* Black footer with a gold hairline, matching the shopley.com pages. */
.site-footer { background: var(--cq-black); color: rgba(255,255,255,.7); font-size: .8rem; margin-top: 3rem; border-top: 1px solid var(--cq-gold); }
.site-footer .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.5rem 2rem; }
.powered-by { display: inline-flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.7); text-decoration: none; font-size: .85rem; }
.powered-by img { height: 26px; width: auto; }
.powered-by:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--cq-purple); outline-offset: 2px; }
.band :focus-visible, .cq-nav :focus-visible { outline-color: var(--cq-gold); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}