:root {
    /* Brand colours */
    --bsr-navy:          #004b97;
    --bsr-navy-dark:     #003570;
    --bsr-navy-deeper:   #00254e;
    --bsr-blue:          #006bcc;
    --bsr-blue-light:    #e8f1fb;

    /* Gold accent — trust / value signal */
    --bsr-gold:          #c0392b;
    --bsr-gold-light:    #e74c3c;
    --bsr-gold-pale:     #fdf0ee;
    --bsr-gold-border:   #e8a49e;

    /* Neutral palette */
    --bsr-text:          #1b2733;
    --bsr-text-muted:    #56637a;
    --bsr-text-light:    #6b7280;
    --bsr-border:        #d9dee7;
    --bsr-bg-panel:      #f4f7fb;
    --bsr-bg-white:      #ffffff;

    /* Semantic */
    --bsr-success:       #1a7a4a;
    --bsr-success-bg:    #edf7f2;

    /* Typography */
    --bsr-font:          Arial, Helvetica, sans-serif;

    /* Radii */
    --bsr-radius-sm:     6px;
    --bsr-radius-md:     10px;
    --bsr-radius-lg:     14px;

    /* Shadows */
    --bsr-shadow-sm:     0 2px 8px rgba(0,0,0,0.07);
    --bsr-shadow-md:     0 4px 18px rgba(0,75,151,0.14);
    --bsr-shadow-lg:     0 8px 32px rgba(0,0,0,0.13);

    /* Transitions */
    --bsr-transition:    160ms ease;
  }


  .demo-section {
    max-width: 780px;
    margin: 0 auto 56px;
  }

  .demo-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin: 0 0 12px;
  }

  .demo-prose {
    font-family: var(--bsr-font);
    font-size: 15px;
    color: var(--bsr-text);
    line-height: 1.7;
    background: var(--bsr-bg-white);
    border: 1px solid var(--bsr-border);
    border-radius: var(--bsr-radius-lg);
    padding: 20px 24px;
    margin: 0 0 0;
  }

  .demo-sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
  }

  @media (max-width: 680px) {
    .demo-sidebar-layout {
      grid-template-columns: 1fr;
    }
  }


  /* ============================================================
     COMPONENT 1: GATED CONTENT BLUR PANEL
     ============================================================

     Usage:
       Place .bsr-gate immediately after the teaser paragraph.
       The .bsr-gate__preview div contains real (blurred) text
       that is visually obscured — assistive tech users see
       only the overlay, which is marked aria-hidden=false.
  */

  .bsr-gate {
    min-height: 350px;
    position: relative;
    border-radius: var(--bsr-radius-lg);
    overflow: hidden;
    border: 1px solid var(--bsr-border);
    margin: 24px 0;
    background: var(--bsr-bg-white);
  }

  /* The blurred text layer — real content, visually obscured */
  .bsr-gate__preview {
    padding: 24px;
    user-select: none;
    pointer-events: none;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    opacity: 0.55;
    /* Prevents blur edge artefacts */
    transform: translateZ(0);
  }

  .bsr-gate__preview-block {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bsr-text);
  }

  .bsr-gate__preview-block:last-child { margin-bottom: 0; }

  .bsr-gate__preview-row {
    display: flex;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--bsr-text-muted);
  }

  .bsr-gate__preview-label {
    font-weight: 700;
    min-width: 140px;
  }

  /* Gradient fade on top of blur — creates the "dissolve" effect */
  .bsr-gate__fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.55) 30%,
      rgba(255,255,255,0.92) 60%,
      rgba(255,255,255,1) 100%
    );
    pointer-events: none;
  }

  /* The CTA overlay — sits on top of everything */
  .bsr-gate__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bsr-gate__lock-icon {
    width: 36px;
    height: 36px;
    background: var(--bsr-navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    flex-shrink: 0;
  }

  /* SVG lock icon inline */
  .bsr-gate__lock-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bsr-gate__heading {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
    color: var(--bsr-navy-dark);
    line-height: 1.3;
  }

  .bsr-gate__subtext {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--bsr-text-muted);
    max-width: 380px;
  }

  .bsr-gate__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 300px;
  }

  /* Primary CTA button — shared base across components */
  .bsr-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--bsr-navy) 0%, var(--bsr-blue) 100%);
    color: #fff;
    font-family: var(--bsr-font);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: var(--bsr-radius-sm);
    cursor: pointer;
    transition: all var(--bsr-transition);
    box-shadow: 0 2px 10px rgba(0,75,151,0.25);
    letter-spacing: 0.01em;
  }

  .bsr-btn-primary:hover,
  .bsr-btn-primary:focus-visible {
    background: linear-gradient(135deg, var(--bsr-navy-dark) 0%, var(--bsr-navy) 100%);
    box-shadow: 0 4px 18px rgba(0,75,151,0.35);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
  }

  .bsr-btn-primary:focus-visible {
    outline: 3px solid var(--bsr-gold-light);
    outline-offset: 2px;
  }

  .bsr-btn-primary:active {
    transform: translateY(0);
  }

  /* Gold price/benefit tag on button */
  .bsr-btn-primary__tag {
    background: var(--bsr-gold-light);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Secondary / text link */
  .bsr-link-secondary {
    font-family: var(--bsr-font);
    font-size: 13px;
    color: var(--bsr-text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--bsr-border);
    transition: color var(--bsr-transition), border-color var(--bsr-transition);
  }

  .bsr-link-secondary:hover,
  .bsr-link-secondary:focus-visible {
    color: var(--bsr-navy);
    border-color: var(--bsr-navy);
  }

  .bsr-link-secondary:focus-visible {
    outline: 2px solid var(--bsr-navy);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Trust badge row */
  .bsr-gate__trust {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--bsr-text-light);
  }

  .bsr-gate__trust svg {
    width: 14px;
    height: 14px;
    fill: var(--bsr-success);
    flex-shrink: 0;
  }

  /* Logged-in members: no blur overlay layers — show full content clearly */
  .bsr-gate--unlocked .bsr-gate__preview {
    filter: none;
    -webkit-filter: none;
    opacity: 1;
    user-select: auto;
    pointer-events: auto;
  }

  /* Gate CTA links: no underline on hover (global `a:hover` overrides) */
  .bsr-gate__overlay .bsr-btn-primary,
  .bsr-gate__overlay .bsr-btn-primary:hover,
  .bsr-gate__overlay .bsr-btn-primary:focus,
  .bsr-gate__overlay .bsr-btn-primary:focus-visible {
    text-decoration: none;
  }

  .bsr-gate__overlay .bsr-link-secondary {
    text-decoration: none;
  }

  .bsr-gate__overlay .bsr-link-secondary:hover,
  .bsr-gate__overlay .bsr-link-secondary:focus,
  .bsr-gate__overlay .bsr-link-secondary:focus-visible {
    text-decoration: none;
  }


  /* ============================================================
     COMPONENT 2: INLINE CTA STRIP
     ============================================================

     Usage:
       Insert between the teaser paragraph and the gated section.
       Works with or without Component 1 above it.
  */

  .bsr-cta-strip {
    border: 1px solid var(--bsr-gold-border);
    border-left: 4px solid var(--bsr-gold);
    border-radius: var(--bsr-radius-md);
    background: var(--bsr-gold-pale);
    padding: 18px 22px;
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 18px;
  }

  @media (max-width: 560px) {
    .bsr-cta-strip {
      flex-direction: column;
      gap: 16px;
    }
  }

  .bsr-cta-strip__body {
    flex: 1;
    min-width: 0;
  }

  .bsr-cta-strip__eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsr-gold);
    margin: 0 0 5px;
  }

  .bsr-cta-strip__heading {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bsr-navy-dark);
    line-height: 1.35;
  }

  .bsr-cta-strip__benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .bsr-cta-strip__benefit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bsr-text);
    white-space: nowrap;
  }

  .bsr-cta-strip__benefit svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--bsr-success);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bsr-cta-strip__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }

  @media (max-width: 560px) {
    .bsr-cta-strip__actions {
      align-items: flex-start;
      width: 100%;
    }

    .bsr-cta-strip__actions .bsr-btn-primary {
      width: 100%;
      max-width: 280px;
    }
  }

  /* Compact button variant for the strip */
  .bsr-btn-primary--compact {
    padding: 10px 20px;
    font-size: 14px;
    width: auto;
    white-space: nowrap;
  }


  /* ============================================================
     COMPONENT 3: SIDEBAR CTA WIDGET
     ============================================================

     Usage:
       Replaces or prepends the Contact Seller box for
       non-authenticated users. Matches existing sidebar width
       (~300px) and bsr-contact-seller visual language exactly.
  */

  .bsr-sidebar-cta {
    border: 1px solid var(--bsr-border);
    border-radius: var(--bsr-radius-lg);
    background: var(--bsr-bg-white);
    box-shadow: var(--bsr-shadow-sm);
    overflow: hidden;
    font-family: var(--bsr-font);
    font-size: 15px;
    color: var(--bsr-text);
  }

  /* Header — mirrors bsr-contact-seller__header gradient */
  .bsr-sidebar-cta__header {
    background: linear-gradient(90deg, var(--bsr-navy) 0%, var(--bsr-blue) 100%);
    padding: 14px 18px;
    color: #fff;
  }

  .bsr-sidebar-cta__header-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.75;
    margin: 0 0 3px;
  }

  .bsr-sidebar-cta__header-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
  }

  .bsr-sidebar-cta__body {
    padding: 18px;
  }

  /* Locked contact details preview */
  .bsr-sidebar-cta__locked-preview {
    background: var(--bsr-bg-panel);
    border: 1px solid var(--bsr-border);
    border-radius: var(--bsr-radius-md);
    padding: 12px 14px;
    margin: 0 0 16px;
    position: relative;
    overflow: hidden;
  }

  .bsr-sidebar-cta__locked-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--bsr-text-muted);
  }

  .bsr-sidebar-cta__locked-row svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--bsr-text-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Blur the fake contact data */
  .bsr-sidebar-cta__locked-value {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
    color: var(--bsr-text);
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  /* Lock badge over preview */
  .bsr-sidebar-cta__lock-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    background: var(--bsr-navy);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .bsr-sidebar-cta__lock-badge svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Benefit list */
  .bsr-sidebar-cta__benefits {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }

  .bsr-sidebar-cta__benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--bsr-text);
    border-top: 1px solid var(--bsr-border);
  }

  .bsr-sidebar-cta__benefit:first-child {
    border-top: none;
  }

  .bsr-sidebar-cta__benefit svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    fill: none;
    stroke: var(--bsr-success);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bsr-sidebar-cta__cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bsr-sidebar-cta__cta-wrap .bsr-btn-primary {
    font-size: 14px;
    padding: 12px 20px;
  }

  .bsr-sidebar-cta__cta-wrap .bsr-btn-primary,
  .bsr-sidebar-cta__cta-wrap .bsr-btn-primary:hover,
  .bsr-sidebar-cta__cta-wrap .bsr-btn-primary:focus,
  .bsr-sidebar-cta__cta-wrap .bsr-btn-primary:focus-visible {
    text-decoration: none;
  }

  .bsr-sidebar-cta__secondary-text {
    text-align: center;
    font-size: 12px;
    color: var(--bsr-text-light);
  }

  .bsr-sidebar-cta__secondary-text a {
    color: var(--bsr-navy);
    text-decoration: none;
    font-weight: 600;
    border-bottom: none;
  }

  .bsr-sidebar-cta__secondary-text a:hover,
  .bsr-sidebar-cta__secondary-text a:focus,
  .bsr-sidebar-cta__secondary-text a:focus-visible {
    text-decoration: none;
    border-bottom: none;
    color: var(--bsr-navy-dark);
  }

  /* Gold membership tier label */
  .bsr-sidebar-cta__tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bsr-gold-pale);
    border: 1px solid var(--bsr-gold-border);
    color: var(--bsr-gold);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 10px;
    border-radius: 20px;
    margin: 0 0 14px;
  }

  .bsr-sidebar-cta__tier-badge svg {
    width: 12px;
    height: 12px;
    fill: var(--bsr-gold);
  }


  /* ============================================================
     COMPONENT 4: STICKY MOBILE CTA BAR
     ============================================================

     Usage:
       Place directly before </body>. The bar is hidden on
       desktop (>= 768px) via media query. JS adds .is-hidden
       once the user scrolls past a designated "above fold"
       sentinel or when the sidebar CTA is in view.

     Accessibility:
       aria-live="polite" on the bar so screen readers announce
       it once. The close button hides it for the session.
  */

  .bsr-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--bsr-bg-white);
    border-top: 3px solid var(--bsr-navy);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.14);
    padding: 12px 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Safe area inset for iOS home bar */
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    transition: transform 0.3s ease;
  }

  /* Dismissal: JS toggles this class */
  .bsr-mobile-bar.is-hidden {
    transform: translateY(100%);
  }

  /* Hide entirely on desktop */
  @media (min-width: 768px) {
    .bsr-mobile-bar {
      display: none;
    }
  }

  .bsr-mobile-bar__text {
    flex: 1;
    min-width: 0;
  }

  .bsr-mobile-bar__eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsr-text-light);
    margin-bottom: 1px;
  }

  .bsr-mobile-bar__heading {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--bsr-navy-dark);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bsr-mobile-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .bsr-mobile-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--bsr-navy) 0%, var(--bsr-blue) 100%);
    color: #fff;
    font-family: var(--bsr-font);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--bsr-radius-sm);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,75,151,0.28);
    transition: all var(--bsr-transition);
  }

  .bsr-mobile-bar__cta:hover,
  .bsr-mobile-bar__cta:focus-visible {
    background: linear-gradient(135deg, var(--bsr-navy-dark) 0%, var(--bsr-navy) 100%);
    box-shadow: 0 4px 14px rgba(0,75,151,0.38);
    color: #fff;
  }

  .bsr-mobile-bar__cta:focus-visible {
    outline: 3px solid var(--bsr-gold-light);
    outline-offset: 2px;
  }

  /* Close / dismiss button */
  .bsr-mobile-bar__dismiss {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--bsr-text-light);
    display: flex;
    align-items: center;
    transition: color var(--bsr-transition);
    border-radius: 4px;
  }

  .bsr-mobile-bar__dismiss:hover {
    color: var(--bsr-text);
  }

  .bsr-mobile-bar__dismiss:focus-visible {
    outline: 2px solid var(--bsr-navy);
    outline-offset: 2px;
  }

  .bsr-mobile-bar__dismiss svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }