/* Blog - Eye Tracking Participant Privacy v3 — base styles. All rules scoped under .betpp-v3-page. */
/* colors tokens (IntelliXR design system) */
/* IntelliXR — Color System
   Primarily black, white, and one accent. Blue is the primary voice;
   pink is the single accent, used sparingly. Slate is structural neutral;
   Carbon is the near-black foundation.

   Color psychology (from brand doc):
   - Signal Blue  — engineered, XR-native. Reads as intelligent + credible.
   - Spectral Pink — spatial, immersive energy from the XR light spectrum.
   - Slate         — enterprise calm; structural neutral for chrome + secondary text.
   - Carbon        — precise, premium depth; grounds intelligence + compliance. */

.betpp-v3-page{
  /* ---- Foundation ---- */
  --white: #ffffff;
  --carbon: #030405;        /* near-black ink — the foundation */

  /* ---- Signal Blue (primary voice) — tints & shades ---- */
  --blue-10: #cddeff;
  --blue-20: #abc9ff;
  --blue-30: #82aeff;
  --blue-40: #5892fe;
  --blue-50: #2e77fe;
  --blue: #045cfe;          /* base — Signal Blue */
  --blue-60: #034dd4;
  --blue-70: #033da9;
  --blue-80: #022e7f;
  --blue-90: #011f55;
  --blue-100: #011233;

  /* ---- Spectral Pink (PRIMARY) — tints & shades ---- */
  --pink-10: #ffebff;
  --pink-20: #ffdeff;
  --pink-30: #ffceff;
  --pink-40: #ffbdff;
  --pink-50: #ffadff;
  --pink: #ff9cff;          /* base — Spectral Pink */
  --pink-60: #d582d5;
  --pink-70: #aa68aa;
  --pink-80: #804e80;
  --pink-90: #553455;
  --pink-100: #331f33;

  /* ---- Slate (structural neutral) — derived ramp around #545A7F ---- */
  --slate-10: #eceef4;
  --slate-20: #d4d7e2;
  --slate-30: #b0b5c9;
  --slate-40: #8b91ad;
  --slate: #545a7f;         /* base — Slate */
  --slate-60: #464b6a;
  --slate-70: #363a54;
  --slate-80: #262a3f;
  --slate-90: #171a29;
  --slate-100: #0c0e18;

  /* ---- Iris Violet (accent) — tints & shades around #C9AAFF ---- */
  --violet-20: #e7dbff;
  --violet-40: #d6c2ff;
  --violet: #c9aaff;        /* base — Iris Violet accent */
  --violet-60: #a487d6;
  --violet-80: #6f5a99;

  /* ================= SEMANTIC ALIASES ================= */
  /* Default surface model is DARK (cinematic). See [data-theme="light"] below. */

  /* Backgrounds */
  --bg-base: var(--carbon);
  --bg-raised: #0a0c14;
  --bg-sunken: #010204;

  /* Text */
  --text-strong: var(--white);
  --text-body: rgba(255, 255, 255, 0.82);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.34);
  --text-on-accent: var(--carbon);   /* primary/accent are light — use dark ink */

  /* Accents — Pink is primary, Blue supports, Violet is the accent */
  --accent-primary: var(--pink);
  --accent-primary-hover: var(--pink-50);
  --accent-primary-press: var(--pink-60);
  --accent-support: var(--blue);
  --accent-secondary: var(--violet);

  /* Lines & borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);
  --focus-ring: var(--blue-40);

  /* Status (kept clinical + restrained) */
  --success: #3ecf8e;
  --warning: #ffcf5c;
  --danger: #ff5d5d;
  --info: var(--blue-40);
}

/* ---- Light theme: white foundation, carbon type ---- */
.betpp-v3-page[data-theme="light"]{
  --bg-base: var(--white);
  --bg-raised: #f5f6fa;
  --bg-sunken: #eceef4;

  --text-strong: var(--carbon);
  --text-body: rgba(3, 4, 5, 0.80);
  --text-muted: rgba(3, 4, 5, 0.55);
  --text-faint: rgba(3, 4, 5, 0.34);

  --border-subtle: rgba(3, 4, 5, 0.07);
  --border-default: rgba(3, 4, 5, 0.12);
  --border-strong: rgba(3, 4, 5, 0.24);
}

