/* Site type & width, matched to the measured live preview. System font only. Loaded last so it wins. */
:root {
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-inter: var(--sys); --font-outfit: var(--sys);
  --ds-font-display: var(--sys); --ds-font-sans: var(--sys);
  --font-display: var(--sys); --font: var(--sys);
  --container: 1180px; --gutter: 24px; --header-h: 73px;
  --ds-type-h2-size: clamp(34px, 4vw, 48px);
  --ds-type-closing-size: clamp(48px, 6vw, 76px);
}
@media (max-width: 640px) { :root { --gutter: 16px; --ds-type-h2-size: 27px; } }

body { font-family: var(--sys); font-weight: 400; font-size: 16px; line-height: 1.5; }

h1, h2, h3, h4 { font-family: var(--sys); font-weight: 600; letter-spacing: -0.03em; }
h2 { max-width: 720px; margin-inline: auto; }
.btn, button { font-weight: 500; font-size: 14px; }
.b2b-cta { font-weight: 500; font-size: 15px; }
.b2b-stats .lbl { font-family: var(--sys); letter-spacing: normal; text-transform: none; font-size: 13px; font-weight: 500; }
.primary-nav a { font-size: 14px; line-height: 21px; font-weight: 500; }
.site-footer a, footer a { font-size: 12px; font-weight: 400; }

/* homepage hero: H1 66px/1.0, weight 600, -0.03em; subtitle 18px/1.55, weight 500, max 610px */
.home { --h1: clamp(42px, 5vw, 66px); --lede: 18px; --cta-fs: 15px; }
.b2b-copy h1 { font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.b2b-lede { max-width: 610px; font-weight: 500; line-height: 1.55; white-space: normal !important; }
@media (max-width: 640px) { .home { --h1: 28px; --lede: 15px; } }
/* embedded sections ship their own heading rules; keep headings on the spec */
[data-section-root] h1, [data-section-root] h2, [data-section-root] h3 { font-family: var(--sys) !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
/* hero heading, combined spec: one line on desktop, accent on its own line on phones */
.b2b-copy h1 { font-size: clamp(42px, 5vw, 66px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: #1D1D1F; }
.b2b-copy h1 .b2b-line { display: inline-block; }
.b2b-copy h1 .b2b-line + .b2b-line { margin-left: 0.18em; }
.b2b-copy h1 .accent { color: #0066CC; }
@media (max-width: 640px) {
  .b2b-copy h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
  .b2b-copy h1 .b2b-line { display: block; }
  .b2b-copy h1 .b2b-line + .b2b-line { margin: 2px 0 0; }
}
/* the 6labs mark sits at the centre of the stage, on the line where players turn into twins */
.b2b-mark-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; border-radius: 50%; background: rgb(249 250 251); box-shadow: 0 0 0 8px rgb(249 250 251), 0 0 30px 10px rgb(0 102 204 / .2); }
/* headline at the top, the animation in the middle, numbers centred under each crowd, the call at the foot */
.b2b-copy-top { padding: calc(73px + clamp(16px, 4vh, 48px)) 20px 0; }
@media (min-width: 768px) { .b2b-copy-top { padding-top: calc(89px + clamp(16px, 4vh, 48px)); } }
.b2b-top { padding-top: clamp(8px, 2vh, 24px) !important; }
.b2b-copy-foot { padding-top: clamp(8px, 2vh, 24px); }
.b2b-copy-foot .b2b-actions { margin-top: 0; }
.b2b-stats .side, .b2b-stats .side.right { justify-self: center; text-align: center; }
.b2b-stats .side canvas, .b2b-stats .side.right canvas { margin-inline: auto; }
.b2b-stats .lbl { font-size: 14px; color: #1D1D1F; }

/* unified Apple blue for text, links and buttons (canvas animations keep their own blue) */
:root { --ds-color-accent: #0066CC; --ds-focus-color: #0066CC; --b2b-blue: #0066CC; }
.closing h2 { margin-left: auto; margin-right: auto; }

/* ===== Design system v1 — single source of truth (Home, How it works, Case study, Beyond gaming) ===== */
:root {
  --bg:#F5F5F7; --surface:#FFFFFF; --ink:#1D1D1F; --muted:#6E6E73;
  --line:rgba(29,29,31,.14); --line-soft:rgba(29,29,31,.09);
  --dark:#1D1D1F; --on-dark:#F5F5F7; --on-dark-muted:rgba(245,245,247,.6);
  --accent:#0066CC; --accent-hover:#006FE6; --accent-soft:#EBF5FF; --accent-on-dark:#9DBAFF;
  --focus-ring:rgba(0,102,204,.55); --hero-top:#E9ECF4; --hero-mid:#EEF0F5;
  --danger:#C8363A; --danger-soft:#FEF2F2;
  --chart-blue:#0066CC; --chart-amber:#D29A1E; --chart-green:#2AA876; --chart-violet:#8B5CF6;
  --chart-magenta:#C7399A; --chart-red:#E0484A; --chart-grey:#9A9AA3;
  --shadow-card:0 1px 2px rgba(29,29,31,.05), 0 12px 28px -18px rgba(29,29,31,.22);
  --shadow-hover:0 10px 24px -14px rgba(29,29,31,.55);
  --w-regular:400; --w-medium:500; --w-bold:600;
  --fs-display:clamp(40px,5vw,64px); --lh-display:1.05; --ls-display:-0.03em;
  --fs-h2:clamp(30px,3.6vw,44px); --lh-h2:1.12; --ls-h2:-0.02em;
  --fs-h3:20px; --lh-h3:1.25; --ls-h3:-0.015em;
  --fs-lede:18px; --lh-lede:1.5; --ls-lede:-0.01em;
  --fs-body:16px; --lh-body:1.55; --fs-small:14px; --lh-small:1.5;
  --fs-caption:13px; --lh-caption:1.4; --fs-label:12px; --lh-label:1.2; --ls-label:0.08em; --fs-button:15px;
  --page-max:1180px; --container:1180px; --section-y:96px;
  --measure-h2:720px; --measure-lede:600px; --measure-body:680px;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --ds-type-h2-size:var(--fs-h2); --ds-type-closing-size:var(--fs-display);
  --ds-color-accent:var(--accent); --b2b-blue:var(--accent);
}
@media (max-width:640px){ :root{ --fs-display:30px; --fs-h2:26px; --fs-h3:18px; --fs-lede:16px; --fs-body:15px; --gutter:16px; --section-y:64px; } }

body { background:var(--bg); color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-regular); }
h1, [data-section-root] h1, .closing h2 { font-size:var(--fs-display) !important; line-height:var(--lh-display) !important; letter-spacing:var(--ls-display) !important; font-weight:600 !important; color:var(--ink); }
h2, [data-section-root] h2 { font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2) !important; font-weight:600 !important; color:var(--ink); max-width:var(--measure-h2); }
h3, [data-section-root] h3 { font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3) !important; font-weight:600 !important; }
.b2b-copy h1 { color:var(--ink); } .b2b-copy h1 .accent, h1 .accent, h2 .accent { color:var(--accent); }
.b2b-lede, [data-section-root] .lede { font-size:var(--fs-lede); line-height:var(--lh-lede); letter-spacing:var(--ls-lede); font-weight:400; color:var(--muted); max-width:var(--measure-lede); }
.btn, button, .b2b-cta { font-size:var(--fs-button); font-weight:500; }
a { color:inherit; } [data-section-root] p a, .site-footer a:hover { color:var(--accent); }
.eyebrow, [data-section-root] .eyebrow { font-size:var(--fs-label); line-height:var(--lh-label); letter-spacing:var(--ls-label); font-weight:600; text-transform:uppercase; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.site-footer, footer { color:var(--muted); }
.home .b2b-grid { display: none !important; }
/* Population: heading + text stacked on the left, number on the right, filter pills below */
#pick .sec-head, #ask .sec-head, #compare .sec-head { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "h n" "d n"; gap: 12px 48px; align-items: end; }
#pick .sec-head .desc-col, #ask .sec-head .desc-col, #compare .sec-head .desc-col { display: contents; }
#pick .sec-head h2, #ask .sec-head h2, #compare .sec-head h2 { grid-area: h; margin: 0; max-width: none; }
#pick .sec-head .desc, #ask .sec-head .desc, #compare .sec-head .desc { grid-area: d; padding-top: 0; max-width: 600px; }
#pick .sec-head .count, #ask .sec-head .count { grid-area: n; text-align: right; margin: 0; }
#pick .sec-head .count .n, #ask .sec-head .count .n { margin-left: auto; }
@media (max-width: 800px) {
  #pick .sec-head, #ask .sec-head, #compare .sec-head { grid-template-columns: 1fr; grid-template-areas: "h" "d" "n"; }
  #pick .sec-head .count, #ask .sec-head .count { text-align: left; margin-top: 8px; }
  #pick .sec-head .count .n, #ask .sec-head .count .n { margin-left: 0; }
}
/* Twin: the "Today" tag sits on its own line above the text it qualifies, so it no longer hangs beside it */
.desc.status { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.desc.status b { margin-top: 0; }
/* headers whose heading would wrap beside the text: heading full width, text underneath */
.sec-head.stack { grid-template-columns: minmax(0,1fr); gap: 12px; }
.sec-head.stack h2 { max-width: none; }
.sec-head.stack .desc, .sec-head.stack .desc-col { padding-top: 0; max-width: var(--measure-body); }
/* Use case title: let it use the full page width so it sits on two lines, not four */
.uc-title { max-width: none !important; font-size: var(--fs-display) !important; }
.uc-title > span { display: block; }
/* Home load: only the logo at first; both counts and their labels fade in together (space held, nothing shifts) */
.b2b-stats .side { opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.b2b-stats.stats-in .side { opacity: 1; transform: none; }

/* Home hero mark. While data loads it twitches like the loader; once counts arrive (.hero-ready) the arcs lock in
   with a single ring pulse, then the mark stays still and only its glow breathes slowly — "running", not "loading" */
.hero-ready .b2b-mark-center .logo-arc-0, .hero-ready .b2b-mark-center .logo-arc-1, .hero-ready .b2b-mark-center .logo-arc-2 { animation: none !important; }
.hero-ready .b2b-mark-center { animation: hero-mark-lock .7s cubic-bezier(.2,.8,.2,1) both, hero-mark-glow 5s ease-in-out .7s infinite; }
.b2b-mark-center::after { will-change: transform, opacity; content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgb(0 102 204 / .55); opacity: 0; pointer-events: none; }
.hero-ready .b2b-mark-center::after { animation: hero-mark-ring 1.3s cubic-bezier(.22,.61,.36,1) .05s both; }
@keyframes hero-mark-lock { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(.9); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes hero-mark-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes hero-mark-glow {
  0%, 100% { box-shadow: 0 0 0 8px rgb(249 250 251), 0 0 24px 8px rgb(0 102 204 / .14); }
  50% { box-shadow: 0 0 0 8px rgb(249 250 251), 0 0 40px 14px rgb(0 102 204 / .26); }
}

/* reduced motion: no twitch, pulse or ring; "ready" is still marked by the glow fading up and staying */
@media (prefers-reduced-motion: reduce) {
  .b2b-mark-center .logo-arc-0, .b2b-mark-center .logo-arc-1, .b2b-mark-center .logo-arc-2,
  .hero-ready .b2b-mark-center, .hero-ready .b2b-mark-center::after { animation: none !important; }
  .b2b-mark-center { box-shadow: 0 0 0 8px rgb(249 250 251), 0 0 0 0 rgb(0 102 204 / 0); transition: box-shadow .8s ease; }
  .hero-ready .b2b-mark-center { box-shadow: 0 0 0 8px rgb(249 250 251), 0 0 34px 12px rgb(0 102 204 / .24); }
}