/* ============================================================
   ITEZIA — Boutique
   ============================================================ */

.btq-page { min-height: 100dvh; }

/* ── Hero ────────────────────────────────────────────────── */
.btq-hero {
  padding: calc(var(--nav-total) + var(--s12)) 0 var(--s10);
  text-align: center; position: relative; overflow: hidden;
}
@media (min-width: 768px) {
  .btq-hero { padding: calc(var(--nav-total) + var(--s20)) 0 var(--s16); }
}
.btq-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(192,150,60,.08) 0%, transparent 65%);
}
.btq-h1 {
  font-size: clamp(2.25rem, 5vw, 5rem); font-weight: 800;
  letter-spacing: -.05em; line-height: .95; color: var(--t1);
  margin-bottom: var(--s5); overflow-wrap: break-word;
}
.btq-sub {
  font-size: var(--fs-base); color: var(--t2); line-height: 1.7;
  max-width: 480px; margin: 0 auto;
}
@media (min-width: 768px) { .btq-sub { font-size: var(--fs-lg); } }

/* ── Section ─────────────────────────────────────────────── */
.btq-section { padding: var(--s14) 0; }
@media (min-width: 768px) { .btq-section { padding: var(--s20) 0; } }
.btq-section--dark {
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.btq-kicker {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-l);
}
.btq-h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700;
  letter-spacing: -.03em; color: var(--t1);
}
.btq-section-note {
  font-size: var(--fs-sm); color: var(--t2); line-height: 1.75;
  max-width: 600px; border-left: 2px solid rgba(192,150,60,.3);
  padding-left: var(--s5);
}

/* ── Tarification (bande de synthèse) ────────────────────── */
/* Le modèle de facturation, posé une fois, avant le détail par domaine.
   Il tient sur une bande et non dans une carte : une carte se compare,
   or il n'y a rien à comparer ici — c'est un cadre, pas une offre. */
.btq-rate-band {
  display: grid; gap: var(--s8);
  padding: clamp(var(--s6), 4vw, var(--s8)) 0;
  margin-bottom: var(--s16);
  border-top: 1px solid var(--brand);
  border-bottom: 1px solid var(--b-1);
}
/* --bp-md et non 900px : le registre de styles/responsive.css n'admet que
   480 / 768 / 1024 / 1280, et un seuil inventé est un seuil que personne
   ne retrouve. La bande tient en deux colonnes dès la tablette. */
@media (min-width: 768px) {
  .btq-rate-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; column-gap: var(--s16);
  }
}
.btq-rate-band-label {
  display: block; margin-bottom: var(--s4);
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-l);
}
.btq-rate-band-val {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3);
  margin-bottom: var(--s4);
}
/* Le chiffre en --t1 et non en or : le doré est la couleur d'accent du
   site, l'appliquer au montant le fait lire comme une promotion. */
.btq-rate-band-num {
  font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--t1);
}
.btq-rate-band-unit {
  font-family: var(--mono); font-size: var(--fs-base);
  letter-spacing: .04em; color: var(--t3);
}
.btq-rate-band-note {
  font-size: var(--fs-sm); color: var(--t2);
  line-height: 1.75; max-width: 46ch;
}

/* Trois repères, en paires libellé/valeur : ils ne promettent rien que
   la FAQ ne dise déjà, ils le disent juste au moment où on regarde les
   prix plutôt que trois écrans plus bas. */
.btq-rate-band-facts {
  display: grid; gap: var(--s5); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
@media (min-width: 768px) {
  .btq-rate-band-facts { grid-template-columns: 1fr; gap: var(--s4); min-width: 220px; }
}
.btq-rate-fact dt {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--t4);
  margin-bottom: 4px;
}
.btq-rate-fact dd {
  margin: 0; font-size: var(--fs-sm); color: var(--t1); font-weight: 500;
}

/* ── Prestations (liste éditoriale) ──────────────────────── */
/* Une ligne par domaine, séparées par des filets. Ce qui se lit à
   gauche, ce qui se décide à droite : description et périmètre d'un
   côté, tarif, délai et bouton de l'autre. */
.btq-svc-list { display: flex; flex-direction: column; }

.btq-svc {
  display: grid; gap: var(--s6);
  padding: clamp(var(--s7), 4vw, var(--s10)) 0;
  border-top: 1px solid var(--b-1);
  transition: border-color var(--t2s);
}
.btq-svc:last-child { border-bottom: 1px solid var(--b-1); }
@media (min-width: 768px) {
  .btq-svc {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    column-gap: clamp(var(--s10), 6vw, var(--s16));
    align-items: start;
  }
}
/* Pas de fond ni de translation au survol : six lignes qui bougent
   font vibrer la page. Seuls le filet et le numéro réagissent. */
.btq-svc:hover { border-top-color: rgba(192,150,60,.45); }

