/* ============================================================
 * assets/css/boost.css
 *
 * The social boosting page. Loaded only by boosting.php.
 *
 * ── Why this is plain CSS and not Tailwind classes ──
 *
 * assets/css/tailwind.css in this project is committed, minified
 * and built off-site; the host has no build step. A utility class
 * that no existing page already uses is not in that file, so
 * writing this page in fresh Tailwind utilities would mean it
 * looked correct in the markup and blank in the browser until
 * somebody remembered to run the CLI. Everything the boosting
 * page needs is therefore declared here, and the file works the
 * moment it is uploaded.
 *
 * The tokens come from tailwind.config.js — the same ivory, ink,
 * coral, gold and night ramps — restated as custom properties so
 * light and dark are one switch rather than a hundred overrides.
 * ============================================================ */

.boost {
  /* ── Light ──────────────────────────────────────────────── */
  --b-bg:          #FAFAFC;
  --b-surface:     #FFFFFF;
  --b-surface-2:   #F5F3FF;
  --b-line:        #EDE9FE;
  --b-line-strong: #DED8F0;

  --b-text:        #1A1230;
  --b-text-soft:   #665A87;
  --b-text-faint:  #8478A3;

  --b-accent:      #7C5CFC;
  --b-accent-dark: #6366F1;
  --b-accent-soft: #EDE9FE;
  --b-gold:        #F59E0B;
  --b-success:     #16A34A;
  --b-danger:      #C7413B;

  --b-shadow:      0 1px 2px rgba(26, 18, 48, .04), 0 4px 12px rgba(26, 18, 48, .05);
  --b-shadow-lift: 0 2px 4px rgba(26, 18, 48, .04), 0 12px 28px rgba(26, 18, 48, .08);
  --b-radius:      1rem;

  color: var(--b-text);
}

.dark .boost {
  /* ── Dark ───────────────────────────────────────────────── */
  --b-bg:          #121019;
  --b-surface:     #171225;
  --b-surface-2:   #1C172E;
  --b-line:        #2A2345;
  --b-line-strong: #332B54;

  --b-text:        #FAFAFC;
  --b-text-soft:   #D3CDE1;
  --b-text-faint:  #ADA2C4;

  --b-accent-soft: rgba(124, 92, 252, .16);

  --b-shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28);
  --b-shadow-lift: 0 8px 28px rgba(0, 0, 0, .4);
}

/* ════════════════════════════════════════════════════════════
 * HERO
 *
 * The one part of the page that is dark in both themes. A
 * boosting page competes with a hundred identical panels, and
 * the first screen is the only chance to look like the one that
 * is not a template — so it gets the premium treatment whatever
 * the visitor's theme, and the rest of the page follows the
 * site.
 * ════════════════════════════════════════════════════════════ */

.boost-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90rem 40rem at 15% -20%, rgba(124, 92, 252, .38), transparent 60%),
    radial-gradient(70rem 35rem at 85% 10%, rgba(245, 158, 11, .18), transparent 55%),
    linear-gradient(165deg, #1A1230 0%, #171225 45%, #0E0C15 100%);
  color: #FAFAFC;
  border-bottom: 1px solid rgba(124, 92, 252, .22);
}

/* A faint grid, the way a game HUD is drawn. Masked to fade out
   before it reaches the text, because a grid running underneath a
   paragraph is texture on the first read and noise on the second. */
.boost-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  -webkit-mask-image: radial-gradient(60rem 30rem at 50% 0%, #000, transparent 70%);
          mask-image: radial-gradient(60rem 30rem at 50% 0%, #000, transparent 70%);
  pointer-events: none;
}

/* Vertical padding only.
   This element also carries .shell, which supplies the horizontal
   gutter (and the max-width that centres the page). A `padding`
   shorthand here would reset padding-left and padding-right to zero —
   invisible on a wide screen, where the max-width already holds the
   text away from the edge, and catastrophic on a phone, where the
   heading would run into the bezel. Same reason for the two
   .boost-section rules below. */
.boost-hero__inner {
  position: relative;
  padding-top: 4.5rem;
  padding-bottom: 4rem;
}

.boost-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(124, 92, 252, .4);
  background: rgba(124, 92, 252, .14);
  color: #C4B5FD;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.boost-hero__eyebrow svg { width: .875rem; height: .875rem; }

.boost-hero h1 {
  margin: 1.75rem 0 0;
  max-width: 22ch;
  font-family: 'Outfit', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #FFFFFF;
  text-wrap: balance;
}

.boost-hero h1 em {
  font-style: normal;
  background: linear-gradient(110deg, #A78BFA 0%, #7C5CFC 45%, #F59E0B 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.boost-hero p {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #D3CDE1;
}

.boost-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

.boost-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2.25rem;
}

.boost-chip-trust {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .8125rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  font-size: .75rem;
  color: #D3CDE1;
}

.boost-chip-trust svg { width: .875rem; height: .875rem; color: #A78BFA; }

/* ── Stat strip ──────────────────────────────────────────── */

.boost-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3rem;
  border-radius: var(--b-radius);
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}

@media (min-width: 768px) {
  .boost-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.boost-stat {
  padding: 1.25rem 1.25rem;
  background: rgba(18, 16, 25, .72);
}

.boost-stat__value {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

.boost-stat__label {
  margin-top: .25rem;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8478A3;
}

/* ════════════════════════════════════════════════════════════
 * SECTION FURNITURE
 * ════════════════════════════════════════════════════════════ */

/* Vertical only — these sit on elements that also carry .shell. */
.boost-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }

.boost-section--tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.boost-section__head { max-width: 44rem; }

.boost-eyebrow {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--b-gold);
}

.boost-section__head h2 {
  margin: .75rem 0 0;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--b-text);
  text-wrap: balance;
}

.boost-section__head p {
  margin: .875rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--b-text-soft);
}

/* ════════════════════════════════════════════════════════════
 * PLATFORM SELECTOR
 * ════════════════════════════════════════════════════════════ */

.boost-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.75rem;
}

@media (min-width: 640px) { .boost-platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .boost-platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.boost-platform {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .875rem 1rem;
  border-radius: .875rem;
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  box-shadow: var(--b-shadow);
  text-align: left;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .25s;
}

.boost-platform:hover {
  transform: translateY(-2px);
  border-color: var(--b-accent);
  box-shadow: var(--b-shadow-lift);
}

/* The selected platform is marked by its own brand colour rather
   than a generic highlight — --pa is set per button in the markup —
   so the selector reads at a glance even in a screenshot. */
.boost-platform[aria-pressed='true'] {
  border-color: var(--pa, var(--b-accent));
  box-shadow: 0 0 0 1px var(--pa, var(--b-accent)), var(--b-shadow-lift);
}

.boost-platform__mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .625rem;
  background: color-mix(in srgb, var(--pa, #7C5CFC) 14%, transparent);
  color: var(--pa, #7C5CFC);
}

/* color-mix is recent. Anything that does not know it gets a flat
   lavender wash, which is the same idea a shade less exact. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .boost-platform__mark { background: var(--b-accent-soft); }
}

.boost-platform__mark svg { width: 1.125rem; height: 1.125rem; }

.boost-platform__name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--b-text);
}

.boost-platform__meta {
  margin-top: .0625rem;
  font-size: .6875rem;
  color: var(--b-text-faint);
}

/* ════════════════════════════════════════════════════════════
 * CATEGORY TABS
 * ════════════════════════════════════════════════════════════ */

.boost-tabs {
  display: flex;
  gap: .5rem;
  margin: 0 -1px 0;
  padding: .25rem 1px 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.boost-tabs::-webkit-scrollbar { display: none; }

.boost-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4375rem;
  padding: .5rem .9375rem;
  border-radius: 9999px;
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  color: var(--b-text-soft);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.boost-tab svg { width: .9375rem; height: .9375rem; }

.boost-tab:hover { border-color: var(--b-accent); color: var(--b-text); }

.boost-tab[aria-selected='true'] {
  background: var(--b-accent);
  border-color: var(--b-accent);
  color: #FFFFFF;
}

.boost-tab__count {
  padding: .0625rem .375rem;
  border-radius: 9999px;
  background: var(--b-surface-2);
  font-size: .625rem;
  font-variant-numeric: tabular-nums;
  color: var(--b-text-faint);
}

.boost-tab[aria-selected='true'] .boost-tab__count {
  background: rgba(255, 255, 255, .2);
  color: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════
 * THE CATALOGUE + ORDER PANEL
 * ════════════════════════════════════════════════════════════ */

.boost-layout {
  display: grid;
  gap: 1.5rem;
  align-items: start;

  /* minmax(0, 1fr) rather than the default 1fr, and min-width: 0 on
     the children.
     A grid item's automatic minimum size is its min-content width, so
     a single-column grid does not shrink below the widest thing inside
     it — one long service name is enough to push the column past the
     viewport and give the whole page a horizontal scrollbar on a
     phone. These two lines are what let the column be narrower than
     its contents so the contents wrap instead. */
  grid-template-columns: minmax(0, 1fr);
}

.boost-layout > * { min-width: 0; }

@media (min-width: 1024px) {
  .boost-layout { grid-template-columns: minmax(0, 1fr) 23rem; gap: 2rem; }
}

/* ── Service card ────────────────────────────────────────── */

.boost-services { display: grid; gap: 1rem; }

.boost-service {
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  box-shadow: var(--b-shadow);
  overflow: hidden;
  transition: border-color .2s;
}

.boost-service:hover { border-color: var(--b-line-strong); }

.boost-service__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
}

.boost-service__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--b-text);
}

.boost-service__desc {
  margin: .4375rem 0 0;
  max-width: 52ch;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--b-text-soft);
}

.boost-service__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .875rem;
  margin-top: .75rem;
  font-size: .6875rem;
  color: var(--b-text-faint);
}

.boost-service__fact { display: inline-flex; align-items: center; gap: .3125rem; }
.boost-service__fact svg { width: .8125rem; height: .8125rem; }

.boost-service__rate { flex: 0 0 auto; text-align: right; }

.boost-service__rate strong {
  display: block;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--b-text);
}

.boost-service__rate span {
  font-size: .6875rem;
  color: var(--b-text-faint);
}

/* ── Quality badges ──────────────────────────────────────── */

.boost-badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5rem;
  border-radius: 9999px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.boost-badge svg { width: .6875rem; height: .6875rem; }

.boost-badge--muted   { background: var(--b-surface-2); color: var(--b-text-faint); }
.boost-badge--coral   { background: rgba(124, 92, 252, .14); color: #6366F1; }
.boost-badge--gold    { background: rgba(245, 158, 11, .16); color: #B45309; }
.boost-badge--success { background: rgba(22, 163, 74, .14); color: #15803D; }
.boost-badge--hot     { background: linear-gradient(110deg, #F59E0B, #EA580C); color: #FFFFFF; }

.dark .boost-badge--coral   { color: #C4B5FD; }
.dark .boost-badge--gold    { color: #FCD34D; }
.dark .boost-badge--success { color: #86EFAC; }

/* ── Package cards ───────────────────────────────────────── */

.boost-packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .625rem;
  padding: 0 1.25rem 1.25rem;
}

.boost-package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: .875rem .875rem 1rem;
  border-radius: .75rem;
  border: 1px solid var(--b-line);
  background: var(--b-surface-2);
  text-align: left;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .2s;
}

.boost-package:hover {
  transform: translateY(-2px);
  border-color: var(--b-accent);
  box-shadow: var(--b-shadow-lift);
}

.boost-package[aria-pressed='true'] {
  border-color: var(--b-accent);
  background: var(--b-accent-soft);
  box-shadow: 0 0 0 1px var(--b-accent);
}

/* The tick that confirms the choice. Absolute so adding it does not
   reflow the card and shuffle every other package sideways. */
.boost-package[aria-pressed='true']::after {
  content: '';
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--b-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .625rem no-repeat;
}

.boost-package__qty {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  color: var(--b-text);
}

.boost-package__noun {
  font-size: .6875rem;
  color: var(--b-text-faint);
}

.boost-package__price {
  margin-top: .1875rem;
  font-size: .9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--b-accent);
}

.dark .boost-package__price { color: #C4B5FD; }

.boost-package__eta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .625rem;
  color: var(--b-text-faint);
}

.boost-package__eta svg { width: .6875rem; height: .6875rem; }

.boost-package__flag {
  position: absolute;
  top: -.4375rem;
  left: .75rem;
  padding: .0625rem .4375rem;
  border-radius: 9999px;
  background: linear-gradient(110deg, #7C5CFC, #6366F1);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* A service with no packages still sells at its per-thousand rate,
   so it gets a line saying so rather than an empty shelf. */
.boost-packages--empty {
  padding: 0 1.25rem 1.25rem;
  font-size: .8125rem;
  color: var(--b-text-faint);
}

/* ════════════════════════════════════════════════════════════
 * ORDER PANEL
 * ════════════════════════════════════════════════════════════ */

.boost-order {
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  box-shadow: var(--b-shadow);
  overflow: hidden;
}

@media (min-width: 1024px) {
  /* Sticks below the header AND the announcement bar. --ilz-chrome is
     declared in announce.css and kept accurate by announce.js, so the
     panel lands in the right place whether the bar is up, dismissed,
     or was never rendered — rather than leaving a 56px hole the moment
     somebody closes it. */
  .boost-order-wrap {
    position: sticky;
    top: calc(var(--ilz-chrome, 8rem) + 1rem);
  }
}

.boost-order__head {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--b-line);
  background: linear-gradient(140deg, rgba(124, 92, 252, .1), transparent 70%);
}

.boost-order__head h2 {
  margin: 0;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--b-text);
}

.boost-order__head p {
  margin: .25rem 0 0;
  font-size: .75rem;
  color: var(--b-text-faint);
}

.boost-order__body { padding: 1.25rem; }

.boost-field { margin-bottom: 1rem; }

.boost-field > label,
.boost-field__label {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--b-text-soft);
}

.boost-input,
.boost-select,
.boost-textarea {
  display: block;
  width: 100%;
  padding: .6875rem .875rem;
  border-radius: .625rem;
  border: 1px solid var(--b-line-strong);
  background: var(--b-surface);
  color: var(--b-text);
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}

.boost-textarea { min-height: 6rem; resize: vertical; }

.boost-input::placeholder,
.boost-textarea::placeholder { color: var(--b-text-faint); }

.boost-input:focus,
.boost-select:focus,
.boost-textarea:focus {
  outline: none;
  border-color: var(--b-accent);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, .18);
}

.boost-input[aria-invalid='true'] {
  border-color: var(--b-danger);
  box-shadow: 0 0 0 3px rgba(199, 65, 59, .15);
}

.boost-select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238478A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
}

.boost-hint {
  margin: .375rem 0 0;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--b-text-faint);
}

.boost-error {
  margin: .375rem 0 0;
  font-size: .6875rem;
  font-weight: 500;
  color: var(--b-danger);
}

/* ── Selected-service summary ────────────────────────────── */

.boost-summary {
  padding: .875rem;
  border-radius: .75rem;
  border: 1px dashed var(--b-line-strong);
  background: var(--b-surface-2);
  margin-bottom: 1rem;
}

.boost-summary__name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--b-text);
}

.boost-summary__meta {
  margin-top: .25rem;
  font-size: .6875rem;
  color: var(--b-text-faint);
}

.boost-summary--empty {
  text-align: center;
  color: var(--b-text-faint);
  font-size: .8125rem;
}

/* ── Total ───────────────────────────────────────────────── */

.boost-total {
  padding: .875rem 1rem;
  border-radius: .75rem;
  background: var(--b-surface-2);
  border: 1px solid var(--b-line);
  margin: 1rem 0;
}

.boost-total__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.boost-total__row + .boost-total__row {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--b-line);
}

.boost-total__label { font-size: .75rem; color: var(--b-text-faint); }

.boost-total__value {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--b-text);
}

.boost-total__small {
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--b-text-soft);
}

.boost-total__short { color: var(--b-danger); font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────── */

.boost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s, box-shadow .2s;
}

.boost-btn svg { width: 1rem; height: 1rem; }

.boost-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.boost-btn--primary {
  background: linear-gradient(110deg, #7C5CFC, #6366F1);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(124, 92, 252, .32);
}

.boost-btn--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(124, 92, 252, .42);
}

.boost-btn--ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: #FFFFFF;
}

.boost-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.boost-btn--outline {
  background: transparent;
  border-color: var(--b-line-strong);
  color: var(--b-text);
}

.boost-btn--outline:hover { border-color: var(--b-accent); color: var(--b-accent); }

.boost-btn--block { display: flex; width: 100%; padding-top: .8125rem; padding-bottom: .8125rem; }

/* The spinner inside a busy button. Hidden until the button is
   marked busy, so there is one element rather than two states of
   markup to keep in sync. */
.boost-btn__spinner { display: none; }

.boost-btn[data-busy='1'] .boost-btn__spinner {
  display: inline-block;
  width: .9375rem;
  height: .9375rem;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  border-radius: 9999px;
  animation: boost-spin .7s linear infinite;
}

.boost-btn[data-busy='1'] .boost-btn__icon { display: none; }

@keyframes boost-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
 * LOADING + ERROR STATES
 * ════════════════════════════════════════════════════════════ */

.boost-skeleton {
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  padding: 1.25rem;
}

.boost-skeleton__line,
.boost-skeleton__block {
  border-radius: .5rem;
  background: linear-gradient(90deg, var(--b-surface-2) 25%, var(--b-line) 37%, var(--b-surface-2) 63%);
  background-size: 400% 100%;
  animation: boost-shimmer 1.4s ease-in-out infinite;
}

.boost-skeleton__line { height: .75rem; margin-bottom: .625rem; }
.boost-skeleton__line:nth-child(1) { width: 45%; height: 1rem; }
.boost-skeleton__line:nth-child(2) { width: 80%; }
.boost-skeleton__line:nth-child(3) { width: 60%; }

.boost-skeleton__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .625rem;
  margin-top: 1rem;
}

.boost-skeleton__block { height: 5.25rem; }

@keyframes boost-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .boost-skeleton__line,
  .boost-skeleton__block { animation: none; }
}

/* ── Error / empty ───────────────────────────────────────── */

.boost-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 3rem 1.5rem;
  border-radius: var(--b-radius);
  border: 1px dashed var(--b-line-strong);
  text-align: center;
}

.boost-state__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: .875rem;
  background: var(--b-surface-2);
  color: var(--b-text-faint);
}

.boost-state__mark svg { width: 1.375rem; height: 1.375rem; }

.boost-state h3 {
  margin: 0;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--b-text);
}

.boost-state p {
  margin: 0;
  max-width: 34ch;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--b-text-soft);
}

.boost-state--error .boost-state__mark {
  background: rgba(199, 65, 59, .12);
  color: var(--b-danger);
}

/* ── Inline alert inside the order panel ─────────────────── */

