/* Tickaboo — /tools/blur-faces/ page-specific styles.
 *
 * Loaded via an explicit <link> in pages/tools/blur-faces.html (NOT auto,
 * because tools/stitch.js pageCssSlug() returns null for nested page paths
 * — see the comment at the top of that page). Governed by
 * design-guide/current.md and design-guide/page-craft.md, interior marketing
 * page pattern, following pages/about.html as the reference implementation.
 *
 * This file owns the tool widget's visual states (is-empty / is-loading /
 * is-ready / is-error), which are the DOM contract the engine agent
 * (assets/js/blur-tool.js) codes against. Do not rename the data- hooks.
 *
 * .chip-soon, .faq* and .close* are NOT in this file: they were extracted
 * into components.css on 26 Aug once this became the third page needing
 * them (page-craft.md §7). Do not copy them back in here.
 */

/* Standard visually-hidden utility. Kept off display:none so the file
   input stays focusable and keyboard/Enter still opens the native file
   picker even before blur-tool.js has run. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO + TOOL — short H1/lead, then the tool immediately below. The
   tool is why people arrive, so nothing sits between it and the fold.
   ═══════════════════════════════════════════════════════════════════ */
.blur-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}
.blur-hero__inner { position: relative; z-index: 1; }
.blur-hero__intro {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}
.blur-hero__intro h1 { margin-bottom: 0.9rem; }
.blur-hero__intro .lead { max-width: 42ch; margin: 0 auto; }

.blur-hero__floats .float-cluster--nw { top: -2%; left: -5%; }
.blur-hero__floats .float-cluster--nw .float-shape:nth-child(1) { width: 108px; height: 108px; }
.blur-hero__floats .float-cluster--nw .float-shape:nth-child(2) { width: 78px; height: 32px; top: 96px; left: 58px; }
.blur-hero__floats > .float-shape--ring { width: 118px; height: 118px; top: 8%; right: 4%; }
@media (max-width: 720px) {
  .blur-hero__floats > .float-shape--ring,
  .blur-hero__floats .float-cluster--nw .float-shape:nth-child(2) { display: none; }
  /* §5: a shape behind a headline is wrong. Stacked, the h1 runs the full
     column, so the survivor is pushed clear of its left edge rather than
     just shrunk. Measured at 375px: shape ends at x=-4, h1 starts at x=20. */
  .blur-hero__floats .float-cluster--nw { top: -5%; left: -24%; }
  .blur-hero__floats .float-cluster--nw .float-shape:nth-child(1) { width: 78px; height: 78px; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE TOOL — fixed DOM contract. Root [data-blur-tool] carries one of
   is-empty / is-loading / is-ready / is-error, added by blur-tool.js.
   The markup ships as is-empty by default so the page is correct and
   attractive with JS off or the model still loading.
   ═══════════════════════════════════════════════════════════════════ */
.blur-tool {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
}
.blur-tool__top { position: relative; }

/* ─── Drop zone (also click-to-browse via the native label/input pair,
   which works even before blur-tool.js attaches drag-and-drop). ─── */
.blur-tool__drop-wrap { position: relative; border-radius: var(--radius-lg); }
.blur-tool__drop-wrap:focus-within .blur-tool__drop { box-shadow: var(--focus-ring); }
.blur-tool__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3rem) 1.5rem;
  border-radius: var(--radius-lg);
  border: 1.5px dashed color-mix(in srgb, var(--color-primary) 38%, transparent);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-swap) var(--ease-out), background-color var(--dur-swap) var(--ease-out);
}
.blur-tool__drop:hover,
.blur-tool.is-drag .blur-tool__drop {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}
/* The drop zone is this page's hero visual, so it previews the outcome
   rather than describing it: a real photo with the face already blurred.
   The old version drew an abstract sun-and-hill doodle in <span>s that were
   never given a display, so the whole thing measured 0x0 and the drop zone
   rendered as a bare rectangle. */