.btq-svc-body { display: flex; flex-direction: column; gap: var(--s4); }
.btq-svc-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.btq-svc-num {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .14em; color: var(--t4);
  transition: color var(--t2s);
}
.btq-svc:hover .btq-svc-num { color: var(--brand-l); }
.btq-svc-icon { font-size: 15px; color: var(--brand-l); opacity: .8; }
.btq-svc-title {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600;
  letter-spacing: -.03em; color: var(--t1);
  /* Prend toute la largeur restante pour que l'énoncé long passe à la
     ligne sous le numéro plutôt que d'écraser l'icône. */
  flex: 1 1 100%;
}
@media (min-width: 480px) { .btq-svc-title { flex: 1 1 auto; } }
.btq-svc-desc {
  font-size: var(--fs-sm); color: var(--t2);
  line-height: 1.8; max-width: 62ch;
}
/* Le périmètre en étiquettes mono : quatre puces empilées faisaient une
   deuxième colonne de texte, ici c'est une ligne qu'on balaie. */
.btq-svc-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.btq-svc-tags li {
  padding: 3px 10px;
  border: 1px solid var(--b-1); border-radius: 3px;
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .02em; color: var(--t3);
}

.btq-svc-side { display: flex; flex-direction: column; gap: var(--s5); }
.btq-svc-rate {
  display: flex; align-items: baseline; gap: var(--s2);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--b-1);
}
.btq-svc-rate-val {
  font-size: var(--fs-3xl); font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--t1);
}
.btq-svc-rate-unit {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .06em; color: var(--t3);
}

.btq-svc-facts { display: flex; flex-direction: column; gap: var(--s4); margin: 0; }
.btq-svc-fact dt {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--t4);
  margin-bottom: 3px;
}
.btq-svc-fact dd {
  margin: 0; font-size: var(--fs-sm); color: var(--t2); line-height: 1.6;
}

/* Lien-action et non bouton plein : six boutons dorés empilés le long
   de la page en feraient une grille de tarifs. La flèche porte
   l'affordance. */
.btq-svc-cta {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); margin-top: auto;
  padding: 0; background: none; border: 0;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-l); cursor: pointer; text-align: left;
  transition: gap var(--t2s), color var(--t2s);
}
.btq-svc-cta i { font-size: .9em; transition: transform var(--t2s); }
.btq-svc-cta:hover i { transform: translateX(4px); }
.btq-svc-cta:focus-visible {
  outline: 2px solid var(--brand-l); outline-offset: 4px; border-radius: var(--r1);
}

/* ── Liste de puces mono ─────────────────────────────────── */
/* Née dans les anciennes cartes de prestation, reprise par les tuiles
   « bientôt » de la page produits — c'est aujourd'hui son seul usage. */
.btq-prestation-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.btq-prestation-list li {
  font-size: var(--fs-xs); color: var(--t2);
  font-family: var(--mono); letter-spacing: .02em;
  display: flex; align-items: center; gap: 8px;
}
.btq-prestation-list li::before {
  content: '·'; color: var(--brand-l); font-weight: 700; flex-shrink: 0;
}
/* .btq-prestation-card / -icon / -body / -title / -desc, .btq-price-from,
   .btq-price-val, .btq-prestation-grid et .btq-btn-outline vivaient ici :
   ils habillaient les six cartes de la page services, remplacées par
   .btq-svc. Plus aucune page ne les portait. */

/* ── Reassurance ─────────────────────────────────────────── */
.btq-reassurance {
  display: flex; align-items: flex-start; gap: var(--s5);
  padding: var(--s6) var(--s7); border-radius: var(--r3);
  background: rgba(192,150,60,.05); border: 1px solid rgba(192,150,60,.15);
}
.btq-reassurance p {
  font-size: var(--fs-sm); color: var(--t2); line-height: 1.75; margin: 0;
}

