/* =============================================================
   XPixel - reusable components
   Buttons, chips, cards, accordion, segmented control, and the
   interface mock primitives (.ui-*) that every coded visual on the
   page is composed from.
   Button system rebuilt 1 Oct 2026 for the high-end-visual-design
   re-skin: full-pill "island" buttons with a nested button-in-button
   trailing icon, replacing the previous mechanical-keycap treatment
   (24 Sep 2026). Cards moved from flat hairline boxes to the
   "double-bezel" nested-shell construction - see .media-card for the
   fullest example, and --radius-shell / --radius-shell-gap in
   tokens.css for the shared math.
   ============================================================= */

/* ---- Buttons - full-pill "island" with a nested icon ----------------
   Flat, soft-shadowed fill; press feedback is a small scale-down
   (real-world "pressing a physical pill", not a keycap travelling on
   rails). Any trailing <svg class="ico"> that is a direct child of
   .btn gets its own circular "button-in-button" wrapper via the
   .btn > .ico rule below, per the high-end-visual-design spec -
   .icon-btn (icon-only controls: carousel arrows, the menu toggle,
   the accordion close) is deliberately excluded from that rule, since
   nesting a circle inside an already-circular control would double up. */
.btn, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-75);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transform: scale(1);
  touch-action: manipulation;   /* no double-tap zoom when a control is tapped repeatedly */
  transition: transform var(--duration-press) var(--ease),
              background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
/* BYQ main CTA: 12×16 padding, 16px/500 on a 24px line → 48px tall */
.btn {
  min-height: 48px;
  padding: var(--space-100) var(--space-200);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--fg);
  white-space: nowrap;
}

/* Trailing arrow sits naked after the label and nudges right on hover. */
.btn > .ico { width: 16px; height: 16px; flex: none; transition: transform var(--duration-fast) var(--ease); }
.btn:hover > .ico { transform: translateX(2px); }

.btn:hover, .icon-btn:hover { background: var(--surface-2); }
.btn:active, .icon-btn:active,
.btn[aria-pressed="true"], .icon-btn[aria-pressed="true"] { transform: scale(0.98); }

.btn:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Primary - BYQ lime with ink text, used for the one main action per view. */
.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); }

/* Secondary - BYQ's tinted "Browse library" button: page tone plus hairline. */
.btn-secondary { background: color-mix(in srgb, var(--fg) 5%, var(--bg)); border-color: var(--line); color: var(--fg); }
.btn-secondary:hover { background: color-mix(in srgb, var(--fg) 9%, var(--bg)); }

/* Dark - BYQ's "Launch BYQ" / "Watch tutorial". */
.btn-dark { background: var(--fg); border-color: transparent; color: var(--bg); }
.btn-dark:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); }

/* Ghost stays a plain text control - no pill body - so it isn't
   mistaken for a filled action. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--fg-2);
  padding-inline: var(--space-100);
}
.btn-ghost:hover { color: var(--fg); background: var(--hover-fill); }

/* BYQ small CTA: 8×12 padding, 14px */
.btn-sm { min-height: var(--btn-sm-h); padding: var(--space-75) var(--space-100); font-size: var(--fs-sm); line-height: 1.43; }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
  pointer-events: none;
  cursor: not-allowed;
}

/* The nav's primary CTA sits directly on the floating bar - one surface,
   not a button nested inside a second glass pill. Height tracks the
   pill's own compact transition so it settles in lockstep while scrolling. */
/* Nav CTA - BYQ's small dark "Launch" button, vertically centred on the bar. */
.fnav-cta.btn {
  pointer-events: auto;
  align-self: flex-start;   /* the margin below does the centring; align-self: center on top of it double-counted and sat the button low */
  margin-block-start: calc((var(--nav-pill) - var(--btn-sm-h)) / 2);
  flex: none;
}
.fnav.is-compact .fnav-cta.btn { margin-block-start: calc((var(--nav-pill-compact) - var(--btn-sm-h)) / 2); }

/* Below ~424px the pill (logo + toggle) and the CTA, both at their
   natural width, exactly fill the available space with zero slack -
   any shadow bleed reads as overlap. Tighten the CTA first since it's
   the wider of the two and has no content that needs the extra room. */
@media (max-width: 26.5em) {
  .fnav-cta.btn { padding-inline: var(--space-200); font-size: var(--fs-sm); }
}

/* Icon button - carousel arrows, menu toggle. Same keycap mechanism as
   .btn above via the shared `.btn, .icon-btn` rule; only sizing here. */