.blur-tool__drop-visual {
  position: relative;
  display: inline-block;
  margin-bottom: 0.9rem;
  rotate: -3deg;
}
.blur-tool__photo {
  display: block;
  width: 112px; height: 112px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--color-surface-tint);
}
/* Sits over the face in this particular photo (44% across, 37% down). */
.blur-tool__photo-blur {
  position: absolute;
  left: 44%; top: 37%; translate: -50% -50%;
  width: 30%; aspect-ratio: 1; border-radius: 50%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1.5px solid color-mix(in srgb, #fff 85%, transparent);
}
.blur-tool__drop-badge {
  position: absolute; right: -11px; bottom: -11px;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-paper);
  box-shadow: 0 0 0 3px var(--color-surface);
}
.blur-tool__drop-badge svg { width: 16px; height: 16px; }
.blur-tool__drop-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; color: var(--color-ink);
}
.blur-tool__drop-hint { margin: 0; font-size: 0.875rem; color: var(--color-muted); }

/* ─── Stage: positioned wrapper around the canvas, plus overlays for the
   loading and error states. Hidden while is-empty (nothing to show). ─── */
.blur-tool__stage {
  position: relative;
  display: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  min-height: 220px;
}
.blur-tool__canvas { display: block; width: 100%; height: auto; max-height: 60vh; margin: 0 auto; }
.blur-tool__overlay {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  text-align: center; padding: 2rem;
  background: color-mix(in srgb, var(--color-surface-tint) 92%, transparent);
}
.blur-tool__overlay p { margin: 0; font-size: 0.9375rem; color: var(--color-ink); font-weight: 600; }
.blur-tool__overlay p span { display: block; margin-top: 0.3rem; font-size: 0.8125rem; font-weight: 400; color: var(--color-muted); }

.blur-tool__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-top-color: var(--color-primary);
  animation: blur-spin 900ms linear infinite;
}
@keyframes blur-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .blur-tool__spinner { animation: none; opacity: 0.7; }
}

.blur-tool__error-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  color: var(--color-ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
}

/* ─── Panel: status, count, controls, primary action. Hidden while
   is-empty since there is nothing yet to control. ─── */
.blur-tool__panel { display: none; margin-top: 1.5rem; }
.blur-tool__meta { margin-bottom: 1rem; }
.blur-tool__status { margin: 0; font-weight: 600; color: var(--color-ink); }
.blur-tool__count { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--color-muted); }
.blur-tool__count:empty { display: none; }

