/* Sphaera Research, final Productivity Index beta results */
:root { --br-yellow:#FEF991; --br-border:rgba(255,255,255,.14); --br-muted:#A9A9A9; }
body { background:#0B0B0B; }
.br-hero { position:relative; padding:clamp(140px,16vw,210px) 0 0; border-bottom:1px solid var(--br-border); overflow:hidden; background:radial-gradient(ellipse at 80% 34%,rgba(255,255,255,.065),transparent 48%),#0b0b0b; }
.br-back,.br-kicker,.br-meta,.br-stat-caption,.br-baseline span,.br-three-figs small,.br-pixel-column small,.br-pixel-note,.br-steps small,.br-legend,.br-kpis small,.br-pilot-totals small,.br-notes>div>span,.br-modules a>span { font:500 10px/1.65 var(--mono); letter-spacing:.09em; }
.br-back { display:inline-block;color:#b1b1b1;margin-bottom:60px;transition:color .2s; }
.br-back:hover,.br-back:focus-visible { color:var(--br-yellow); }
.br-kicker { color:var(--br-yellow); margin:0 0 26px; }
.br-hero-grid { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:clamp(36px,5vw,90px);align-items:end; padding-bottom:70px; }
.br-hero h1,.br-outro h2 { font:600 clamp(48px,6vw,106px)/1.04 var(--sans);letter-spacing:-.067em;margin:0 0 34px; }
.br-hero h1 span,.br-outro h2 span { color:#777; }
.br-intro { font:400 clamp(15px,1.5vw,19px)/1.8 var(--sans); color:#dedede; max-width:640px; }
.br-context,.br-body { font:400 15px/1.9 var(--sans); color:var(--br-muted);max-width:790px; }
.br-context { margin:20px 0 0; }
.br-hero-stat { border:1px solid var(--br-border); background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.013)); padding:clamp(22px,3vw,39px); }
.br-stat-caption { color:#d1d1d1; margin-bottom:36px; }
.br-baseline { display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:10px; }
.br-baseline span { color:var(--br-muted); }
.br-baseline strong { font:500 32px/1 var(--mono); letter-spacing:-.07em; }
.br-baseline-now { margin-top:28px; }
.br-big-bar { height:7px;background:#292929; }
.br-big-bar span { display:block;height:100%;background:#757575; }
.br-big-bar-now span { background:#f0f0f0; }
.br-delta { display:block;font:600 clamp(40px,4.2vw,62px)/1 var(--sans);letter-spacing:-.05em;color:var(--br-yellow);margin-top:40px; }
.br-hero-stat>small { display:block;color:#aaa;font:400 11px/1.7 var(--mono);margin-top:11px; }
.br-meta { border-top:1px solid var(--br-border);padding:21px 0;display:flex;gap:36px;flex-wrap:wrap;color:#aaa; }
.br-section { padding:clamp(75px,9vw,135px) 0;border-bottom:1px solid var(--br-border); }
.br-alt { background:#111; }
.br-section-head { margin-bottom:33px; }
.br-section-head h2 { font:500 clamp(36px,4.3vw,67px)/1.12 var(--sans);letter-spacing:-.06em;margin:0; }
.br-section-head h2 span { color:#888; }
.br-body { margin:0 0 50px; }
.br-chart-area { display:grid;grid-template-columns:1fr .85fr;gap:clamp(28px,6vw,88px);border-top:1px solid var(--br-border);padding-top:42px; }
.br-switch { display:inline-flex;border:1px solid rgba(255,255,255,.24);margin-bottom:45px; }
.br-switch button { padding:14px 17px;border:0;background:transparent;color:#aaa;font:500 10px var(--mono);letter-spacing:.045em;transition:background .2s,color .2s; }
.br-switch button[aria-pressed=true] { background:#e8e8e8;color:#0b0b0b; }
.br-switch button:focus-visible { outline:2px solid var(--br-yellow);outline-offset:2px; }
.br-three-figs { display:flex;gap:clamp(23px,3.5vw,54px);flex-wrap:wrap; }
.br-three-figs>div { display:grid;gap:12px; }
.br-three-figs small,.br-pilot-totals small { color:#a1a1a1; }
.br-three-figs strong { font:500 clamp(26px,3.2vw,45px)/1.1 var(--mono);letter-spacing:-.075em; }
.br-highlight { color:var(--br-yellow)!important; }
.br-chart-note { color:var(--br-muted);font-size:13px;line-height:1.8;max-width:500px;margin-top:32px; }
.br-pixel-panel { min-width:0;border-left:1px solid var(--br-border);padding-left:clamp(25px,4vw,66px); }
.br-pixel-columns { display:flex;align-items:end;gap:clamp(25px,4vw,70px);min-height:258px; }
.br-pixel-column { display:flex;align-items:center;flex-direction:column;gap:17px; }
.br-pixel-column small,.br-pixel-note { color:#999; }
.br-pixel-grid { display:grid;grid-template-columns:repeat(4,19px);gap:5px;align-content:end; }
.br-pixel-grid i { display:block;width:19px;height:19px;background:#e2e2e2; }
.br-pixel-grid i.br-partial { background:#7c7c7c; }
.br-pixel-grid i.br-pixel-gap { visibility:hidden; }
.br-pixel-note { margin:24px 0 0;font-size:9px;line-height:1.9; }
.br-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #777; }
.br-steps>div { padding:32px 28px 0 0; }
.br-steps>div+div { padding-left:28px;border-left:1px solid var(--br-border); }
.br-steps small { color:var(--br-yellow); }
.br-steps h3,.br-notes h3 { font:500 22px/1.3 var(--sans);margin:19px 0 14px; }
.br-steps p,.br-notes p,.br-modules p { font:400 13px/1.9 var(--sans);color:#aaa; }
.br-legend { display:flex;gap:25px;flex-wrap:wrap;color:#aaa;margin-bottom:25px; }
.br-legend i { display:inline-block;width:13px;height:10px;margin-right:9px; }
.br-legend-before { background:#707070; }
.br-legend-after { background:#eee; }
.br-kpis { display:grid;gap:0;border-top:1px solid var(--br-border); }
.br-kpi { display:grid;grid-template-columns:240px 1fr 94px;gap:24px;align-items:center;padding:23px 0;border-bottom:1px solid var(--br-border); }
.br-kpi strong { font:500 13px/1.3 var(--sans); }
.br-kpi small { display:block;color:#858585;font-size:9px;letter-spacing:0;margin-top:5px; }
.br-kpi-bars { display:grid;gap:8px; }
.br-kpi-line { position:relative;height:16px;background:#262626; }
.br-kpi-line>span { display:block;height:100%;background:#747474; }
.br-kpi-line.br-kpi-after>span { background:#ededed; }
.br-kpi-line>em { position:absolute;top:0;right:7px;font:500 10px/16px var(--mono);font-style:normal;color:#fff;text-shadow:0 1px 3px #000; }
.br-kpi-percent { text-align:right;color:var(--br-yellow);font:500 16px var(--mono); }
.br-pilot-totals { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px; }
.br-pilot-totals>div { display:grid;gap:12px; }
.br-pilot-totals strong { font:500 clamp(26px,3vw,39px)/1 var(--mono); }
.br-notes { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px; }
.br-notes>div { padding:28px;border:1px solid var(--br-border);background:rgba(255,255,255,.012); }
.br-notes>div>span { color:var(--br-yellow); }
.br-notes h3 { margin:19px 0 8px; }
.br-notes p { margin:0; }
.br-modules { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.br-modules>a { padding:28px 22px 30px;border:1px solid var(--br-border);min-width:0;transition:background .2s,border-color .2s; }
.br-modules>a:hover,.br-modules>a:focus-visible { background:rgba(254,249,145,.06);border-color:var(--br-yellow); }
.br-modules>a>span { color:#888; }
.br-modules h3 { font:500 clamp(19px,2.25vw,30px) var(--sans);margin:28px 0 16px; }
.br-modules p { margin:0; }
.br-outro { padding:clamp(85px,10vw,150px) 0;background:radial-gradient(circle at 78% 10%,rgba(255,255,255,.055),transparent 43%); }
.br-outro h2 { max-width:990px; }
.br-outro p:not(.br-kicker) { font:400 16px/1.9 var(--sans);max-width:670px;color:#b7b7b7;margin:0 0 40px; }
.br-cta { display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:#eee;color:#0b0b0b;padding:19px 24px;font:600 11px var(--mono);min-width:245px;transition:background .2s; }
.br-cta:hover,.br-cta:focus-visible { background:var(--br-yellow);color:#0b0b0b; }
@media(max-width:1050px) { .br-hero-grid { grid-template-columns:1fr; } .br-hero-stat { max-width:560px; } .br-modules { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .br-chart-area { grid-template-columns:1fr; } .br-pixel-panel { border-left:0;border-top:1px solid var(--br-border);padding:28px 0 0; } .br-steps { grid-template-columns:1fr; } .br-steps>div,.br-steps>div+div { border-left:0;border-top:1px solid var(--br-border);padding:24px 0; } .br-kpi { grid-template-columns:1fr 95px;gap:14px; } .br-kpi-bars { grid-column:1/-1;grid-row:2; } .br-notes { grid-template-columns:1fr; } .br-pilot-totals { grid-template-columns:1fr 1fr; } }
@media(max-width:500px) { .br-hero { padding-top:145px; } .br-back { margin-bottom:34px; } .br-hero h1 { font-size:clamp(37px,10vw,54px); } .br-meta { gap:12px 20px; } .br-three-figs { gap:25px; } .br-three-figs strong { font-size:27px; } .br-kpi-percent { font-size:15px; } .br-pilot-totals { grid-template-columns:1fr; } .br-modules { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .br-switch button,.br-modules a,.br-cta { transition:none; } }


/* Beta results motion, original count-ups, growth bars and pixel-stair animations. */
.br-big-bar > span { width:0; transition:width 1.45s cubic-bezier(.18,.78,.22,1); }
.br-hero-stat { position:relative; overflow:hidden; }
.br-hero-stat::before {
  content:""; position:absolute; left:-100%; top:0; bottom:0; width:65%;
  pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.045),transparent);
  transform:skewX(-13deg);
  animation:br-glass-sweep 8s ease-in-out 1.6s infinite;
}
@keyframes br-glass-sweep { 0%,70%,100% {left:-100%;} 85% {left:150%;} }
.br-pixel-grid i {transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1),background .25s ease;}
.br-pixel-grid i.br-pixel-hidden {opacity:0;transform:translateY(13px) scale(.62);}
.br-pixel-grid i:not(.br-pixel-hidden):not(.br-pixel-gap) {box-shadow:0 0 13px rgba(255,255,255,.055);}
.br-kpi-line>span {width:0; transition:width 1.35s cubic-bezier(.2,.74,.2,1);}
.br-kpi:nth-child(2) .br-kpi-line>span {transition-delay:.1s;}
.br-kpi:nth-child(3) .br-kpi-line>span {transition-delay:.2s;}
.br-kpi:nth-child(4) .br-kpi-line>span {transition-delay:.3s;}
.br-kpi:nth-child(5) .br-kpi-line>span {transition-delay:.4s;}
.br-number-in {animation:br-count-flash .7s ease both;}
@keyframes br-count-flash {0%{filter:brightness(.72)} 48%{filter:brightness(1.3)}100%{filter:brightness(1)}}
.br-will-reveal {opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--br-delay,0ms);}
.br-will-reveal[data-br-reveal="right"] {transform:translateX(33px);}
.br-will-reveal.br-visible {opacity:1;transform:none;}
.br-steps>div {position:relative;}
.br-steps>div::before {content:""; position:absolute;top:-2px;left:0; width:0;height:2px;background:#FEF991;transition:width .85s ease;transition-delay:var(--br-delay,0ms);}
.br-steps>div.br-visible::before {width:100%;}
.br-notes>div,.br-modules>a {transition-property:opacity,transform,border-color,background;}
.br-notes>div:hover {border-color:rgba(254,249,145,.45);}
.br-outro .br-cta {transition:background .25s ease,transform .3s ease;}
.br-outro .br-cta:hover {transform:translateY(-3px);}
@media (prefers-reduced-motion:reduce) {
 .br-hero-stat::before {animation:none;}
 .br-will-reveal {opacity:1;transform:none;transition:none;}
 .br-big-bar>span,.br-pixel-grid i,.br-kpi-line>span,.br-steps>div::before {transition:none;}
 .br-number-in {animation:none;}
}

/* KPI bar value contrast: brand yellow digits on an opaque dark label,
   legible against both the dark track and the animated light fill. */
.br-kpi-line > em,
.br-kpi-line.br-kpi-after > em {
  color: #FEF991 !important;
  background: #0B0B0B;
  text-shadow: none;
  border: 1px solid rgba(254,249,145,.24);
  height: 16px;
  line-height: 14px;
  padding: 0 5px;
  right: 4px;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.br-kpi-line { isolation: isolate; }
.br-kpi-line > span { position: relative; z-index: 0; }