.icon-btn {
  width: var(--tap-target);
  height: var(--tap-target);
  color: var(--fg);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:disabled {
  opacity: 0.35;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* ---- Form fields - the one real (non-mock) input on the page, first
   used by the footer newsletter form. Deliberately plain: a bordered box
   at the same height as a button, no keycap bevel of its own. ---------- */
.field {
  display: block;
  width: 100%;
  height: var(--tap-target);
  padding-inline: var(--space-200);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--fs-body);
  min-width: 0; max-width: 100%;
  text-overflow: ellipsis;   /* a value or placeholder wider than the box ends in … instead of running out of it */
  touch-action: manipulation;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.field::placeholder { color: var(--muted); text-overflow: ellipsis; }
.field:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--fg) 40%); }
.field:focus-visible { border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 0; }
/* Errors appear only after the visitor has interacted or submitted
   (:user-invalid, or .is-invalid set on submit) - never on a pristine form. */
.field:user-invalid, .field.is-invalid { border-color: var(--alert); }
.field:user-invalid:focus-visible, .field.is-invalid:focus-visible { box-shadow: 0 0 0 3px var(--alert-soft); }
select.field {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--space-500);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23585859' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-100) center;
}
select.field option { background-color: #fff; color: #070708; }

/* ---- Custom select (see "Custom select" in main.js) ------------------------
   Desktop: a floating card under (or over) the field. Phones: a bottom
   sheet over a dimmed backdrop. Both read the shared tokens, so they sit
   in the same system as .field and the cards. Without JavaScript none of
   this exists and the native select above is used as-is. */
.sel { position: relative; min-width: 0; max-width: 100%; }
.sel-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sel-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-100);
  text-align: left; cursor: pointer; padding-inline-end: var(--space-200);
  min-width: 0; max-width: 100%;   /* the trigger fits its column; .sel-value truncates with an ellipsis */
}
.sel-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--fg-2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration) var(--ease); }
.sel-trigger[aria-expanded="true"] .sel-chevron { transform: rotate(180deg); }
.sel-trigger[aria-expanded="true"] { border-color: var(--fg); }

.sel-popup {
  position: fixed; z-index: 1000;
  display: flex; flex-direction: column;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -16px rgba(7, 7, 8, 0.28), 0 4px 12px -4px rgba(7, 7, 8, 0.12);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center;
  transition: opacity 160ms var(--ease), transform 200ms var(--ease-heavy);
  overflow: hidden;
}
.sel-popup[hidden] { display: none; }
.sel-popup.is-above { transform-origin: bottom center; transform: translateY(6px) scale(0.98); }
.sel-popup.is-open { opacity: 1; transform: none; }
.sel-sheet-head { display: none; }
.sel-list { list-style: none; margin: 0; padding: var(--space-50); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; }
.sel-option {
  overflow-wrap: anywhere;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-200);
  min-height: 44px; padding: var(--space-75) var(--space-100) var(--space-75) var(--space-200);
  border-radius: var(--radius-md);
  font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--fg-2);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.sel-option-text { min-width: 0; }
.sel-option.is-active { background: var(--hover-fill); color: var(--fg); }
.sel-option:active { background: var(--active-fill); }
.sel-option[aria-selected="true"] { color: var(--fg); font-weight: var(--weight-semibold); }
.sel-tick { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity var(--duration-fast) var(--ease), transform var(--duration) var(--ease-heavy); }
.sel-option[aria-selected="true"] .sel-tick { opacity: 1; transform: none; }

.sel-backdrop {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(7, 7, 8, 0.42);
  opacity: 0; transition: opacity 200ms var(--ease);
}
.sel-backdrop[hidden] { display: none; }
.sel-backdrop.is-open { opacity: 1; }
html.sel-lock { overflow: hidden; }

@media (max-width: 47.99em) {
  .sel-popup {
    inset: auto 0 0 0; width: auto; min-width: 0; max-width: none; max-height: min(78dvh, 34rem);
    border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%); transform-origin: bottom center; opacity: 1;
    transition: transform 320ms var(--ease-heavy);
  }
  .sel-popup.is-open { transform: none; }
  .sel-popup::before {   /* grab handle */
    content: ""; flex: none; align-self: center; width: 40px; height: 4px; margin-block: var(--space-100) 0;
    border-radius: var(--radius-full); background: var(--line-strong);
  }
  .sel-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-200); padding: var(--space-100) var(--space-200) var(--space-75) var(--space-300); }
  .sel-sheet-title { font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--fg-2); }
  .sel-close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-end: calc(-1 * var(--space-100)); border: 0; border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer; }
  .sel-close:active { background: var(--active-fill); }
  .sel-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sel-list { padding: var(--space-50) var(--space-100) var(--space-200); }
  .sel-option { min-height: 52px; padding-inline: var(--space-200); font-size: var(--fs-lead); }
  .sel-option.is-active:not([aria-selected="true"]) { background: transparent; }
  .sel-option[aria-selected="true"] { background: var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .sel-popup, .sel-backdrop { transition: none; }
}