.blur-tool__controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; margin: 0.25rem 0 1.25rem;
  border-block: 1px solid var(--color-border);
}
.blur-tool__btnrow { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.blur-tool__strength { display: flex; align-items: center; gap: 0.65rem; }
.blur-tool__strength label {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; color: var(--color-ink); white-space: nowrap;
}
.blur-tool__strength input[type="range"] {
  width: 130px; accent-color: var(--color-primary);
}

.blur-tool__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.blur-tool__download { flex: 1 1 auto; }

.blur-tool__noscript {
  margin: 1rem 0 0; padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  color: var(--color-muted); font-size: 0.875rem;
}

/* ─── State: is-empty (default) — drop zone shown, stage/panel hidden. ─── */
/* (This is the base state above; the rules below layer on top of it.) */

/* ─── State: not empty — a photo has been added, so the drop zone steps
   aside and the stage/panel take over. ─── */
.blur-tool:not(.is-empty) .blur-tool__drop-wrap { display: none; }
.blur-tool:not(.is-empty) .blur-tool__stage { display: block; }
.blur-tool:not(.is-empty) .blur-tool__panel { display: block; }

/* ─── State: is-loading — the ~4.5MB face model is downloading. Canvas
   stays visible but faint underneath the overlay; controls disable. ─── */
.blur-tool.is-loading .blur-tool__canvas { opacity: 0.25; filter: blur(1px); }
.blur-tool.is-loading .blur-tool__overlay--loading { display: flex; }
.blur-tool.is-loading .blur-tool__controls,
.blur-tool.is-loading .blur-tool__actions { opacity: 0.45; pointer-events: none; }
.blur-tool.is-loading .blur-tool__reset,
.blur-tool.is-loading [data-blur-reset] { opacity: 1; pointer-events: auto; }

/* ─── State: is-ready — faces found, canvas live, everything usable. ─── */
.blur-tool.is-ready .blur-tool__canvas { opacity: 1; filter: none; }

/* ─── State: is-error — something failed. Canvas hides behind the error
   overlay; only "start again" stays active so there's always a way out. ─── */
.blur-tool.is-error .blur-tool__canvas { opacity: 0; }
.blur-tool.is-error .blur-tool__overlay--error { display: flex; }
.blur-tool.is-error .blur-tool__controls,
.blur-tool.is-error .blur-tool__download { opacity: 0.45; pointer-events: none; }

@media (max-width: 560px) {
  .blur-tool__controls { flex-direction: column; align-items: stretch; }
  .blur-tool__strength { justify-content: space-between; }
  .blur-tool__strength input[type="range"] { flex: 1; width: auto; }
  .blur-tool__actions { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — three numbered mockups, no stock icons. Same card
   recipe as the /about/ page (pastel tint, no border, no shadow) with
   its own mock built for what this page actually argues.
   ═══════════════════════════════════════════════════════════════════ */
.steps__title {
  text-align: center;
  max-width: 24ch;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(2.1rem, 1.8rem + 1.6vw, 2.85rem);
}
.steps__title .word + .word:last-child { margin-left: -0.28em; }

.step-cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .step-cards { grid-template-columns: repeat(3, 1fr); } }
.step-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2rem) clamp(1.5rem, 2.6vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.step-card:nth-child(2) { background: var(--color-paper); }
.step-card:nth-child(3) { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-tint)); }
.step-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: 0.9rem; border-radius: 50%;
  background: var(--color-primary); color: var(--color-paper);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8125rem;
}
.step-card h3 { margin: 0 0 0.5rem; }
.step-card p { margin: 0; color: var(--color-muted); }

/* Shared mock frame, aria-hidden throughout. Figures are never faces —
   a face is represented only as an abstract circular marker, exactly
   what the tool itself draws over a detected face. */
/* ─── Step mockups ───
   One real photograph shown in three states, so the row reads as a
   sequence: dropped in, face ringed, face blurred. Abstract shapes were
   tried here first and read as nothing at all (page-craft.md §3). The
   face sits at 44% across and 37% down in this particular photo; those
   numbers are tied to the image and move if the image is swapped. */
.step-mock {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
}
.step-mock img { display: block; width: 100%; height: 100%; object-fit: cover; }
.step-mock__drop,
.step-mock__ring,
.step-mock__blur {
  position: absolute;
  pointer-events: none;
}
/* 1. Just dropped in: the target outline still showing. */
.step-mock__drop {
  inset: 7%;
  border: 2px dashed color-mix(in srgb, #fff 82%, transparent);
  border-radius: 10px;
}
/* 2. The face the tool found, ringed the way the live canvas rings it. */
.step-mock__ring {
  left: 44%; top: 37%; translate: -50% -50%;
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #fff;
}
/* 3. The same face, blurred. backdrop-filter blurs the photo underneath,
   so this stays one image rather than needing a second pre-blurred file. */
.step-mock__blur {
  left: 44%; top: 37%; translate: -50% -50%;
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.step-mock__cursor {
  position: absolute; left: 52%; top: 47%;
  width: 13px; height: 17px;
  fill: var(--color-ink); stroke: #fff; stroke-width: 1.2;
}
.step-mock__saved {
  position: absolute; left: 50%; bottom: 8%; translate: -50% 0;
  padding: 0.22rem 0.7rem; border-radius: 999px;
  background: var(--color-primary); color: var(--color-paper);
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   PRIVACY — the page's one --color-dark drench (§8 featured-panel
   treatment), reusing the about-who-v2 recipe: copy one side, a
   borderless <dl> of facts the other.
   ═══════════════════════════════════════════════════════════════════ */
.privacy__panel {
  --underline-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2.5 8.6 C 24 4.2, 55 2.6, 96 3.4 C 106 3.6, 114 4.2, 117.5 5.1 C 118.6 5.5, 118.3 6.6, 116.8 6.7 C 96 6.2, 66 6.4, 38 8.2 C 24 9.1, 12 10.2, 5 11 C 3.2 11.1, 1.8 10.2, 2 9.4 Z' fill='%23C5DCC8' fill-opacity='0.9'/%3E%3C/svg%3E");
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4.5vw, 3.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-dark);
  color: var(--color-dark-ink);
}
@media (min-width: 860px) { .privacy__panel { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.privacy__copy h2 {
  color: var(--color-dark-ink);
  max-width: 20ch;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 1.7rem + 1.4vw, 2.6rem);
}
.privacy__copy .accent--quicksand { color: var(--color-accent-2); }
.privacy__copy p {
  color: color-mix(in srgb, var(--color-dark-ink) 82%, transparent);
  max-width: 54ch;
}
.privacy__copy p:last-child { margin-bottom: 0; }

.privacy__facts { margin: 0; display: grid; gap: 0.7rem; align-content: start; }
.privacy__facts > div {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-dark-ink) 18%, transparent);
}
.privacy__facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.privacy__facts dt {
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-dark-ink) 62%, transparent);
}
.privacy__facts dd {
  margin: 0;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 0.9375rem; color: var(--color-dark-ink);
}

/* ═══════════════════════════════════════════════════════════════════
   CTA BAND — the paid product, a single tinted card standing alone.
   ═══════════════════════════════════════════════════════════════════ */
.cta-band__card {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  text-align: center;
}
.cta-band__card h2 { max-width: 22ch; margin: 0 auto 0.75rem; }
.cta-band__card p { max-width: 42ch; margin: 0 auto 1.5rem; color: var(--color-muted); }

/* ─── Word-fill on the dark drench ───
   The site-wide floor in components.css is opacity 0.2, tuned for dark ink
   on a white ground. Cream (#F5EBE0) at 0.2 on the dark green panel is
   almost invisible, so the heading reads as broken rather than as not yet
   filled. Lift the floor for this panel only; the fill still travels. */
.js .privacy__copy [data-word-fill] .word {
  opacity: calc(0.42 + 0.58 * var(--fill, 0));
}

/* ═══════════════════════════════════════════════════════════════════
   THE STAGED TOOL — rebuilt 1 Sep 2026.
   Old flow: everything auto-blurred on load, tap a face to undo it.
   New flow: upload, choose the circles, press blur, then the rest of
   the studio opens up with the paid tools locked.

   The safe default survives the change. Detected faces arrive already
   circled, so one press covers everyone; taking a child OUT is the
   deliberate act, which is the right way round for this product.
   ═══════════════════════════════════════════════════════════════════ */

/* Only one step's controls are on screen at a time. */
.blur-step { display: none; }
.blur-tool[data-phase="mark"] .blur-step[data-blur-step="mark"],
.blur-tool[data-phase="done"] .blur-step[data-blur-step="done"] { display: block; }
.blur-tool.is-empty .blur-step,
.blur-tool.is-loading .blur-step,
.blur-tool.is-error .blur-step { display: none; }

.blur-step__hint {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  max-width: 46ch;
}
.blur-step__row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* ── The circle layer ─────────────────────────────────────────────
   Sits exactly over the canvas. The canvas keeps its intrinsic ratio
   (width:100%; height:auto), so a percentage-positioned overlay tracks
   it at any width with no resize listener.
   ───────────────────────────────────────────────────────────────── */
.bcircles {
  position: absolute;
  inset: 0;
  pointer-events: none; /* the canvas underneath still takes taps */
}
.bcircles[hidden] { display: none; }

