/* R287 design tokens (DESIGN-SYSTEM-2026-11-04.md). Custom properties only: they change nothing until a rule uses them. */
:root {
  /* brand: ONE violet. Button fill / text-on-dark / soft fill / hairline */
  --ds-accent: #6550c8;            /* white text 5.9:1 */
  --ds-accent-hi: #7260d4;         /* hover */
  --ds-accent-text: #a395ee;       /* on #000-#1c1c1e 6.3-8.1:1 */
  --ds-accent-soft: rgba(101, 80, 200, .16);
  --ds-accent-line: rgba(163, 149, 238, .38);
  /* shape: control 10, card 14, panel 18, pill only for chips / filters / status */
  --ds-r-xs: 6px; --ds-r-control: 10px; --ds-r-card: 14px; --ds-r-panel: 18px; --ds-r-pill: 999px;
  /* elevation: neutral, never coloured */
  --ds-sh-btn: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .35);
  --ds-sh-btn-hover: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 12px -4px rgba(0, 0, 0, .55);
  --ds-sh-1: 0 1px 2px rgba(0, 0, 0, .28);
  --ds-sh-2: 0 12px 32px -16px rgba(0, 0, 0, .7);
  /* the signature accent: holographic foil. ONLY on: live badge, goal rings / awards, first-week progress, the landing hero frame */
  --ds-holo: conic-gradient(from var(--ds-a, 210deg), #7ee7ff, #a395ee 22%, #ff9ad5 42%, #ffd58a 60%, #9cf5c8 78%, #7ee7ff);
  --ds-holo-line: linear-gradient(90deg, #7ee7ff, #a395ee 35%, #ff9ad5 65%, #ffd58a);
  /* motion */
  --ds-ease: cubic-bezier(.2, .8, .2, 1); --ds-dur-1: 120ms; --ds-dur-2: 200ms; --ds-dur-3: 320ms;
}
:root[data-theme="light"] {
  --ds-accent-text: #5b46b8;       /* on white 7.0:1 */
  --ds-accent-soft: rgba(101, 80, 200, .10);
  --ds-accent-line: rgba(91, 70, 184, .34);
  --ds-sh-btn: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(15, 23, 42, .18);
  --ds-sh-btn-hover: inset 0 1px 0 rgba(255, 255, 255, .24), 0 4px 12px -4px rgba(15, 23, 42, .28);
  --ds-sh-1: 0 1px 2px rgba(15, 23, 42, .06);
  --ds-sh-2: 0 12px 32px -16px rgba(15, 23, 42, .22);
  --ds-holo: conic-gradient(from var(--ds-a, 210deg), #1fb6d9, #6550c8 22%, #d9479a 42%, #d99a1f 60%, #1fae7a 78%, #1fb6d9);
  --ds-holo-line: linear-gradient(90deg, #1fb6d9, #6550c8 35%, #d9479a 65%, #d99a1f);
}
@property --ds-a { syntax: "<angle>"; inherits: true; initial-value: 210deg; }
@keyframes ds-spin { to { --ds-a: 570deg; } }

/* R287 - the public pages (home + pricing + features sections, sign in, sign up, password, join).
 * @ds(part) / @dsl(part) / @dsd(part) are expanded by build.py into html:not(#ds1)...:not([data-ds-off~="part"]) (8 ids, so
 * these rules outrank the R60UI site layers, which use html:not(#r4)); dsl = light theme only, dsd = dark only. */

/* gradtext: one solid accent tone instead of violet-pink gradient text (the most common "AI" tell) */
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="gradtext"]) .grad { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: #b9a8ff !important; }
html[data-theme="light"]:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="gradtext"]) .grad { color: #5b46b8 !important; }

/* glow: neutral depth on buttons and cards, no violet halo */
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="glow"]) .btn-primary { box-shadow: var(--ds-sh-btn) !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="glow"]) .btn-primary:hover { box-shadow: var(--ds-sh-btn-hover) !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="glow"]) .price-card.popular { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(163, 149, 238, .45), 0 24px 48px -28px rgba(0, 0, 0, .8) !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="glow"]) .instead-one { box-shadow: var(--ds-sh-btn) !important; }

/* holo: the signature accent, here only on the hero product frame and its LIVE badge */
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="holo"]) #hero-stage .r6-mesh { opacity: .38 !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="holo"]) #hero-stage .r6-plate { border: 1px solid transparent !important; background: linear-gradient(#100b29, #100b29) padding-box, var(--ds-holo) border-box !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="holo"]) #hero-stage:hover .r6-plate { animation: ds-spin 9s linear infinite; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="holo"]) .r6-live { position: relative; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="holo"]) .r6-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--ds-holo); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* join (a guest joins a live): solid accent action, calm selected option */
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="join"]) #join-btn { background: var(--ds-accent) !important; box-shadow: var(--ds-sh-btn) !important; border-radius: var(--ds-r-control) !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="join"]) #join-btn:hover { background: var(--ds-accent-hi) !important; box-shadow: var(--ds-sh-btn-hover) !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="join"]) .media-opt.active { background: var(--ds-accent-soft) !important; box-shadow: none !important; border-color: var(--ds-accent-line) !important; }

/* type: Hebrew is never tracked tighter (negative letter-spacing breaks Hebrew letter shapes); numbers line up */
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="type"]) :is(h1, h2, h3, h4):lang(he), html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="type"]) :is(h1, h2, h3, h4):lang(he) * { letter-spacing: 0 !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="type"]) :is(.r6-clock, [data-r6-clock], [data-r6-pclock], .price-amount, .price) { font-variant-numeric: tabular-nums; }

/* focus: one visible ring everywhere (keyboard only) */
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="focus"]) :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--ds-accent-text) !important; outline-offset: 2px !important; }

/* footer: on a phone (or a short laptop screen) the accessibility statement / cancel-subscription links sat UNDER the
   sign-in card (absolute, bottom 6px) - hidden. They follow the card instead. */
@media (max-width: 760px), (max-height: 860px) {
  html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="footer"]) footer.slp-a11y-foot { position: static !important; margin: 20px auto 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="holo"]) #hero-stage:hover .r6-plate { animation: none !important; }
}

/* ---- R326 ---- */
/* primary: the same fill as the app */
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="primary"]) .btn-primary:not([style*="background"]) { background: var(--ds-accent) !important; }
html:not(#ds1):not(#ds2):not(#ds3):not(#ds4):not(#ds5):not(#ds6):not(#ds7):not(#ds8):not([data-ds-off~="all"]):not([data-ds-off~="primary"]) .btn-primary:not([style*="background"]):hover { background: var(--ds-accent-hi) !important; }