/* ── Plans grid ──────────────────────────────────────────── */
/* Stacked on mobile, side by side from --bp-md up */
.btq-plans-grid {
  display: flex; flex-direction: column;
  gap: var(--s6); margin-bottom: var(--s10); align-items: stretch;
}
@media (min-width: 768px) {
  .btq-plans-grid { flex-direction: row; gap: var(--s5); align-items: start; }
}
.btq-plan-card {
  flex: 1 1 0;
  position: relative;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r4); padding: var(--s8);
  display: flex; flex-direction: column; gap: var(--s6);
  transition: border-color .25s, box-shadow .25s;
}
.btq-plan-card--featured {
  border-color: rgba(192,150,60,.5);
  background: rgba(192,150,60,.06);
  box-shadow: 0 0 48px rgba(192,150,60,.12);
}
.btq-plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #0D0B07;
  font-size: var(--fs-xs); font-weight: 700; font-family: var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 16px; border-radius: 999px; white-space: nowrap;
}
.btq-plan-header { display: flex; flex-direction: column; gap: var(--s2); }
.btq-plan-name {
  font-size: var(--fs-xl); font-weight: 700; color: var(--t1);
  letter-spacing: -.02em;
}
.btq-plan-price-wrap { display: flex; align-items: baseline; gap: 4px; margin-top: var(--s1); }
.btq-plan-price {
  font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800;
  color: var(--brand-l); letter-spacing: -.04em;
}
.btq-plan-period { font-size: var(--fs-sm); color: var(--t2); }
.btq-plan-tagline {
  font-size: var(--fs-xs); color: var(--t2); font-family: var(--mono);
  letter-spacing: .04em; margin-top: var(--s1);
}
.btq-plan-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s3);
  border-top: 1px solid rgba(255,255,255,.06); padding-top: var(--s6); flex: 1;
}
.btq-plan-features li {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-sm); color: var(--t2); line-height: 1.4;
}
.btq-plan-features li i.fa-check { color: var(--brand-l); font-size: .7rem; flex-shrink: 0; }
.btq-plan-features li i.fa-xmark { color: rgba(255,255,255,.15); font-size: .7rem; flex-shrink: 0; }
.btq-feat-off { opacity: .45; }
.btq-plan-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap); padding: 13px; border-radius: var(--r2);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); color: var(--t1);
  background: rgba(255,255,255,.05); transition: all .22s;
}
.btq-plan-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.btq-plan-btn--primary {
  background: var(--brand); border-color: var(--brand); color: #0D0B07;
  box-shadow: 0 0 24px rgba(192,150,60,.3);
}
.btq-plan-btn--primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 32px rgba(192,150,60,.45);
}

/* ── Responsive ──────────────────────────────────────────────
   All layout is mobile-first next to its component above; the former
   ≤1024 / ≤768 / ≤640 block is no longer needed. */

/* ════════════════════════════════════════════════════════════
   SHOP — three-page split (hub / services / products)
   Everything below is shared by boutique/services.html and
   boutique/products.html. Same tokens, same radii, same gold as
   the components above: these are new layouts, not a new palette.
   ════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ──────────────────────────────────────────────
   Shop / Services. Sits above the H1, inside the hero. */
.btq-crumb {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--s2);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t4); margin-bottom: var(--s5);
}
.btq-crumb a {
  color: var(--t3); border-radius: 3px;
  transition: color var(--t1s);
}
.btq-crumb a:hover { color: var(--brand-l); }
.btq-crumb-sep { color: var(--b-3); }
.btq-crumb [aria-current] { color: var(--brand-l); }
/* Left-aligned variant, for heroes that are not centred */

/* ── Cross-link tile (CrossLinkTile) ─────────────────────────
   One large tile at the foot of each shop page, pointing at the other
   half of the shop. It is an <a>, not a div with a handler: real link
   semantics, real middle-click, one tab stop. The card stack on the
   right is decorative and marked aria-hidden — the link carries an
   explicit aria-label instead. */
.btq-xlink {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; gap: var(--s6);
  align-items: center;
  padding: clamp(var(--s6), 4vw, var(--s10));
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r3);
  transition: transform 320ms ease, box-shadow 320ms ease,
              border-color 320ms ease;
}
@media (min-width: 768px) {
  .btq-xlink {
    grid-template-columns: 1fr 1fr;
    gap: var(--s10);
    min-height: 340px;
  }
}
.btq-xlink:hover {
  transform: translateY(-4px);
  border-color: rgba(192,150,60,.42);
  box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(192,150,60,.12);
}
.btq-xlink:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Diffuse halo behind the stack. The gradient is authored at its
   hover strength and dimmed at rest, because opacity is the only
   property here that composites — animating the colour stop would
   repaint the whole tile on every frame. .58 × .12 ≈ .07. */
.btq-xlink-halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 60% at 78% 50%,
              rgba(192,150,60,.12) 0%, transparent 70%);
  opacity: .58; transition: opacity 320ms ease;
}
.btq-xlink:hover .btq-xlink-halo { opacity: 1; }

.btq-xlink-text {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s4);
}
.btq-xlink-title {
  font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600;
  letter-spacing: -.03em; color: var(--t1); line-height: 1.15;
}
.btq-xlink-desc {
  font-size: var(--fs-base); color: var(--t2); line-height: 1.7;
  max-width: 42ch;
}
.btq-xlink-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap; width: 100%;
  margin-top: var(--s2); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.05);
}
.btq-xlink-from {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--t3);
}
.btq-xlink-price {
  display: block; margin-top: var(--s1);
  font-family: var(--font); font-size: var(--fs-2xl); font-weight: 700;
  letter-spacing: -.03em; color: var(--brand-l);
}
.btq-xlink-price span { font-size: var(--fs-sm); font-weight: 400; color: var(--t2); }
.btq-xlink-go {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand-l);
}
.btq-xlink-go i { font-size: .8em; transition: transform 320ms ease; }
.btq-xlink:hover .btq-xlink-go i { transform: translateX(5px); }