/* typography tokens (IntelliXR design system) */
/* IntelliXR — Typography
   Raleway across the board: clinical UI to investor decks.
   Precise, geometric letterforms signal engineered clarity.
   Weights: 300 Light · 400 Regular. */

.betpp-v3-page{
  --font-sans: 'Raleway', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Numeric / data readouts reuse Raleway with tabular figures where needed */
  --font-mono: 'Raleway', ui-sans-serif, system-ui, sans-serif;

  /* Weights — Light + Regular only */
  --fw-light: 300;        /* @kind font */
  --fw-regular: 400;      /* @kind font */

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-display: 4.5rem;    /* 72px — hero / cover */
  --text-h1: 3rem;           /* 48px */
  --text-h2: 2.25rem;        /* 36px */
  --text-h3: 1.5rem;         /* 24px */
  --text-h4: 1.25rem;        /* 20px */
  --text-lg: 1.125rem;       /* 18px */
  --text-base: 1rem;         /* 16px */
  --text-sm: 0.875rem;       /* 14px */
  --text-xs: 0.75rem;        /* 12px */
  --text-2xs: 0.6875rem;     /* 11px — labels / eyebrows */

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — tight display, wide technical labels */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.22em;   /* spaced-out technical eyebrows (see mood board) */
}

/* spacing tokens (IntelliXR design system) */
/* IntelliXR — Spacing & Layout
   8-point base grid. Structured, modular, deployable at scale. */

.betpp-v3-page{
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --section-y: 96px;

  /* Corner radii — engineered, restrained (not pill-soft) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
}

/* effects tokens (IntelliXR design system) */
/* IntelliXR — Effects: glassmorphism, gradients, blur, shadow, motion
   Cinematic + immersive. Quiet spatial depth. Glass surfaces float over
   blurred blue/purple gradient fields (see mood board). Used with restraint —
   engineered, not decorative. */

.betpp-v3-page{
  /* ---- Blur (backdrop) ---- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;
  --blur-xl: 48px;

  /* ---- Glass surfaces ----
     On dark: frosted white films. On light: frosted carbon films. */
  --glass-fill: rgba(255, 255, 255, 0.06);
  --glass-fill-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.35);

  /* ---- Signature gradients (from mood board) ---- */
  /* Cinematic radial aura — the core brand backdrop */
  --grad-aura: radial-gradient(120% 120% at 50% 0%,
      #1a2a6e 0%, #0a1236 42%, var(--carbon) 78%);
  /* Signal glow — blue core bleeding into spectral pink at the edge */
  --grad-signal: radial-gradient(90% 90% at 30% 30%,
      var(--blue-40) 0%, var(--blue) 38%, var(--blue-80) 72%, var(--carbon) 100%);
  /* Spectral sweep — blue → pink, the "insight" accent gradient */
  --grad-spectral: linear-gradient(120deg, var(--blue) 0%, #6b4bff 52%, var(--pink) 100%);
  /* Lens layers — soft vertical light diffraction (image: gradient-lens) */
  --grad-lens: linear-gradient(90deg,
      rgba(4, 92, 254, 0) 0%, rgba(130, 174, 255, 0.28) 45%,
      rgba(255, 156, 255, 0.18) 70%, rgba(4, 92, 254, 0) 100%); /* @kind color */
  /* Text-on-media protection gradient */
  --grad-scrim: linear-gradient(180deg, rgba(3, 4, 5, 0) 0%, rgba(3, 4, 5, 0.85) 100%); /* @kind color */

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(1, 8, 24, 0.4);
  --shadow-md: 0 8px 24px rgba(1, 8, 24, 0.45);
  --shadow-lg: 0 24px 60px rgba(1, 8, 24, 0.55);
  /* Signal glow — accent bloom for focal elements (use sparingly) */
  --shadow-glow-blue: 0 0 0 1px rgba(4, 92, 254, 0.35), 0 12px 40px rgba(4, 92, 254, 0.35);
  --shadow-glow-pink: 0 0 0 1px rgba(255, 156, 255, 0.30), 0 12px 40px rgba(255, 156, 255, 0.28);
  /* Primary glow → follows the primary accent (pink) */
  --shadow-glow-primary: var(--shadow-glow-pink);
  /* Diagonal blue → pink sweep for primary buttons */
  --grad-button: linear-gradient(135deg, var(--blue) 0%, #7b4bff 52%, var(--pink) 100%);
  --grad-button-hover: linear-gradient(135deg, var(--blue-50) 0%, #8f63ff 52%, var(--pink-50) 100%);
  /* Inner top highlight for glass edges */
  --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-med: 260ms;    /* @kind other */
  --dur-slow: 480ms;   /* @kind other */
}


body.betpp-v3-body{margin:0;background:#030405}
/* scoped reset */
.betpp-v3-page,.betpp-v3-page *,.betpp-v3-page *::before,.betpp-v3-page *::after{box-sizing:border-box}
.betpp-v3-page{display:block;position:relative;min-height:100vh;width:100%;overflow: clip;background:var(--bg-base);color:var(--text-body);font-family:var(--font-sans);font-weight:400;transition:background var(--dur-slow) var(--ease-standard),color var(--dur-med) var(--ease-standard);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:16px}
.betpp-v3-page :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0;padding:0}
.betpp-v3-page :where(ul,ol){list-style:none}
.betpp-v3-page :where(img,svg,video){max-width:100%;height:auto}
.betpp-v3-page img{display:block;border:0}
.betpp-v3-page a{color:var(--blue-40);text-decoration:none;background:none;box-shadow:none}
.betpp-v3-page a:hover{color:var(--blue-30)}
.betpp-v3-page button{font:inherit;margin:0}
.betpp-v3-page :where(h1,h2,h3,h4){font-family:var(--font-sans);text-transform:none}
.betpp-v3-page :focus-visible{outline:2px solid var(--focus-ring,#5892fe);outline-offset:2px}
.betpp-v3-page > *:not(.betpp-v3-bg-aura):not(.betpp-v3-bg-lens):not(.betpp-v3-scrollfab){position:relative;z-index:1}
.betpp-v3-page .betpp-v3-article{display:block}
.betpp-v3-page [data-pinkdot]{background:#ff78d6;box-shadow:0 0 10px #ff78d6}
.betpp-v3-page .betpp-v3-bg-aura{position:fixed;inset:0;z-index:0;background:var(--grad-aura);pointer-events:none}
.betpp-v3-page .betpp-v3-bg-lens{position:fixed;inset:-10% 0 0 0;z-index:0;background:var(--grad-lens);mix-blend-mode:screen;pointer-events:none}
.betpp-v3-page .betpp-v3-cloud{position:absolute;top:0;left:0;width:640px;height:520px;margin:-260px 0 0 -320px;z-index:1;pointer-events:none;opacity:0;filter:blur(30px);will-change:transform}
.betpp-v3-page .betpp-v3-scrollfab{position:fixed;right:28px;bottom:28px;z-index:80;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass-fill-strong);border:1px solid var(--glass-border);color:var(--text-strong);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));box-shadow:var(--shadow-glass-inset),var(--shadow-md);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-med) var(--ease-emphasis)}
.betpp-v3-page .betpp-v3-scrollfab:hover{border-color:var(--blue-40);transform:translateY(-3px);box-shadow:var(--shadow-glass-inset),var(--shadow-glow-blue)}
.betpp-v3-page .betpp-v3-scrollfab-icon{transition:transform var(--dur-med) var(--ease-emphasis);transform:rotate(0deg)}
/* article typography */
.betpp-v3-page .betpp-v3-article-content .betpp-v3-h2{margin:56px 0 18px;scroll-margin-top:110px;font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:400;line-height:1.2;letter-spacing:-0.025em;color:var(--text-strong);text-wrap:balance}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-callout{margin:0 0 12px;padding:clamp(20px,2.4vw,30px);border-radius:16px;background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass-inset);background:linear-gradient(120deg, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%), var(--glass-fill)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-ul{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-li{position:relative;padding-left:22px;font-size:clamp(0.98rem,1.08vw,1.05rem);line-height:1.65;color:var(--text-body)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-bullet{position:absolute;left:4px;top:0.72em;width:6px;height:6px;border-radius:50%;background:var(--blue-30)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-sup{font-size:0.5em;line-height:0;vertical-align:baseline;position:relative;top:-0.72em;margin-left:0.06em;font-weight:inherit}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-p{margin:0 0 20px;font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.75;color:var(--text-body);text-wrap:pretty}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-fig{margin:34px 0 38px}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-figbox{border-radius:16px;overflow:hidden;background:radial-gradient(90% 80% at 50% 62%, rgba(46,40,78,0.55) 0%, rgba(14,14,26,0) 70%), linear-gradient(180deg, rgba(10,10,18,0.72) 0%, rgba(14,13,24,0.74) 100%);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass-inset);padding:clamp(16px,2.4vw,28px)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-figcap{margin-top:12px;font-size:0.86rem;line-height:1.5;color:var(--text-muted)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-strong{font-weight:400;color:var(--text-strong)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-h3{margin:34px 0 12px;font-size:clamp(1.12rem,1.4vw,1.28rem);font-weight:400;line-height:1.3;letter-spacing:-0.015em;color:var(--text-strong)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-h4{margin:24px 0 8px;font-size:1.02rem;font-weight:400;letter-spacing:-0.01em;color:var(--text-strong)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quote{margin:38px 0;padding:clamp(24px,3vw,38px);border-radius:16px;background:var(--glass-fill);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass-inset)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quotetext{font-style:italic;margin:0;font-size:clamp(1.12rem,1.6vw,1.38rem);font-weight:300;line-height:1.55;letter-spacing:-0.01em;color:var(--text-strong);text-wrap:pretty}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quotecap{display:flex;align-items:center;gap:12px;margin-top:22px}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quoteimg{width:40px;height:40px;border-radius:50%;object-fit:cover}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quotename{display:block;font-size:0.95rem;color:var(--text-strong)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quoterole{display:block;margin-top:2px;font-size:0.84rem;color:var(--text-muted)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-link{color:var(--blue-30);text-decoration:underline;text-underline-offset:3px}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-faq{margin:6px 0 28px;border-radius:10px;overflow:hidden;background:rgba(3,4,5,0.50);border:1px solid var(--border-subtle);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));box-shadow:var(--shadow-lg)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-details{border-top:1px solid var(--border-subtle)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(18px,2.2vw,28px);cursor:pointer;list-style:none;font-size:1.06rem;color:var(--text-strong)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-q{min-width:0}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-plus{flex:none;font-size:1.4rem;line-height:1;color:var(--text-muted);transition:transform var(--dur-med) var(--ease-emphasis)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-answer{padding:0 clamp(18px,2.2vw,28px) 20px}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-refp{display:grid;grid-template-columns:34px minmax(0,1fr);margin:0 0 10px;font-size:0.86rem;line-height:1.55;color:var(--text-muted)}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-reftext{overflow-wrap:anywhere}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-callout .betpp-v3-ul{margin:0}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quotetext p{margin:0}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-quotename{font-style:normal}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-figbox svg{display:block;width:100%;height:auto}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-reflink{color:inherit}
.betpp-v3-page .betpp-v3-article-content table{width:100%;border-collapse:collapse}
.betpp-v3-page .betpp-v3-article-content .betpp-v3-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.betpp-v3-page .betpp-v3-article-content :where(h2,h3,h4)[id]{scroll-margin-top:110px}
/* spacing before footer */
.betpp-v3-page > *:last-child,.betpp-v3-page .betpp-v3-related-posts{padding-bottom:120px}
@media (max-width:1024px){.betpp-v3-page > *:last-child,.betpp-v3-page .betpp-v3-related-posts{padding-bottom:80px}}
@media (max-width:767px){.betpp-v3-page > *:last-child,.betpp-v3-page .betpp-v3-related-posts{padding-bottom:60px}}
@media (min-width:2200px){.betpp-v3-page{font-size:18px}}
@media (prefers-reduced-motion:reduce){.betpp-v3-page *{animation:none!important;transition:none!important}}
/* print */
@media print{
.betpp-v3-preloader,.sdhf-header,.sdhf-footer,.betpp-v3-scrollfab,.betpp-v3-page [data-arttoc],.betpp-v3-page .betpp-v3-toc-mobile,.betpp-v3-page .betpp-v3-bg-aura,.betpp-v3-page .betpp-v3-bg-lens,.betpp-v3-page .betpp-v3-related-posts{display:none!important}
body.betpp-v3-body,.betpp-v3-page,.betpp-v3-page *{background:#fff!important;color:#000!important;box-shadow:none!important;backdrop-filter:none!important}
.betpp-v3-page .betpp-v3-article-body{display:block!important}
.betpp-v3-page .betpp-v3-reflink::after{content:" (" attr(href) ")"}
.betpp-v3-page .betpp-v3-details{display:block}.betpp-v3-page .betpp-v3-details > *{display:block!important}
}