/* ---- Chips and tags ---------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  padding: var(--space-25) var(--space-75);
  border-radius: var(--radius-control);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
}
.chip--accent { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.chip--data { border-color: transparent; background: var(--data-soft); color: var(--data); }
.chip--alert { border-color: transparent; background: var(--alert-soft); color: var(--alert); }
.chip--solid { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.chip--mono { font-family: var(--font-mono); font-weight: var(--weight-regular); }

/* ---- Card surfaces -----------------------------------------------------
   Two families, one construction each: a *card* (--radius-card, level-1
   shadow, hairline border, frosted-glass surface) is any section-level
   unit - service, stage, proof tile, CTA panel, fit panel. A *tile*
   (--radius-tile) is a media block or mock panel that lives inside a
   composition - mosaic tiles, journey panels, photo frames.
   Glass (2 Oct 2026): a translucent fill plus backdrop-filter instead
   of a flat --surface, with a bright inner edge so it reads as an
   actual pane of glass. @supports fallback below swaps in the old
   solid fill for browsers without backdrop-filter. */
.card {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-card);
  border-radius: var(--radius-card);
}
.card--raised { box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-card-hover); }
.card--accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card-pad { padding: var(--space-300); }
@supports not (backdrop-filter: blur(1px)) {
  .card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
}

/* ---- Photo frame - real photography, always with a placeholder caption
   until it is swapped for the client's own. Border and radius match the
   rest of the card system; no drop shadow beyond the shared level-1. ---- */
.photo {
  position: relative;
  border-radius: var(--radius-tile);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  background: var(--surface-3);
}
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo-grade); }

/* ---- Bento tile - a card with a visual slot and a one-line caption --- */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-300);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-card);
  border-radius: var(--radius-card);
  min-width: 0;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.tile:hover { border-color: var(--line-strong); }
@supports not (backdrop-filter: blur(1px)) {
  .tile { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
}
.tile-visual { border-radius: var(--radius-md); overflow: hidden; }
.tile h3 { font-size: var(--fs-h4); }
.tile p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-100); }

/* ---- Line icons - drawn to one grammar: 24 box, 1.5 stroke, round --- */
.ico {
  width: 22px;
  height: 22px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--accent { color: var(--accent-text); }
.ico-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg);
}

/* ---- Segmented control - real radios for native keyboard support ---- */
.segmented {
  display: inline-flex;
  position: relative;
  padding: var(--space-25);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.segmented label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  min-height: var(--control-sm);
  padding: var(--space-50) var(--space-200);
  border-radius: var(--radius-control);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration) var(--ease-heavy);
}
.segmented label:hover { color: var(--fg); }
.segmented input:checked + label { background: var(--fg); color: var(--bg); }
.segmented input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- Accordion - <details> with animated height (see main.js) ---------- */
.acc { border-block-start: 1px solid var(--line); }
.acc-item { border-block-end: 1px solid var(--line); }
.acc-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  padding-block: var(--space-200);
  min-height: var(--tap-target);
  font-weight: var(--weight-medium);
  color: var(--fg);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease);
}
.acc-item summary:hover { color: var(--accent-text); }
.acc-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  transition: transform var(--duration) var(--ease-heavy), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.acc-icon svg { width: 12px; height: 12px; }
.acc-item[open] .acc-icon { transform: rotate(45deg); border-color: var(--fg); color: var(--fg); }
.acc-body { overflow: hidden; }
.acc-body > * { padding-block: 0 var(--space-300); color: var(--muted); max-width: var(--measure); }
.acc-body ul { display: grid; gap: var(--space-75); }
.acc-body li { position: relative; padding-inline-start: var(--space-200); }
.acc-body li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---- Progress bar (carousel, timeline) ------------------------------------ */
.progress { position: relative; height: 2px; background: var(--line-strong); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--duration) var(--ease); }

/* ---- Pointer-depth tilt - set by main.js, transforms only ---------------- */
[data-tilt] {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform var(--duration-slow) var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting { transition-duration: 120ms; }

/* =============================================================
   Interface mock primitives (.ui-*)
   Every "screenshot" on the page is composed from these so the
   compositions scale with their container (font-size in cqw) and
   pick up the current scope's tokens.
   ============================================================= */
.ui-scope {
  container-type: inline-size;
  font-size: clamp(0.5625rem, 2.2cqw, 0.8125rem);   /* 9 → 13px */
  line-height: 1.3;
  font-family: var(--font-body);
  color: var(--fg-2);
  user-select: none;
}

.ui-panel {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.ui-panel--flat { box-shadow: var(--shadow-1); }
.ui-panel--inner { background: var(--surface-2); border-color: var(--line); box-shadow: none; }

/* Browser chrome */
.ui-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65em 0.9em;
  border-block-end: 1px solid var(--line);
  background: var(--surface-2);
}
.ui-dots { display: flex; gap: 0.35em; }
.ui-dots i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--surface-4); display: block; }
.ui-url {
  flex: 1;
  height: 1.6em;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding-inline: 0.7em;
  overflow: hidden;
  white-space: nowrap;
}

/* Text stand-ins */
.ui-line { height: 0.55em; border-radius: var(--radius-full); background: var(--surface-4); width: var(--w, 100%); }
.ui-line--strong { height: 0.9em; background: var(--fg); opacity: 0.85; border-radius: var(--radius-xs); }
.ui-line--muted { background: var(--surface-3); }
.ui-stack { display: grid; gap: 0.5em; }

/* Media block - a solid block with a simple abstract mark, no photo */
.ui-img {
  position: relative;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: var(--ar, 4 / 3);
}
.ui-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-img--dark { background: var(--surface-4); }

/* Rows, avatars, chips, buttons */
.ui-row { display: flex; align-items: center; gap: 0.6em; }
.ui-avatar { width: 2em; height: 2em; border-radius: 50%; background: var(--surface-4); flex: none; display: grid; place-items: center; font-size: 0.75em; font-weight: 600; color: var(--fg); }
.ui-name { font-weight: 600; color: var(--fg); display: block; }
.ui-sub { color: var(--muted); font-size: 0.85em; display: block; }
.ui-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.55em; border-radius: var(--radius-full); border: 1px solid var(--line-strong); font-size: 0.8em; color: var(--muted); white-space: nowrap; }
.ui-chip--accent { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.ui-chip--data { border-color: transparent; background: var(--data-soft); color: var(--data); }
.ui-chip--alert { border-color: transparent; background: var(--alert-soft); color: var(--alert); }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.45em 0.9em; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 0.9em; white-space: nowrap; }
.ui-btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
.ui-field { height: 2em; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-2); display: flex; align-items: center; padding-inline: 0.7em; color: var(--muted); font-size: 0.85em; }
.ui-field--filled { color: var(--fg); border-color: var(--line-strong); }

.ui-typed { position: relative; display: block; overflow: hidden; color: var(--fg); white-space: nowrap; }
.ui-typed::after { content: ""; position: absolute; inset: 0; background: var(--surface-2); transform: translateX(0); }

/* Events and status */
.ui-events { display: grid; gap: 0.45em; }
.ui-event { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.6em; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.ui-event .ui-mono { font-family: var(--font-mono); font-size: 0.85em; color: var(--fg); }
.ui-event .ui-when { margin-inline-start: auto; font-family: var(--font-mono); font-size: 0.75em; color: var(--muted); }
.ui-dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--surface-4); flex: none; }
.ui-dot--on { background: var(--accent); box-shadow: 0 0 0 0.25em var(--accent-soft); }
.ui-dot--data { background: var(--data); box-shadow: 0 0 0 0.25em var(--data-soft); }
.ui-dot--alert { background: var(--alert); }
.ui-tick { width: 1em; height: 1em; flex: none; color: var(--accent-text); }
.ui-tick svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Bars and sparkline - data colour reserved for charts */
.ui-bars { display: flex; align-items: flex-end; gap: 0.35em; height: var(--h, 4em); }
.ui-bars i { flex: 1; display: block; height: var(--v); background: var(--data); border-radius: var(--radius-xs) var(--radius-xs) 0 0; opacity: 0.85; }
.ui-bars i.is-accent { background: var(--accent); }
.ui-spark { width: 100%; height: 3em; }
.ui-spark path { fill: none; stroke: var(--data); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ui-spark circle { fill: var(--accent); }

/* Horizontal metric bar (campaign rows) */
.ui-meter { flex: 1; height: 0.5em; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.ui-meter i { display: block; height: 100%; width: var(--w, 50%); background: var(--data); border-radius: inherit; }
.ui-meter i.is-accent { background: var(--accent); }

/* Table rows */
.ui-table { display: grid; gap: 0.35em; }
.ui-tr { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; align-items: center; gap: 0.7em; padding: 0.5em 0.6em; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.ui-tr--head { background: transparent; border-color: transparent; color: var(--muted); font-size: 0.8em; padding-block: 0.2em; }
.ui-cell { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--fg); }

/* Toggle switch */
.ui-switch { width: 2.2em; height: 1.25em; border-radius: var(--radius-full); background: var(--surface-4); position: relative; flex: none; }
.ui-switch::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--fg); }
.ui-switch--on { background: var(--accent); }
.ui-switch--on::after { left: auto; right: 0.15em; background: var(--accent-ink); }