.boost-alert {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  border-radius: .625rem;
  border: 1px solid;
  font-size: .8125rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.boost-alert svg { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .0625rem; }

.boost-alert a { color: inherit; font-weight: 600; text-decoration: underline; }

.boost-alert--error {
  border-color: rgba(199, 65, 59, .3);
  background: rgba(199, 65, 59, .09);
  color: #A2322D;
}

.dark .boost-alert--error { color: #F5C2C2; }

.boost-alert--success {
  border-color: rgba(22, 163, 74, .3);
  background: rgba(22, 163, 74, .1);
  color: #15803D;
}

.dark .boost-alert--success { color: #86EFAC; }

.boost-alert--info {
  border-color: var(--b-line-strong);
  background: var(--b-surface-2);
  color: var(--b-text-soft);
}

/* ════════════════════════════════════════════════════════════
 * HOW IT WORKS
 * ════════════════════════════════════════════════════════════ */

.boost-steps {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  counter-reset: boost-step;
}

@media (min-width: 768px) { .boost-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.boost-step {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  background: var(--b-surface);
}

.boost-step::before {
  counter-increment: boost-step;
  content: counter(boost-step, decimal-leading-zero);
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--b-line);
}

.boost-step__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: var(--b-accent-soft);
  color: var(--b-accent);
}

.dark .boost-step__mark { color: #C4B5FD; }

.boost-step__mark svg { width: 1.25rem; height: 1.25rem; }

.boost-step h3 {
  margin: 1rem 0 0;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--b-text);
}

.boost-step p {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--b-text-soft);
}

/* ════════════════════════════════════════════════════════════
 * WHY US
 * ════════════════════════════════════════════════════════════ */

.boost-features {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) { .boost-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .boost-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.boost-feature {
  display: flex;
  gap: .875rem;
  padding: 1.25rem;
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .2s;
}

.boost-feature:hover { transform: translateY(-3px); border-color: var(--b-accent); }

.boost-feature__mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .625rem;
  background: var(--b-accent-soft);
  color: var(--b-accent);
}

.dark .boost-feature__mark { color: #C4B5FD; }

.boost-feature__mark svg { width: 1.125rem; height: 1.125rem; }

.boost-feature h3 {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--b-text);
}

.boost-feature p {
  margin: .375rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--b-text-soft);
}

/* ════════════════════════════════════════════════════════════
 * FAQ
 * ════════════════════════════════════════════════════════════ */

.boost-faq {
  margin-top: 2rem;
  max-width: 48rem;
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  overflow: hidden;
}

/* <details>/<summary>, not a JavaScript accordion. It opens with
   JavaScript switched off, it is keyboard-operable for free, and
   the browser's own find-on-page can open a closed answer. */
.boost-faq details + details { border-top: 1px solid var(--b-line); }

.boost-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.0625rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--b-text);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}

.boost-faq summary::-webkit-details-marker { display: none; }

.boost-faq summary:hover { color: var(--b-accent); }

.boost-faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.boost-faq details[open] summary::after { transform: rotate(180deg); }

.boost-faq__answer {
  padding: 0 1.25rem 1.25rem;
  max-width: 62ch;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--b-text-soft);
}

.boost-faq__answer p { margin: 0 0 .75rem; }
.boost-faq__answer p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
 * CLOSING CTA
 * ════════════════════════════════════════════════════════════ */

.boost-cta {
  position: relative;
  overflow: hidden;
  margin: 1rem 0 4rem;
  padding: 3rem 2rem;
  border-radius: 1.5rem;
  text-align: center;
  background:
    radial-gradient(50rem 25rem at 50% -30%, rgba(245, 158, 11, .25), transparent 60%),
    linear-gradient(140deg, #7C5CFC 0%, #6366F1 55%, #4338CA 100%);
  color: #FFFFFF;
  box-shadow: 0 20px 50px rgba(124, 92, 252, .32);
}

.boost-cta h2 {
  margin: 0 auto;
  max-width: 20ch;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #FFFFFF;
  text-wrap: balance;
}

.boost-cta p {
  margin: 1rem auto 0;
  max-width: 44ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}

.boost-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}

