/* ============================================================================
   HAVENLY DESIGN SYSTEM v1.0
   ----------------------------------------------------------------------------
   A token-driven design system for premium property listings.

   Architecture:
     - Cascade layers: reset → base → app
     - BEM-like naming with .hv- prefix
     - Three-tier color tokens: core → util → domain
     - Inverted font weights (300 = normal, 400 = bold)
     - Three motion contexts: hover (300ms), nav (240ms), scale (800ms)

   Usage: <link rel="stylesheet" href="havenly-ds.css">
          Then compose components with .hv-* classes.
   ============================================================================ */

@layer reset, base, app;

/* ─────────────────────────────────────────────────────────────────────────
   :root — DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ─── Typography ─── */
  --hv-font-sans: "Geist", "SF Pro Display", system-ui, sans-serif;
  --hv-font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --hv-font-mono: "Geist Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Inverted weight scale — 300 is "normal", 400 reads as "bold" */
  --hv-weight-light: 300;
  --hv-weight-normal: 300;
  --hv-weight-bold: 400;
  --hv-weight-strong: 500;
  --hv-weight-heavy: 600;

  /* Type scale */
  --hv-text-xxs: 0.75rem;     /* 12px */
  --hv-text-xs:  0.875rem;    /* 14px */
  --hv-text-sm:  1rem;        /* 16px */
  --hv-text-md:  1.125rem;    /* 18px */
  --hv-text-lg:  1.25rem;     /* 20px */
  --hv-text-xl:  1.5rem;      /* 24px */
  --hv-text-2xl: 2rem;        /* 32px */
  --hv-text-3xl: 3rem;        /* 48px */
  --hv-text-4xl: 4rem;        /* 64px */
  --hv-text-5xl: 5.5rem;      /* 88px */

  /* Line heights */
  --hv-lh-tight:   1.05;
  --hv-lh-snug:    1.15;
  --hv-lh-normal:  1.4;
  --hv-lh-relaxed: 1.6;

  /* Letter-spacing */
  --hv-tracking-tighter: -0.025em;
  --hv-tracking-tight:   -0.015em;
  --hv-tracking-snug:    -0.005em;
  --hv-tracking-normal:  0;
  --hv-tracking-wide:    0.04em;
  --hv-tracking-widest:  0.12em;

  /* ─── Spacing ─── */
  --hv-space-0:    0;
  --hv-space-px:   1px;
  --hv-space-0-5:  2px;
  --hv-space-1:    4px;
  --hv-space-1-5:  6px;
  --hv-space-2:    8px;
  --hv-space-3:    12px;
  --hv-space-4:    16px;
  --hv-space-5:    20px;
  --hv-space-6:    24px;
  --hv-space-7:    28px;
  --hv-space-8:    32px;
  --hv-space-10:   40px;
  --hv-space-12:   48px;
  --hv-space-14:   56px;
  --hv-space-16:   64px;
  --hv-space-20:   80px;
  --hv-space-24:   96px;
  --hv-space-32:   128px;
  --hv-space-40:   160px;

  /* ─── Radii ─── */
  --hv-radius-xs:   2px;
  --hv-radius-sm:   4px;
  --hv-radius-md:   8px;
  --hv-radius-lg:   12px;
  --hv-radius-xl:   20px;
  --hv-radius-2xl:  32px;
  --hv-radius-full: 9999px;

  /* ─── Layout ─── */
  --hv-content-max:    1264px;
  --hv-content-narrow: 880px;
  --hv-content-prose:  680px;
  --hv-page-margin:    16px;
  --hv-layout-gap:     24px;

  /* ─── CORE PALETTE ─── */
  /* Brand: deep indigo-purple */
  --hv-core-brand-25:   #f5f5ff;
  --hv-core-brand-50:   #ebebff;
  --hv-core-brand-100:  #d6d9fc;
  --hv-core-brand-200:  #b9b9f9;
  --hv-core-brand-300:  #9a9afe;
  --hv-core-brand-400:  #7f7dfc;
  --hv-core-brand-500:  #665efd;
  --hv-core-brand-600:  #533afd;
  --hv-core-brand-700:  #4032c8;
  --hv-core-brand-800:  #2e2b8c;
  --hv-core-brand-900:  #1c1e54;
  --hv-core-brand-950:  #161741;

  /* Neutrals: blue-tinted */
  --hv-core-neutral-0:    #ffffff;
  --hv-core-neutral-25:   #f8fafd;
  --hv-core-neutral-50:   #eef2f7;
  --hv-core-neutral-75:   #e1e7ee;
  --hv-core-neutral-100:  #d4dee9;
  --hv-core-neutral-200:  #bac8da;
  --hv-core-neutral-300:  #95a4ba;
  --hv-core-neutral-400:  #7d8ba4;
  --hv-core-neutral-500:  #64748d;
  --hv-core-neutral-600:  #50617a;
  --hv-core-neutral-700:  #3c4f69;
  --hv-core-neutral-800:  #273951;
  --hv-core-neutral-900:  #1a2c44;
  --hv-core-neutral-950:  #11273e;
  --hv-core-neutral-990:  #061b31;

  /* Accents */
  --hv-core-lemon-25:   #fff8e6;
  --hv-core-lemon-100:  #ffe1a3;
  --hv-core-lemon-300:  #e8a30b;
  --hv-core-lemon-500:  #9b6829;

  --hv-core-magenta-50:   #ffe6f5;
  --hv-core-magenta-100:  #ffd7ef;
  --hv-core-magenta-500:  #cf2cab;
  --hv-core-magenta-700:  #a51d85;

  --hv-core-orange-50:   #ffe5da;
  --hv-core-orange-100:  #ffd8c6;
  --hv-core-orange-500:  #d04900;
  --hv-core-orange-700:  #ab3500;

  --hv-core-sage-50:    #e8f5ec;
  --hv-core-sage-100:   #c7e5d0;
  --hv-core-sage-500:   #2d8650;
  --hv-core-sage-700:   #1c5d36;

  /* Deal orange ramp — 5-step intensity scale. Darker = bigger discount. */
  --hv-core-orange-d1:  #ff9e52;   /* ~10–20% off */
  --hv-core-orange-d2:  #ff8a2e;   /* ~20–30% off */
  --hv-core-orange-d3:  #f57600;   /* ~30–40% off */
  --hv-core-orange-d4:  #e06800;   /* ~40–50% off */
  --hv-core-orange-d5:  #c25400;   /* 50%+ off */
  --hv-core-orange-ink: #c25400;
  --hv-core-bestblue:        #2f6fc4;
  --hv-core-bestblue-border: #9ec3ee;

  --hv-core-error-100:  #feb9ac;
  --hv-core-error-500:  #d8351e;

  /* ─── SEMANTIC TOKENS ─── */
  --hv-color-text-default:         var(--hv-core-neutral-990);
  --hv-color-text-strong:          var(--hv-core-neutral-900);
  --hv-color-text-default-subdued: var(--hv-core-neutral-700);
  --hv-color-text-muted:           var(--hv-core-neutral-500);
  --hv-color-text-quiet:           var(--hv-core-neutral-400);
  --hv-color-text-inverse:         var(--hv-core-neutral-0);
  --hv-color-text-brand:           var(--hv-core-brand-600);
  --hv-color-text-brand-strong:    var(--hv-core-brand-800);

  --hv-color-surface-default:    var(--hv-core-neutral-0);
  --hv-color-surface-subdued:    var(--hv-core-neutral-25);
  --hv-color-surface-muted:      var(--hv-core-neutral-50);
  --hv-color-surface-deep:       var(--hv-core-neutral-990);
  --hv-color-surface-brand:      var(--hv-core-brand-600);
  --hv-color-surface-brand-deep: var(--hv-core-brand-950);

  --hv-color-border-default:  var(--hv-core-neutral-100);
  --hv-color-border-subtle:   var(--hv-core-neutral-50);
  --hv-color-border-strong:   var(--hv-core-neutral-300);
  --hv-color-border-brand:    var(--hv-core-brand-200);
  --hv-color-border-focus:    var(--hv-core-brand-500);

  --hv-color-action-primary:        var(--hv-core-brand-600);
  --hv-color-action-primary-hover:  var(--hv-core-brand-700);
  --hv-color-action-primary-active: var(--hv-core-brand-800);
  --hv-color-action-quiet:          var(--hv-core-brand-50);
  --hv-color-action-quiet-hover:    var(--hv-core-brand-100);

  /* Deal intensity — map a discount % to one of these */
  --hv-color-deal-1:    var(--hv-core-orange-d1);
  --hv-color-deal-2:    var(--hv-core-orange-d2);
  --hv-color-deal-3:    var(--hv-core-orange-d3);
  --hv-color-deal-4:    var(--hv-core-orange-d4);
  --hv-color-deal-5:    var(--hv-core-orange-d5);
  --hv-color-deal-ink:  var(--hv-core-orange-ink);
  --hv-color-best-fg:     var(--hv-core-bestblue);
  --hv-color-best-border: var(--hv-core-bestblue-border);

  /* ─── SHADOWS (blue-tinted) ─── */
  --hv-shadow-xs: 0 1px 2px 0 rgba(0, 55, 112, 0.05),
                  0 1px 3px 0 rgba(0, 59, 137, 0.04);
  --hv-shadow-sm: 0 2px 10px 0 rgba(0, 55, 112, 0.06),
                  0 1px 4px 0 rgba(0, 59, 137, 0.04);
  --hv-shadow-md: 0 5px 14px 0 rgba(0, 55, 112, 0.08),
                  0 2px 8px 0 rgba(0, 59, 137, 0.05);
  --hv-shadow-lg: 0 6px 22px 0 rgba(0, 55, 112, 0.10),
                  0 4px 8px 0 rgba(0, 59, 137, 0.02);
  --hv-shadow-xl: 0 15px 40px -2px rgba(0, 55, 112, 0.10),
                  0 5px 20px -2px rgba(0, 59, 137, 0.04);
  --hv-shadow-2xl: 0 20px 80px -16px rgba(0, 55, 112, 0.14),
                   0 10px 60px -16px rgba(0, 59, 137, 0.06);
  --hv-shadow-pop: 0 16px 32px rgba(50, 50, 93, 0.12),
                   0 6px 12px rgba(0, 0, 0, 0.04);

  /* ─── MOTION ─── */
  --hv-ease-hover: cubic-bezier(0.25, 1, 0.5, 1);
  --hv-ease-nav:   cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --hv-ease-scale: cubic-bezier(0.165, 0.84, 0.44, 1);
  --hv-ease-drift: cubic-bezier(0.22, 1, 0.36, 1);
  --hv-ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);

  --hv-duration-instant: 80ms;
  --hv-duration-fast:    160ms;
  --hv-duration-base:    240ms;
  --hv-duration-mid:     300ms;
  --hv-duration-slow:    600ms;
  --hv-duration-grand:   800ms;

  /* ─── GRADIENTS ─── */
  --hv-gradient-brand: linear-gradient(135deg, #bdb4ff 0%, #643afd 50%, #533afd 100%);
  --hv-gradient-warm:  linear-gradient(135deg, #ffd166 0%, #ff8a5b 60%, #d04900 100%);
  --hv-gradient-sunset: linear-gradient(135deg, #f88bdf 0%, #ff8a5b 50%, #ffd166 100%);
  --hv-gradient-night: linear-gradient(180deg, #1c1e54 0%, #11273e 100%);
  --hv-gradient-dawn:  linear-gradient(180deg, #f5f5ff 0%, #ffe6f5 100%);
}

/* Mobile token overrides */
@media (max-width: 639px) {
  :root {
    --hv-text-2xl: 1.75rem;
    --hv-text-3xl: 2.25rem;
    --hv-text-4xl: 2.75rem;
    --hv-text-5xl: 3.5rem;
    --hv-layout-gap: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   @layer reset
   ═══════════════════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }
  body { min-height: 100vh; line-height: var(--hv-lh-normal); }
  audio, canvas, embed, iframe, img, object, svg, video {
    display: block; vertical-align: middle; max-width: 100%;
  }
  img, video { height: auto; }
  ul, ol, menu { list-style: none; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  button, input, select, textarea {
    font: inherit; color: inherit; letter-spacing: inherit;
  }
  button { cursor: pointer; background: none; border: none; }
  a { color: inherit; text-decoration: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   @layer base — PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════════ */
@layer base {

  html {
    font-family: var(--hv-font-sans);
    font-feature-settings: "ss01" on, "cv11" on;
  }
  body {
    font-weight: var(--hv-weight-normal);
    color: var(--hv-color-text-default-subdued);
    background: var(--hv-color-surface-default);
  }

  /* ── TEXT ── */
  .hv-text { font-family: var(--hv-font-sans); color: var(--hv-color-text-default); margin: 0; }
  .hv-text--xxs { font-size: var(--hv-text-xxs); letter-spacing: var(--hv-tracking-wide); }
  .hv-text--xs  { font-size: var(--hv-text-xs); }
  .hv-text--sm  { font-size: var(--hv-text-sm); }
  .hv-text--md  { font-size: var(--hv-text-md); line-height: var(--hv-lh-relaxed); }
  .hv-text--lg  { font-size: var(--hv-text-lg); line-height: var(--hv-lh-relaxed); letter-spacing: var(--hv-tracking-snug); }
  .hv-text--xl  { font-size: var(--hv-text-xl); line-height: var(--hv-lh-relaxed); letter-spacing: var(--hv-tracking-snug); color: var(--hv-color-text-default-subdued); }
  .hv-text--default { color: var(--hv-color-text-default); }
  .hv-text--subdued { color: var(--hv-color-text-default-subdued); }
  .hv-text--muted   { color: var(--hv-color-text-muted); }
  .hv-text--quiet   { color: var(--hv-color-text-quiet); }
  .hv-text--brand   { color: var(--hv-color-text-brand); }
  .hv-text--inverse { color: var(--hv-color-text-inverse); }
  .hv-text--emphasized { font-weight: var(--hv-weight-bold); }
  .hv-text--strong     { font-weight: var(--hv-weight-strong); }
  .hv-text--upper      { text-transform: uppercase; letter-spacing: var(--hv-tracking-widest); font-weight: var(--hv-weight-bold); }
  .hv-text--inline     { display: inline; }
  .hv-text--mono       { font-family: var(--hv-font-mono); }
  .hv-text--serif      { font-family: var(--hv-font-serif); }
  .hv-text--italic     { font-style: italic; }
  .hv-text--tabular    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

  /* ── HEADINGS ── */
  .hv-heading {
    font-family: var(--hv-font-sans);
    color: var(--hv-color-text-default);
    margin: 0;
    text-wrap: pretty;
  }
  .hv-heading--xxs { font-size: var(--hv-text-xs);  font-weight: var(--hv-weight-bold);   line-height: var(--hv-lh-snug); }
  .hv-heading--xs  { font-size: var(--hv-text-sm);  font-weight: var(--hv-weight-bold);   line-height: var(--hv-lh-snug); }
  .hv-heading--sm  { font-size: var(--hv-text-lg);  font-weight: var(--hv-weight-normal); line-height: var(--hv-lh-snug);  letter-spacing: var(--hv-tracking-tight); }
  .hv-heading--md  { font-size: var(--hv-text-xl);  font-weight: var(--hv-weight-normal); line-height: var(--hv-lh-snug);  letter-spacing: var(--hv-tracking-tight); }
  .hv-heading--lg  { font-size: var(--hv-text-2xl); font-weight: var(--hv-weight-normal); line-height: var(--hv-lh-tight); letter-spacing: var(--hv-tracking-tight); }
  .hv-heading--xl  { font-size: var(--hv-text-3xl); font-weight: var(--hv-weight-normal); line-height: var(--hv-lh-tight); letter-spacing: var(--hv-tracking-tighter); }
  .hv-heading--2xl { font-size: var(--hv-text-4xl); font-weight: var(--hv-weight-normal); line-height: var(--hv-lh-tight); letter-spacing: var(--hv-tracking-tighter); }
  .hv-heading--3xl { font-size: var(--hv-text-5xl); font-weight: var(--hv-weight-normal); line-height: var(--hv-lh-tight); letter-spacing: var(--hv-tracking-tighter); }
  .hv-heading--serif    { font-family: var(--hv-font-serif); font-feature-settings: "ss01" on; font-style: italic; }
  .hv-heading--subdued  { color: var(--hv-color-text-default-subdued); }
  .hv-heading--muted    { color: var(--hv-color-text-muted); }
  .hv-heading--inverse  { color: var(--hv-color-text-inverse); }
  .hv-heading--inline   { display: inline; }

  /* ── EYEBROW ── */
  .hv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hv-space-2);
    font-size: var(--hv-text-xs);
    font-weight: var(--hv-weight-bold);
    color: var(--hv-color-text-brand);
    text-transform: uppercase;
    letter-spacing: var(--hv-tracking-widest);
    line-height: 1;
  }
  .hv-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: var(--hv-radius-full);
    background: currentColor;
  }
  .hv-eyebrow--bare::before { display: none; }
  .hv-eyebrow--muted { color: var(--hv-color-text-muted); }

  /* ── BUTTON ── */
  .hv-button {
    --hv-btn-pbs: 15.5px;
    --hv-btn-pbe: 16.5px;
    --hv-btn-border: 1px;
    --hv-btn-bg: var(--hv-color-action-primary);
    --hv-btn-fg: var(--hv-color-text-inverse);
    --hv-btn-bg-hover: var(--hv-color-action-primary-hover);
    --hv-btn-fg-hover: var(--hv-color-text-inverse);

    display: inline-flex;
    align-items: center;
    gap: var(--hv-space-2);
    font-family: var(--hv-font-sans);
    font-size: var(--hv-text-sm);
    font-weight: var(--hv-weight-bold);
    line-height: 1;
    background: var(--hv-btn-bg);
    color: var(--hv-btn-fg);
    border: var(--hv-btn-border) solid transparent;
    border-radius: var(--hv-radius-sm);
    padding-block: var(--hv-btn-pbs) var(--hv-btn-pbe);
    padding-inline: var(--hv-space-6);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--hv-duration-mid) var(--hv-ease-hover),
      color            var(--hv-duration-mid) var(--hv-ease-hover),
      border-color     var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-button:hover { background: var(--hv-btn-bg-hover); color: var(--hv-btn-fg-hover); }
  .hv-button:focus-visible {
    outline: 2px solid var(--hv-color-border-focus);
    outline-offset: 3px;
  }
  .hv-button:disabled, .hv-button[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed;
  }

  .hv-button--secondary {
    --hv-btn-bg: transparent;
    --hv-btn-fg: var(--hv-color-text-brand);
    --hv-btn-bg-hover: transparent;
    --hv-btn-fg-hover: var(--hv-color-action-primary-hover);
    border-color: var(--hv-color-border-brand);
    padding-block: calc(var(--hv-btn-pbs) - var(--hv-btn-border))
                   calc(var(--hv-btn-pbe) - var(--hv-btn-border));
  }
  .hv-button--secondary:hover { border-color: var(--hv-color-action-primary-hover); }
  .hv-button--ghost {
    --hv-btn-bg: transparent;
    --hv-btn-fg: var(--hv-color-text-default);
    --hv-btn-bg-hover: var(--hv-color-action-quiet);
    --hv-btn-fg-hover: var(--hv-color-text-brand);
  }
  .hv-button--inverse {
    --hv-btn-bg: var(--hv-core-neutral-0);
    --hv-btn-fg: var(--hv-color-text-default);
    --hv-btn-bg-hover: var(--hv-core-neutral-50);
    --hv-btn-fg-hover: var(--hv-color-text-brand);
  }
  .hv-button--compact {
    --hv-btn-pbs: 11.5px;
    --hv-btn-pbe: 12.5px;
    padding-inline: var(--hv-space-4);
    font-size: var(--hv-text-xs);
  }
  .hv-button--large {
    --hv-btn-pbs: 18.5px;
    --hv-btn-pbe: 19.5px;
    padding-inline: var(--hv-space-8);
    font-size: var(--hv-text-md);
  }
  .hv-button--pill { border-radius: var(--hv-radius-full); }
  .hv-button--full { width: 100%; justify-content: center; }

  /* Hover-arrow pattern */
  .hv-hover-arrow {
    width: 12px; height: 10px;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .hv-hover-arrow .line {
    opacity: 0;
    transition: opacity var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-hover-arrow .head {
    transform: translateX(-3px);
    transition: transform var(--hv-duration-mid) var(--hv-ease-hover);
  }
  :is(.hv-button:hover, .hv-link:hover) .hv-hover-arrow .line { opacity: 1; }
  :is(.hv-button:hover, .hv-link:hover) .hv-hover-arrow .head { transform: translateX(0); }

  /* ── ICON BUTTON ── */
  .hv-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--hv-radius-sm);
    background: var(--hv-color-action-quiet);
    color: var(--hv-color-action-primary);
    border: none; cursor: pointer;
    transition: background-color var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-icon-button:hover { background: var(--hv-color-action-quiet-hover); }
  .hv-icon-button:focus-visible {
    outline: 2px solid var(--hv-color-border-focus);
    outline-offset: 3px;
  }
  .hv-icon-button:disabled {
    background: transparent;
    outline: 1px solid var(--hv-color-border-default);
    outline-offset: -1px;
    color: var(--hv-color-text-quiet);
    cursor: not-allowed;
  }
  .hv-icon-button--ghost { background: transparent; }
  .hv-icon-button--ghost:hover { background: var(--hv-color-surface-muted); }
  .hv-icon-button svg { width: 16px; height: 16px; }

  /* ── LINK ── */
  .hv-link {
    color: var(--hv-color-text-brand);
    font-weight: var(--hv-weight-bold);
    cursor: pointer;
    text-decoration: none;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: var(--hv-space-1);
    transition: color var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-link:hover { color: var(--hv-color-action-primary-hover); }
  .hv-link:focus-visible {
    outline: 2px solid var(--hv-color-border-focus);
    outline-offset: 3px;
    border-radius: var(--hv-radius-sm);
  }
  .hv-link--subtle {
    color: var(--hv-color-text-default);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--hv-color-border-default);
  }
  .hv-link--subtle:hover {
    color: var(--hv-color-text-brand);
    text-decoration-color: currentColor;
  }

  /* ── INPUTS ── */
  .hv-input {
    width: 100%;
    height: 44px;
    padding-inline: var(--hv-space-4);
    font-family: inherit;
    font-size: var(--hv-text-sm);
    color: var(--hv-color-text-default);
    background: var(--hv-color-surface-default);
    border: 1.25px solid var(--hv-color-border-default);
    border-radius: var(--hv-radius-sm);
    transition: border-color var(--hv-duration-fast) ease;
  }
  .hv-input:focus { outline: none; }
  .hv-input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--hv-color-border-focus) 30%, transparent);
    outline-offset: 1px;
    border-color: var(--hv-color-border-focus);
  }
  .hv-input::placeholder { color: var(--hv-color-text-quiet); }
  .hv-input:disabled {
    background: var(--hv-color-surface-muted);
    cursor: not-allowed;
  }
  .hv-input[aria-invalid="true"] { border-color: var(--hv-core-error-500); }
  .hv-textarea {
    min-height: 96px;
    padding-block: var(--hv-space-3);
    line-height: var(--hv-lh-relaxed);
    resize: vertical;
  }
  .hv-label {
    display: block;
    font-size: var(--hv-text-xs);
    font-weight: var(--hv-weight-bold);
    color: var(--hv-color-text-default);
    margin-bottom: var(--hv-space-2);
  }
  .hv-field { display: flex; flex-direction: column; gap: var(--hv-space-1); }
  .hv-field__hint {
    font-size: var(--hv-text-xs);
    color: var(--hv-color-text-muted);
    margin-top: var(--hv-space-1);
  }

  /* ── CHARM ── */
  .hv-charm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--hv-radius-sm);
    border: 1px solid var(--hv-color-border-brand);
    background: var(--hv-color-surface-default);
    color: var(--hv-color-text-brand);
    flex-shrink: 0;
  }
  .hv-charm--sm { width: 28px; height: 28px; }
  .hv-charm--lg { width: 56px; height: 56px; border-radius: var(--hv-radius-md); }
  .hv-charm--filled {
    background: var(--hv-gradient-brand);
    color: var(--hv-color-text-inverse);
    border-color: transparent;
  }

  /* ── TAG / BADGE ── */
  .hv-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--hv-space-1);
    padding: 5px var(--hv-space-2);
    font-size: var(--hv-text-xxs);
    font-weight: var(--hv-weight-bold);
    color: var(--hv-color-text-default-subdued);
    background: var(--hv-color-surface-default);
    border: 1px solid var(--hv-color-border-default);
    border-radius: var(--hv-radius-sm);
    white-space: nowrap;
    line-height: 1;
  }
  .hv-tag--lemon   { background: var(--hv-core-lemon-25);   color: var(--hv-core-lemon-500);   border-color: var(--hv-core-lemon-100); }
  .hv-tag--magenta { background: var(--hv-core-magenta-50); color: var(--hv-core-magenta-700); border-color: var(--hv-core-magenta-100); }
  .hv-tag--orange  { background: var(--hv-core-orange-50);  color: var(--hv-core-orange-700);  border-color: var(--hv-core-orange-100); }
  .hv-tag--sage    { background: var(--hv-core-sage-50);    color: var(--hv-core-sage-700);    border-color: var(--hv-core-sage-100); }
  .hv-tag--brand   { background: var(--hv-core-brand-50);   color: var(--hv-color-text-brand); border-color: var(--hv-core-brand-100); }
  .hv-tag--dark    { background: var(--hv-color-surface-deep); color: var(--hv-color-text-inverse); border-color: transparent; }

  .hv-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--hv-space-1);
    padding: var(--hv-space-1) var(--hv-space-3);
    font-size: var(--hv-text-xxs);
    font-weight: var(--hv-weight-bold);
    background: var(--hv-color-surface-deep);
    color: var(--hv-color-text-inverse);
    border-radius: var(--hv-radius-full);
    text-transform: uppercase;
    letter-spacing: var(--hv-tracking-wide);
    line-height: 1;
  }
  .hv-badge--brand { background: var(--hv-color-action-primary); }
  .hv-badge--inverse { background: var(--hv-core-neutral-0); color: var(--hv-color-text-default); }

  /* ── CARD ── */
  .hv-card {
    position: relative;
    background: var(--hv-color-surface-default);
    border: 1px solid var(--hv-color-border-subtle);
    border-radius: var(--hv-radius-lg);
    padding: var(--hv-space-6);
    transition: border-color var(--hv-duration-mid) var(--hv-ease-hover),
                box-shadow   var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-card--padded { padding: var(--hv-space-8); }
  .hv-card--snug   { padding: var(--hv-space-4); }
  .hv-card--bare   { padding: 0; }
  .hv-card--shadow { box-shadow: var(--hv-shadow-md); border-color: transparent; }
  .hv-card--lifted { box-shadow: var(--hv-shadow-pop); border-color: transparent; }
  .hv-card--bordered { border: 1px solid var(--hv-color-border-default); }
  .hv-card--quiet  { background: var(--hv-color-surface-subdued); border-color: transparent; }
  .hv-card--deep {
    background: var(--hv-color-surface-deep);
    color: var(--hv-color-text-inverse);
    border-color: transparent;
  }
  .hv-card--hoverable:hover {
    border-color: var(--hv-color-border-default);
    box-shadow: var(--hv-shadow-lg);
  }

  /* ── DIVIDER ── */
  .hv-divider {
    height: 1px;
    background: var(--hv-color-border-subtle);
    border: none;
  }
  .hv-divider--dashed {
    background: none;
    border-top: 1px dashed var(--hv-color-border-default);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   @layer app — LAYOUT PRIMITIVES & COMPOSED COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */
@layer app {

  /* ── LAYOUT PRIMITIVES ── */
  .hv-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hv-stack-gap, var(--hv-space-4));
  }
  .hv-stack--1 { --hv-stack-gap: var(--hv-space-1); }
  .hv-stack--2 { --hv-stack-gap: var(--hv-space-2); }
  .hv-stack--3 { --hv-stack-gap: var(--hv-space-3); }
  .hv-stack--4 { --hv-stack-gap: var(--hv-space-4); }
  .hv-stack--6 { --hv-stack-gap: var(--hv-space-6); }
  .hv-stack--8 { --hv-stack-gap: var(--hv-space-8); }
  .hv-stack--12 { --hv-stack-gap: var(--hv-space-12); }
  .hv-stack--16 { --hv-stack-gap: var(--hv-space-16); }

  .hv-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-cluster-gap, var(--hv-space-4));
    align-items: var(--hv-cluster-align, center);
  }
  .hv-cluster--2 { --hv-cluster-gap: var(--hv-space-2); }
  .hv-cluster--3 { --hv-cluster-gap: var(--hv-space-3); }
  .hv-cluster--6 { --hv-cluster-gap: var(--hv-space-6); }
  .hv-cluster--between { justify-content: space-between; }
  .hv-cluster--end { justify-content: flex-end; }
  .hv-cluster--top { align-items: flex-start; }
  .hv-cluster--bottom { align-items: flex-end; }

  .hv-grid {
    display: grid;
    gap: var(--hv-grid-gap, var(--hv-layout-gap));
    grid-template-columns: repeat(auto-fit, minmax(var(--hv-grid-min, 280px), 1fr));
  }
  .hv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
  .hv-grid--3 { --hv-grid-min: 280px; }
  .hv-grid--4 { --hv-grid-min: 220px; }

  /* Section container */
  .hv-section {
    position: relative;
    width: 100%;
    padding-inline: var(--hv-page-margin);
  }
  .hv-section__inner {
    max-width: var(--hv-content-max);
    margin-inline: auto;
    padding-block: var(--hv-space-14);
  }
  @media (min-width: 640px) {
    .hv-section__inner { padding-block: var(--hv-space-16); }
  }
  @media (min-width: 940px) {
    .hv-section__inner { padding-block: var(--hv-space-24); }
  }
  .hv-section--bordered .hv-section__inner {
    border-inline: 1px solid var(--hv-color-border-subtle);
    padding-inline: var(--hv-space-6);
  }
  .hv-section--subdued { background: var(--hv-color-surface-subdued); }
  .hv-section--muted   { background: var(--hv-color-surface-muted); }
  .hv-section--dark {
    background: var(--hv-color-surface-deep);
    color: var(--hv-color-text-inverse);
  }
  .hv-section--narrow .hv-section__inner { max-width: var(--hv-content-narrow); }
  .hv-section--prose  .hv-section__inner { max-width: var(--hv-content-prose); }

  /* Section header */
  .hv-section-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hv-space-4);
    margin-bottom: var(--hv-space-12);
  }
  @media (min-width: 940px) {
    .hv-section-header {
      grid-template-columns: 7fr 5fr;
      column-gap: var(--hv-layout-gap);
      align-items: end;
    }
  }
  .hv-section-header__title { text-wrap: pretty; }
  .hv-section-header__desc { text-wrap: pretty; max-width: 56ch; }

  /* ── PROPERTY CARD ── */
  .hv-property {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--hv-color-surface-default);
    border: 1px solid var(--hv-color-border-subtle);
    border-radius: var(--hv-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--hv-duration-grand) var(--hv-ease-scale),
                box-shadow var(--hv-duration-grand) var(--hv-ease-scale),
                border-color var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-property:hover {
    transform: translateY(-2px);
    box-shadow: var(--hv-shadow-xl);
    border-color: transparent;
  }
  .hv-property__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hv-color-surface-muted);
  }
  .hv-property__image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--hv-duration-grand) var(--hv-ease-scale);
  }
  .hv-property:hover .hv-property__image { transform: scale(1.04); }
  .hv-property__media-tags {
    position: absolute;
    top: var(--hv-space-3);
    left: var(--hv-space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--hv-space-1);
  }
  .hv-property__media-fav {
    position: absolute;
    top: var(--hv-space-2);
    right: var(--hv-space-2);
    width: 36px; height: 36px;
    border-radius: var(--hv-radius-full);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    color: var(--hv-color-text-default);
    border: none; cursor: pointer;
    transition: background var(--hv-duration-fast) ease,
                transform var(--hv-duration-fast) ease;
  }
  .hv-property__media-fav:hover { background: white; transform: scale(1.08); }
  .hv-property__media-fav[aria-pressed="true"] { color: var(--hv-core-magenta-500); }
  .hv-property__body {
    padding: var(--hv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--hv-space-3);
  }
  .hv-property__price {
    font-size: var(--hv-text-xl);
    font-weight: var(--hv-weight-bold);
    letter-spacing: var(--hv-tracking-tight);
    color: var(--hv-color-text-default);
    font-variant-numeric: tabular-nums;
  }
  .hv-property__title {
    font-size: var(--hv-text-md);
    color: var(--hv-color-text-default-subdued);
    line-height: var(--hv-lh-snug);
  }
  .hv-property__location {
    font-size: var(--hv-text-xs);
    color: var(--hv-color-text-muted);
    display: flex; align-items: center;
    gap: var(--hv-space-1);
  }
  .hv-property__specs {
    display: flex; align-items: center;
    gap: var(--hv-space-4);
    padding-top: var(--hv-space-3);
    border-top: 1px solid var(--hv-color-border-subtle);
    font-size: var(--hv-text-xs);
    color: var(--hv-color-text-default-subdued);
  }
  .hv-property__spec { display: flex; align-items: center; gap: var(--hv-space-1); }
  .hv-property__spec strong { font-weight: var(--hv-weight-bold); color: var(--hv-color-text-default); }

  /* ── FEATURE CARD ── */
  .hv-feature { display: flex; flex-direction: column; gap: var(--hv-space-3); }
  .hv-feature__title {
    font-size: var(--hv-text-lg);
    color: var(--hv-color-text-default);
    letter-spacing: var(--hv-tracking-tight);
  }
  .hv-feature__desc {
    color: var(--hv-color-text-default-subdued);
    max-width: 38ch;
  }

  /* ── STAT ── */
  .hv-stat { display: flex; flex-direction: column; gap: var(--hv-space-2); }
  .hv-stat__value {
    font-family: var(--hv-font-serif);
    font-style: italic;
    font-weight: var(--hv-weight-normal);
    font-size: var(--hv-text-4xl);
    line-height: var(--hv-lh-tight);
    letter-spacing: var(--hv-tracking-tighter);
    color: var(--hv-color-text-default);
  }
  .hv-stat__label {
    font-size: var(--hv-text-xs);
    color: var(--hv-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--hv-tracking-widest);
    font-weight: var(--hv-weight-bold);
  }

  /* ── QUOTE ── */
  .hv-quote { display: flex; flex-direction: column; gap: var(--hv-space-6); }
  .hv-quote__text {
    font-family: var(--hv-font-serif);
    font-style: italic;
    font-size: var(--hv-text-2xl);
    line-height: var(--hv-lh-snug);
    letter-spacing: var(--hv-tracking-tight);
    color: var(--hv-color-text-default);
    text-wrap: balance;
  }
  .hv-quote__author { display: flex; align-items: center; gap: var(--hv-space-3); }
  .hv-quote__avatar {
    width: 48px; height: 48px;
    border-radius: var(--hv-radius-full);
    background: var(--hv-color-surface-muted);
    object-fit: cover;
  }
  .hv-quote__name {
    font-weight: var(--hv-weight-bold);
    color: var(--hv-color-text-default);
    font-size: var(--hv-text-sm);
  }
  .hv-quote__role {
    font-size: var(--hv-text-xs);
    color: var(--hv-color-text-muted);
  }

  /* ── MESH BACKGROUND ── */
  .hv-mesh {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .hv-mesh::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(circle at 18% 24%, rgba(189, 180, 255, 0.35), transparent 42%),
      radial-gradient(circle at 82% 30%, rgba(255, 138, 91, 0.20), transparent 38%),
      radial-gradient(circle at 58% 88%, rgba(83, 58, 253, 0.18), transparent 45%);
    z-index: -1;
    filter: blur(40px);
    animation: hv-mesh-drift 30s var(--hv-ease-soft) infinite alternate;
  }
  @keyframes hv-mesh-drift {
    0%   { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(8deg) scale(1.08); }
  }

  /* ── REVEAL ── */
  .hv-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--hv-duration-grand) var(--hv-ease-scale),
                transform var(--hv-duration-grand) var(--hv-ease-scale);
  }
  .hv-reveal--shown { opacity: 1; transform: translateY(0); }
  .hv-reveal--delay-1 { transition-delay: 60ms; }
  .hv-reveal--delay-2 { transition-delay: 120ms; }
  .hv-reveal--delay-3 { transition-delay: 180ms; }
  .hv-reveal--delay-4 { transition-delay: 240ms; }
  .hv-reveal--delay-5 { transition-delay: 300ms; }
  .hv-reveal--delay-6 { transition-delay: 360ms; }

  @keyframes hv-fade-in {
    from { opacity: 0; } to { opacity: 1; }
  }
  @keyframes hv-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes hv-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
    .hv-mesh::before { animation: none; }
  }

  .hv-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;
  }

  /* ════ FULL-BLEED LISTING CARD (portrait, image-fill, glass-under-text) ════
     Distinct from the horizontal .hv-listing-card in havenly-ds-mapbox.css. */
  .hv-card-listing {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--hv-radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--hv-color-border-default);
    box-shadow: var(--hv-shadow-sm);
    text-decoration: none;
    color: var(--hv-color-text-inverse);
    transition: transform var(--hv-duration-grand) var(--hv-ease-scale),
                box-shadow var(--hv-duration-grand) var(--hv-ease-scale),
                border-color var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-card-listing:hover {
    transform: translateY(-4px);
    box-shadow: var(--hv-shadow-lg);
    border-color: transparent;
  }
  .hv-card-listing__img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform var(--hv-duration-grand) var(--hv-ease-scale);
  }
  .hv-card-listing:hover .hv-card-listing__img { transform: scale(1.05); }
  .hv-card-listing__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
      rgba(6,27,49,.78) 0%, rgba(6,27,49,.18) 42%, transparent 64%);
  }
  .hv-card-listing__fav {
    position: absolute; top: var(--hv-space-4); right: var(--hv-space-4);
    width: 34px; height: 34px; border-radius: var(--hv-radius-full);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: none; cursor: pointer;
    transition: background var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-card-listing__fav:hover { background: rgba(255,255,255,.4); }
  .hv-card-listing__deal {
    position: absolute; top: var(--hv-space-4); left: var(--hv-space-4);
    font-size: var(--hv-text-xxs); font-weight: var(--hv-weight-bold);
    padding: 3px 10px; border-radius: var(--hv-radius-full);
    color: #fff; background: var(--hv-color-deal-3);
  }
  .hv-card-listing__deal--d1 { background: var(--hv-color-deal-1); }
  .hv-card-listing__deal--d2 { background: var(--hv-color-deal-2); }
  .hv-card-listing__deal--d3 { background: var(--hv-color-deal-3); }
  .hv-card-listing__deal--d4 { background: var(--hv-color-deal-4); }
  .hv-card-listing__deal--d5 { background: var(--hv-color-deal-5); }
  .hv-card-listing__body {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2; isolation: isolate;
    padding: var(--hv-space-4); color: #fff;
  }
  .hv-card-listing__body::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    background: linear-gradient(to top,
      rgba(6,27,49,.46), rgba(6,27,49,.18) 60%, rgba(6,27,49,.04) 100%);
    -webkit-mask: linear-gradient(to top, #000 0%, #000 64%, transparent 100%);
            mask: linear-gradient(to top, #000 0%, #000 64%, transparent 100%);
    border-top: 1px solid rgba(255,255,255,.14);
    pointer-events: none;
  }
  .hv-card-listing__cat,
  .hv-card-listing__title,
  .hv-card-listing__meta,
  .hv-card-listing__price,
  .hv-card-listing__foot { position: relative; z-index: 1; }
  .hv-card-listing__cat {
    display: inline-block; font-size: 10px; font-weight: var(--hv-weight-bold);
    letter-spacing: var(--hv-tracking-wide); text-transform: uppercase;
    opacity: .85; margin-bottom: var(--hv-space-1);
  }
  .hv-card-listing__title {
    font-size: var(--hv-text-sm); font-weight: var(--hv-weight-strong);
    letter-spacing: var(--hv-tracking-tight); line-height: 1.25;
  }
  .hv-card-listing__meta {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--hv-text-xxs); opacity: .85; margin-top: var(--hv-space-1);
  }
  .hv-card-listing__price {
    font-size: 13px; font-weight: var(--hv-weight-bold);
    margin-top: var(--hv-space-2); text-shadow: 0 1px 6px rgba(0,0,0,.4);
  }
  .hv-card-listing__foot {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: var(--hv-space-3);
  }

  @media (prefers-reduced-motion: reduce) {
    .hv-card-listing, .hv-card-listing__img { transition: none; }
  }


  /* ════ BOOKING MATRIX (BookMe date×tier · FirstTable %-only) ════
     Deal cells = filled orange (darker = bigger discount), roundel "Deal" in-flow.
     Best Price cells = white card + blue-outline "Best price" pill. */
  .hv-bmatrix { overflow-x: auto; }
  .hv-bmatrix__grid {
    display: grid;
    grid-template-columns: 64px repeat(6, minmax(132px, 1fr));
    gap: var(--hv-space-2);
    min-width: 900px;
  }
  .hv-bmatrix__colh { text-align: center; padding: 0 0 var(--hv-space-3); }
  .hv-bmatrix__rowh {
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: var(--hv-space-2);
    font-size: var(--hv-text-xxs); font-weight: var(--hv-weight-strong);
    color: var(--hv-color-text-default-subdued);
  }
  .hv-bcell {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--hv-color-border-default);
    border-radius: var(--hv-radius-md);
    padding: var(--hv-space-3); cursor: pointer;
    background: var(--hv-color-surface-default);
    transition: border-color var(--hv-duration-mid) var(--hv-ease-hover),
                box-shadow var(--hv-duration-mid) var(--hv-ease-hover),
                transform var(--hv-duration-mid) var(--hv-ease-hover);
  }
  .hv-bcell:hover {
    border-color: var(--hv-color-border-brand);
    box-shadow: var(--hv-shadow-pop);
    transform: translateY(-2px);
  }
  .hv-bcell__roundel {
    display: inline-block; align-self: flex-start;
    font-size: 10px; font-weight: var(--hv-weight-bold);
    letter-spacing: var(--hv-tracking-wide); text-transform: uppercase;
    padding: 3px 11px; border-radius: var(--hv-radius-full);
    line-height: 1.4; margin-bottom: var(--hv-space-3);
  }
  .hv-bcell--best .hv-bcell__roundel {
    background: #fff; color: var(--hv-color-best-fg);
    border: 1px solid var(--hv-color-best-border);
  }
  .hv-bcell--deal { border-color: transparent; color: #fff; }
  .hv-bcell--deal .hv-bcell__roundel { background: #fff; color: var(--hv-color-deal-ink); }
  .hv-bcell--d1 { background: var(--hv-color-deal-1); }
  .hv-bcell--d2 { background: var(--hv-color-deal-2); }
  .hv-bcell--d3 { background: var(--hv-color-deal-3); }
  .hv-bcell--d4 { background: var(--hv-color-deal-4); }
  .hv-bcell--d5 { background: var(--hv-color-deal-5); }
  .hv-bcell__tier { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hv-space-2); padding: 2px 0; }
  .hv-bcell__tier + .hv-bcell__tier { border-top: 1px solid var(--hv-color-border-subtle); }
  .hv-bcell--deal .hv-bcell__tier + .hv-bcell__tier { border-top-color: rgba(255,255,255,.22); }
  .hv-bcell__tier-label { font-size: 9px; letter-spacing: var(--hv-tracking-wide); text-transform: uppercase; color: var(--hv-color-text-muted); }
  .hv-bcell--deal .hv-bcell__tier-label { color: rgba(255,255,255,.82); }
  .hv-bcell__tier-price { font-size: var(--hv-text-xs); font-weight: var(--hv-weight-strong); }
  .hv-bcell--deal .hv-bcell__tier-price { color: #fff; }
  .hv-bcell__pct { text-align: center; margin: auto 0; font-size: var(--hv-text-3xl); font-weight: var(--hv-weight-heavy); letter-spacing: var(--hv-tracking-tighter); color: #fff; line-height: 1; }
  .hv-bcell__pct small { display: block; font-size: 10px; font-weight: var(--hv-weight-bold); letter-spacing: var(--hv-tracking-wide); text-transform: uppercase; opacity: .85; margin-top: 3px; }
  .hv-bcell--empty { border-style: dashed; border-color: var(--hv-color-border-subtle); background: var(--hv-color-surface-subdued); cursor: default; }
  .hv-bcell--sold { background: var(--hv-color-surface-subdued); opacity: .5; cursor: not-allowed; }
  .hv-bcell[aria-pressed="true"] { outline: 2px solid var(--hv-color-action-primary); outline-offset: 1px; }

  @media (prefers-reduced-motion: reduce) { .hv-bcell { transition: none; } }
}