/* Ring (progress) */
.ui-ring { width: 4.5em; height: 4.5em; }
.ui-ring circle { fill: none; stroke-width: 2.5; }
.ui-ring .track { stroke: var(--surface-3); }
.ui-ring .fill { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }

/* =============================================================
   Floating navigation - pill nav bar, compaction, mobile menu
   overlay.
   Colours and shape restored to the original light-glass treatment
   25 Sep 2026 (the 24 Sep "remote control" dark/LED redesign was
   rolled back on request); horizontal position now tracks the page's
   own container edge rather than a fixed inset, so the pill never
   sits closer to the viewport edge than the rest of the page content.
   ============================================================= */
.fnav {
  --nav-h-inset: max(var(--nav-inset), var(--container-pad), calc((100% - var(--container)) / 2 + var(--container-pad)));
  position: fixed;
  top: var(--nav-inset);
  left: var(--nav-h-inset);
  right: var(--nav-h-inset);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-100);
  pointer-events: none;   /* only the pill and its children re-enable it */
}
/* Nav veil: a full-width, transparent band behind the pill. Two stacked
   layers, each masked to fade out downward: a strong blur that holds near
   the top and dies away, and a lighter blur plus a tint of the page colour
   that reaches further. Page content scrolling up under the bar softens and
   dissolves instead of being cut off by a hard edge. position: fixed inside
   a fixed parent is still viewport-relative (no transform on .fnav), and
   z-index -1 keeps both layers beneath the pill in .fnav's own stacking
   context. Decorative only: no pointer events. */
.fnav { --nav-veil-h: calc(var(--nav-inset) + var(--nav-pill) + 4.5rem); }
.fnav::before, .fnav::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-veil-h);
  z-index: -1;
  pointer-events: none;
}
.fnav::before {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 82%);
}
.fnav::after {
  height: calc(var(--nav-veil-h) + 1.5rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 62%, transparent) 0%, color-mix(in srgb, var(--bg) 28%, transparent) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}
/* over the dark footer the black CTA would vanish: it switches to the lime accent */
.fnav.is-over-dark .fnav-cta.btn { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.fnav.is-over-dark .fnav-cta.btn:hover { background: var(--accent-deep); }
.fnav.is-over-dark::after {
  background: linear-gradient(to bottom, rgba(7, 7, 8, 0.7) 0%, rgba(7, 7, 8, 0.32) 55%, transparent 100%);
}
@supports not (backdrop-filter: blur(1px)) {
  .fnav::before { display: none; }
  .fnav::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent) 0%, transparent 100%); }
}

/* BYQ nav bar: white at 80% over a 12px blur, 8px radius, hairline border,
   8×16 padding, 54px tall. */
.fnav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-200);
  height: var(--nav-pill);
  padding: var(--space-75) var(--space-200);
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--nav-blur));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-1);
  transition: height var(--duration) var(--ease-heavy), background-color var(--duration) var(--ease);
}
.fnav-main { flex: 0 1 auto; min-width: 0; gap: var(--space-100); }

.fnav-links { display: none; align-items: center; gap: var(--space-25); }
.fnav-links a {
  display: inline-flex;
  align-items: center;
  height: var(--control-sm);
  padding-inline: var(--space-100);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  color: var(--fg-2);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.fnav-links a:hover { color: var(--fg); background: var(--hover-fill); }
.fnav-links a[aria-current="true"] { color: var(--fg); background: var(--active-fill); }
.fnav .nav-logo { font-size: 1.25rem; font-weight: var(--weight-bold); letter-spacing: -0.03em; transition: transform var(--duration) var(--ease-heavy); transform-origin: left center; }
.fnav.is-compact .fnav-pill { height: var(--nav-pill-compact); background: color-mix(in srgb, var(--surface) 92%, transparent); }

/* Hamburger - three spans that fold into an X, not swapped for an icon */
.fnav-toggle { position: relative; flex: none; width: var(--control-md); height: var(--control-md); }
.fnav-toggle span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform var(--duration) var(--ease-heavy), opacity var(--duration-fast) var(--ease);
}
.fnav-toggle span:nth-child(1) { top: 14px; }
.fnav-toggle span:nth-child(2) { top: 19px; }
.fnav-toggle span:nth-child(3) { top: 24px; }
.fnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.fnav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.fnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 64em) {
  .fnav { --nav-inset: 2rem; }
  .fnav-main { gap: var(--space-300); }
  /* BYQ: a vertical hairline between the wordmark and the links */
  .fnav-main .nav-logo { padding-inline-end: var(--space-300); border-inline-end: 1px solid var(--line); height: 100%; }
  .fnav-links { display: flex; }
  .fnav-toggle { display: none; }
}