/* Stacked mini-cards. The perspective is on the container, never on
   each card — three separate 3D contexts would not share a vanishing
   point and the stack would splay. */
/* The height is explicit and equals one card plus the full offset run
   (76 + 2×10 mobile, 76 + 2×14 desktop). Without it the grid sizes to
   a single 76px card, the translated cards hang outside the box, and
   the bottom fade below lands across the middle of the front card
   instead of at the foot of the pile. Width is capped so the stack
   reads as a stack of cards and not as three full-width bars. */
.btq-xlink-stack {
  position: relative; z-index: 1;
  display: grid;
  width: 100%; max-width: 340px; height: 96px; justify-self: center;
  transform: perspective(900px) rotateX(3deg);
  transition: transform 320ms ease;
}
@media (min-width: 768px) {
  .btq-xlink-stack {
    height: 104px; justify-self: end;
    transform: perspective(900px) rotateX(4deg) rotateY(-7deg);
  }
  .btq-xlink:hover .btq-xlink-stack { transform: perspective(900px) rotateX(4deg) rotateY(-4deg); }
}
/* Bottom fade, so the pile dissolves into the tile rather than ending
   on a hard edge. Starts at 62% — far enough down to take only the two
   filler bars of the front card, never its label or its name. The stop
   colour is the tile's own composite over --void. */
.btq-xlink-stack::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, #080808 100%);
}
/* All three occupy one grid cell; each is nudged down and right, and
   the front card is the LAST in source order so it paints on top. */
.btq-xlink-card {
  grid-area: 1 / 1;
  height: 76px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r2);
}
/* Offsets are cumulative: one step is 10px right / 14px down. The
   foreground card is the last child, so it both paints on top and
   sits lowest in the pile. Steps shrink to 7 / 10 on a phone, where
   the tile is narrow enough for the full offset to push the stack
   past the padding edge. */
.btq-xlink-card:nth-child(1) { transform: none;                  opacity: .28; }
.btq-xlink-card:nth-child(2) { transform: translate(7px,  10px); opacity: .55; }
.btq-xlink-card:nth-child(3) { transform: translate(14px, 20px); opacity: 1;   }
@media (min-width: 768px) {
  .btq-xlink-card:nth-child(2) { transform: translate(10px, 14px); }
  .btq-xlink-card:nth-child(3) { transform: translate(20px, 28px); }
}
.btq-xlink-card-top {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-l);
}
.btq-xlink-card-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  color: #0D0B07; background: var(--brand);
  border-radius: var(--rfull); padding: 1px 7px;
}
.btq-xlink-card-name {
  font-size: var(--fs-sm); font-weight: 500; color: var(--t1);
  letter-spacing: -.01em;
}
/* Two rules standing in for body copy. Widths come from an explicit
   modifier, not nth-of-type — that counts every sibling <div> in the
   card, so it would land on the wrong element. */
.btq-xlink-card-bar {
  height: 1px; width: 100%;
  background: rgba(255,255,255,.07); border-radius: 1px;
}
.btq-xlink-card-bar--short { width: 62%; }

/* Motion off: only the border still reacts. */
@media (prefers-reduced-motion: reduce) {
  .btq-xlink:hover { transform: none; box-shadow: none; }
  .btq-xlink-stack,
  .btq-xlink:hover .btq-xlink-stack { transform: none; }
  .btq-xlink:hover .btq-xlink-go i { transform: none; }
}

/* ── Process band (4 horizontal steps) ───────────────────────
   A gradient rail runs behind the row of nodes; each step carries a
   giant watermark numeral behind its text. */
.btq-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s8) var(--s6);
}
/* The rail sits on the node centres (9px dot, 4.5px radius). Drawn on
   the row of dots only, so it never appears in the stacked layout. */
@media (min-width: 768px) {
  .btq-steps::before {
    content: ''; position: absolute; left: 0; right: 0; top: 4px;
    height: 1px; pointer-events: none;
    background: linear-gradient(100deg, var(--brand-l), var(--brand));
    opacity: .35;
  }
}
.btq-step {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--s3);
  padding-top: var(--s6);
}
/* Node */
.btq-step::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: var(--rfull);
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(192,150,60,.12);
}
/* Watermark numeral */
.btq-step-ghost {
  position: absolute; z-index: -1;
  top: 8px; left: -6px;
  font-family: var(--font); font-size: 92px; font-weight: 700;
  line-height: 1; letter-spacing: -.06em;
  color: rgba(255,255,255,.035);
  pointer-events: none; user-select: none;
}
.btq-step-num {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .14em; color: var(--brand-l);
}
.btq-step-title {
  font-size: var(--fs-xl); font-weight: 600; color: var(--t1);
  letter-spacing: -.02em; line-height: 1.25;
}
.btq-step-desc {
  font-size: var(--fs-sm); color: var(--t2); line-height: 1.7;
}

/* ── Sticky sub-nav (StickySubNav) ───────────────────────────
   Parks under the fixed navbar. Horizontally scrollable below
   --bp-lg so the six anchors never wrap into a second row. */
.btq-subnav {
  position: sticky; top: var(--nav-total); z-index: var(--z-dots);
  margin-bottom: var(--s12);
  background: rgba(6,6,6,.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: box-shadow var(--t2s), background var(--t2s);
}
/* Set by the page script once the bar reaches its parked position. */
.btq-subnav.is-stuck {
  background: rgba(6,6,6,.94);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.btq-subnav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 clamp(var(--s4), 4vw, var(--s12));
  display: flex; align-items: center; gap: var(--s4);
}
.btq-subnav-list {
  display: flex; align-items: center; gap: var(--s1);
  flex: 1; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.btq-subnav-list::-webkit-scrollbar { display: none; }
.btq-subnav-link {
  position: relative; flex-shrink: 0; scroll-snap-align: start;
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 500;
  color: var(--t3); white-space: nowrap;
  padding: var(--s4) var(--s3); min-height: var(--tap);
  transition: color var(--t1s);
}
.btq-subnav-link:hover { color: var(--t1); }
/* Active marker — a gold underline rather than a fill, so the bar keeps
   reading as navigation and not as a row of buttons. */
.btq-subnav-link::after {
  content: ''; position: absolute; left: var(--s3); right: var(--s3); bottom: 0;
  height: 2px; background: var(--brand); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t2s);
}
.btq-subnav-link.is-active { color: var(--brand-l); }
.btq-subnav-link.is-active::after { transform: scaleX(1); }
.btq-subnav-cta { flex-shrink: 0; }
/* The CTA is dead weight next to six anchors on a narrow screen. */
@media (max-width: 767px) { .btq-subnav-cta { display: none; } }

/* Anything the sub-nav scrolls to has to clear the navbar AND the bar
   itself, otherwise the card lands underneath both. */
.btq-anchor { scroll-margin-top: calc(var(--nav-total) + 84px); }
/* Focused programmatically after a jump (tabindex="-1"), so the next Tab
   continues from the target rather than from the top of the page. The
   outline would otherwise ring the whole card. */
.btq-anchor:focus { outline: none; }
.btq-anchor:focus-visible { outline: 2px solid var(--brand-l); outline-offset: 4px; }

/* ── Comparison table (ComparisonTable) ──────────────────────
   Horizontal scroll container with a frozen first column. The
   opaque cell background is load-bearing: the page is transparent
   over the star field, so a sticky cell with no fill would let the
   scrolled-under column show straight through it. */
.btq-ctable-wrap {
  /* An existing opaque surface token rather than a literal, so the frozen
     cells keep working if the light theme is ever wired back up. */
  --btq-tbl-bg: var(--card);
  background: var(--btq-tbl-bg);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r3);
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.btq-ctable {
  width: 100%; min-width: 620px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.btq-ctable th, .btq-ctable td {
  padding: var(--s4) var(--s5);
  text-align: left; vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.btq-ctable tbody tr:last-child th,
.btq-ctable tbody tr:last-child td { border-bottom: none; }
.btq-ctable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--btq-tbl-bg);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t3);
  border-bottom-color: rgba(255,255,255,.12);
  white-space: nowrap;
}
/* Frozen first column */
.btq-ctable th[scope="row"],
.btq-ctable tbody td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--btq-tbl-bg);
  font-weight: 600; color: var(--t1);
  box-shadow: 1px 0 0 rgba(255,255,255,.06);
}
.btq-ctable thead th:first-child { z-index: 3; }
.btq-ctable tbody tr:hover td,
.btq-ctable tbody tr:hover th[scope="row"] { background: rgba(192,150,60,.035); }
.btq-ctable td { color: var(--t2); }
.btq-ctable .btq-ct-price { color: var(--brand-l); font-weight: 700; white-space: nowrap; }
.btq-ctable .btq-ct-yes  { color: var(--brand-l); }
.btq-ctable .btq-ct-no   { color: rgba(255,255,255,.18); }
/* Highlight the recommended plan's column the same way its card is */
.btq-ctable .btq-ct-featured { background: rgba(192,150,60,.05); }
.btq-ctable thead th.btq-ct-featured { color: var(--brand-l); }
/* Centre the ✓ / ✗ columns of the plan matrix */
.btq-ctable--matrix td:not(:first-child),
.btq-ctable--matrix thead th:not(:first-child) { text-align: center; }