.boost-cta .boost-btn--primary {
  background: #FFFFFF;
  color: #4338CA;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.boost-cta .boost-btn--primary:hover:not(:disabled) {
  background: #F5F3FF;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

/* ════════════════════════════════════════════════════════════
 * SHARED
 * ════════════════════════════════════════════════════════════ */

/* Anchor targets clear the sticky chrome.
   Without this, "Choose a platform" jumps to #catalogue and parks the
   heading underneath the header and the announcement bar, so the
   button appears to have scrolled to the wrong place. */
#catalogue,
#how,
#order {
  scroll-margin-top: calc(var(--ilz-chrome, 8rem) + 1rem);
}

.boost-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Entrance for anything swapped in by script. Removed by boost.js
   after it plays so a re-render animates again. */
.boost-enter { animation: boost-fade-up .35s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes boost-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .boost-enter { animation: none; }
  .boost-platform:hover,
  .boost-package:hover,
  .boost-feature:hover,
  .boost-btn--primary:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
 * CONSOLE
 *
 * The announcement and catalogue pages in /admin reuse the
 * components above by wrapping their content in .boost. These
 * few extras are the layout pieces a form-heavy console page
 * needs and a marketing page does not.
 * ════════════════════════════════════════════════════════════ */

.boost-stack > * + * { margin-top: 1rem; }

.boost-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.boost-row--between { justify-content: space-between; }
.boost-row--end     { justify-content: flex-end; }

.boost-grid-2,
.boost-grid-3 { display: grid; gap: .875rem; }

@media (min-width: 640px) {
  .boost-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boost-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.boost-panel {
  padding: 1.25rem;
  border-radius: var(--b-radius);
  border: 1px solid var(--b-line);
  background: var(--b-surface);
  box-shadow: var(--b-shadow);
}

.boost-panel__title {
  margin: 0 0 .25rem;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--b-text);
}

.boost-panel__sub {
  margin: 0 0 1.125rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--b-text-soft);
}

/* ── A row in a list of records ──────────────────────────── */

.boost-record {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border-radius: .875rem;
  border: 1px solid var(--b-line);
  background: var(--b-surface);
}

.boost-record--off { opacity: .62; }

.boost-record__body { flex: 1 1 18rem; min-width: 0; }

.boost-record__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--b-text);
  overflow-wrap: anywhere;
}

.boost-record__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
  margin: .5rem 0 0;
  font-size: .6875rem;
  color: var(--b-text-faint);
}

.boost-record__meta code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .625rem;
}

.boost-record__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
}

/* ── Icon-only console button ────────────────────────────── */

.boost-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--b-line-strong);
  border-radius: .5rem;
  background: var(--b-surface);
  color: var(--b-text-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}

.boost-icon-btn:hover { border-color: var(--b-accent); color: var(--b-accent); }
.boost-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.boost-icon-btn svg { width: .9375rem; height: .9375rem; }

.boost-icon-btn--danger:hover { border-color: var(--b-danger); color: var(--b-danger); }

/* ── Inline preview of the live ticker ───────────────────── */

.boost-preview {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--b-radius);
  border: 1px dashed var(--b-line-strong);
  background: var(--b-surface-2);
}

.boost-preview__label {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--b-text-faint);
}

/* The preview borrows the real ticker's styles, so it is the same
   component and cannot drift from what visitors see. It just does
   not stick to anything. */
.boost-preview .ilz-announce-wrap {
  position: static;
  padding: 0;
}

/* ── Tiny helpers ────────────────────────────────────────── */

.boost-muted { color: var(--b-text-faint); font-size: .75rem; }
.boost-mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.boost-nowrap { white-space: nowrap; }

.boost-switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--b-text-soft);
  cursor: pointer;
}

.boost-switch input { accent-color: var(--b-accent); width: 1rem; height: 1rem; }