/* Mobile menu - full-screen blurred overlay, staggered link entrance */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block-start: calc(var(--nav-inset) + var(--nav-pill) + var(--space-400));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(28px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), visibility 0s linear var(--duration);
}
.nav-menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--duration) var(--ease); }
.nav-menu ul { display: grid; gap: var(--space-200); }
.nav-menu li {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.nav-menu.is-open li { opacity: 1; transform: none; }
.nav-menu.is-open li:nth-child(2) { transition-delay: 60ms; }
.nav-menu.is-open li:nth-child(3) { transition-delay: 120ms; }
.nav-menu.is-open li:nth-child(4) { transition-delay: 180ms; }
.nav-menu.is-open li:nth-child(5) { transition-delay: 240ms; }
.nav-menu.is-open li:nth-child(6) { transition-delay: 300ms; }
.nav-menu a:not(.btn) { font-size: var(--fs-h2); font-weight: var(--weight-medium); letter-spacing: var(--tracking-hero); color: var(--fg); display: block; padding-block: var(--space-50); }
.nav-menu .btn { margin-block-start: var(--space-300); }
@media (max-height: 560px) {
  .nav-menu { justify-content: flex-start; }
  .nav-menu a:not(.btn) { font-size: var(--fs-h3); }
}
@media (min-width: 64em) {
  .nav-menu { display: none; }
}

/* ---- Rotator - masked, single-line height; JS swaps .is-active ------ */
.rotator { display: grid; justify-content: center; height: 1.15em; line-height: 1.15; overflow: hidden; }
.rotator-item { grid-area: 1 / 1; white-space: nowrap; color: #EE3A48; opacity: 0; } /* the pre-lime BYQ red, brought back for the rotating word only */
.rotator-item.is-active { opacity: 1; }
html:not(.js) .rotator-item:first-child { opacity: 1; }   /* no-JS fallback: show the first phrase, static */

/* =============================================================
   Mosaic - oversized asymmetric image wall, bleeding past the
   container on desktop; staggered entrance plus scroll/pointer
   depth on .mosaic-col (see main.js). Reconstructed 24 Sep 2026,
   see the note at the top of this file.
   ============================================================= */
.mosaic-wrap { position: relative; overflow: clip; }
.mosaic {
  display: flex;
  gap: var(--mosaic-gap);
  width: calc(100% + 2 * var(--mosaic-bleed));
  margin-inline: calc(-1 * var(--mosaic-bleed));
  height: clamp(30rem, 64vw, 58rem);
  align-items: flex-start;
}
.mosaic-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mosaic-gap);
  padding-block-start: var(--col-offset, 0px);
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--ppy, 0px)), 0);
}
.mosaic-col--narrow { flex: 0.44 1 0; }
.mosaic-tile {
  position: relative;
  aspect-ratio: var(--ar, 4 / 3);
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.mosaic-tile > .ui-scope, .mosaic-tile > .photo { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.mosaic-tile > .ui-scope {
  padding: clamp(0.5rem, 2.4cqw, 1rem);
  padding-block-end: calc(var(--space-75) + var(--control-sm));
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  transition: transform var(--duration-media) var(--ease);
}
.mosaic-tile > .photo img, .mosaic-tile > .photo video { position: absolute; inset: 0; transition: transform var(--duration-media) var(--ease); }
.mosaic-tile:hover > .ui-scope, .mosaic-tile:hover > .photo img, .mosaic-tile:hover > .photo video { transform: scale(1.03); }
.mosaic-tag { position: absolute; left: var(--space-100); bottom: var(--space-100); z-index: 2; }
.js .mosaic-tile {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(8px);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease-heavy), filter var(--duration-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .mosaic.is-visible .mosaic-tile { opacity: 1; transform: none; filter: none; }
@media (max-width: 47.99em) {
  .mosaic { --mosaic-bleed: 0px; height: clamp(26rem, 132vw, 38rem); }
  .mosaic-col:not([data-mobile]) { display: none; }
  .mosaic-col--narrow[data-mobile] { flex: 1 1 0; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .mosaic { --mosaic-bleed: 3vw; }
  .mosaic-col:not([data-tablet]) { display: none; }
}

/* Progressive blur - the mosaic dissolves into the section below it */
.blur-edge { position: absolute; left: 0; right: 0; bottom: 0; height: var(--blur-edge); pointer-events: none; z-index: 3; }
.blur-edge-layer { position: absolute; inset: 0; }
.blur-edge-layer:nth-child(1) { backdrop-filter: blur(4px); mask-image: linear-gradient(transparent 0%, black 40%, black 100%); }
.blur-edge-layer:nth-child(2) { backdrop-filter: blur(10px); mask-image: linear-gradient(transparent 30%, black 65%, black 100%); }
.blur-edge-layer:nth-child(3) { backdrop-filter: blur(18px); mask-image: linear-gradient(transparent 55%, black 85%, black 100%); }
.blur-edge-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg) 45%, transparent) 50%, var(--bg) 100%); }
@supports not (backdrop-filter: blur(1px)) {
  .blur-edge-layer { display: none; }
}
@media (max-width: 63.99em) {
  .blur-edge-layer:nth-child(3) { display: none; }
}