/* ── Plan matrix, grouped reading (PlanMatrix) ────────────────
   The matrix is fourteen rows long: read flat it is a wall of ticks.
   Rows are grouped under mono intertitles, and every capped value
   states its cap rather than showing a tick that hides it. */

/* Column head: plan name over its price, so a column stays identifiable
   once the cards are off screen. Kept as table-cell — display:flex here
   would drop the cell out of the row and break every column width. */
.btq-ctable--matrix thead th { vertical-align: bottom; }
.btq-ctable--matrix thead th > span { display: block; }
.btq-ct-plan {
  font-family: var(--font); font-size: var(--fs-base); font-weight: 700;
  letter-spacing: -.02em; text-transform: none; color: var(--t1);
}
.btq-ct-sub {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .04em; text-transform: none; color: var(--t3); margin-top: 2px;
}
.btq-ctable .btq-ct-featured .btq-ct-plan,
.btq-ctable .btq-ct-featured .btq-ct-sub { color: var(--brand-l); }

/* Same badge as the featured card, at the top of its column */
.btq-ct-pop {
  width: fit-content; margin: 0 auto var(--s2);
  background: var(--brand); color: #0D0B07;
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--rfull);
}

/* Section rows. scope="colgroup" keeps them out of the frozen-column and
   row-hover rules, both of which key off th[scope="row"]. */
.btq-ctable .btq-ct-group th {
  padding-top: var(--s7); padding-bottom: var(--s2);
  background: var(--btq-tbl-bg);
  border-bottom-color: rgba(192,150,60,.22);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-l);
}
/* The label rides the horizontal scroll, like the frozen first column
   it sits above — otherwise the section name slides out of view exactly
   when the columns being compared come in. */
.btq-ctable .btq-ct-group th > span {
  position: sticky; left: var(--s5); display: inline-block;
}

/* Capped values. A tick would say "included" where the point is "up to
   this much", so every limit is written out. */
.btq-ct-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--rfull);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .04em; white-space: nowrap;
  color: var(--t1); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
/* No ceiling at all: the one value worth colouring */
.btq-ct-chip--max {
  color: var(--brand-l); background: rgba(192,150,60,.1);
  border-color: rgba(192,150,60,.28);
}

/* Featured column, edge to edge. The head is opaque because it is sticky:
   a translucent brand tint would let scrolled rows show through it, hence
   the flat gradient layered over the table surface rather than a fill. */
.btq-ctable--matrix .btq-ct-featured {
  box-shadow: inset 1px 0 0 rgba(192,150,60,.2), inset -1px 0 0 rgba(192,150,60,.2);
}
.btq-ctable--matrix thead th.btq-ct-featured {
  background: linear-gradient(rgba(192,150,60,.09), rgba(192,150,60,.09)), var(--btq-tbl-bg);
  border-radius: var(--r2) var(--r2) 0 0;
  border-bottom-color: rgba(192,150,60,.35);
  padding-top: var(--s5);
}

/* Collapsible wrapper for the plan matrix */
.btq-collapse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); margin: 0 auto;
  min-height: var(--tap); padding: 10px 20px; border-radius: var(--r2);
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-l); background: transparent;
  border: 1px solid rgba(192,150,60,.35);
  cursor: pointer; transition: background var(--t2s), border-color var(--t2s);
}
.btq-collapse-btn:hover {
  background: rgba(192,150,60,.08); border-color: rgba(192,150,60,.6);
}
.btq-collapse-btn i { font-size: .75em; transition: transform var(--t2s); }
.btq-collapse-btn[aria-expanded="true"] i { transform: rotate(180deg); }

/* ── Billing toggle (BillingToggle) ──────────────────────────
   Two radio-equivalent buttons in a pill, matching .lang-toggle. */
.btq-billing {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s10);
}
.btq-billing-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--b-1);
  border-radius: var(--rfull); padding: 3px;
}
.btq-billing-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  /* Mesuré à 105x38 et 93x38 sur téléphone : sous le --tap que ce dépôt
     se donne, pour le contrôle qui bascule tous les prix de la page. */
  min-height: var(--tap); padding: 6px var(--s5);
  border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  color: var(--t3); border-radius: var(--rfull);
  transition: color var(--t1s), background var(--t1s);
}
.btq-billing-btn:hover { color: var(--t2); }
.btq-billing-btn[aria-pressed="true"] {
  color: var(--brand-l); background: var(--brand-dim);
}
.btq-billing-save {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-l); background: rgba(192,150,60,.1);
  border: 1px solid rgba(192,150,60,.25);
  border-radius: var(--rfull); padding: 3px 10px;
}
/* Billing note under each price, only shown in annual mode */
.btq-plan-billed {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .05em; color: var(--t3); margin-top: var(--s1);
}
.btq-plan-billed[hidden] { display: none; }

/* ── Plans as a snap carousel below --bp-md ──────────────────
   The stacked column made the products page four screens tall before
   the first comparison. One card per swipe instead. The vertical
   padding is for .btq-plan-badge, which overhangs the card by 13px
   and would otherwise be clipped by the scroll container. */
