:root {
    --dur: 1.6s;
    --ease: cubic-bezier(.2,.9,.2,1);
  }



  .switches {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* ===== Generic, reusable switch ===== */
  .brand-switch {
    position: relative;
    display: inline-block;

    /* Size (2× larger) */
    --w: 100px;
    --h: 160px;
    --pad: 6px;
    --knob: calc(var(--w) - var(--pad) * 2);

    /* Subtle radii (requested) */
    --br: 22px;      /* track bottom radius (less rounded) */
    --knob-r: 18px;  /* knob radius (rounded-square) */
    --glyph-r: 10px; /* inner glyph plate radius */

    /* Track colors (override per switch) */
    --track-off: rgba(18,20,23,.5);    /* 50% transparent dark */
    --brand: #25D366;                  /* default brand color (overridden per switch) */
    --brand-50: rgba(37,211,102,.5);   /* 50% transparent brand */
    --neon1: rgba(37,211,102,.75);
    --neon2: rgba(37,211,102,.55);

    /* Icon colors */
    --icon-off: #e8eef5;
    --icon-on: #ffffff;

    /* Derived for motion */
    --y-off: 0px;
    --y-on: calc(var(--h) - var(--knob) - var(--pad) * 2);
  }

  .brand-switch__input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
  }

  .brand-switch__label {
    display: block;
    width: var(--w); height: var(--h);
    background: var(--track-off);                /* 50% transparent when OFF */
    border-left: 4px solid rgba(42,47,52,1);
    border-right: 4px solid rgba(42,47,52,1);
    border-bottom: 4px solid rgba(42,47,52,1);
    border-top: 0;                                /* no top border line */
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
    border-top-left-radius: 0;                    /* square top */
    border-top-right-radius: 0;                   /* square top */
    box-shadow: inset 0 6px 20px rgba(0,0,0,.35);
    position: relative;
    cursor: pointer;
    transition:
      background var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }









  /* ON: track becomes brand (50%), neon sides/bottom, still no top border */
  .brand-switch__input:checked + .brand-switch__label {
    background: var(--brand-50);
    border-left-color: var(--brand);
    border-right-color: var(--brand);
    border-bottom-color: var(--brand);
    border-top: 0;
    box-shadow: 0 0 10px var(--neon1), 0 0 22px var(--neon2), inset 0 6px 20px rgba(0,0,0,.25);
  }

  .brand-switch__label:focus-visible {
    outline: 3px solid #6ea7ff;
    outline-offset: 4px;
  }
  
  
  

  /* Knob with original 3D shading and rim (rounded-square now) */
  .brand-switch__knob {
    position: absolute;
    left: 2px; 
	top: var(--pad);
    width: var(--knob); 
	height: 62px;
    border-radius: var(--knob-r);
    background: #1f2329;                          /* OFF */
    border: 3px solid rgba(255,255,255,.08);       /* subtle rim */
    box-shadow:
      0 4px 10px rgba(0,0,0,.55),                 /* drop */
      inset 0 2px 4px rgba(255,255,255,.10),      /* top highlight */
      inset 0 -4px 8px rgba(0,0,0,.45);           /* bottom shade */
    display: grid; place-items: center;
    transform: translateY(0);
  }

  /* ON: knob turns brand color; shading and rim preserved */
  .brand-switch__input:checked + .brand-switch__label .brand-switch__knob {
    background: var(--brand);
    border-color: rgba(0,0,0,.15);                 /* darker rim for contrast */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.42), inset 0 2px 4px rgba(255, 255, 255, 0.55), inset 0 -4px 12px rgba(0, 0, 0, 0.27);
  }

  /* Inner plate behind icon — now also rounded-square to match */
  .brand-switch__glyph-bg {
    width: calc(var(--knob) - 10px);
    height: 52px;
    border-radius: var(--glyph-r);
    display: grid; place-items: center;
    background: #1b2026;                           /* OFF */
    transition: background var(--dur) var(--ease);
  }
  .brand-switch__input:checked + .brand-switch__label .brand-switch__glyph-bg {
    background: transparent;
  }

  /* Icon */
  .brand-switch__glyph {
    font-size: calc(var(--knob) * 0.4);
    line-height: 1;
    color: var(--icon-off);
    transition: color var(--dur) var(--ease), filter var(--dur) var(--ease);
  }
  .brand-switch__input:checked + .brand-switch__label .brand-switch__glyph {
    color: var(--icon-on);
    filter: drop-shadow(0 0 3px rgba(255,255,255,.45));
  }

  /* Bounce motion (vertical) */
  @keyframes slideDownBounce {
    0%   { transform: translateY(var(--y-off)); }
    80%  { transform: translateY(calc(var(--y-on) + 30px)); } /* overshoot */
    100% { transform: translateY(calc(var(--y-on) + 26px)); }
  }
  @keyframes slideUpBounce {
    0%   { transform: translateY(var(--y-on)); }
    80%  { transform: translateY(calc(var(--y-off) - 4px)); } /* overshoot above */
    100% { transform: translateY(var(--y-off)); }
  }
  .brand-switch__input:checked + .brand-switch__label .brand-switch__knob {
    animation: slideDownBounce var(--dur) var(--ease) both;
  }
  .brand-switch__input:not(:checked) + .brand-switch__label .brand-switch__knob {
    animation: slideUpBounce var(--dur) var(--ease) both;
  }

  /* a11y helper */
  .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap;
  }