/* ---- Media card - the three Attract/Engage/Convert cards -------------
   Double-bezel: the card itself is the outer "tray" - a squircle shell
   with its own tinted fill and a hairline border - and the media/body
   panels are nested "cores" inset from it by --radius-shell-gap on
   every side, each with the inner-radius formula (shell minus gap) so
   the curves stay concentric. Glass (2 Oct 2026): the shell and the
   body core are both frosted (backdrop-filter) rather than flat tints,
   with a bright inner edge so they read as stacked panes of glass. */
/* BYQ feature card: the image is the card (16px radius); title and
   description sit underneath on the page, with no panel around them. */
.media-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  min-height: 100%;
}
.media-card-media {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  background: var(--surface-3);
  overflow: hidden;
}
.media-card-media > .ui-scope {
  position: absolute;
  inset: 0;
  padding: clamp(0.75rem, 3cqw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  transition: transform var(--duration-media) var(--ease);
}
.media-card:hover .media-card-media > .ui-scope { transform: scale(1.02); }
.media-card-media > .photo { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.media-card-media > .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-media) var(--ease); }
.media-card:hover .media-card-media > .photo img { transform: scale(1.04); }
/* BYQ: title 24/28 at 88% ink, description 20/28 at 64% */
.media-card-body { flex: none; display: grid; gap: var(--space-200); }
.media-card-body h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.media-card-body p { color: var(--muted); font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 28rem; }

/* Floating UI panel over a feature image - BYQ's dark "Copy section" /
   prompt panels. Dark glass, 12px radius, centred on the image. */