@media (max-width: 767px) {
  .btq-plans-grid--carousel {
    flex-direction: row; flex-wrap: nowrap;
    gap: var(--s4); margin-inline: calc(-1 * clamp(var(--s4), 4vw, var(--s12)));
    padding: var(--s5) clamp(var(--s4), 4vw, var(--s12));
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .btq-plans-grid--carousel::-webkit-scrollbar { display: none; }
  .btq-plans-grid--carousel > .btq-plan-card {
    flex: 0 0 min(86%, 320px);
    scroll-snap-align: center;
  }
}
/* Swipe affordance, mobile only */
.btq-carousel-hint {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--t4);
  margin-top: calc(-1 * var(--s6)); margin-bottom: var(--s10);
}
@media (min-width: 768px) { .btq-carousel-hint { display: none; } }

/* ── Product mockup ──────────────────────────────────────────
   A framed placeholder for the dashboard, tilted in perspective with
   a diffuse gold glow behind it. Pure transform, so it composites. */
.btq-mock-stage {
  position: relative; display: flex; justify-content: center;
  perspective: 1200px; padding: var(--s6) 0 var(--s10);
}
.btq-mock-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 45%,
              rgba(192,150,60,.16) 0%, transparent 68%);
}
.btq-mock {
  position: relative; width: 100%; max-width: 940px;
  border-radius: var(--r3); overflow: hidden;
  background: linear-gradient(160deg, #0E0E0E 0%, #070707 100%);
  border: 1px solid rgba(192,150,60,.18);
  box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 60px var(--brand-glow2);
  transform: rotateX(6deg);
  transform-origin: 50% 100%;
  transition: transform var(--t3s);
}
@media (max-width: 767px) { .btq-mock { transform: none; } }
.btq-mock:hover { transform: rotateX(0deg); }
@media (prefers-reduced-motion: reduce) {
  .btq-mock, .btq-mock:hover { transform: none; }
}
/* Bottom fade into the page, so the frame does not end on a hard edge.
   Descendu de 34% à 16% depuis qu'une vraie capture occupe le cadre : à
   34% le dégradé mangeait le tiers bas du tableau des exécutions. */
.btq-mock::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 16%; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--void) 96%);
}
/* Fake window chrome */
.btq-mock-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.btq-mock-dot {
  width: 9px; height: 9px; border-radius: var(--rfull);
  background: var(--b-2); flex-shrink: 0;
}
.btq-mock-label {
  margin-left: var(--s3); font-family: var(--mono);
  font-size: var(--fs-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--t4);
}
.btq-mock-body { display: block; width: 100%; }
.btq-mock-body picture { display: block; }
.btq-mock-body img { width: 100%; height: auto; display: block; }

/* ── Trois affirmations, une idée par bloc ───────────────────
   Titre court et sec, une seule phrase dessous : le bloc doit se lire en
   diagonale, pas se parcourir. */
.btq-claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s8) var(--s10);
  margin-top: var(--s6);
  padding-top: var(--s10);
  border-top: 1px solid rgba(255,255,255,.05);
}
/* Deux blocs plus larges, pour un propos qui demande une phrase de plus. */
.btq-claims--duo {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin-top: var(--s10);
}
.btq-claim-t {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.15; color: var(--t1);
  margin-bottom: var(--s3);
}
.btq-claim-d { font-size: var(--fs-sm); color: var(--t2); line-height: 1.7; }

/* ── Panneaux web / bureau ───────────────────────────────────
   Deux panneaux pleine hauteur : une affirmation en gros, une ligne
   d'appui courte, et le détail relégué dans un rail de specs en bas.
   Le rail est poussé par margin-top:auto, les deux panneaux alignent
   donc leurs bandeaux même quand les titres ne font pas le même
   nombre de lignes. */
.btq-split {
  display: grid; grid-template-columns: 1fr; gap: var(--s4);
}
@media (min-width: 900px) {
  .btq-split { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}
.btq-split-panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(340px, 40vw, 460px);
  padding: clamp(var(--s7), 4.5vw, var(--s12));
  border-radius: var(--r5);
  border: 1px solid rgba(255,255,255,.07);
  /* La lueur haute donne au panneau son point de fuite ; le dégradé du
     dessous l'éclaircit vers le titre et l'éteint vers le rail. */
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(192,150,60,.10), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.btq-split-eyebrow {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-l); margin-bottom: var(--s6);
}
.btq-split-title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1.08; color: var(--t1);
  margin-bottom: var(--s4); text-wrap: balance;
}
.btq-split-desc {
  font-size: var(--fs-base); color: var(--t2); line-height: 1.65;
  max-width: 34ch;
}
@media (min-width: 768px) { .btq-split-desc { font-size: var(--fs-lg); } }
/* Rail de specs, ancré en bas du panneau */
.btq-split-specs { margin-top: auto; padding-top: var(--s8); }
.btq-split-spec {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5); padding: var(--s3) 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.btq-split-k {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--t4); flex-shrink: 0;
}
.btq-split-v {
  margin: 0; font-size: var(--fs-sm); font-weight: 600;
  color: var(--t1); text-align: right;
}
/* Note de bas de bloc : une ligne centrée, pas un encadré. Le seul
   encadré .btq-reassurance de la page reste celui de l'accès restreint. */
.btq-split-foot {
  max-width: 620px; margin: var(--s8) auto 0; text-align: center;
  font-size: var(--fs-sm); color: var(--t3); line-height: 1.7;
}

/* ── Alternating feature blocks ──────────────────────────────
   Text one side, visual the other, flipping row to row. */
.btq-alt {
  display: grid; grid-template-columns: 1fr; gap: var(--s6);
  align-items: center;
  padding: var(--s10) 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.btq-alt:last-of-type { border-bottom: none; }
@media (min-width: 1024px) {
  .btq-alt { grid-template-columns: 1fr 1fr; gap: var(--s16); padding: var(--s16) 0; }
  /* Source order stays text-then-visual for screen readers; only the
     painted order alternates. */
  .btq-alt--flip .btq-alt-text   { order: 2; }
  .btq-alt--flip .btq-alt-visual { order: 1; }
}
.btq-alt-text { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.btq-alt-title {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700;
  letter-spacing: -.03em; color: var(--t1); line-height: 1.15;
}
.btq-alt-desc { font-size: var(--fs-base); color: var(--t2); line-height: 1.75; }
.btq-alt-list {
  display: flex; flex-direction: column; gap: 6px; margin-top: var(--s1);
}
.btq-alt-list li {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--t2);
  letter-spacing: .02em; display: flex; align-items: center; gap: 8px;
}
.btq-alt-list li::before { content: '·'; color: var(--brand-l); font-weight: 700; }
.btq-alt-visual {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--r3);
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.btq-alt-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 50%,
              rgba(192,150,60,.09), transparent 70%);
}
.btq-alt-visual i { font-size: 46px; color: rgba(192,150,60,.4); }
.btq-alt-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Variante « capture » : le cadre accueille un enregistrement d'écran au
   lieu d'une icône. Le 4/3 d'origine est fait pour un glyphe centré ; une
   capture d'interface est en 16/9 et s'y retrouverait rognée des deux
   côtés ou cernée de bandes. */
.btq-alt-visual--media {
  aspect-ratio: 16 / 9;
  background: #0B1220;          /* fond des captures, évite le flash clair */
  align-items: stretch; justify-content: stretch;
}
/* Le halo doré passe au-dessus d'une icône, pas d'une capture : il la
   voilerait. */
.btq-alt-visual--media::after { display: none; }
.btq-alt-media {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Mouvement réduit : la boucle est décorative, elle n'a rien à imposer.
   Le script de la page met le média en pause et laisse l'affiche ; ceci
   couvre le cas où le script n'a pas encore tourné. */
@media (prefers-reduced-motion: reduce) {
  .btq-alt-media { animation: none !important; }
}

/* ── Coming-soon ghost cards ─────────────────────────────────
   Deliberately inert: no hover lift, no CTA, reduced opacity. The
   grid is auto-fit so a fourth product just drops in. */
.btq-ghost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--s5);
}
.btq-ghost {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(var(--s5), 4vw, var(--s7));
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: var(--r4);
  background: rgba(255,255,255,.012);
  opacity: .55;
}
.btq-ghost-icon {
  width: 44px; height: 44px; border-radius: var(--r2);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--t3); flex-shrink: 0;
}
.btq-ghost-title { font-size: var(--fs-base); font-weight: 700; color: var(--t2); }
.btq-ghost-desc  { font-size: var(--fs-sm); color: var(--t3); line-height: 1.7; }
.btq-ghost .badge { align-self: flex-start; margin-top: auto; }

/* ── Full-width closing CTA ──────────────────────────────────
   The band the hub, services and products pages all end on. */
.btq-cta-band {
  padding: var(--s20) 0; text-align: center;
  border-top: 1px solid rgba(255,255,255,.05);
  position: relative; overflow: hidden;
}
.btq-cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 50% 100%,
              rgba(192,150,60,.07) 0%, transparent 70%);
}
.btq-cta-band > .container { position: relative; z-index: 1; }
.btq-cta-h2 {
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl)); font-weight: 700;
  letter-spacing: -.03em; color: var(--t1); margin-bottom: var(--s4);
}
.btq-cta-sub { font-size: var(--fs-lg); color: var(--t2); margin-bottom: var(--s10); }
.btq-cta-actions {
  display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap;
}