.bcircle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  box-sizing: border-box;
  cursor: grab;
  pointer-events: auto;
  touch-action: none; /* we handle the drag ourselves */
}
.bcircle.is-active { cursor: grabbing; background: color-mix(in srgb, var(--color-primary) 20%, transparent); }

/* A second, lighter ring outside the first so the circle stays visible
   on a dark photo and on a pale one. */
.bcircle::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-surface-tint) 75%, transparent);
  pointer-events: none;
}

.bcircle__kill {
  position: absolute;
  top: -11px; left: -11px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-tint);
  color: var(--color-muted);
  cursor: pointer;
}
.bcircle__kill svg { width: 13px; height: 13px; }
.bcircle__kill:hover { border-color: var(--color-ink); color: var(--color-ink); }
.bcircle__kill:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.bcircle__handle {
  position: absolute;
  right: -10px; bottom: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-surface-tint);
  border: 2px solid var(--color-primary);
  cursor: nwse-resize;
}

/* ── The tool rail ────────────────────────────────────────────────── */
.blur-rail {
  display: flex;
  gap: 0.25rem;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: thin;
}
.blur-rail__split {
  flex: none;
  width: 1px;
  margin: 0.5rem 0.45rem;
  background: var(--color-border);
}

.btool {
  position: relative;
  flex: none;
  min-width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 0.5rem 0.55rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: var(--color-muted);
  font: 500 0.6875rem/1.25 var(--font-body, inherit);
  text-align: center;
  transition: background 0.16s ease, color 0.16s ease;
}
.btool__icon { width: 22px; height: 22px; }
.btool:hover { background: var(--color-paper); color: var(--color-ink); }
.btool:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.btool[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-dark);
  font-weight: 600;
}

/* A locked tool is legible, not greyed into uselessness: the point is to
   make someone want it, and you cannot want what you cannot read. */
.btool--locked { color: color-mix(in srgb, var(--color-muted) 78%, transparent); }
.btool--locked .btool__icon { opacity: 0.78; }
.btool__lock {
  position: absolute;
  top: 3px; right: 6px;
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-primary);
}
.btool__lock svg { width: 10px; height: 10px; }
.btool--locked[aria-pressed="true"] {
  background: var(--color-paper);
  color: var(--color-ink);
}

/* ── Contextual controls under the rail ───────────────────────────── */
.bpanel__pane { display: none; }
.bpanel__pane.is-on { display: block; }
/* The tool panel and the download row are separate decisions, and the tease
   panel is tall enough that its own CTA landed hard against Download. Space
   them so the two never read as one stack of buttons. */
.blur-step[data-blur-step="done"] .blur-tool__actions {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.bpanel__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.bchip {
  border: 1px solid var(--color-border);
  background: var(--color-surface-tint);
  color: var(--color-muted);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
.bchip[aria-pressed="true"] {
  background: var(--color-surface);
  border-color: var(--color-accent-2);
  color: var(--color-dark);
  font-weight: 600;
}
.bchip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.bsliders { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.bslider { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 0.75rem; }
.bslider span { font-size: 0.8125rem; color: var(--color-muted); }
.bslider input[type="range"] { width: 100%; }

/* ── The premium tease ────────────────────────────────────────────── */
.btease {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-dark);
  color: var(--color-dark-ink);
}
.btease__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-2);
}
.btease__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: var(--color-dark-ink);
}
.btease p {
  margin: 0 0 1.1rem;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-dark-ink) 82%, transparent);
  max-width: 52ch;
}
.btease__note {
  margin: 0.8rem 0 0 !important;
  font-size: 0.8125rem !important;
  color: color-mix(in srgb, var(--color-dark-ink) 62%, transparent) !important;
}

@media (max-width: 560px) {
  .btool { min-width: 66px; padding-inline: 0.35rem; }
  .bslider { grid-template-columns: 5.5rem 1fr; }
}