.feat-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(72%, 22rem);
  transform: translate(-50%, -50%);
  padding: var(--space-200);
  border-radius: var(--radius-lg);
  background: rgba(40, 40, 42, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(241, 241, 241, 0.08);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 24px 48px -18px rgba(7, 7, 8, 0.6);
  color: #F1F1F1;
  font-size: var(--fs-sm);
  transition: transform var(--duration-slow) var(--ease-heavy);
}
.media-card:hover .feat-panel { transform: translate(-50%, calc(-50% - 4px)); }
.feat-panel-title { display: block; text-align: center; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: #9C9C9D; margin-block-end: var(--space-100); }
.feat-list { display: grid; gap: var(--space-50); }
.feat-list li { display: flex; align-items: center; gap: var(--space-100); padding: var(--space-75); border-radius: var(--radius-md); font-weight: var(--weight-medium); }
.feat-list li.is-hover { background: rgba(241, 241, 241, 0.08); }
.feat-ic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: #FFFFFF; }
.feat-ic svg { width: 14px; height: 14px; }
.feat-cursor { position: absolute; right: 1.25rem; top: 3.9rem; width: 26px; height: 26px; color: #F1F1F1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.feat-prompt p { color: #F1F1F1; line-height: var(--lh-snug); min-height: 2.8em; }
.feat-prompt-bar { display: flex; align-items: center; gap: var(--space-100); margin-block-start: var(--space-300); color: #9C9C9D; font-size: 0.75rem; }
.feat-prompt-bar .feat-go { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-50); padding: var(--space-50) var(--space-100); border-radius: var(--radius-sm); background: rgba(241, 241, 241, 0.1); border: 1px solid rgba(241, 241, 241, 0.12); color: #F1F1F1; font-weight: var(--weight-medium); }
.feat-prompt-bar .feat-go svg { width: 12px; height: 12px; }
.feat-caret { display: inline-block; width: 1px; height: 1em; background: #F1F1F1; vertical-align: text-bottom; animation: feat-caret 1s steps(2) infinite; }
@keyframes feat-caret { 50% { opacity: 0; } }
.feat-ic--sm { width: 20px; height: 20px; border-radius: 6px; }
.feat-ic--sm svg { width: 12px; height: 12px; }

/* AI integration card - one prompt, wired into the tools already in place.
   A travelling dot on the connector line is the only motion: it reads as
   "this request is being routed", not as decoration. */
.feat-ai-flow { display: flex; align-items: center; gap: var(--space-100); margin-block-start: var(--space-300); }
.feat-ai-node { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: #D97757; color: #FFFFFF; }
.feat-ai-node svg { width: 16px; height: 16px; }
.feat-ai-link { position: relative; flex: 1 1 auto; height: 1px; min-width: var(--space-300); background: linear-gradient(90deg, rgba(241, 241, 241, 0.35), rgba(241, 241, 241, 0.08)); }
.feat-ai-link::after { content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-block-start: -3px; border-radius: 50%; background: #C5EF57; animation: feat-ai-pulse 2.4s var(--ease) infinite; }
@keyframes feat-ai-pulse { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.feat-ai-targets { display: flex; gap: var(--space-75); flex: none; }
.feat-ai-caption { display: block; margin-block-start: var(--space-150); font-size: var(--fs-xs); color: #9C9C9D; }

/* Website build card - a page assembling itself in a browser chrome, then
   resetting. Loops slowly so it reads as "always building", not a glitch. */
.feat-build { display: flex; flex-direction: column; gap: var(--space-150); }
.feat-browser { display: flex; align-items: center; gap: 5px; padding-block-end: var(--space-100); border-block-end: 1px solid rgba(241, 241, 241, 0.1); }
.feat-browser-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(241, 241, 241, 0.22); }
.feat-browser-url { margin-inline-start: var(--space-100); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.02em; color: #9C9C9D; }
.feat-build-canvas { display: grid; gap: var(--space-75); padding-block: var(--space-50); }
.feat-build-block { height: 8px; border-radius: 4px; background: rgba(241, 241, 241, 0.14); opacity: 0; transform: translateY(6px); animation: feat-build-rise 3.6s var(--ease) infinite; }
.feat-build-block--nav { width: 36%; }
.feat-build-block--hero { height: 30px; border-radius: 6px; background: rgba(241, 241, 241, 0.1); animation-delay: 0.25s; }
.feat-build-block--w80 { width: 82%; animation-delay: 0.6s; }
.feat-build-block--w60 { width: 58%; animation-delay: 0.75s; }
.feat-build-block--cta { width: 32%; height: 16px; border-radius: 999px; background: #C5EF57; animation-delay: 1s; }
@keyframes feat-build-rise {
  0% { opacity: 0; transform: translateY(6px); }
  10%, 75% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-4px); }
}
.feat-build-stack { display: flex; gap: var(--space-75); justify-content: center; padding-block-start: var(--space-100); border-block-start: 1px solid rgba(241, 241, 241, 0.08); }

/* Stacked video frames - BYQ's middle "Hero section with animated video" card */
.feat-stack { width: min(66%, 20rem); padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
.feat-stack::before, .feat-stack::after { content: ""; position: absolute; left: 6%; right: 6%; height: 100%; border-radius: var(--radius-lg); background: rgba(30, 30, 32, 0.85); }
.feat-stack::before { top: -22px; left: 12%; right: 12%; opacity: 0.55; }
.feat-stack::after { top: -11px; opacity: 0.8; }
.feat-stack-card { position: relative; z-index: 1; padding: var(--space-100); border-radius: var(--radius-lg); background: rgba(40, 40, 42, 0.95); border: 1px solid rgba(241, 241, 241, 0.08); box-shadow: 0 24px 48px -18px rgba(7, 7, 8, 0.6); }
.feat-stack-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); background: #1B1B1D; }
.feat-ad-bar { display: flex; align-items: center; gap: var(--space-75); padding: var(--space-75) var(--space-50) var(--space-25); }
.feat-ad-label { flex: 1 1 auto; font-size: var(--fs-xs); color: #D5D5D5; }
.feat-ad-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: #9C9C9D; }
.feat-ad-dot { width: 6px; height: 6px; border-radius: 50%; background: #C5EF57; animation: feat-ad-pulse 1.6s ease-in-out infinite; }
@keyframes feat-ad-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.feat-ad-stats { padding: var(--space-150) var(--space-150) 0; }
.feat-ad-chart { display: flex; align-items: flex-end; gap: 5px; height: 72px; padding-block-end: var(--space-100); border-block-end: 1px solid rgba(241, 241, 241, 0.08); }
.feat-ad-chart-bar { flex: 1 1 auto; height: var(--h); min-height: 6px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #C5EF57, rgba(197, 239, 87, 0.35)); transform-origin: bottom; animation: feat-ad-grow 3.2s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes feat-ad-grow { 0%, 100% { transform: scaleY(0.85); opacity: 0.75; } 50% { transform: scaleY(1); opacity: 1; } }
.feat-ad-metrics { display: flex; gap: var(--space-300); padding-block: var(--space-150); }
.feat-ad-metric { display: flex; flex-direction: column; gap: 2px; }
.feat-ad-metric-label { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: var(--tracking-label); color: #9C9C9D; }
.feat-ad-metric-value { font-size: var(--fs-h3); font-weight: var(--weight-semibold); color: #F1F1F1; }
@media (max-width: 47.99em) { .feat-panel { font-size: var(--fs-xs); padding: var(--space-100); } .feat-cursor { display: none; } }