/* ═══════════════════════════════════════════════════════════════════════
   SIGNAL — Stylesheet
   Extracted from index.html (single-file v33+) on 13 May 2026.
   This file is the verbatim contents of the former inline <style> block.
   No edits to selectors, properties or values were made during extraction.
   Token migration and light-mode dualisation happen in later passes.
   ═══════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  /* v35 Pass 1: variables repointed to v3 Premium palette.
     Variable NAMES kept identical to v34 so existing CSS resolves unchanged. */
  --navy:#060810;--card:rgba(255,255,255,.022);
  --blue:#3B66E5;--purple:#7B4DE0;--teal:#14C8B8;
  --green:#34D399;--amber:#F4C76B;--red:#FB7185;
  --text:#ECEDEF;--muted:#BCC0C8;--muted2:#80858F;
  --border:rgba(255,255,255,.06);
  --safe-top:env(safe-area-inset-top,44px);
  --safe-bottom:env(safe-area-inset-bottom,20px);

  /* v35 Pass 2: v3 Premium named tokens, additive only.
     These let us paste v3's overview CSS verbatim without rewriting every var(). */
  --bg-deep:#060810; --bg-mid:#0A0D17; --bg-lift:#0E1220;
  --surface-1:rgba(255,255,255,.022);
  --surface-2:rgba(255,255,255,.038);
  --surface-3:rgba(255,255,255,.06);
  --line-1:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.20);
  --ink-pure:#FFFFFF; --ink:#ECEDEF; --ink-soft:#BCC0C8;
  --ink-muted:#80858F; --ink-faint:#54585F; --ink-fade:#393C42;
  --sig-purple:#7B4DE0; --sig-blue:#3B66E5; --sig-teal:#14C8B8;
  --sig-teal-deep:#0EA295;
  --sig-gradient:linear-gradient(180deg,#7B4DE0 0%,#3B66E5 50%,#14C8B8 100%);
  --sig-gradient-h:linear-gradient(90deg,#7B4DE0 0%,#3B66E5 50%,#14C8B8 100%);
  --positive:#34D399; --watch:#F4C76B; --negative:#FB7185;
  --font-body:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:'Newsreader',Georgia,serif;
}
html,body{height:100%;background:#000;font-family:'Inter',sans-serif;color:var(--text)}
/* Prevent iOS font inflation */
* { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Chat screen keyboard handling */
#sc-chat { padding-bottom:0 !important; }
#sc-chat .chat-wrap { height:100%; }
/* ── APP SHELL ── */
.app{
width:100%;max-width:430px;height:100dvh;min-height:100dvh;
margin:0 auto;
background:
radial-gradient(ellipse 500px 350px at 15% 8%,rgba(37,99,235,.09) 0%,transparent 60%),
radial-gradient(ellipse 400px 500px at 88% 55%,rgba(124,58,237,.07) 0%,transparent 60%),
radial-gradient(ellipse 500px 300px at 50% 95%,rgba(0,212,200,.04) 0%,transparent 60%),
#060810;
position:relative;overflow:hidden;
display:flex;flex-direction:column;
}
/* ── TOPBAR ── */
.topbar{
padding:calc(var(--safe-top) + 2px) 14px 10px;
display:flex;align-items:center;justify-content:space-between;gap:8px;
background:#060810;
border-bottom:1px solid var(--border);
flex-shrink:0;position:relative;z-index:30;
}
.hamburger{
width:44px;height:44px;border-radius:10px;
background:rgba(255,255,255,.04);border:1px solid var(--border);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;cursor:pointer;flex-shrink:0;transition:background .15s;
}
.hamburger:active{background:rgba(255,255,255,.08)}
.ham-line{width:16px;height:1.5px;background:var(--muted);border-radius:1px;transition:all .25s}
.logo-center{flex:1;display:flex;align-items:center;justify-content:center}
.logo-text{font-family:'Newsreader',Georgia,serif;font-size:17px;font-weight:700;letter-spacing:-.3px}
.logo-text span{color:var(--purple)}
.co-pill{
text-align:right;flex-shrink:0;max-width:100px;
}
.co-name{font-size:12.5px;font-weight:500;color:var(--text);letter-spacing:.1px}
.co-date{font-size:10.5px;color:var(--muted2);margin-top:1px;letter-spacing:.5px}
/* ── SCREENS ── */
.screens{flex:1;position:relative;overflow:hidden;min-height:0}
.screen{
position:absolute;inset:0;
overflow-y:auto;-webkit-overflow-scrolling:touch;
opacity:0;pointer-events:none;
transform:translateX(30px);
transition:opacity .25s ease,transform .25s ease;
padding-bottom:calc(72px + var(--safe-bottom));
}
.screen.active{opacity:1;pointer-events:all;transform:translateX(0)}
.screen.slide-back{transform:translateX(-30px)}
/* ── BOTTOM NAV ── */
.bottomnav{
display:flex;
background:rgba(9,12,22,.95);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border-top:1px solid var(--border);
padding:8px 0 calc(var(--safe-bottom) + 4px);
flex-shrink:0;position:relative;z-index:30;
}
.nav-tab{
flex:1;display:flex;flex-direction:column;
align-items:center;gap:3px;cursor:pointer;
padding:4px 0;position:relative;
}
.nav-tab.active::before{
content:'';position:absolute;top:-8px;left:25%;right:25%;
height:1px;
background:linear-gradient(90deg,transparent,var(--blue),transparent);
}
.nav-icon{font-size:22px;line-height:1}
.nav-lbl{font-size:11.5px;letter-spacing:.4px;color:var(--muted2);font-weight:400}
.nav-tab.active .nav-lbl{color:var(--blue)}
/* ── DRAWER ── */
.drawer-overlay{
position:absolute;inset:0;
background:rgba(0,0,0,.6);
z-index:40;
opacity:0;pointer-events:none;
transition:opacity .25s ease;
}
.drawer-overlay.open{opacity:1;pointer-events:all}
.drawer{
position:absolute;top:0;bottom:0;left:0;
width:82%;max-width:320px;
background:linear-gradient(160deg,#0D1428 0%,#0B1020 100%);
border-right:1px solid rgba(37,99,235,.15);
transform:translateX(-105%);
transition:transform .28s cubic-bezier(.4,0,.2,1);
display:flex;flex-direction:column;
overflow:hidden;
}
.drawer-overlay.open .drawer{transform:translateX(0)}
/* Drawer header */
.drawer-head{
padding:calc(var(--safe-top) + 12px) 20px 16px;
border-bottom:1px solid var(--border);
background:rgba(37,99,235,.05);
}
.drawer-close{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:16px;
}
.drawer-close-btn{
width:44px;height:44px;border-radius:9px;
background:rgba(255,255,255,.05);border:none;
display:flex;align-items:center;justify-content:center;
font-size:16px;color:var(--muted);cursor:pointer;
}
.drawer-score-row{
display:flex;align-items:center;gap:14px;
}
.drawer-ring{flex-shrink:0}
.drawer-score-info{}
.drawer-score-num{
font-family:'Newsreader',Georgia,serif;
font-size:44px;font-weight:800;
letter-spacing:-2px;line-height:1;color:#fff;
}
.drawer-score-label{font-size:11px;letter-spacing:2px;color:var(--muted2);margin-bottom:3px}
.drawer-rating{
font-size:11.5px;font-weight:600;letter-spacing:1px;
color:#60A5FA;margin-top:2px;
}
.drawer-rank{font-size:11px;color:var(--muted2);margin-top:1px}
.drawer-sxe-strip{
display:flex;gap:6px;margin-top:10px;
}
.drawer-sxe-chip{
flex:1;text-align:center;padding:5px 4px;
border-radius:8px;border:1px solid var(--border);
background:rgba(255,255,255,.02);
}
.drawer-chip-label{font-size:9.5px;letter-spacing:1.5px;color:var(--muted2);margin-bottom:2px}
.drawer-chip-val{font-family:'Newsreader',Georgia,serif;font-size:14px;font-weight:700;letter-spacing:-.5px}
/* Drawer nav */
.drawer-nav{flex:1;overflow-y:auto;padding:8px 0}
.drawer-section-label{
font-size:10px;letter-spacing:2.5px;color:var(--muted2);
padding:12px 20px 4px;font-weight:500;text-transform:uppercase;
}
.drawer-item{
display:flex;align-items:center;gap:12px;
padding:12px 20px;cursor:pointer;
transition:background .15s;position:relative;
}
.drawer-item:active,.drawer-item.active{background:rgba(37,99,235,.08)}
.drawer-item.active::before{
content:'';position:absolute;left:0;top:20%;bottom:20%;
width:2px;background:var(--blue);border-radius:0 1px 1px 0;
}
.drawer-item-icon{
width:34px;height:34px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
font-size:14px;flex-shrink:0;
}
.drawer-item-text{}
.drawer-item-name{font-size:14.5px;font-weight:500;color:var(--text)}
.drawer-item-sub{font-size:12px;color:var(--muted2);margin-top:2px}
.drawer-item-arrow{margin-left:auto;font-size:12px;color:var(--muted2);opacity:.5}
.drawer-divider{height:1px;background:var(--border);margin:4px 20px}
/* Drawer footer */
.drawer-foot{
padding:12px 20px calc(var(--safe-bottom) + 12px);
border-top:1px solid var(--border);
}
.drawer-company-row{
display:flex;align-items:center;gap:10px;
}
.drawer-company-dot{
width:8px;height:8px;border-radius:50%;background:var(--green);
box-shadow:0 0 6px rgba(5,150,105,.5);flex-shrink:0;
}
.drawer-company-name{font-size:13.5px;font-weight:500;color:var(--text)}
.drawer-company-info{font-size:11.5px;color:var(--muted2);margin-top:1px}
/* ── REUSABLE COMPONENTS ── */
.section-head{
display:flex;align-items:center;justify-content:space-between;
padding:18px 20px 8px;
}
.section-label{font-size:10.5px;letter-spacing:2.5px;color:var(--muted2);text-transform:uppercase;font-weight:500}
.section-action{font-size:11.5px;color:var(--blue)}
.card{
background:rgba(255,255,255,.03);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid var(--border);
border-radius:14px;
}
/* ── OVERVIEW SCREEN ── */
.ov-hero{padding:20px 20px 0;text-align:center}
.ov-week{font-size:11px;letter-spacing:3px;color:var(--blue);margin-bottom:16px;font-weight:500;text-transform:uppercase}
.score-ring-wrap{display:flex;justify-content:center;margin-bottom:8px;position:relative}
.score-ring-wrap::after{
content:'';position:absolute;
width:220px;height:220px;border-radius:50%;
background:radial-gradient(circle,rgba(37,99,235,.1) 0%,rgba(124,58,237,.05) 40%,transparent 70%);
top:50%;left:50%;transform:translate(-50%,-50%);
animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.score-meta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.rating-badge{
font-size:12px;letter-spacing:1.5px;font-weight:600;
padding:4px 12px;border-radius:100px;
background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.28);color:#60A5FA;
}
.rank-dot{width:3px;height:3px;border-radius:50%;background:var(--muted2)}
.rank-text{font-size:12px;color:var(--muted2)}
/* Peer benchmark legend under composite ring */
.ring-legend{
display:flex;justify-content:center;gap:14px;
margin-top:8px;
font-size:10px;color:rgba(242,244,247,.55);
font-weight:400;letter-spacing:.2px;
}
.ring-legend-item{display:flex;align-items:center;gap:5px}
.ring-legend-tick{
width:10px;height:2px;border-radius:1px;
display:inline-block;
}
.ring-legend-tick.mid{background:rgba(255,255,255,.5)}
.ring-legend-tick.top{background:rgba(255,255,255,.9);height:2.5px;width:11px}
/* Pillar list */
.pillar-list{padding:0 16px;display:flex;flex-direction:column;gap:7px}
.pillar-card{
background:rgba(255,255,255,.03);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid var(--border);
border-radius:13px;padding:12px 14px 12px 16px;
display:flex;align-items:center;gap:12px;
cursor:pointer;transition:border-color .2s;
position:relative;overflow:hidden;
}
.pillar-card:active{border-color:rgba(37,99,235,.25);transform:scale(.99)}
.p-bar{width:2px;position:absolute;left:0;top:0;bottom:0;border-radius:0 1px 1px 0}
.p-icon{
width:32px;height:32px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-size:13px;flex-shrink:0;
}
.p-body{flex:1;min-width:0}
.p-name{font-size:10.5px;letter-spacing:1.8px;color:var(--muted);font-weight:500;text-transform:uppercase;margin-bottom:1px}
.p-brief{font-size:12.5px;color:rgba(242,244,247,.68);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.p-score{font-family:'Newsreader',Georgia,serif;font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1}
.p-trend{font-size:11px;font-weight:500}
/* Status strip */
.status-strip{margin:12px 16px 0}
.status-row{
display:flex;align-items:center;padding:10px 14px;gap:10px;
position:relative;
}
.status-row+.status-row::before{content:'';position:absolute;top:0;left:14px;right:14px;height:1px;background:var(--border)}
.s-key{font-size:10px;letter-spacing:2px;color:var(--muted2);font-weight:500;text-transform:uppercase;min-width:100px;flex-shrink:0}
.s-val{font-family:'Newsreader',Georgia,serif;font-size:16px;font-weight:700;letter-spacing:-.3px}
.s-tag{font-size:11px;font-weight:500;margin-left:auto;white-space:nowrap}
/* ── SxE HERO CHART (Overview) ── */
.sxe-hero-frame{
margin:12px 16px 0;
padding:18px 16px 16px;
background:linear-gradient(180deg,rgba(124,58,237,.05) 0%,rgba(11,15,26,0) 50%),rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.06);
border-radius:14px;
cursor:pointer;
transition:border-color .25s ease, transform .25s ease;
position:relative;
overflow:hidden;
}
.sxe-hero-frame:hover{border-color:rgba(0,212,200,.18)}
.sxe-hero-frame:active{transform:scale(.995)}
.sxe-hero-eyebrow{
font-family:'Inter',sans-serif;
font-size:11px;
line-height:1.55;
color:rgba(200,215,235,.62);
font-weight:300;
letter-spacing:.1px;
margin:0 2px 14px;
font-style:italic;
}
.sxe-hero-chart-wrap{position:relative;width:100%}
.sxe-hero-chart{display:block;width:100%;height:auto}
.sxe-now-chip{
display:flex;align-items:center;justify-content:center;gap:8px;
margin:10px auto 14px;
padding:6px 12px;
background:rgba(251,146,60,.08);
border:1px solid rgba(251,146,60,.22);
border-radius:999px;
width:fit-content;
}
.sxe-now-chip-band{
font-family:'Inter',sans-serif;font-size:10px;font-weight:600;
letter-spacing:1.4px;text-transform:uppercase;color:#FB923C;
}
.sxe-now-chip-sep{color:rgba(251,146,60,.4);font-size:10px}
.sxe-now-chip-rank{
font-family:'Inter',sans-serif;font-size:10.5px;color:rgba(242,244,247,.78);font-weight:400;
}
.sxe-outcomes{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
margin-top:4px;
}
.sxe-outcome{
padding:11px 12px 12px;
border-radius:10px;
background:rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.05);
position:relative;
}
.sxe-outcome-up{border-left:2px solid #14C8B8}
.sxe-outcome-down{border-left:2px solid rgba(220,38,38,.6)}
.sxe-outcome-head{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.sxe-outcome-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sxe-outcome-dot.up{background:#14C8B8;box-shadow:0 0 8px rgba(0,212,200,.55)}
.sxe-outcome-dot.down{background:#FB7185;box-shadow:0 0 6px rgba(220,38,38,.4)}
.sxe-outcome-label{
font-family:'Inter',sans-serif;font-size:9.5px;
letter-spacing:1.2px;text-transform:uppercase;
color:rgba(200,215,235,.6);font-weight:500;
}
.sxe-outcome-band{
font-family:'Newsreader',Georgia,serif;font-size:17px;font-weight:700;
letter-spacing:-.3px;line-height:1.1;margin-bottom:2px;
}
.sxe-outcome-up .sxe-outcome-band{color:#14C8B8}
.sxe-outcome-down .sxe-outcome-band{color:#F87171}
.sxe-outcome-peer{
font-family:'Inter',sans-serif;font-size:10.5px;
color:rgba(200,215,235,.7);font-weight:300;line-height:1.4;
}
.sxe-method{
margin-top:14px;padding-top:12px;
border-top:1px solid rgba(255,255,255,.05);
font-family:'Inter',sans-serif;font-size:10.5px;
line-height:1.6;color:rgba(170,190,215,.62);font-weight:300;
}
.sxe-explore{
margin-top:10px;text-align:right;
font-family:'Inter',sans-serif;font-size:10px;
letter-spacing:1.4px;text-transform:uppercase;
color:rgba(0,212,200,.7);font-weight:500;
}
@keyframes sxeDraw{
from{opacity:0;transform:translateY(2px)}
to{opacity:1;transform:translateY(0)}
}
/* Brief card */
.brief-card{
margin:12px 16px 0;padding:14px 16px;
display:flex;gap:10px;position:relative;overflow:hidden;
background:linear-gradient(135deg,rgba(37,99,235,.05),rgba(0,212,200,.03));
border:1px solid rgba(37,99,235,.12);border-radius:14px;
}
.brief-card::after{
content:'';position:absolute;inset:0;border-radius:14px;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.015) 50%,transparent 60%);
background-size:200% 100%;animation:shimmer 5s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.brief-bar{width:2px;border-radius:1px;flex-shrink:0;min-height:32px;background:linear-gradient(to bottom,var(--teal),var(--blue))}
.brief-label{font-size:10.5px;letter-spacing:2.5px;color:var(--teal);margin-bottom:4px;font-weight:500;text-transform:uppercase}
.brief-text{font-size:14px;color:rgba(242,244,247,.75);line-height:1.75;font-style:italic;font-weight:300}
/* Chat teaser */
.chat-teaser{
margin:12px 16px 0;padding:14px;
background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(37,99,235,.04));
border:1px solid rgba(124,58,237,.15);border-radius:14px;
}
.chat-teaser-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.chat-star{font-size:14px;color:var(--purple)}
.chat-teaser-title{font-size:12px;letter-spacing:2px;color:var(--purple);font-weight:500;text-transform:uppercase}
.chat-msg-preview{
background:rgba(20,28,52,.7);border:1px solid rgba(37,99,235,.12);
padding:9px 12px;border-radius:4px 11px 11px 11px;
font-size:13px;color:rgba(138,170,187,.9);line-height:1.7;font-weight:300;
margin-bottom:10px;
}
.chat-teaser-input{
display:flex;gap:8px;align-items:center;
}
.chat-teaser-field{
flex:1;background:rgba(0,0,0,.25);
border:1px solid rgba(255,255,255,.08);border-radius:10px;
padding:9px 13px;font-size:13.5px;color:var(--muted2);
font-family:'Inter',sans-serif;
cursor:pointer;
}
.chat-teaser-btn{
width:36px;height:36px;border-radius:9px;
background:linear-gradient(135deg,var(--blue),var(--purple));
border:none;color:#fff;font-size:14px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;box-shadow:0 2px 12px rgba(37,99,235,.3);cursor:pointer;
}
/* ── PILLARS SCREEN ── */
.pillars-screen-list{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.pillar-full-card{
background:rgba(255,255,255,.03);border:1px solid var(--border);
border-radius:14px;padding:16px;cursor:pointer;position:relative;overflow:hidden;
transition:border-color .2s;
}
.pillar-full-card:active{border-color:rgba(37,99,235,.2);transform:scale(.99)}
.pf-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.pf-left{}
.pf-icon-name{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pf-icon{font-size:14px}
.pf-name{font-size:11px;letter-spacing:2px;font-weight:600;text-transform:uppercase;color:var(--ink-pure,#fff)}
.pf-brief{font-size:13px;color:rgba(242,244,247,.7);line-height:1.7;font-weight:300;max-width:210px}
.pf-right{text-align:right;flex-shrink:0}
.pf-score{font-family:'Newsreader',Georgia,serif;font-size:44px;font-weight:800;letter-spacing:-2px;line-height:1}
.pf-trend{font-size:11.5px;font-weight:500;margin-top:2px}
.pf-rank{font-size:11px;color:var(--muted2);margin-top:2px}
.pf-bar-bottom{
height:3px;border-radius:0 0 14px 14px;
position:absolute;bottom:0;left:0;right:0;
}
.pf-spark-row{display:flex;align-items:center;justify-content:space-between}
.pf-rating{
font-size:10.5px;letter-spacing:1px;font-weight:600;
padding:3px 9px;border-radius:100px;
}
/* ── SXE SCREEN ── */
.sxe-hero{padding:20px 16px 0;text-align:center}
.sxe-title{font-size:13px;letter-spacing:3px;color:var(--purple);font-weight:500;margin-bottom:4px;text-transform:uppercase}
.sxe-sub{font-size:14.5px;color:rgba(242,244,247,.65);font-weight:300;margin-bottom:20px;line-height:1.5}
.sxe-numbers{
display:flex;gap:8px;padding:0 16px;margin-bottom:16px;
}
.sxe-num-card{
flex:1;background:rgba(255,255,255,.03);border:1px solid var(--border);
border-radius:14px;padding:14px;text-align:center;
}
.sxe-num-label{font-size:10px;letter-spacing:1.5px;color:var(--muted2);margin-bottom:6px;text-transform:uppercase}
.sxe-num-val{font-family:'Newsreader',Georgia,serif;font-size:34px;font-weight:800;letter-spacing:-1px}
.sxe-num-desc{font-size:12px;color:var(--muted2);margin-top:5px}
.sxe-num-desc-sec{font-size:10px;color:rgba(160,180,210,.45);margin-top:3px;font-weight:300}
/* Collapsible SxE intro */
.sxe-intro{background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.15);border-radius:12px;overflow:hidden}
.sxe-intro-head{
display:flex;align-items:center;gap:10px;
width:100%;padding:12px 14px;
background:transparent;border:0;color:inherit;
cursor:pointer;text-align:left;
font-family:inherit;
}
.sxe-intro-head:hover{background:rgba(124,58,237,.04)}
.sxe-intro-eyebrow{
font-size:9px;letter-spacing:2.5px;color:var(--purple);
font-weight:500;text-transform:uppercase;
white-space:nowrap;
}
.sxe-intro-summary{
flex:1;font-size:11px;color:rgba(242,244,247,.7);
font-weight:300;line-height:1.45;
font-family:'Inter',sans-serif;
}
.sxe-intro-caret{
color:var(--purple);font-size:11px;
transition:transform .25s ease;flex-shrink:0;
}
.sxe-intro.open .sxe-intro-caret{transform:rotate(180deg)}
.sxe-intro-body{
max-height:0;overflow:hidden;
transition:max-height .35s ease, padding .25s ease;
padding:0 14px;
}
.sxe-intro.open .sxe-intro-body{
max-height:600px;padding:4px 14px 14px;
border-top:1px solid rgba(124,58,237,.12);
}
.sxe-intro-p{
font-size:11px;color:rgba(242,244,247,.78);
line-height:1.75;font-weight:300;margin-top:10px;
}
.sxe-intro-p:first-child{margin-top:10px}
.sxe-indicators{padding:0 16px}
.sxe-ind-title{font-size:8px;letter-spacing:2px;color:var(--muted2);margin-bottom:10px;text-transform:uppercase}
.sxe-ind-row{
display:flex;align-items:center;gap:10px;
padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.sxe-ind-row:last-child{border-bottom:none}
.sxe-ind-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sxe-ind-name{flex:1;font-size:11px;color:var(--muted)}
.sxe-ind-pillar{font-size:8px;color:var(--muted2);padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.04)}
.sxe-ind-score{font-family:'Newsreader',Georgia,serif;font-size:13px;font-weight:700;width:28px;text-align:right}
/* ── ALERTS SCREEN ── */
.alerts-list{padding:0 16px;display:flex;flex-direction:column;gap:10px}
.alert-card{
background:rgba(255,255,255,.03);border:1px solid var(--border);
border-radius:14px;padding:14px 16px;
}
.alert-badge{
display:inline-block;font-size:10px;letter-spacing:1.5px;
padding:3px 9px;border-radius:3px;margin-bottom:8px;font-weight:600;
}
.alert-title{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:7px;line-height:1.5}
.alert-body{font-size:13px;color:var(--muted);line-height:1.8;font-weight:300}
.alert-action{margin-top:9px;font-size:12px;color:var(--blue);font-weight:500}
/* ── CHAT SCREEN ── */
.chat-wrap{display:flex;flex-direction:column;height:100%}
.chat-hdr{
padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
background:linear-gradient(90deg,rgba(124,58,237,.06),transparent);
}
.chat-hdr-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.chat-hdr-title{font-size:12.5px;letter-spacing:2px;color:var(--purple);font-weight:500;text-transform:uppercase}
.chat-hdr-sub{font-size:11.5px;color:var(--muted2)}
.chat-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;display:flex;flex-direction:column;gap:9px}
.chat-ai{
align-self:flex-start;max-width:90%;
background:rgba(20,28,52,.8);border:1px solid rgba(37,99,235,.12);
padding:11px 14px;border-radius:3px 11px 11px 11px;
font-size:13.5px;color:rgba(138,170,187,.95);line-height:1.8;font-weight:300;
}
.chat-user{
align-self:flex-end;max-width:90%;
background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(124,58,237,.12));
border:1px solid rgba(37,99,235,.18);
padding:11px 14px;border-radius:11px 3px 11px 11px;
font-size:13.5px;color:var(--text);line-height:1.8;
}
.chat-dis{font-size:7.5px;color:var(--muted2);padding:4px 14px 6px;text-align:center;flex-shrink:0}
.chat-input-row{
padding:10px 14px calc(10px + var(--safe-bottom));
border-top:1px solid var(--border);
display:flex;gap:8px;flex-shrink:0;
background:rgba(11,15,26,.9);
}
.chat-inp{
flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
border-radius:10px;padding:10px 13px;font-size:13.5px;color:var(--text);
font-family:'Inter',sans-serif;outline:none;-webkit-appearance:none;
}
.chat-inp:focus{border-color:rgba(37,99,235,.4)}
.chat-inp::placeholder{color:var(--muted2)}
.chat-send{
width:44px;height:44px;border-radius:10px;
background:linear-gradient(135deg,var(--blue),var(--purple));
border:none;color:#fff;font-size:16px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
flex-shrink:0;box-shadow:0 2px 12px rgba(37,99,235,.3);
}
.chat-send:active{transform:scale(.93)}
.sp{display:inline-block;width:10px;height:10px;border:2px solid rgba(138,170,187,.2);border-top-color:var(--purple);border-radius:50%;animation:spn .7s linear infinite;margin-right:4px;vertical-align:middle}
@keyframes spn{to{transform:rotate(360deg)}}
/* ── SMC SCREEN ── */
.smc-hero{padding:20px 16px 0}
.smc-badge-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0}
.smc-badge{
font-size:11px;font-weight:600;letter-spacing:1px;
padding:8px 20px;border-radius:100px;
background:rgba(5,150,105,.1);border:1px solid rgba(5,150,105,.25);color:var(--green);
}
.smc-score{font-family:'Newsreader',Georgia,serif;font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--green)}
.smc-segments{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.smc-seg{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.smc-seg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.smc-seg-name{font-size:13px;font-weight:500;color:var(--text)}
.smc-seg-score{font-family:'Newsreader',Georgia,serif;font-size:17px;font-weight:700}
.smc-seg-bar-wrap{height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin:6px 0}
.smc-seg-bar{height:4px;border-radius:2px}
.smc-seg-detail{font-size:12.5px;color:var(--muted2);line-height:1.7}
/* ── COMPANY SCREEN ── */
.company-hero{padding:24px 20px 16px;text-align:center;border-bottom:1px solid var(--border)}
.company-logo{
width:60px;height:60px;border-radius:16px;
background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(124,58,237,.15));
border:1px solid rgba(37,99,235,.2);
display:flex;align-items:center;justify-content:center;
margin:0 auto 12px;font-size:22px;
}
.company-name{font-family:'Newsreader',Georgia,serif;font-size:22px;font-weight:700;margin-bottom:2px}
.company-sub{font-size:12.5px;color:var(--muted2)}
.company-tags{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.company-tag{
font-size:11px;font-weight:500;letter-spacing:.5px;
padding:4px 10px;border-radius:100px;
background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);
}
.company-stats{padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.company-stat{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:12px}
.cs-label{font-size:11px;letter-spacing:1px;color:var(--muted2);margin-bottom:4px;text-transform:uppercase}
.cs-val{font-family:'Newsreader',Georgia,serif;font-size:22px;font-weight:700;letter-spacing:-.5px}
/* ── SECONDARY SCREEN TOPBAR ── */
.sec-topbar{
padding:calc(var(--safe-top) + 4px) 18px 12px;
display:flex;align-items:center;gap:12px;
background:rgba(11,15,26,.85);backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);
flex-shrink:0;position:sticky;top:0;z-index:10;
}
.back-btn{
width:44px;height:44px;border-radius:10px;
background:rgba(255,255,255,.04);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:18px;color:var(--muted);cursor:pointer;flex-shrink:0;
}
.sec-title{font-family:'Newsreader',Georgia,serif;font-size:18px;font-weight:600;flex:1}
.sec-subtitle{font-size:11.5px;color:var(--muted2);letter-spacing:.5px}
/* ── PILLAR DETAIL OVERLAY ── */
.pillar-detail{
position:absolute;inset:0;
background:radial-gradient(ellipse 400px 300px at 80% 10%,rgba(37,99,235,.07) 0%,transparent 60%),#060810;
z-index:50;display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.pillar-detail.open{transform:translateX(0)}
.pd-topbar{
padding:calc(var(--safe-top) + 4px) 16px 12px;
display:flex;align-items:center;gap:10px;
background:rgba(11,15,26,.9);backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);flex-shrink:0;
}
.pd-back{
width:44px;height:44px;border-radius:10px;
background:rgba(255,255,255,.05);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:18px;color:var(--muted);cursor:pointer;flex-shrink:0;
}
.pd-back:active{background:rgba(255,255,255,.1)}
.pd-head-info{flex:1;min-width:0}
.pd-pillar-tag{font-size:10px;letter-spacing:2px;color:var(--muted2);font-weight:500;text-transform:uppercase}
.pd-pillar-name{font-family:'Newsreader',Georgia,serif;font-size:18px;font-weight:700;letter-spacing:-.3px}
.pd-badge{font-size:10.5px;padding:4px 11px;border-radius:100px;font-weight:600;letter-spacing:.5px;white-space:nowrap}
.pd-score-strip{padding:14px 16px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border);flex-shrink:0}
.pd-score-big{font-family:'Newsreader',Georgia,serif;font-size:56px;font-weight:800;letter-spacing:-3px;line-height:1}
.pd-score-meta{flex:1}
.pd-rating{font-size:12.5px;font-weight:600;letter-spacing:.8px;margin-bottom:2px}
.pd-trend-txt{font-size:12.5px;font-weight:500;margin-bottom:2px}
.pd-rank-txt{font-size:11.5px;color:var(--muted2)}
.pd-tabs{
display:flex;border-bottom:1px solid var(--border);flex-shrink:0;
background:rgba(0,0,0,.1);padding:0 16px;overflow-x:auto;scrollbar-width:none;
}
.pd-tabs::-webkit-scrollbar{display:none}
.pd-tab{
background:none;border:none;border-bottom:2px solid transparent;
padding:10px 14px;font-size:11.5px;letter-spacing:.8px;
color:var(--muted2);cursor:pointer;white-space:nowrap;
font-family:'Inter',sans-serif;margin-bottom:-1px;transition:color .15s;
}
.pd-tab.act{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}
.pd-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 32px}
.pd-pane{display:none}.pd-pane.act{display:block}
.pd-verdict{
font-size:15.5px;font-style:italic;color:rgba(232,236,248,.94);
line-height:1.7;margin-bottom:22px;padding:16px 18px;
border-left:2px solid rgba(37,99,235,.4);
background:rgba(37,99,235,.04);border-radius:0 10px 10px 0;font-weight:300;
}
.pd-analysis{font-size:14.5px;color:rgba(242,244,247,.78);line-height:1.78;margin-bottom:24px;font-weight:300}
.pd-sub-head{font-size:11px;letter-spacing:2px;font-weight:600;margin:24px 0 12px;text-transform:uppercase}
.pd-bullet-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px}
.pd-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:7px}
.pd-bullet-txt{font-size:14px;color:rgba(242,244,247,.86);line-height:1.7;font-weight:300}
.pd-peer-row{margin-bottom:10px}
.pd-peer-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.pd-peer-rank{font-size:10.5px;color:var(--muted2);width:14px;text-align:right;flex-shrink:0}
.pd-peer-name{font-size:12.5px;flex:1}
.pd-peer-score{font-family:'Newsreader',Georgia,serif;font-size:16px;font-weight:700;letter-spacing:-.5px;width:26px;text-align:right}
.pd-peer-track{height:5px;background:rgba(255,255,255,.06);border-radius:3px;position:relative;margin-left:22px}
.pd-peer-fill{height:5px;border-radius:3px}
.pd-peer-median{position:absolute;top:-3px;bottom:-3px;width:1px;background:rgba(255,255,255,.2)}
.pd-peers-head{font-size:10.5px;letter-spacing:1.5px;color:var(--muted2);margin-bottom:10px;text-transform:uppercase}
.pd-axis{display:flex;justify-content:space-between;margin-top:6px;padding-left:22px;font-size:7px;color:var(--muted2)}
.pd-signal-card{
background:rgba(255,255,255,.03);border:1px solid var(--border);
border-radius:12px;padding:18px 18px 16px;margin-bottom:14px;
}
.pd-signal-n{font-size:10.5px;letter-spacing:1.8px;color:var(--blue);margin-bottom:8px;font-weight:600;text-transform:uppercase}
.pd-signal-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:10px;line-height:1.35}
.pd-signal-pareto{font-size:14px;color:rgba(242,244,247,.82);line-height:1.7;font-weight:300}
.pd-signal-prec{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.pd-signal-prec-label{font-size:11px;letter-spacing:1.6px;font-weight:600;margin-bottom:6px;text-transform:uppercase}
.pd-signal-prec-txt{font-size:13.5px;color:rgba(242,244,247,.78);line-height:1.7;font-weight:300}
.pd-signal-signpost{font-size:13.5px;color:var(--purple);margin-top:8px;line-height:1.65;font-weight:400}
/* ── LEAGUE TABLE ── */
.league-table{padding:0 16px}
.lt-row{
display:flex;align-items:center;
padding:9px 12px;border-radius:10px;margin-bottom:4px;
background:rgba(255,255,255,.02);border:1px solid transparent;
transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.lt-row.me{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.18)}
.lt-row.lt-clickable:hover{background:rgba(255,255,255,.05);border-color:rgba(96,165,250,.25)}
.lt-row.lt-clickable.me:hover{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.32)}
.lt-row.lt-clickable:active{transform:scale(.99)}
.lt-rank{font-size:11.5px;color:var(--muted2);width:18px;flex-shrink:0;font-weight:500}
.lt-name{font-size:13px;flex:1;color:var(--muted)}
.lt-name.me{color:var(--text);font-weight:600}
.lt-score{font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:700;letter-spacing:-.5px;width:30px;text-align:right}
.lt-dir{font-size:12px;width:16px;text-align:center;margin-left:4px}
.lt-bar-wrap{width:56px;height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-left:8px;flex-shrink:0}
.lt-bar{height:4px;border-radius:2px}
/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ringDraw{from{stroke-dashoffset:272}to{stroke-dashoffset:0}}
@keyframes markerFade{from{opacity:0}to{opacity:1}}
@keyframes sparkDraw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
/* ── RESPONSIVE BREAKPOINTS — frameless ──
Phone fills viewport edge-to-edge. iPad and desktop also fill edge-to-edge,
but at progressively larger viewports the content column caps at a comfortable
reading width and centres on a clean dark background. No border, no rim, no shadow.
Tier 1 (<500px): phone, full-bleed (handled by base rules).
Tier 2 (500–819px): wider phones / small tablets — fills viewport, slight type lift.
Tier 3 (820–1199px): iPad portrait — fills viewport, larger type.
Tier 4 (1200–1499px): iPad landscape & standard laptop — content caps at 1100px, centred.
Tier 5 (≥1500px): large desktop — same cap, more atmospheric padding.
*/
/* TIER 2 — wider phones / small tablets (500–819px) */
@media(min-width:500px){
body{background:#060810;min-height:100vh;margin:0;padding:0}
.app{max-width:none}
.splash,.onboard{max-width:none;left:0;transform:none}
}
/* TIER 3 — iPad portrait (820–1199px) */
@media(min-width:820px){
.app{max-width:none}
.splash,.onboard{max-width:none;left:0;transform:none}
/* Body prose lifts for tablet reading distance */
body{font-size:16px}
.read-body, .read-hero-stmt{font-size:15.5px;line-height:1.7}
.pillar-card .pc-name{font-size:14px}
.pillar-card .pc-score{font-size:24px}
.sxe-hero-eyebrow{font-size:12.5px}
.sxe-method{font-size:12px;line-height:1.7}
.sxe-outcome-band{font-size:19px}
.sxe-outcome-peer{font-size:11.5px}
/* Score ring scales up — bigger composite at glance */
.score-ring-wrap svg{width:220px;height:220px}
/* SxE hero chart gets more room */
.sxe-hero-chart{max-height:240px}
.sxe-hero-frame{padding:22px 20px 18px}
/* Section heads breathe a touch more */
.section-head{padding:0 20px}
.section-label{font-size:11px;letter-spacing:2.6px}
}
/* TIER 4 — iPad landscape & standard laptop (1200–1499px). Content caps; no frame */
@media(min-width:1200px){
body{background:#060810;min-height:100vh;margin:0;padding:0}
.app{
max-width:1100px;
margin:0 auto;
}
.splash,.onboard{
max-width:none;left:0;transform:none;
/* Splash and onboarding stay full-bleed even at desktop sizes — they are a launching moment */
}
/* Type lifts again for landscape-iPad/laptop reading distance */
body{font-size:17px}
.read-body, .read-hero-stmt{font-size:16.5px;line-height:1.72}
.pillar-card .pc-name{font-size:15px}
.pillar-card .pc-score{font-size:26px}
.sxe-hero-eyebrow{font-size:13.5px}
.sxe-method{font-size:13px;line-height:1.72}
.sxe-outcome-band{font-size:21px}
.sxe-outcome-peer{font-size:12.5px}
.sxe-now-chip-band{font-size:11px}
.sxe-now-chip-rank{font-size:11.5px}
/* Score ring grows for landscape presence */
.score-ring-wrap svg{width:260px;height:260px}
/* SxE hero chart fills the wider canvas */
.sxe-hero-chart{max-height:280px}
.sxe-hero-frame{padding:26px 24px 22px}
/* Sections breathe further */
.section-head{padding:0 24px}
}
/* TIER 5 — large desktop (≥1500px) — content stays at 1100px, atmospheric padding */
@media(min-width:1500px){
body{padding:0}
.app{max-width:1100px}
}
/* ── ONBOARDING ── */
/* SPLASH SCREEN — Disney+ style hero on first launch, auto-fades to onboarding */
.splash{
position:fixed;inset:0;z-index:200;
background:
radial-gradient(ellipse 85% 65% at 105% 65%, rgba(124,58,237,.20) 0%, rgba(124,58,237,0) 55%),
radial-gradient(ellipse 70% 55% at 115% 80%, rgba(0,212,200,.14) 0%, rgba(0,212,200,0) 50%),
linear-gradient(135deg,#050810 0%,#080C16 50%,#060810 100%);
max-width:430px;
left:50%;transform:translateX(-50%);
width:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
transition:opacity .8s ease;
pointer-events:auto;
}
.splash-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.splash-name{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:48px;color:#fff;letter-spacing:-1px;line-height:1}
.splash-eyebrow{font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:3.5px;color:#A78BFA;font-weight:500;margin-bottom:16px;text-transform:uppercase}
.splash-tag{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:26px;color:#fff;letter-spacing:-.5px}
.splash-tag-em{background:linear-gradient(90deg,#7B4DE0,#3B66E5,#14C8B8);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.splash.fading{opacity:0;pointer-events:none}
.splash.done{display:none}
.onboard{
position:fixed;inset:0;
z-index:100;overflow:hidden;
background:transparent;
max-width:430px;
left:50%;transform:translateX(-50%);
width:100%;
}
.onboard.done{display:none}
.ob-slides{
display:flex;width:100%;height:100%;
position:relative;z-index:1;
transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.ob-slide{
flex-shrink:0;width:100%;height:100%;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
padding:calc(env(safe-area-inset-top,44px) + 48px) 32px calc(env(safe-area-inset-bottom,20px) + 130px);
text-align:center;
position:relative;overflow:hidden;
}
/* Atmospheric tint over the styled Replit background — see-through with colour wash */
.ob-wave-bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
overflow:hidden;
background:
radial-gradient(ellipse 65% 50% at 110% 75%, rgba(124,58,237,.10) 0%, rgba(124,58,237,0) 55%),
radial-gradient(ellipse 55% 45% at 100% 50%, rgba(0,212,200,.06) 0%, rgba(0,212,200,0) 50%);
}
/* Top + bottom darkening scrim ensures prose remains readable on any background.
   Centre is more transparent so the styled background shows clearly. */
.ob-wave-bg::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,12,22,.55) 0%,rgba(8,12,22,.15) 25%,rgba(8,12,22,.10) 55%,rgba(8,12,22,.55) 100%);
pointer-events:none;
}
.ob-skip{
position:absolute;top:calc(env(safe-area-inset-top,44px) + 10px);right:20px;
font-size:11px;color:rgba(255,255,255,.35);font-weight:400;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
padding:6px 14px;border-radius:100px;cursor:pointer;z-index:2;
font-family:'Inter',sans-serif;letter-spacing:.3px;
transition:color .15s,background .15s;
}
.ob-skip:active{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.ob-illus{
flex-shrink:0;margin-bottom:32px;
position:relative;z-index:1;
}
.ob-label{
font-size:8.5px;letter-spacing:2.5px;font-weight:500;
margin-bottom:12px;text-transform:uppercase;
position:relative;z-index:1;
}
.ob-title{
font-family:'Newsreader',Georgia,serif;
font-size:28px;font-weight:700;
letter-spacing:-.6px;line-height:1.2;
color:#fff;margin-bottom:14px;
position:relative;z-index:1;
}
.ob-body{
font-size:14px;color:rgba(255,255,255,.62);
line-height:1.7;font-weight:300;
font-family:'Inter',sans-serif;
position:relative;z-index:1;
max-width:340px;
}
.ob-body strong{color:rgba(255,255,255,.85);font-weight:400}
.ob-dots{
position:absolute;bottom:calc(env(safe-area-inset-bottom,20px) + 88px);
left:0;right:0;
display:flex;gap:6px;align-items:center;justify-content:center;z-index:2;
}
.ob-dot{
width:5px;height:5px;border-radius:100px;
background:rgba(255,255,255,.2);
transition:all .3s ease;
}
.ob-dot.act{width:20px;background:#3B66E5}
.ob-nav{
position:absolute;bottom:calc(env(safe-area-inset-bottom,20px) + 24px);
left:32px;right:32px;z-index:2;
display:flex;align-items:center;justify-content:space-between;
}
.ob-prev{
font-size:11px;color:rgba(255,255,255,.3);font-weight:400;
font-family:'Inter',sans-serif;letter-spacing:.3px;
cursor:pointer;padding:8px 0;min-width:60px;
transition:color .15s;
}
.ob-prev:active{color:rgba(255,255,255,.6)}
.ob-prev.hidden{opacity:0;pointer-events:none}
.ob-next{
font-family:'Newsreader',Georgia,serif;font-size:13px;font-weight:700;
background:linear-gradient(135deg,#3B66E5,#7B4DE0);
color:#fff;border:none;padding:13px 28px;border-radius:100px;
cursor:pointer;letter-spacing:.2px;
box-shadow:0 4px 20px rgba(37,99,235,.4);
transition:transform .1s,box-shadow .15s;
}
.ob-next:active{transform:scale(.96);box-shadow:0 2px 10px rgba(37,99,235,.3)}
.ob-next.final{
background:linear-gradient(135deg,#14C8B8,#3B66E5);
box-shadow:0 4px 20px rgba(0,212,200,.35);
padding:14px 32px;font-size:14px;
}
/* Slide-specific bg glows — radial overlays only; #080C16 base lives on .onboard so the wave shows through */
.ob-s1{background:radial-gradient(ellipse 500px 500px at 50% 40%,rgba(37,99,235,.08) 0%,transparent 65%)}
.ob-s2{background:radial-gradient(ellipse 500px 450px at 50% 50%,rgba(124,58,237,.06) 0%,transparent 65%),radial-gradient(ellipse 300px 300px at 80% 80%,rgba(0,212,200,.04) 0%,transparent 60%)}
.ob-s3{background:radial-gradient(ellipse 400px 400px at 50% 40%,rgba(37,99,235,.07) 0%,transparent 65%)}
.ob-s4{background:radial-gradient(ellipse 500px 350px at 20% 60%,rgba(124,58,237,.05) 0%,transparent 65%)}
.ob-s5{background:radial-gradient(ellipse 400px 400px at 80% 30%,rgba(0,212,200,.04) 0%,transparent 65%)}
.ob-s6{background:radial-gradient(ellipse 500px 400px at 30% 50%,rgba(37,99,235,.05) 0%,transparent 65%),radial-gradient(ellipse 300px 300px at 80% 70%,rgba(124,58,237,.04) 0%,transparent 60%)}
.ob-s7{background:radial-gradient(ellipse 400px 400px at 60% 40%,rgba(0,212,200,.05) 0%,transparent 65%)}
.ob-s8{background:radial-gradient(ellipse 500px 500px at 50% 50%,rgba(37,99,235,.08) 0%,transparent 65%)}
@keyframes obFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes obPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.04)}}
@keyframes ob-ring-draw{from{stroke-dashoffset:628}to{stroke-dashoffset:193}}
/* ── SIGNAL INTELLIGENCE LAYER ─────────────────────────────────── */
/* Gateway section at bottom of pillar assessment pane */
.si-gateway{
margin:24px -16px 0;
padding:20px 16px 8px;
background:linear-gradient(180deg,rgba(0,212,200,.03) 0%,rgba(124,58,237,.04) 100%);
border-top:1px solid rgba(0,212,200,.15);
position:relative;
}
.si-gateway::before{
content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(0,212,200,.45),rgba(124,58,237,.45),transparent);
}
.si-gateway-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.si-gateway-mark{
width:28px;height:28px;border-radius:8px;
background:linear-gradient(135deg,#14C8B8,#7B4DE0);
display:flex;align-items:center;justify-content:center;
font-size:14px;color:#fff;flex-shrink:0;
box-shadow:0 2px 16px rgba(0,212,200,.3);
}
.si-gateway-title{
font-family:'Newsreader',Georgia,serif;font-size:15px;font-weight:700;
letter-spacing:-.3px;color:#fff;
}
.si-gateway-tier{
font-size:8.5px;font-weight:600;letter-spacing:1px;
padding:3px 8px;border-radius:100px;
background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.28);
color:var(--teal);text-transform:uppercase;margin-left:auto;
}
.si-gateway-sub{
font-size:12px;color:var(--muted);
line-height:1.7;margin:10px 0 18px;margin-left:38px;
font-weight:300;
}
.si-gateway-grid{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.si-card{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;padding:12px 13px;
cursor:pointer;position:relative;overflow:hidden;
transition:all .2s;
}
.si-card:active{transform:scale(.98)}
.si-card.active{
border-color:rgba(0,212,200,.35);
background:linear-gradient(135deg,rgba(0,212,200,.06),rgba(124,58,237,.04));
}
.si-card.active::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,#14C8B8,#7B4DE0);
}
.si-card.locked{opacity:.6}
.si-card-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.si-card-icon{font-size:13px;line-height:1}
.si-card-name{
font-size:11px;font-weight:600;letter-spacing:.3px;
color:#fff;flex:1;
}
.si-card-lock{font-size:10px;color:var(--muted2);opacity:.7}
.si-card-desc{
font-size:11px;color:rgba(242,244,247,.7);
line-height:1.65;font-weight:300;min-height:46px;
}
.si-card-cta{
margin-top:9px;font-size:10px;font-weight:500;
color:var(--teal);display:flex;align-items:center;gap:4px;
}
.si-card.locked .si-card-cta{color:var(--muted2)}
/* ── SIGNAL INTELLIGENCE OVERLAY ──────────────────────────────── */
.si-overlay{
position:absolute;inset:0;
/* Match .app background recipe exactly so the overlay reads as the
   same canvas as the rest of the site. Three subtle brand washes
   (blue top-left, purple right, teal bottom) over the #060810 floor. */
background:
  radial-gradient(ellipse 500px 350px at 15% 8%, rgba(37,99,235,.09) 0%, transparent 60%),
  radial-gradient(ellipse 400px 500px at 88% 55%, rgba(124,58,237,.07) 0%, transparent 60%),
  radial-gradient(ellipse 500px 300px at 50% 95%, rgba(0,212,200,.04) 0%, transparent 60%),
  #060810;
z-index:60;display:flex;flex-direction:column;
transform:translateY(100%);
transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.si-overlay::before{
content:'';position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(123,77,224,.5),rgba(59,102,229,.5),rgba(20,200,184,.5),transparent);
opacity:.5;z-index:65;pointer-events:none;
}
.si-overlay.open{transform:translateY(0)}
/* v35 pass27: hide the splash entirely — Intel goes directly into the hub. */
.si-splash{display:none !important;}
/* SI splash — Signal Intelligence hero shown on every entry to the SI overlay,
3s hold then 850ms tasteful fade. Sits inside #siOverlay so it slides up with
the overlay itself; z:70 places it above both the overlay content (z:60) and
the first-visit explainer flow (z:65). */
.si-splash{
position:absolute;inset:0;
z-index:70;
background:
radial-gradient(ellipse 70% 50% at 0% 0%, rgba(0,212,200,.14) 0%, rgba(0,212,200,0) 55%),
radial-gradient(ellipse 80% 60% at 100% 100%, rgba(124,58,237,.18) 0%, rgba(124,58,237,0) 55%),
linear-gradient(135deg,#3A3D44 0%,#33363D 50%,#2C2F35 100%);
display:flex;flex-direction:column;align-items:center;justify-content:center;
transition:opacity .85s ease;
pointer-events:auto;
}
.si-splash-wordmark{display:flex;flex-direction:column;line-height:1}
.si-splash-name{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:38px;color:#fff;letter-spacing:-.8px}
.si-splash-sub{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:22px;letter-spacing:-.3px;background:linear-gradient(90deg,#14C8B8,#60A5FA,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:2px}
.si-splash-tag{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.55);font-weight:500;margin-top:18px;text-transform:uppercase}
.si-splash.fading{opacity:0;pointer-events:none}
.si-splash.done{display:none}
/* ── SIGNAL INTELLIGENCE HUB ───────────────────────────────────────
Hero landing shown when entering SI from the Intel tab or drawer
(generic entry). Bypassed when entering via context routes — pillar
Assessment gateway → direct to Talent for that pillar; market card
→ direct to Market. The 4 cards are a calmer alternative to the
busy default landing (top bar + layer grid + anchor + content all
at once). Sits inside #siOverlay so it slides up with the overlay
itself; z:62 places it above the regular content but below the
first-visit explainer (z:65) and the splash (z:70). */
.si-hub{
position:absolute;inset:0;
z-index:62;
background:transparent;
display:none;
flex-direction:column;
padding:calc(var(--safe-top) + 20px) 22px calc(var(--safe-bottom) + 28px);
overflow:hidden;
transition:opacity .32s ease;
}
.si-overlay.hub .si-hub{
display:flex;
animation:siHubFadeIn .42s ease both;
}
@keyframes siHubFadeIn{from{opacity:0}to{opacity:1}}
/* v35 pass33: when overlay is in hub mode, hide the layer-detail chrome
   that would otherwise bleed through. The .si-top topbar has a grey
   linear-gradient that was painting through .si-hub's transparent
   background — making the hub look grey rather than picking up the
   overlay's .app recipe. */
.si-overlay.hub .si-top,
.si-overlay.hub .si-hero,
.si-overlay.hub .si-anchor-compact,
.si-overlay.hub .si-content,
.si-overlay.hub .si-layer-tabs,
.si-overlay.hub .si-chat-fab,
.si-overlay.hub .si-explainer{
display:none !important;
}
/* readability overlay — kept light because the new deep brand background
   is already dark; just a gentle bottom vignette so cards float clean */
.si-hub::before{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(10,14,26,0) 0%,
rgba(10,14,26,0) 60%,
rgba(10,14,26,.35) 100%);
pointer-events:none;
}
.si-hub > *{position:relative;z-index:1}
/* close button — minimal frosted square, top-right */
.si-hub-close{
position:absolute;top:calc(var(--safe-top) + 14px);right:18px;
width:34px;height:34px;border-radius:8px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.6);font-size:13px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;font-family:inherit;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
z-index:3;line-height:1;padding:0;
}
.si-hub-close:active{background:rgba(255,255,255,.1);color:#fff}
/* brand: mark + Signal/INTELLIGENCE wordmark, sits at top of hub */
.si-hub-brand{
display:flex;align-items:center;gap:14px;
margin-top:36px;
margin-bottom:8px;
flex-shrink:0;
}
.si-hub-mark{flex-shrink:0}
.si-hub-wordmark{display:flex;flex-direction:column;line-height:1}
.si-hub-name{
font-family:'Newsreader',Georgia,serif;
font-size:32px;font-weight:600;
color:#ECEDEF;
letter-spacing:-1px;
}
.si-hub-sub{
font-size:9.5px;letter-spacing:4px;
color:#60A5FA;text-transform:uppercase;font-weight:500;
margin-top:7px;
}
/* 2×2 card grid — four layer entry points presented as full content
cards: each card carries an icon, a wave/particle visualisation in
its brand colour, a title, a one-sentence description, and an arrow
affordance. Cards are tall so they breathe; the wave anchors the
colour identity (teal/blue/violet/purple) without needing heavy
chrome. Tap target is the entire card. */
.si-hub-grid{
flex:1;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:12px;
align-content:stretch;
justify-content:stretch;
width:100%;
max-width:380px;
margin:0 auto;
padding:6px 0 8px;
min-height:0;
}
.si-hub-tile{
position:relative;
display:flex;flex-direction:column;
padding:18px 16px 14px;
border-radius:18px;
background:linear-gradient(180deg,
rgba(28,30,38,.55) 0%,
rgba(20,22,28,.65) 100%);
backdrop-filter:blur(16px) saturate(130%);
-webkit-backdrop-filter:blur(16px) saturate(130%);
border:1px solid rgba(255,255,255,.07);
border-bottom:1px solid var(--tile-color,rgba(255,255,255,.18));
cursor:pointer;
overflow:hidden;
transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.si-hub-tile:active{
transform:scale(.97);
background:linear-gradient(180deg,
rgba(36,38,46,.7) 0%,
rgba(24,26,32,.78) 100%);
}
/* icon block — sits at top of card, brand-coloured */
.si-hub-tile-icon{
width:32px;height:32px;
color:var(--tile-color,#fff);
display:flex;align-items:center;justify-content:center;
margin-bottom:2px;
position:relative;
z-index:2;
}
.si-hub-tile-icon svg{width:100%;height:100%;display:block;
filter:drop-shadow(0 0 10px var(--tile-color));}
/* wave/particle band — SVG dots arranged as a wave shape, tinted
with the tile's brand colour. Sits between icon and title. */
.si-hub-tile-wave{
position:relative;
height:64px;
margin:6px -16px 14px;
opacity:.85;
pointer-events:none;
}
.si-hub-tile-wave svg{
position:absolute;inset:0;
width:100%;height:100%;
display:block;
color:var(--tile-color,#fff);
}
/* title + description — pushed to bottom of card */
.si-hub-tile-body{
margin-top:auto;
position:relative;
z-index:2;
}
.si-hub-tile-name{
font-family:'Newsreader',Georgia,serif;
font-size:18px;
font-weight:600;
letter-spacing:-.3px;
color:#ECEDEF;
line-height:1.1;
margin-bottom:6px;
}
.si-hub-tile-desc{
font-size:11.5px;
font-weight:400;
line-height:1.35;
color:rgba(242,244,247,.62);
letter-spacing:.1px;
padding-right:32px; /* leave room for arrow */
min-height:32px;
}
/* arrow affordance — small circle, brand-coloured, bottom-right */
.si-hub-tile-arrow{
position:absolute;
bottom:12px;right:14px;
width:26px;height:26px;
border-radius:50%;
border:1px solid var(--tile-color,rgba(255,255,255,.3));
display:flex;align-items:center;justify-content:center;
color:var(--tile-color,#fff);
z-index:2;
background:rgba(0,0,0,.15);
}
.si-hub-tile-arrow svg{width:13px;height:13px;display:block}
/* Overlay topbar */
.si-top{
padding:calc(var(--safe-top) + 6px) 14px 10px;
display:flex;align-items:center;gap:10px;
background:linear-gradient(180deg,rgba(70,73,80,.95) 0%,rgba(58,61,68,.95) 100%);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border-bottom:1px solid rgba(0,212,200,.22);
flex-shrink:0;position:relative;
}
.si-top::after{
content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent,rgba(0,212,200,.4),rgba(124,58,237,.4),transparent);
opacity:.5;
}
.si-top::after{
content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;
background:linear-gradient(90deg,transparent,rgba(0,212,200,.4),rgba(124,58,237,.4),transparent);
}
.si-close{
width:44px;height:44px;border-radius:10px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;
font-size:20px;color:var(--muted);cursor:pointer;flex-shrink:0;
line-height:1;
}
.si-close:active{background:rgba(255,255,255,.08)}
.si-top-title{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.si-top-mark{
width:32px;height:26px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
filter:drop-shadow(0 2px 8px rgba(0,212,200,.25));
}
.si-top-info{min-width:0;flex:1}
.si-top-label{
font-family:'Newsreader',Georgia,serif;font-size:13px;font-weight:700;
color:#fff;letter-spacing:-.2px;line-height:1.1;
}
.si-top-layer{
font-size:9px;color:var(--teal);
letter-spacing:1.4px;text-transform:uppercase;font-weight:500;margin-top:2px;
}
.si-tier-pill{
font-size:8.5px;font-weight:600;letter-spacing:1px;
padding:4px 10px;border-radius:100px;
background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.3);
color:var(--teal);text-transform:uppercase;flex-shrink:0;
}
/* Anchor strip — assessment context reminder */
.si-anchor{
padding:14px 16px 12px;
background:rgba(0,0,0,.28);
border-bottom:1px solid rgba(255,255,255,.05);
flex-shrink:0;
}
.si-anchor-head{
display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:10px;
}
.si-anchor-co{
font-family:'Newsreader',Georgia,serif;font-size:14px;font-weight:700;
color:#fff;letter-spacing:-.3px;
}
.si-anchor-score{
font-family:'Newsreader',Georgia,serif;font-size:12.5px;font-weight:700;
color:var(--amber);letter-spacing:-.3px;
}
.si-anchor-pillars{display:flex;gap:5px}
.si-anchor-pill{
flex:1;padding:7px 4px;border-radius:8px;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
text-align:center;cursor:pointer;transition:all .15s;
position:relative;
}
.si-anchor-pill.active{
background:rgba(0,212,200,.08);border-color:rgba(0,212,200,.35);
}
.si-anchor-pill.active::before{
content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;
background:linear-gradient(90deg,transparent,var(--teal),transparent);
}
.si-anchor-pname{
font-size:8px;letter-spacing:1px;color:var(--muted2);
text-transform:uppercase;font-weight:500;margin-bottom:2px;
}
.si-anchor-pill.active .si-anchor-pname{color:var(--teal)}
.si-anchor-pscore{
font-family:'Newsreader',Georgia,serif;font-size:15px;font-weight:800;
letter-spacing:-.5px;line-height:1;
}
/* Overlay content — scrollable. v35 pass27: transparent so the
   overlay's brand ambience (purple/blue/teal radial gradients) shows
   through. Was previously a flat cool-grey linear-gradient that fought
   the rest of the site. */
.si-content{
flex:1;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
padding:0 0 32px;
background:transparent;
min-height:0;
}
/* Signal insight block — why you're here */
.si-insight{
margin:16px 16px 0;
padding:16px 18px;
background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(0,212,200,.04));
border:1px solid rgba(37,99,235,.18);border-radius:14px;
position:relative;overflow:hidden;
}
.si-insight-label{
font-size:10.5px;letter-spacing:2px;color:var(--teal);
font-weight:700;text-transform:uppercase;margin-bottom:9px;
}
.si-insight-text{
font-size:13px;color:rgba(242,244,247,.85);
line-height:1.8;font-weight:300;
}
.si-insight-text strong{color:#fff;font-weight:500}
/* Curation rationale */
.si-rationale{
margin:14px 16px 0;padding:14px 16px;
background:rgba(0,212,200,.03);
border:1px solid rgba(0,212,200,.12);border-radius:12px;
}
.si-rationale-label{
display:flex;align-items:center;gap:6px;
font-size:9px;letter-spacing:2px;color:var(--teal);
font-weight:500;text-transform:uppercase;margin-bottom:6px;
}
.si-rationale-text{
font-size:12.5px;color:rgba(242,244,247,.72);
line-height:1.8;font-weight:300;
}
/* Section headers inside overlay */
.si-section-label{
padding:24px 16px 12px;
font-size:11px;letter-spacing:2.2px;color:var(--teal);
text-transform:uppercase;font-weight:700;
}
/* Candidate card */
.si-cand{
margin:0 16px 10px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
overflow:hidden;
transition:all .25s;
}
.si-cand.open{
border-color:rgba(0,212,200,.25);
background:linear-gradient(180deg,rgba(0,212,200,.04),rgba(255,255,255,.02));
}
.si-cand-head{
display:flex;align-items:center;gap:12px;
padding:14px 16px;cursor:pointer;
transition:background .15s;
}
.si-cand-head:active{background:rgba(255,255,255,.03)}
.si-avatar{
width:46px;height:46px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Newsreader',Georgia,serif;font-size:14px;font-weight:700;
color:#fff;letter-spacing:.5px;flex-shrink:0;
position:relative;
}
.si-avatar::after{
content:'';position:absolute;inset:-2px;border-radius:50%;
background:linear-gradient(135deg,rgba(0,212,200,.25),rgba(124,58,237,.25));
z-index:-1;opacity:.6;
}
.si-cand-body{flex:1;min-width:0}
.si-cand-name{
font-family:'Newsreader',Georgia,serif;font-size:15px;font-weight:700;
color:#fff;letter-spacing:-.2px;line-height:1.25;margin-bottom:3px;
}
.si-cand-role{
font-size:12px;color:var(--muted);
line-height:1.5;margin-bottom:5px;
}
.si-cand-tag{
font-size:10.5px;color:var(--teal);font-style:italic;
line-height:1.55;font-weight:300;
}
.si-cand-signal{
font-size:8px;font-weight:600;letter-spacing:1px;
padding:3px 7px;border-radius:4px;
flex-shrink:0;text-transform:uppercase;
}
.si-cand-signal.strong{background:rgba(5,150,105,.12);color:#4ADE80;border:1px solid rgba(5,150,105,.25)}
.si-cand-signal.moderate{background:rgba(217,119,6,.1);color:#FBBF24;border:1px solid rgba(217,119,6,.2)}
.si-cand-signal.thinner{background:rgba(96,112,140,.12);color:var(--muted);border:1px solid rgba(96,112,140,.2)}
.si-cand-chev{
font-size:14px;color:var(--muted2);
transition:transform .25s;flex-shrink:0;
}
.si-cand.open .si-cand-chev{transform:rotate(90deg);color:var(--teal)}
/* Expanded candidate detail */
.si-cand-detail{
max-height:0;overflow:hidden;
transition:max-height .3s ease;
}
.si-cand.open .si-cand-detail{max-height:2500px}
.si-cand-inner{
padding:6px 16px 18px;border-top:1px solid rgba(255,255,255,.05);
margin-top:2px;
}
.si-detail-section{margin-top:16px}
.si-detail-label{
font-size:8.5px;letter-spacing:2px;color:var(--teal);
font-weight:600;text-transform:uppercase;margin-bottom:6px;
}
.si-detail-text{
font-size:12.5px;color:rgba(242,244,247,.78);
line-height:1.85;font-weight:300;
}
.si-detail-text strong{color:#fff;font-weight:400}
.si-evidence{
display:flex;gap:8px;align-items:flex-start;
padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.si-evidence:last-child{border-bottom:none}
.si-evidence-dot{
width:4px;height:4px;border-radius:50%;background:var(--teal);
flex-shrink:0;margin-top:7px;
}
.si-evidence-text{
font-size:11.5px;color:rgba(242,244,247,.72);
line-height:1.75;font-weight:300;
}
.si-evidence-text em{color:var(--muted);font-style:normal}
/* Pillar switcher at bottom */
.si-pillar-switch{
margin:20px 16px;
padding:14px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
}
.si-switch-label{
font-size:8.5px;letter-spacing:2px;color:#60A5FA;
text-transform:uppercase;font-weight:600;margin-bottom:10px;
opacity:.85;
}
.si-switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.si-switch-btn{
padding:10px;border-radius:9px;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
cursor:pointer;text-align:left;transition:all .15s;
}
.si-switch-btn:active{transform:scale(.98)}
.si-switch-btn.current{
background:rgba(0,212,200,.06);border-color:rgba(0,212,200,.2);
pointer-events:none;
}
.si-switch-pname{
font-size:9.5px;letter-spacing:1px;font-weight:600;
text-transform:uppercase;margin-bottom:3px;
}
.si-switch-pgap{
font-size:10px;color:rgba(242,244,247,.72);line-height:1.55;
}
/* Layer switcher — access other intelligence layers */
.si-layer-switch{
margin:0 16px 20px;padding:12px 14px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.05);
border-radius:12px;
}
.si-layer-switch-label{
font-size:8.5px;letter-spacing:2px;color:var(--muted2);
text-transform:uppercase;font-weight:500;margin-bottom:10px;
}
.si-layer-row{
display:flex;gap:6px;
}
.si-layer-btn{
flex:1;padding:8px 6px;border-radius:8px;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
cursor:pointer;text-align:center;
font-size:9.5px;font-weight:500;color:var(--muted);
transition:all .15s;
display:flex;flex-direction:column;align-items:center;gap:3px;
}
.si-layer-btn.current{
background:linear-gradient(135deg,rgba(0,212,200,.1),rgba(124,58,237,.06));
border-color:rgba(0,212,200,.3);
color:var(--teal);
}
.si-layer-btn.locked{opacity:.4;cursor:default}
.si-layer-icon{font-size:13px;line-height:1}
.si-layer-name{font-size:8.5px;letter-spacing:.3px}
/* Methodology footer */
.si-methodology{
margin:0 16px;padding:12px 14px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.04);
border-radius:10px;
}
.si-meth-label{
font-size:8px;letter-spacing:1.5px;color:rgba(0,212,200,.55);
text-transform:uppercase;font-weight:600;margin-bottom:5px;
}
.si-meth-text{
font-size:10.5px;color:rgba(242,244,247,.62);
line-height:1.7;font-weight:300;
}
/* ── SIGNAL INTELLIGENCE — NEW TOP-OF-OVERLAY STRUCTURE ── */
/* Layer tabs at top of overlay */
.si-layer-tabs{
display:flex;gap:0;
background:rgba(10,14,26,.55);
border-bottom:1px solid rgba(255,255,255,.06);
flex-shrink:0;padding:0 4px;
overflow-x:auto;scrollbar-width:none;
backdrop-filter:blur(8px);
position:relative;
}
.si-layer-tabs::after{
content:'';position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(123,77,224,.35),rgba(59,102,229,.35),rgba(20,200,184,.35),transparent);
opacity:.6;pointer-events:none;
}
.si-layer-tabs::-webkit-scrollbar{display:none}
.si-layer-tab{
flex:1;min-width:70px;
padding:11px 6px 12px;
background:none;border:none;
display:flex;flex-direction:column;align-items:center;gap:5px;
cursor:pointer;position:relative;
transition:all .18s;
border-bottom:2px solid transparent;
font-family:'Inter',sans-serif;
}
.si-layer-tab-icon{font-size:14px;line-height:1;color:rgba(188,192,200,.55);transition:color .18s}
.si-layer-tab-name{
font-size:9.5px;letter-spacing:1.2px;font-weight:500;
text-transform:uppercase;color:rgba(188,192,200,.6);transition:color .18s;
}
.si-layer-tab:hover .si-layer-tab-icon{color:rgba(255,255,255,.8);}
.si-layer-tab:hover .si-layer-tab-name{color:rgba(255,255,255,.8);}
.si-layer-tab:active{background:rgba(255,255,255,.02)}
.si-layer-tab.active{border-bottom-color:#14C8B8}
.si-layer-tab.active .si-layer-tab-icon{color:#14C8B8}
.si-layer-tab.active .si-layer-tab-name{color:#14C8B8;font-weight:600}
.si-layer-tab.locked .si-layer-tab-icon{opacity:.45}
.si-layer-tab.locked .si-layer-tab-name{opacity:.5}
.si-layer-tab-lock{
position:absolute;top:6px;right:10px;
font-size:8px;color:var(--muted2);opacity:.6;
}
/* Collapsible explainer bar */
.si-explainer{
flex-shrink:0;background:rgba(0,212,200,.025);
border-bottom:1px solid rgba(0,212,200,.08);
overflow:hidden;
transition:background .2s;
}
.si-explainer-head{
display:flex;align-items:center;gap:8px;
padding:9px 16px 9px 14px;cursor:pointer;
transition:background .15s;
}
.si-explainer-head:active{background:rgba(0,212,200,.04)}
.si-explainer-mark{
width:16px;height:16px;border-radius:4px;
background:linear-gradient(135deg,rgba(0,212,200,.2),rgba(124,58,237,.15));
display:flex;align-items:center;justify-content:center;
font-size:9px;color:var(--teal);flex-shrink:0;
}
.si-explainer-title{
flex:1;font-size:11.5px;color:var(--muted);
letter-spacing:.2px;font-weight:400;
}
.si-explainer-title strong{color:#fff;font-weight:500}
.si-explainer-chev{
font-size:11px;color:var(--teal);
transition:transform .25s;
margin-left:4px;
}
.si-explainer.open .si-explainer-chev{transform:rotate(90deg)}
.si-explainer-body{
max-height:0;overflow:hidden;
transition:max-height .3s ease;
}
.si-explainer.open .si-explainer-body{max-height:500px}
.si-explainer-inner{
padding:4px 16px 16px;
font-size:12.5px;color:rgba(242,244,247,.75);
line-height:1.85;font-weight:300;
}
.si-explainer-inner strong{color:#fff;font-weight:400}
/* Coming soon content panel */
.si-coming{
margin:20px 16px;
padding:24px 18px;
background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
border:1px solid rgba(124,58,237,.22);
border-radius:16px;position:relative;overflow:hidden;
}
.si-coming::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,rgba(0,212,200,.5),rgba(124,58,237,.5),transparent);
}
.si-coming-icon-row{
display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.si-coming-brand-row{
display:flex;align-items:center;gap:8px;
margin-bottom:18px;padding-bottom:14px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.si-coming-brand-txt{
font-family:'Newsreader',Georgia,serif;font-size:11px;
letter-spacing:1.8px;font-weight:700;text-transform:uppercase;
background:linear-gradient(135deg,#14C8B8 0%,#3B66E5 50%,#7B4DE0 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.si-talent-brand-row{
display:flex;align-items:center;gap:8px;
margin:14px 16px 0;padding:0 4px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.si-talent-brand-txt{
font-family:'Newsreader',Georgia,serif;font-size:11px;
letter-spacing:1.8px;font-weight:700;text-transform:uppercase;
background:linear-gradient(135deg,#14C8B8 0%,#3B66E5 50%,#7B4DE0 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.si-coming-icon{
width:42px;height:42px;border-radius:10px;
background:rgba(255,255,255,.05);
border:1px solid rgba(124,58,237,.3);
display:flex;align-items:center;justify-content:center;
font-size:19px;color:#A78BFA;flex-shrink:0;
}
.si-coming-meta{flex:1}
.si-coming-name{
font-family:'Newsreader',Georgia,serif;font-size:18px;font-weight:700;
background:linear-gradient(135deg,#14C8B8 0%,#3B66E5 60%,#7B4DE0 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:-.3px;line-height:1.2;
}
.si-coming-badge{
display:inline-block;margin-top:4px;
font-size:8.5px;font-weight:600;letter-spacing:1.2px;
padding:3px 9px;border-radius:100px;
background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25);
color:#A78BFA;text-transform:uppercase;
}
.si-coming-desc{
font-size:13px;color:rgba(242,244,247,.8);
line-height:1.85;font-weight:300;margin-bottom:18px;
}
.si-coming-desc strong{color:#fff;font-weight:500}
.si-coming-preview-label{
font-size:8.5px;letter-spacing:2px;color:#A78BFA;
font-weight:700;text-transform:uppercase;margin-bottom:10px;
}
.si-coming-preview{
display:flex;flex-direction:column;gap:8px;
}
.si-coming-item{
display:flex;gap:10px;align-items:flex-start;
padding:11px 13px;border-radius:10px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
}
.si-coming-item-dot{
width:5px;height:5px;border-radius:50%;
background:var(--teal);flex-shrink:0;margin-top:7px;
}
.si-coming-item-body{flex:1;min-width:0}
.si-coming-item-ttl{
font-size:12px;font-weight:500;color:#fff;
line-height:1.5;margin-bottom:3px;
}
.si-coming-item-desc{
font-size:11.5px;color:rgba(242,244,247,.72);
line-height:1.7;font-weight:300;
}
.si-coming-foot{
margin-top:18px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.06);
font-size:10.5px;color:var(--muted2);
line-height:1.7;font-weight:300;
}
.si-coming-foot strong{color:var(--teal);font-weight:500}
/* ── TIER SYSTEM & EMPLOYEE PILLAR RESTRUCTURE ── */
/* Tier dot indicator */
.si-tier-dots{
display:inline-flex;gap:2px;align-items:center;
}
.si-tier-dot{
width:5px;height:5px;border-radius:50%;
background:rgba(255,255,255,.15);
display:inline-block;
}
.si-tier-dot.filled{background:var(--teal)}
.si-tier-dot.filled.t2{background:#A78BFA}
/* Capability brief — top of pillar talent view */
.si-cap-brief{
margin:14px 16px 0;padding:16px 18px;
background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(124,58,237,.04));
border:1px solid rgba(37,99,235,.18);border-radius:14px;
}
.si-cap-brief-label{
font-size:10.5px;letter-spacing:2px;color:#60A5FA;
font-weight:700;text-transform:uppercase;margin-bottom:9px;
}
.si-cap-brief-text{
font-size:13px;color:rgba(242,244,247,.85);
line-height:1.85;font-weight:300;
}
.si-cap-brief-text strong{color:#fff;font-weight:500}
/* Instructive comparators */
.si-comparators{margin:16px 16px 0}
.si-comparators-label{
font-size:10.5px;letter-spacing:2px;color:#A78BFA;
font-weight:700;text-transform:uppercase;margin-bottom:10px;
padding:0 2px;display:flex;align-items:center;gap:6px;
}
.si-comparator{
padding:12px 16px;margin-bottom:8px;
background:rgba(0,212,200,.03);
border:1px solid rgba(0,212,200,.1);
border-radius:10px;
}
.si-comparator-name{
font-size:12.5px;font-weight:600;color:#fff;
margin-bottom:4px;letter-spacing:-.2px;
}
.si-comparator-why{
font-size:12px;color:rgba(242,244,247,.72);
line-height:1.75;font-weight:300;
}
/* Source peer and capability tags (small pills on candidate cards) */
.si-cand-meta{
display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;
}
.si-cand-tag-small{
font-size:9.5px;font-weight:500;letter-spacing:.3px;
padding:4px 8px;border-radius:5px;
background:rgba(255,255,255,.04);
color:rgba(242,244,247,.72);
border:1px solid rgba(255,255,255,.06);
line-height:1.4;
}
.si-cand-tag-small.src{
color:rgba(167,139,250,.85);
background:rgba(124,58,237,.07);
border-color:rgba(124,58,237,.18);
}
/* Right-side tier + signal column on candidate cards */
.si-cand-right{
display:flex;flex-direction:column;align-items:flex-end;gap:5px;
flex-shrink:0;min-width:42px;
}
.si-tier-label{
font-size:7.5px;font-weight:700;letter-spacing:1.3px;
text-transform:uppercase;line-height:1;
}
.si-tier-label.t1{color:var(--teal)}
.si-tier-label.t2{color:#A78BFA}
.si-tier-label.t3{color:var(--muted2)}
/* Tier 3 section */
.si-tier3-section{
margin:22px 16px 0;padding-top:18px;
border-top:1px solid rgba(255,255,255,.06);
}
.si-tier3-head{
display:flex;align-items:center;gap:10px;margin-bottom:4px;
}
.si-tier3-label{
font-size:9px;letter-spacing:2.5px;color:#A78BFA;
text-transform:uppercase;font-weight:600;
opacity:.85;
}
.si-tier3-count{
font-size:9px;color:var(--muted2);opacity:.7;
}
.si-tier3-desc{
font-size:11px;color:rgba(242,244,247,.7);
line-height:1.75;font-weight:300;margin-bottom:14px;
margin-top:5px;
}
.si-tier3-entry{
display:flex;align-items:center;gap:10px;
padding:10px 12px;margin-bottom:4px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.04);
border-radius:10px;
}
.si-tier3-avatar{
width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Newsreader',Georgia,serif;font-size:9px;font-weight:700;
color:rgba(255,255,255,.75);flex-shrink:0;letter-spacing:.3px;
background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(96,112,140,.15));
}
.si-tier3-body{flex:1;min-width:0}
.si-tier3-name{
font-size:12px;font-weight:500;color:rgba(242,244,247,.88);
line-height:1.3;margin-bottom:3px;letter-spacing:-.1px;
}
.si-tier3-role{
font-size:10.5px;color:var(--muted2);
line-height:1.55;font-weight:300;
}
/* STICKY WHY COLLAPSIBLES */
.pd-why-sticky{
position:sticky;top:0;
z-index:5;
background:#060810;
margin:-16px -16px 18px;
padding:14px 16px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.pd-why-box{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
margin-bottom:6px;
cursor:pointer;
overflow:hidden;
transition:background .15s,border-color .15s;
}
.pd-why-box:last-child{margin-bottom:0}
.pd-why-box:active{background:rgba(255,255,255,.05)}
.pd-why-box.open{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.14);
}
.pd-why-head{
display:flex;align-items:center;justify-content:space-between;
padding:11px 14px;
gap:10px;
}
.pd-why-label{
flex:1;
font-size:11px;letter-spacing:1.6px;
font-weight:600;text-transform:uppercase;
color:var(--muted2);
line-height:1.3;
}
.pd-why-chev{
font-size:14px;color:var(--muted2);
transition:transform .25s,color .2s;flex-shrink:0;
line-height:1;
}
.pd-why-box.open .pd-why-chev{transform:rotate(90deg);color:var(--teal)}
.pd-why-body{
max-height:0;overflow:hidden;
transition:max-height .3s ease;
}
.pd-why-box.open .pd-why-body{max-height:600px}
.pd-why-content{
padding:4px 16px 15px;
font-size:13.5px;
color:rgba(242,244,247,.9);
line-height:1.72;
font-weight:300;
}
/* ── THE READ — Overview hero narrative ── */
.read-hero{
margin:16px 16px 14px;
padding:18px 18px 16px;
background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(124,58,237,.04));
border:1px solid rgba(37,99,235,.18);
border-radius:16px;
position:relative;
animation:readFadeUp .8s 1.4s both cubic-bezier(.4,0,.2,1);
}
.read-hero::before{
content:'';position:absolute;top:0;left:24px;right:24px;height:1px;
background:linear-gradient(90deg,transparent,rgba(37,99,235,.6),rgba(124,58,237,.6),transparent);
opacity:.4;
}
@keyframes readFadeUp{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}
.read-head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:14px;
}
.read-label{
font-size:10px;letter-spacing:3px;font-weight:700;
text-transform:uppercase;
background:linear-gradient(90deg,#3B66E5,#7B4DE0);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.read-date{
font-size:9.5px;letter-spacing:.6px;
color:var(--muted2);font-weight:400;
}
/* Hero statement — the preserved poetic framing */
.read-hero-stmt{
font-size:14px;color:rgba(242,244,247,.92);
line-height:1.75;font-weight:300;font-style:italic;
cursor:pointer;
transition:color .15s;
}
.read-hero-stmt:active{color:#fff}
.read-hero-stmt strong{
font-weight:500;color:#fff;font-style:normal;
}
/* Expand/collapse toggle */
.read-toggle{
display:flex;align-items:center;justify-content:center;
gap:8px;padding:10px 14px;margin-top:14px;
cursor:pointer;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:9px;
transition:background .15s,border-color .15s;
}
.read-toggle:active{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.14);
}
.read-toggle-txt{
font-size:10px;letter-spacing:2px;
font-weight:600;text-transform:uppercase;
color:rgba(242,244,247,.78);
}
.read-toggle-chev{
font-size:14px;color:var(--teal);line-height:1;
transform:rotate(90deg);
transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.read-hero.open .read-toggle-chev{
transform:rotate(-90deg);
}
/* Expanded content wrapper */
.read-expanded{
max-height:0;overflow:hidden;
transition:max-height .45s cubic-bezier(.4,0,.2,1);
}
.read-hero.open .read-expanded{
max-height:2200px;
}
.read-hero.open .read-body{
padding-top:18px;
margin-top:0;
}
/* Data-anchored key finding paragraph */
.read-body{
font-size:12.5px;color:rgba(242,244,247,.78);
line-height:1.85;font-weight:300;
margin-bottom:18px;
cursor:pointer;
transition:color .15s;
}
.read-body:active{color:rgba(242,244,247,.9)}
.read-body strong{color:#fff;font-weight:500}
/* Section labels within The Read */
.read-sec-label{
font-size:8.5px;letter-spacing:2.5px;
color:#60A5FA;font-weight:700;
text-transform:uppercase;margin-bottom:9px;
display:flex;align-items:center;gap:7px;
opacity:.95;
}
.read-sec-label.is-purple{color:#A78BFA}
.read-sec-label::before{
content:'';width:3px;height:3px;border-radius:50%;
background:currentColor;opacity:.85;
}
/* Tensions */
.read-tensions{margin-bottom:18px}
.tension-item{
display:flex;gap:10px;padding:9px 2px;
align-items:flex-start;cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.04);
transition:background .15s;
border-radius:4px;
}
.tension-item:last-child{border-bottom:none}
.tension-item:active{background:rgba(255,255,255,.02)}
.tension-dot{
width:5px;height:5px;border-radius:50%;
background:var(--purple);opacity:.7;flex-shrink:0;
margin-top:7px;
}
.tension-text{
font-size:12.5px;color:rgba(242,244,247,.78);
line-height:1.65;font-weight:300;flex:1;
}
.tension-text strong{color:#fff;font-weight:500}
.tension-chev{
font-size:13px;color:var(--muted2);
flex-shrink:0;align-self:center;opacity:.5;
}
/* So What signposts */
.read-sowhat{}
.sw-card{
display:flex;align-items:stretch;gap:0;
margin-bottom:6px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
border-radius:10px;cursor:pointer;
transition:border-color .15s,background .15s;
overflow:hidden;
}
.sw-card:last-child{margin-bottom:0}
.sw-card:active{
border-color:rgba(37,99,235,.3);
background:rgba(255,255,255,.05);
}
.sw-accent{
width:3px;flex-shrink:0;
}
.sw-inner{
display:flex;align-items:center;gap:10px;
padding:11px 13px;flex:1;min-width:0;
}
.sw-body{flex:1;min-width:0}
.sw-title{
font-size:11px;font-weight:600;
color:#fff;letter-spacing:.2px;
margin-bottom:3px;text-transform:uppercase;
}
.sw-title .sw-badge{
font-weight:500;letter-spacing:.5px;
text-transform:uppercase;font-size:9px;
padding:0 0 0 7px;opacity:.7;
}
.sw-text{
font-size:11.5px;color:rgba(242,244,247,.68);
line-height:1.55;font-weight:300;
}
.sw-chev{
font-size:14px;color:var(--muted2);
flex-shrink:0;opacity:.6;
}
/* ── INTELLIGENCE LAYERS — FOUR-CARD HERO ── */
.si-hero{
flex-shrink:0;
padding:12px 14px 11px;
background:linear-gradient(180deg,rgba(64,67,74,.55) 0%,rgba(56,59,66,.4) 100%);
border-bottom:1px solid rgba(255,255,255,.08);
transition:padding .3s ease;
}
.si-hero.collapsed{padding:8px 14px}
.si-hero-headbar{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:9px;cursor:pointer;
padding:2px 2px;
}
.si-hero.collapsed .si-hero-headbar{margin-bottom:0}
.si-hero-label{
font-size:13px;letter-spacing:2.5px;
background:none;
-webkit-text-fill-color:#A8B4C2;
font-weight:800;text-transform:uppercase;
}
.si-hero-active-tag{
font-size:12px;color:rgba(242,244,247,.78);
font-weight:600;letter-spacing:.5px;
display:none;
}
.si-hero.collapsed .si-hero-label{display:none}
.si-hero.collapsed .si-hero-active-tag{display:block}
.si-hero-collapse-chev{
font-size:13px;color:var(--muted2);
transition:transform .3s;line-height:1;
flex-shrink:0;
}
.si-hero.collapsed .si-hero-collapse-chev{transform:rotate(180deg)}
.si-hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
max-height:300px;overflow:hidden;
transition:max-height .35s ease,opacity .25s ease,margin .3s ease;
opacity:1;
}
.si-hero.collapsed .si-hero-grid{
max-height:0;opacity:0;margin:0;
pointer-events:none;
}
.si-hero-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.09);
border-radius:11px;
padding:11px 12px 11px;
cursor:pointer;
transition:background .18s,border-color .18s,transform .15s;
position:relative;
display:flex;flex-direction:column;gap:5px;
}
.si-hero-card:active{transform:scale(.98)}
.si-hero-card.active{
background:linear-gradient(135deg,rgba(0,212,200,.14),rgba(0,212,200,.05));
border-color:rgba(0,212,200,.45);
box-shadow:0 0 0 1px rgba(0,212,200,.18) inset;
}
.si-hero-card.locked{opacity:.65}
.si-hero-card.locked:active{transform:none}
.si-hero-cardhead{
display:flex;align-items:center;gap:8px;
}
.si-hero-icon{
font-size:16px;line-height:1;
filter:grayscale(.3);
}
.si-hero-card.active .si-hero-icon{filter:none}
.si-hero-name{
font-size:14.5px;font-weight:700;color:#fff;
letter-spacing:-.3px;flex:1;
font-family:'Newsreader',Georgia,serif;
}
.si-hero-status{
font-size:8px;letter-spacing:1.2px;
font-weight:700;text-transform:uppercase;
padding:2.5px 6px;border-radius:3px;
flex-shrink:0;
}
.si-hero-status.active{
background:rgba(0,212,200,.15);
color:var(--teal);
}
.si-hero-status.coming{
background:rgba(255,255,255,.04);
color:var(--muted2);
}
.si-hero-pitch{
font-size:11px;color:rgba(242,244,247,.66);
line-height:1.5;font-weight:300;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.si-hero-card.active .si-hero-pitch{color:rgba(242,244,247,.85)}
/* ── COMPRESSED ANCHOR STRIP ── */
.si-anchor-compact{
flex-shrink:0;
padding:10px 16px 11px;
background:rgba(255,255,255,.02);
border-bottom:1px solid rgba(255,255,255,.05);
display:flex;align-items:center;gap:10px;
overflow-x:auto;scrollbar-width:none;
}
.si-anchor-compact::-webkit-scrollbar{display:none}
.si-anchor-compact-co{
font-size:10px;color:var(--muted2);font-weight:500;
letter-spacing:.4px;flex-shrink:0;
}
.si-anchor-compact-divider{
width:1px;height:14px;background:rgba(255,255,255,.08);
flex-shrink:0;
}
.si-anchor-pillar-mini{
display:flex;align-items:center;gap:5px;
padding:5px 9px;border-radius:100px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
cursor:pointer;flex-shrink:0;
transition:background .15s,border-color .15s;
}
.si-anchor-pillar-mini:active{background:rgba(255,255,255,.06)}
.si-anchor-pillar-mini.active{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.18);
}
.si-anchor-pillar-mini-name{
font-size:10px;font-weight:500;color:#fff;
letter-spacing:-.1px;
}
.si-anchor-pillar-mini-score{
font-family:'Newsreader',Georgia,serif;
font-size:11px;font-weight:700;
letter-spacing:-.3px;
}
/* ── EXPLAINER FLOW (3-slide) ── */
.si-explainer-flow{
position:absolute;inset:0;
z-index:65;
background:
radial-gradient(ellipse 700px 500px at 50% 0%,rgba(0,212,200,.07) 0%,transparent 60%),
linear-gradient(180deg,#3A3D44 0%,#33363D 60%,#2C2F35 100%);
flex-direction:column;
opacity:0;
display:none;
transition:opacity .35s ease;
}
.si-explainer-flow.shown{
display:flex;
opacity:1;
animation:siExpFlowFade .35s ease both;
}
@keyframes siExpFlowFade{
from{opacity:0}
to{opacity:1}
}
.si-explainer-flow-head{
flex-shrink:0;
display:flex;justify-content:flex-end;align-items:center;
padding:14px 18px 0;
}
.si-explainer-flow-skip{
font-size:11px;color:var(--muted2);
font-weight:500;letter-spacing:.3px;
cursor:pointer;padding:6px 4px;
transition:color .15s;
}
.si-explainer-flow-skip:active{color:#fff}
.si-explainer-flow-stage{
flex:1;display:flex;flex-direction:column;
position:relative;overflow:hidden;
padding:12px 24px 24px;
}
.si-exp-slide{
position:absolute;
top:12px;left:24px;right:24px;bottom:24px;
display:flex;flex-direction:column;justify-content:center;
opacity:0;transform:translateX(40px);
transition:opacity .4s ease,transform .4s ease;
pointer-events:none;
}
.si-exp-slide.act{
opacity:1;transform:translateX(0);
pointer-events:auto;
}
.si-exp-slide.prev{
opacity:0;transform:translateX(-40px);
}
.si-exp-mark{
display:flex;align-items:center;justify-content:center;
margin-bottom:18px;
filter:drop-shadow(0 0 16px rgba(0,212,200,.45));
}
.si-exp-brand{
font-size:9.5px;letter-spacing:3px;
color:#A8B4C2;
font-weight:700;text-transform:uppercase;
margin-bottom:18px;text-align:center;
}
.si-exp-headline{
font-family:'Newsreader',Georgia,serif;
font-size:24px;font-weight:700;
color:#fff;text-align:center;
letter-spacing:-.5px;line-height:1.25;
margin-bottom:16px;
}
.si-exp-body{
font-size:13px;color:rgba(242,244,247,.78);
line-height:1.85;font-weight:300;
text-align:center;max-width:340px;
margin:0 auto;
}
.si-exp-body strong{color:#fff;font-weight:500}
/* Slide 2 — four-layer mini-grid */
.si-exp-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;margin-top:20px;
}
.si-exp-mini{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
border-radius:12px;
padding:14px 12px;
text-align:center;
}
.si-exp-mini.active{
background:linear-gradient(135deg,rgba(0,212,200,.12),rgba(0,212,200,.04));
border-color:rgba(0,212,200,.4);
}
.si-exp-mini.locked{opacity:.55}
.si-exp-mini-icon{font-size:18px;margin-bottom:6px;line-height:1}
.si-exp-mini-name{
font-size:11.5px;font-weight:600;color:#fff;
margin-bottom:4px;letter-spacing:-.1px;
}
.si-exp-mini-pitch{
font-size:9.5px;color:rgba(242,244,247,.6);
line-height:1.5;font-weight:300;
}
.si-exp-mini-status{
font-size:7px;letter-spacing:1.3px;
color:var(--teal);font-weight:700;
text-transform:uppercase;margin-top:5px;
}
.si-exp-mini.locked .si-exp-mini-status{color:var(--muted2)}
/* Slide 3 — context */
.si-exp-context{
background:rgba(0,212,200,.05);
border:1px solid rgba(0,212,200,.18);
border-radius:12px;
padding:14px 16px;
margin-top:18px;
}
.si-exp-context-label{
font-size:8.5px;letter-spacing:2.2px;
color:var(--teal);font-weight:700;
text-transform:uppercase;margin-bottom:6px;
}
.si-exp-context-text{
font-size:12px;color:rgba(242,244,247,.85);
line-height:1.7;font-weight:300;
}
.si-exp-context-text strong{color:#fff;font-weight:500}
/* Footer with dots + CTA */
.si-exp-foot{
flex-shrink:0;
padding:0 24px 26px;
display:flex;flex-direction:column;align-items:center;gap:14px;
}
.si-exp-dots{
display:flex;gap:6px;align-items:center;
}
.si-exp-dot{
width:6px;height:6px;border-radius:50%;
background:rgba(255,255,255,.18);
transition:background .25s,width .25s;
}
.si-exp-dot.act{
background:var(--teal);
width:22px;border-radius:3px;
}
.si-exp-cta{
width:100%;max-width:320px;
padding:13px 20px;
background:linear-gradient(135deg,rgba(0,212,200,.18),rgba(0,212,200,.08));
border:1px solid rgba(0,212,200,.4);
border-radius:11px;
color:#fff;font-size:13px;font-weight:600;
letter-spacing:.3px;text-align:center;
cursor:pointer;
transition:background .15s,transform .15s;
}
.si-exp-cta:active{transform:scale(.98)}
.si-exp-cta.primary{
background:linear-gradient(135deg,#14C8B8,#7B4DE0);
border-color:rgba(0,212,200,.6);
box-shadow:0 4px 20px rgba(0,212,200,.25);
}
/* Tour reopen button in header */
.si-tour-btn{
width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
cursor:pointer;flex-shrink:0;
transition:background .15s;
font-size:13px;color:var(--muted2);
font-style:italic;font-family:'Newsreader',Georgia,serif;
font-weight:700;
}
.si-tour-btn:active{background:rgba(255,255,255,.08)}
/* ── PERFORMANCE SPECTRUM (under composite score ring) ── */
.perf-spectrum{
margin:14px 16px 0;
padding-top:18px;
position:relative;
}
.perf-spectrum-track{
position:relative;
height:8px;
border-radius:4px;
background:linear-gradient(90deg,
rgba(90,122,156,.30) 0%,
rgba(90,122,156,.30) 5%,
rgba(96,138,184,.36) 5%,
rgba(96,138,184,.36) 25%,
rgba(96,165,250,.45) 25%,
rgba(96,165,250,.45) 45%,
rgba(96,165,250,.55) 45%,
rgba(96,165,250,.55) 65%,
rgba(124,58,237,.50) 65%,
rgba(124,58,237,.50) 80%,
rgba(124,58,237,.65) 80%,
rgba(124,58,237,.65) 95%,
rgba(0,212,200,.78) 95%,
rgba(0,212,200,.78) 100%);
border:1px solid rgba(255,255,255,.06);
overflow:visible;
}
.perf-spectrum-marker{
position:absolute;
top:-3px;
width:14px;height:14px;
border-radius:50%;
background:#ECEDEF;
border:2.5px solid #60A5FA;
box-shadow:0 0 12px rgba(96,165,250,.5),0 2px 6px rgba(0,0,0,.5);
transform:translateX(-50%);
z-index:3;
}
.perf-spectrum-marker-label{
position:absolute;
top:18px;
font-family:'Newsreader',Georgia,serif;
font-size:9.5px;font-weight:700;
letter-spacing:.4px;
color:#60A5FA;
white-space:nowrap;
transform:translateX(-50%);
}
/* Peer dots above the line — equalised size, colour-differentiated only */
.perf-spectrum-peer-dot{
position:absolute;
width:8px;height:8px;
top:-12px;
border-radius:50%;
transform:translateX(-50%);
z-index:2;
border:1.5px solid #060810;
}
.perf-spectrum-peer-dot.mid{
background:#60A5FA;
box-shadow:0 0 6px rgba(96,165,250,.6);
}
.perf-spectrum-peer-dot.top{
background:#14C8B8;
box-shadow:0 0 6px rgba(0,212,200,.6);
}
/* Band labels — five primary bands on a single row at their band centres,
   with Foundational/Leading as quieter bookends beneath at the extreme ends.
   Active band uses the band's gradient colour (light blue) — Signal palette. */
.perf-spectrum-bands{
position:relative;
height:36px;
margin-top:24px;
}
.perf-spectrum-band{
position:absolute;
top:0;
text-align:center;
line-height:1.2;
transform:translateX(-50%);
white-space:nowrap;
font-size:8.5px;
letter-spacing:1.4px;
font-weight:500;
text-transform:uppercase;
color:var(--muted2);
}
.perf-spectrum-band.current{
color:#60A5FA;
font-weight:600;
}
.perf-spectrum-band.bookend{
top:18px;
font-size:7px;
letter-spacing:1.6px;
font-weight:500;
color:rgba(160,180,210,.45);
}
.perf-spectrum-band.bookend-left{
left:0;transform:translateX(0);text-align:left;
}
.perf-spectrum-band.bookend-right{
right:0;left:auto;transform:translateX(0);text-align:right;
}
.perf-spectrum-tickmarks{
position:absolute;
inset:0;
pointer-events:none;
}
.perf-spectrum-tick{
position:absolute;
top:-2px;bottom:-2px;
width:1px;
background:rgba(255,255,255,.18);
}
/* Key under the band labels — replaces the inline staggered labels above the bar */
.perf-spectrum-key{
display:flex;justify-content:center;gap:20px;
margin-top:14px;
}
.perf-spectrum-key-item{
display:flex;align-items:center;gap:6px;
font-family:'Inter',sans-serif;
font-size:9px;letter-spacing:.4px;
font-weight:500;
color:rgba(242,244,247,.62);
}
.perf-spectrum-key-dot{
width:7px;height:7px;border-radius:50%;
display:inline-block;flex-shrink:0;
}
.perf-spectrum-key-dot.mid{
background:#60A5FA;
box-shadow:0 0 4px rgba(96,165,250,.5);
}
.perf-spectrum-key-dot.top{
background:#14C8B8;
box-shadow:0 0 4px rgba(0,212,200,.5);
}
/* ── MARKET CONTEXT CARD (in Market & Competitors section) ── */
.market-card{
margin:0 16px 12px;
padding:14px 16px;
background:linear-gradient(135deg,rgba(5,150,105,.08),rgba(5,150,105,.03));
border:1px solid rgba(5,150,105,.22);
border-radius:14px;
cursor:pointer;
display:flex;
align-items:center;
gap:14px;
transition:transform .15s,border-color .15s;
}
.market-card:active{transform:scale(.985);border-color:rgba(5,150,105,.4)}
.market-card-icon{
width:36px;height:36px;
border-radius:10px;
background:rgba(5,150,105,.12);
border:1px solid rgba(5,150,105,.25);
display:flex;align-items:center;justify-content:center;
font-size:18px;color:#10B981;
flex-shrink:0;
}
.market-card-body{flex:1;min-width:0}
.market-card-label{
font-size:8px;letter-spacing:1.8px;text-transform:uppercase;
color:var(--muted2);font-weight:600;margin-bottom:4px;
}
.market-card-value{
display:flex;align-items:baseline;gap:8px;
margin-bottom:2px;
}
.market-card-value-num{
font-family:'Newsreader',Georgia,serif;font-size:16px;
font-weight:700;color:#10B981;letter-spacing:-.3px;
}
.market-card-value-tag{
font-size:11px;font-weight:600;color:#10B981;
}
.market-card-sub{
font-size:10.5px;color:var(--muted);font-weight:300;line-height:1.45;
}
.market-card-chev{
color:#10B981;font-size:14px;flex-shrink:0;opacity:.7;
}
/* ── GLOBAL CHAT FAB (visible on all main screens) ── */
.global-chat-fab{
position:fixed;
bottom:calc(var(--safe-bottom) + 78px);
right:16px;
z-index:60;
display:flex;align-items:center;gap:8px;
padding:10px 14px 10px 12px;
background:linear-gradient(135deg,rgba(0,212,200,.18),rgba(124,58,237,.16));
border:1px solid rgba(0,212,200,.4);
border-radius:100px;
cursor:pointer;
box-shadow:0 6px 24px rgba(0,212,200,.22),0 2px 8px rgba(0,0,0,.4);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
transition:transform .15s,box-shadow .15s,opacity .2s;
}
.global-chat-fab:active{
transform:scale(.96);
box-shadow:0 3px 12px rgba(0,212,200,.18),0 1px 4px rgba(0,0,0,.4);
}
.global-chat-fab.hidden{
opacity:0;pointer-events:none;
transform:translateY(8px) scale(.94);
}
.global-chat-fab-label{
font-size:11.5px;font-weight:600;
background:linear-gradient(135deg,#14C8B8,#A78BFA);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:.2px;
}
@media (min-width:520px){
/* Inside the desktop frame — anchor to frame edge, not viewport */
.app .global-chat-fab{position:absolute}
}
/* ── ENRICHED SxE TRAJECTORY SUMMARY (under chart) ── */
.traj-sxe-summary{
display:flex;align-items:center;justify-content:center;
gap:10px;margin-top:10px;padding-top:10px;
border-top:1px solid rgba(255,255,255,.05);
flex-wrap:wrap;
}
.traj-sxe-summary-label{
font-size:8px;letter-spacing:1.5px;color:var(--muted2);
font-weight:600;text-transform:uppercase;
}
.traj-sxe-summary-vals{
font-family:'Newsreader',Georgia,serif;font-size:13px;font-weight:700;
letter-spacing:-.2px;
}
.traj-sxe-summary-vals .lo{color:#F87171}
.traj-sxe-summary-vals .sep{color:var(--muted2);font-size:11px;font-weight:300;font-family:'Inter',sans-serif;margin:0 4px}
.traj-sxe-summary-vals .hi{color:var(--teal)}
.traj-sxe-summary-tag{
font-size:9px;color:var(--blue);font-weight:500;
}
/* ── FLOATING SIGNAL CHAT BUTTON (Intelligence overlay) ── */
.si-chat-fab{
position:absolute;
bottom:calc(var(--safe-bottom) + 18px);
right:18px;
z-index:64;
display:flex;align-items:center;gap:8px;
padding:10px 14px 10px 12px;
background:linear-gradient(135deg,rgba(0,212,200,.18),rgba(124,58,237,.16));
border:1px solid rgba(0,212,200,.4);
border-radius:100px;
cursor:pointer;
box-shadow:0 6px 24px rgba(0,212,200,.22),0 2px 8px rgba(0,0,0,.4);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
font-family:inherit;
transition:transform .15s,box-shadow .15s;
animation:siChatFabIn .4s .25s both cubic-bezier(.4,0,.2,1);
}
.si-chat-fab:active{
transform:scale(.96);
box-shadow:0 3px 12px rgba(0,212,200,.18),0 1px 4px rgba(0,0,0,.4);
}
.si-chat-fab-label{
font-size:11.5px;font-weight:600;
background:linear-gradient(135deg,#14C8B8,#A78BFA);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:.2px;
}
@keyframes siChatFabIn{
from{opacity:0;transform:translateY(10px) scale(.92)}
to{opacity:1;transform:translateY(0) scale(1)}
}

/* ═══════════════════════════════════════════════════════════════
   iPad CHASSIS & ADAPTATION LAYER  (v3 — container queries)
   ───────────────────────────────────────────────────────────────
   The chassis ALWAYS renders, auto-scaling to fit the viewport.
   iPad-specific layout fires on html.device-ipad (set by the JS at the top),
   so it activates based on chassis content width (1194px), not
   browser viewport — making it work in Claude's artefact pane
   AND in Chrome at any size.
═══════════════════════════════════════════════════════════════ */

/* iPad-chassis chrome — preview mode only. Never affects real devices. */
html.preview-ipad, html.preview-ipad body {
  height: 100%;
  overflow: hidden;
}
html.preview-ipad body {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, #1c1f27 0%, #0c0e13 75%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin: 0;
}

/* Default state: chassis & screen are layout passthroughs.
   Children render as if these wrappers weren't there. */
.ipad-chassis, .ipad-screen { display: contents; }

/* iPad Pro 11" landscape: 1194 × 834 viewport.
   Chassis adds 17px bezel all round → 1228 × 868. */
.preview-ipad .ipad-chassis {
  display: flex;
  width: 1228px;
  height: 868px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #2a2d36 0%, #1d2026 50%, #2a2d36 100%);
  border-radius: 42px;
  padding: 17px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 50px 100px rgba(0,0,0,.65),
    0 20px 40px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4);
  /* Auto-scale to fit viewport: fits in either Chrome at any size, or Claude artefact pane */
  transform: scale(min(
    1,
    calc((100vw - 48px) / 1228),
    calc((100vh - 48px) / 868)
  ));
  transform-origin: center center;
}
/* Camera dot, top-centre for landscape orientation */
.preview-ipad .ipad-chassis::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0a0c10;
  box-shadow:
    inset 0 0 2px rgba(0,212,200,.25),
    0 0 0 1px rgba(255,255,255,.04);
}

.preview-ipad .ipad-screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: #060810;
  /* transform creates containing block so position:fixed children attach to screen, not viewport */
  transform: translateZ(0);
  isolation: isolate;
}

/* App fills iPad screen exactly (overrides V22 mobile dvh sizing) */
.device-ipad .app {
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  max-width: none !important;
}

/* ── Splash and onboard fill the iPad screen, not the viewport.
   Only override transform on these two — they use translateX(-50%) for centering.
   DO NOT override transform on .si-overlay, .pd-overlay, .drawer — they need
   their transform values to animate in/out of view. ── */
.device-ipad .splash,
.device-ipad .onboard {
  max-width: none !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
}

/* These overlays just need width/positioning — leave transforms intact */
.device-ipad .si-overlay,
.device-ipad .pd-overlay,
.device-ipad .drawer-overlay {
  max-width: none !important;
  width: 100% !important;
}

/* Drawer width unchanged (it slides from left, fixed width works as before) */

/* ═══════════════════════════════════════
   iPad LAYOUT — fires when .device-ipad is at iPad-landscape width.
   Container queries match the screen container, NOT browser viewport.
═══════════════════════════════════════ */

/* iPad layout — applies whenever inside .device-ipad wrapper. No queries. */
  /* App-level type lift for tablet reading distance */
.device-ipad .app {
    font-size: 16px;
  }

  /* Topbar — bigger padding, larger marks */
.device-ipad .topbar {
    padding: 20px 36px 18px !important;
  }
.device-ipad .hamburger { width: 46px; height: 46px; }
.device-ipad .ham-line { width: 18px; }
.device-ipad .logo-text { font-size: 22px !important; letter-spacing: -.5px; }
.device-ipad .co-pill { max-width: none; }
.device-ipad .co-name { font-size: 14px; }
.device-ipad .co-date { font-size: 11px; letter-spacing: 1.5px; }

  /* Bottom nav — bigger tap targets */
.device-ipad .bottomnav {
    padding: 12px 0 calc(var(--safe-bottom) + 10px) !important;
  }
.device-ipad .nav-icon { font-size: 24px; }
.device-ipad .nav-lbl { font-size: 12px; letter-spacing: .5px; }

  /* Screen content padding */
.device-ipad .screen {
    padding: 0 32px calc(80px + var(--safe-bottom)) !important;
  }

  /* Section heads — capped, centred, breathing */
.device-ipad .section-head {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 22px 4px 14px !important;
  }
.device-ipad .section-label { font-size: 11.5px !important; letter-spacing: 3px !important; }
.device-ipad .section-action { font-size: 11.5px !important; }

  /* ─── OVERVIEW: composite | read 2-column hero ─── */
.device-ipad .ov-hero-grid {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 24px;
    align-items: stretch;
    max-width: 1400px;
    margin: 18px auto 0;
    padding: 0;
  }

  /* Composite section becomes a proper card */
.device-ipad #sc-overview .ov-hero {
    background: linear-gradient(180deg, rgba(28,30,38,.55) 0%, rgba(20,22,28,.7) 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 26px 24px 22px !important;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0;
  }
.device-ipad #sc-overview .ov-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,.6), rgba(0,212,200,.6), transparent);
    opacity: .55;
  }
.device-ipad #sc-overview .ov-week {
    font-size: 11px;
    letter-spacing: 3.2px;
    margin-bottom: 14px;
  }
  /* Pin "Tap to see Signal Expected" hint to bottom of flex column */
.device-ipad #sc-overview .ov-hero > div:last-child {
    margin-top: auto;
  }

  /* Score ring grows for landscape presence */
.device-ipad #sc-overview .score-ring-wrap svg {
    width: 240px !important;
    height: 240px !important;
  }

  /* Read panel: zero margin inside grid, larger statement type */
.device-ipad #sc-overview .read-hero {
    margin: 0 !important;
  }
.device-ipad #sc-overview .read-hero-stmt {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
.device-ipad #sc-overview .read-body {
    font-size: 14px !important;
    line-height: 1.78 !important;
  }

  /* Pillar list, SxE, status strip, league all cap and centre */
.device-ipad .pillar-list {
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 10px;
  }
.device-ipad .pillar-card {
    padding: 16px 20px 16px 22px !important;
    border-radius: 14px !important;
  }
.device-ipad .p-icon { width: 40px !important; height: 40px !important; font-size: 15px !important; }
.device-ipad .p-name { font-size: 11.5px !important; letter-spacing: 2.4px !important; }
.device-ipad .p-brief {
    font-size: 13px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
.device-ipad .pillar-card { gap: 22px !important; }
.device-ipad .p-body { padding-right: 10px; }
.device-ipad .p-score { font-size: 34px !important; }
.device-ipad .p-trend { font-size: 12px !important; }

.device-ipad .sxe-hero-frame {
    max-width: 1400px;
    margin: 0 auto !important;
    padding: 26px 28px 22px !important;
    border-radius: 18px !important;
  }
.device-ipad .sxe-hero-eyebrow { font-size: 13px !important; line-height: 1.65 !important; }

  .status-strip,
.device-ipad .league-table {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Drawer narrower at iPad — sidebar width */
.device-ipad .drawer { max-width: 360px !important; }

  /* ── SPLASH at iPad — repaginate for wider canvas ── */
.device-ipad .splash {
    padding: 48px 64px;
  }
.device-ipad .splash-brand {
    gap: 22px;
    margin-bottom: 32px;
  }
.device-ipad .splash-brand svg {
    width: 96px !important;
    height: 78px !important;
  }
.device-ipad .splash-name {
    font-size: 84px !important;
    letter-spacing: -2px !important;
  }
.device-ipad .splash-eyebrow {
    font-size: 12.5px !important;
    letter-spacing: 4.5px !important;
    margin-bottom: 24px !important;
  }
.device-ipad .splash-tag {
    font-size: 44px !important;
    letter-spacing: -1px !important;
  }

  /* ── ONBOARDING — content scaled for landscape canvas ── */
.device-ipad .ob-slide {
    padding: 64px 96px 140px !important;
  }
.device-ipad .ob-illus {
    margin-bottom: 40px !important;
  }
.device-ipad .ob-illus svg {
    transform: scale(1.3);
    transform-origin: center;
  }
.device-ipad .ob-label {
    font-size: 11px !important;
    letter-spacing: 4px !important;
    margin-bottom: 18px !important;
  }
.device-ipad .ob-title {
    font-size: 48px !important;
    letter-spacing: -1.2px !important;
    line-height: 1.12 !important;
    margin-bottom: 22px !important;
    max-width: 720px;
  }
.device-ipad .ob-body {
    font-size: 17px !important;
    line-height: 1.78 !important;
    max-width: 600px !important;
  }
.device-ipad .ob-dots {
    bottom: 100px !important;
  }
.device-ipad .ob-dot.act {
    width: 24px !important;
    background: #3B66E5;
  }
.device-ipad .ob-nav {
    bottom: 40px !important;
    left: 64px !important;
    right: 64px !important;
  }
.device-ipad .ob-prev {
    font-size: 13px !important;
  }
.device-ipad .ob-next {
    font-size: 15px !important;
    padding: 16px 36px !important;
  }
.device-ipad .ob-next.final {
    font-size: 16px !important;
    padding: 17px 40px !important;
  }
.device-ipad .ob-skip {
    font-size: 13px !important;
    top: 32px !important;
    right: 40px !important;
    padding: 8px 18px !important;
  }

/* Slide 2 — four-cards block: scale up on iPad */
.device-ipad .ob-four-cards {
    max-width: 520px !important;
    margin-top: 36px !important;
    gap: 10px !important;
  }
.device-ipad .ob-four-card {
    padding: 16px 20px !important;
    border-radius: 12px !important;
    gap: 16px !important;
  }
.device-ipad .ob-four-card-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
    border-radius: 9px !important;
  }
.device-ipad .ob-four-card-text {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
.device-ipad .ob-four-card-sub {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
  }

/* Slide 4 — three-cards block: scale up modestly on iPad */
.device-ipad .ob-three-cards {
    width: 440px !important;
    gap: 11px !important;
  }
.device-ipad .ob-three-card {
    padding: 14px 18px !important;
    border-radius: 13px !important;
    gap: 16px !important;
  }
.device-ipad .ob-three-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
.device-ipad .ob-three-card-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
.device-ipad .ob-three-card-text {
    font-size: 14.5px !important;
    margin-bottom: 3px !important;
  }
.device-ipad .ob-three-card-sub {
    font-size: 12px !important;
  }


/* ═══════════════════════════════════════════════════════════════
   v25 — iPad Hero polish wave 2 (1 May 2026)
   Six CSS-only fixes, all scoped behind .device-ipad:
     #1  LSA + Read heading typography unified, vertical alignment
     #2  Header chrome scaled up (logo, hamburger, company name)
     #5  57 / Composite Score spacing
     #8  SxE prompt restyle (centred, larger)
     #10 SxE 65/35 graph + explainer split
     #11 SMC 35/65 market context + peer table split
═══════════════════════════════════════════════════════════════ */

/* ── #2 Header chrome — bigger logo, hamburger, company plate ── */
.device-ipad .topbar { padding: 24px 40px 20px !important; }
.device-ipad .hamburger { width: 54px !important; height: 54px !important; }
.device-ipad .ham-line { width: 22px !important; height: 2px !important; }
.device-ipad .logo-center svg { width: 44px !important; height: 36px !important; }
.device-ipad .logo-center > div { font-size: 26px !important; }
.device-ipad .co-name { font-size: 17px !important; }
.device-ipad .co-date { font-size: 12px !important; letter-spacing: 1.8px !important; }

/* ── #1 LSA + Read eyebrow alignment ──
   Match top padding on both cards so eyebrows sit at same Y.
   Standardise font-size / letter-spacing / weight for typographic consistency. */
.device-ipad #sc-overview .read-hero {
  padding: 26px 24px 22px !important;
}
.device-ipad #sc-overview .read-head {
  margin-bottom: 18px !important;
}
/* v35 P3: v34 originally had .ov-week + .read-label as small uppercase
   letterspaced labels. The new v3-style overview uses italic Newsreader
   for both. Scope these legacy overrides to the old .ov-week class so they
   don't fire on .read-label any more. */
.device-ipad #sc-overview .ov-week {
  font-size: 12px !important;
  letter-spacing: 3.2px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.device-ipad #sc-overview .ov-week {
  margin-bottom: 18px !important;
}
.device-ipad #sc-overview .read-date {
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

/* ── #5 Composite Score label nudge — push down from "57" ── */
.device-ipad text.composite-label {
  transform: translateY(7px);
}

/* ── #8 SxE eyebrow — centred, more prominent ── */
.device-ipad .sxe-hero-eyebrow {
  font-size: 16px !important;
  text-align: center !important;
  color: rgba(242,244,247,.86) !important;
  font-weight: 400 !important;
  margin: 0 0 18px !important;
  line-height: 1.55 !important;
  letter-spacing: .15px !important;
}

/* ── #10 SxE 65/35 split — graph left, explainer right, outcomes full ── */
.device-ipad .sxe-hero-frame {
  display: grid !important;
  grid-template-columns: 65fr 35fr !important;
  grid-template-areas:
    "eyebrow eyebrow"
    "chart   method"
    "outcomes outcomes"
    "explore  explore" !important;
  column-gap: 28px !important;
  row-gap: 12px !important;
}
.device-ipad .sxe-hero-eyebrow    { grid-area: eyebrow !important; }
.device-ipad .sxe-hero-chart-wrap { grid-area: chart !important; display:flex; align-items:center; }
.device-ipad .sxe-hero-frame .sxe-outcomes        { grid-area: outcomes !important; margin-top: 6px !important; }
.device-ipad .sxe-hero-frame .sxe-method {
  grid-area: method !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
  color: rgba(190,210,230,.72) !important;
}
.device-ipad .sxe-hero-frame .sxe-explore         { grid-area: explore !important; }
.device-ipad .sxe-hero-chart {
  max-height: 460px !important;
  width: 100% !important;
}

/* ── #11 SMC 35/65 — Market Context + Peer Table side-by-side ── */
.device-ipad .ov-smc-wrap {
  display: grid !important;
  grid-template-columns: 35fr 65fr !important;
  column-gap: 24px !important;
  align-items: start !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}
.device-ipad .ov-smc-wrap .market-card,
.device-ipad .ov-smc-wrap .league-table {
  margin: 0 !important;
  max-width: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   v26 — iPad Hero polish wave 3 (1 May 2026)
   Content depth + Hero↔source mirror plumbing.
     • Hero ↔ Source mirror system (foundation, applies all devices)
     • SxE Hero right column: methodology + achievement mirror
     • SMC Hero card: parallel summary expansion (segments + trajectory)
   Mobile is genuinely untouched: new content blocks are display:none
   on mobile defaults; only .device-ipad shows them.
═══════════════════════════════════════════════════════════════ */

/* ── SxE achievement mirror — hidden on mobile, shown on iPad ── */
.sxe-achievement { display: none; }
.device-ipad .sxe-achievement {
  display: block !important;
  background: rgba(0,212,200,.04);
  border: 1px solid rgba(0,212,200,.12);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
}
/* Right-column wrapper: in iPad grid this becomes the "method" cell content.
   On mobile it's a transparent block container. */
.device-ipad .sxe-right-col {
  grid-area: method !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-self: stretch !important;
  justify-content: center !important;
}
/* sxe-method no longer needs grid-area; the wrapper holds the cell.
   Override the v25 grid-area assignment so it doesn't conflict.
   v35: scoped to .sxe-hero-frame so it doesn't fire on the new
   #sc-overview .sxe-frame layout. */
.device-ipad .sxe-hero-frame .sxe-method {
  grid-area: auto !important;
  align-self: auto !important;
}
/* Achievement eyebrow + body inherit inline styles from source; nudge
   sizes up for iPad reading distance. Inline font-size wins unless !important. */
.device-ipad .sxe-achievement > div:first-child {
  font-size: 10.5px !important;
  letter-spacing: 2.4px !important;
  margin-bottom: 10px !important;
}
.device-ipad .sxe-achievement > div:last-child {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.device-ipad .sxe-achievement > div:last-child > div {
  font-size: 12.5px !important;
  line-height: 1.7 !important;
}

/* ── SMC card expanded summary — hidden on mobile, shown on iPad ── */
.market-card-expanded { display: none; }
.device-ipad .market-card-expanded {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  flex: 1;
}

/* On iPad the SMC card switches from horizontal pill to vertical card
   so the expanded content can stack underneath the headline. */
.device-ipad .ov-smc-wrap .market-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 18px 18px 16px !important;
  position: relative;
}
.device-ipad .ov-smc-wrap .market-card .market-card-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0 !important;
}
.device-ipad .ov-smc-wrap .market-card .market-card-chev {
  display: none !important;
}
.device-ipad .ov-smc-wrap .market-card-body {
  width: 100%;
}

/* Match heights between SMC card and peer table */
.device-ipad .ov-smc-wrap {
  align-items: stretch !important;
}

/* SMC expanded internals */
.device-ipad .mc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin: 6px 0;
}
.device-ipad .mc-section-label {
  font-size: 9.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: 600;
  margin-bottom: 4px;
}
.device-ipad .mc-seg-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.device-ipad .mc-seg-row:last-of-type { border-bottom: none; }
.device-ipad .mc-seg-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
}
.device-ipad .mc-seg-arrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
}
.device-ipad .mc-seg-score {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: right;
}
/* Segment colour cues — mirror system copies text only, colours live here */
.device-ipad .mc-seg-row.mc-pos     .mc-seg-score,
.device-ipad .mc-seg-row.mc-pos     .mc-seg-arrow  { color: #34D399; }
.device-ipad .mc-seg-row.mc-neutral .mc-seg-score,
.device-ipad .mc-seg-row.mc-neutral .mc-seg-arrow  { color: #F4C76B; }
.device-ipad .mc-seg-row.mc-neg     .mc-seg-score,
.device-ipad .mc-seg-row.mc-neg     .mc-seg-arrow  { color: #FB7185; }

.device-ipad .mc-trajectory {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(242,244,247,.72);
  font-weight: 300;
  font-style: italic;
}
.device-ipad .mc-trajectory strong {
  color: var(--teal);
  font-weight: 600;
  font-style: normal;
}
.device-ipad .mc-cta {
  margin-top: auto;
  padding-top: 14px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(0,212,200,.72);
  font-weight: 500;
  text-align: right;
}


/* ═══════════════════════════════════════════════════════════════
   PORTRAIT REFLOW — fires on real iPads held portrait.
   In preview mode the chassis is fixed landscape, so the visual
   content stays landscape regardless of browser window aspect.
   This block targets device-ipad so it also fires in preview if
   the desktop window happens to be taller than wide; if that
   becomes a problem, scope to `.device-ipad:not(.preview-ipad)`.
═══════════════════════════════════════════════════════════════ */
@media (orientation: portrait) {
  /* Hero stacks vertically — the 380px sidecar would be cramped at ~834px wide */
  .device-ipad .ov-hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Score ring slightly smaller now that it's no longer competing with the read panel */
  .device-ipad .ov-hero {
    padding: 28px 28px 24px;
  }
  /* Pull the read panel slightly tighter when stacked */
  .device-ipad .read-hero {
    padding: 24px 28px 28px;
  }
  /* Bottom nav width unchanged; just give content a touch more breathing room */
  .device-ipad .screen {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   v28 — THE FULL READ (sc-read)
   Mirrors v27 design tokens: Syne + DM Sans, atmosphere gradients,
   hairline borders, gradient label text. Self-contained .rd-* prefix.
   ══════════════════════════════════════════════════════════════════ */
#sc-read .rd-scroll{
  overflow-y:auto;padding:14px 16px 60px;height:100%;
}

/* Hero card */
.rd-hero{
  margin:0 0 18px;
  padding:24px 22px 20px;
  background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(124,58,237,.04));
  border:1px solid rgba(37,99,235,.18);
  border-radius:16px;
  position:relative;
}
.rd-hero::before{
  content:'';position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.6),rgba(124,58,237,.6),transparent);
  opacity:.5;
}
.rd-hero-eyebrow{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;
}
.rd-hero-label{
  font-size:11px;letter-spacing:3px;font-weight:700;text-transform:uppercase;
  background:linear-gradient(90deg,#3B66E5,#7B4DE0);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rd-hero-date{
  font-size:10px;letter-spacing:1.2px;color:var(--muted2);font-weight:400;
  text-transform:uppercase;
}
.rd-hero-prose p{
  font-size:14px;line-height:1.78;font-weight:300;
  color:rgba(242,244,247,.92);
  margin-bottom:13px;letter-spacing:.05px;
}
.rd-hero-prose p strong{font-weight:500;color:#fff}
.rd-hero-prose p .rd-quiet{color:rgba(242,244,247,.72)}
.rd-pulled{
  font-family:'Newsreader',Georgia,serif;
  font-size:18px;font-weight:600;
  line-height:1.4;letter-spacing:-.3px;
  color:#fff;
  padding:16px 0 16px 16px;margin:16px 0;
  border-left:2px solid;
  border-image:linear-gradient(180deg,#3B66E5 0%,#7B4DE0 60%,#14C8B8 100%) 1;
}

/* Section labels */
.rd-sec-label{
  font-size:9px;letter-spacing:2.6px;font-weight:700;text-transform:uppercase;
  color:#60A5FA;
  margin:24px 0 10px;
  display:flex;align-items:center;gap:7px;
}
.rd-sec-label::before{
  content:'';width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.85;
}
.rd-sec-label.rd-teal{color:var(--teal)}

/* SxE block */
.rd-sxe{
  padding:20px 20px 16px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:16px;
  margin-bottom:8px;
  transition:background .15s ease, border-color .15s ease;
}
.rd-sxe:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(0,212,200,.18);
}
.rd-sxe-bridge{
  font-size:13.5px;line-height:1.65;color:rgba(242,244,247,.85);
  font-weight:300;margin-bottom:16px;
}
.rd-sxe-bridge em{
  font-style:italic;color:var(--teal);font-weight:400;
}
.rd-sxe-states{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.rd-sxe-state{
  padding:14px;border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  border-left:2px solid;position:relative;
}
.rd-sxe-state.up{border-left-color:#14C8B8}
.rd-sxe-state.flat{border-left-color:rgba(217,119,6,.7)}
.rd-sxe-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;
}
.rd-sxe-trj{
  display:flex;align-items:center;gap:7px;
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
}
.rd-sxe-state.up .rd-sxe-trj{color:var(--teal)}
.rd-sxe-state.flat .rd-sxe-trj{color:#FB923C}
.rd-sxe-dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;
}
.rd-sxe-state.up .rd-sxe-dot{box-shadow:0 0 8px rgba(0,212,200,.55)}
.rd-sxe-band{
  font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:700;
  letter-spacing:-.5px;line-height:1;
}
.rd-sxe-state.up .rd-sxe-band{color:var(--teal)}
.rd-sxe-state.flat .rd-sxe-band{color:#FB923C}
.rd-dash{color:rgba(255,255,255,.3);font-weight:500}
.rd-unit{
  font-family:'Inter',sans-serif;font-size:9px;font-weight:400;
  color:rgba(242,244,247,.5);margin-left:6px;letter-spacing:.5px;
}
.rd-sxe-shift{
  font-family:'Inter',sans-serif;font-size:11px;
  color:rgba(242,244,247,.7);font-weight:400;
  margin-bottom:8px;letter-spacing:.3px;
}
.rd-sxe-shift strong{color:#fff;font-weight:600}
.rd-sxe-detail{
  font-size:11.5px;line-height:1.6;color:rgba(242,244,247,.7);font-weight:300;
}
.rd-sxe-detail strong{color:rgba(242,244,247,.92);font-weight:500}

/* SMC band */
.rd-smc{
  margin-top:12px;padding:11px 13px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.rd-smc-head{display:flex;align-items:center;gap:8px;flex-shrink:0}
.rd-smc-label{
  font-size:8.5px;letter-spacing:2px;color:var(--muted2);font-weight:600;text-transform:uppercase;
}
.rd-smc-val{
  font-family:'Newsreader',Georgia,serif;font-size:13px;font-weight:700;
  letter-spacing:-.2px;color:var(--teal);
}
.rd-smc-cells{
  display:flex;align-items:center;gap:5px 14px;flex-wrap:wrap;flex:1;min-width:0;
  padding-left:8px;border-left:1px solid rgba(255,255,255,.06);
}
.rd-smc-cell{
  font-size:10.5px;color:rgba(242,244,247,.65);font-weight:300;
  display:flex;align-items:center;gap:6px;
}
.rd-num{font-family:'Newsreader',Georgia,serif;font-weight:700;font-size:11px;letter-spacing:-.1px}
.rd-num.pos{color:var(--teal)}
.rd-num.flat{color:var(--muted)}
.rd-num.neg{color:#F87171}

.rd-page-link{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  margin-top:10px;
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
  color:rgba(0,212,200,.78);text-decoration:none;cursor:pointer;
}
.rd-arrow{font-size:11px;line-height:1}

/* Pillar grid */
.rd-pillars-intro{
  font-size:13px;line-height:1.65;
  color:rgba(242,244,247,.78);font-weight:300;
  margin:6px 0 14px;
}
.rd-pillars-intro strong{color:#fff;font-weight:500}
.rd-pillar-grid{display:grid;grid-template-columns:1fr;gap:10px}
.rd-pc{
  padding:18px 18px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:14px;position:relative;overflow:hidden;
  cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.rd-pc:hover,.rd-pc:active{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.rd-pc::before{
  content:'';position:absolute;top:0;left:18px;width:28px;height:2px;border-radius:1px;
}
.rd-pc.investor::before  {background:var(--blue)}
.rd-pc.customer::before  {background:#0891B2}
.rd-pc.employee::before  {background:var(--amber)}
.rd-pc.compliance::before{background:var(--green)}
.rd-pc.voice::before     {background:var(--purple)}
.rd-pc-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:10px;padding-top:6px;
}
.rd-pc-name-block{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.rd-pc-name{
  font-family:'Newsreader',Georgia,serif;font-size:18px;font-weight:700;
  letter-spacing:-.3px;color:#fff;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.rd-pc-tag{
  font-family:'Inter',sans-serif;
  font-size:8.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;
  color:var(--purple);
  padding:2px 7px;border:1px solid rgba(124,58,237,.32);
  border-radius:4px;background:rgba(124,58,237,.08);
}
.rd-pc-q{
  font-size:11px;line-height:1.5;color:rgba(242,244,247,.62);
  font-weight:300;font-style:italic;letter-spacing:.05px;max-width:340px;
}
.rd-pc-score-block{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  flex-shrink:0;flex-grow:0;
  /* Constrain width so the chips don't push the left block into a narrow column */
  max-width:130px;
}
.rd-pc-score{
  font-family:'Newsreader',Georgia,serif;font-size:30px;font-weight:800;
  letter-spacing:-1.2px;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
  margin-bottom:2px;
}
.rd-pc-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  padding:4px 8px;border-radius:999px;border:1px solid;
  white-space:nowrap;
}
.rd-traj{font-size:9px;line-height:1}
.rd-pc-status.advancing  {color:#34D399;border-color:rgba(52,211,153,.36);background:rgba(52,211,153,.07)}
.rd-pc-status.established{color:#22D3EE;border-color:rgba(34,211,238,.32);background:rgba(34,211,238,.06)}
.rd-pc-status.developing {color:#FBBF24;border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.06)}
.rd-pc-cohort-floor{
  font-size:8px;letter-spacing:1.2px;font-weight:600;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;
  color:#F4C76B;
  background:rgba(217,119,6,.07);
  border:1px solid rgba(217,119,6,.28);
  white-space:nowrap;
}

/* Pillar SxE chip */
.rd-pc-sxe{
  display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  margin:10px 0 4px;padding:8px 10px;
  background:rgba(0,212,200,.05);
  border:1px solid rgba(0,212,200,.14);
  border-radius:8px;
}
.rd-pc-sxe.rd-pc-sxe-leverage{
  background:linear-gradient(90deg,rgba(124,58,237,.07),rgba(0,212,200,.05));
  border-color:rgba(124,58,237,.22);
}
.rd-sxe-chip-label{
  font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;
  color:var(--muted2);
}
.rd-sxe-chip-band{
  font-size:11px;color:rgba(242,244,247,.78);font-weight:400;
}
.rd-sxe-chip-band strong{color:var(--teal);font-weight:600}
.rd-pc-sxe-leverage .rd-sxe-chip-band strong{color:#A78BFA}
.rd-sxe-chip-delta{
  font-family:'Newsreader',Georgia,serif;font-size:13px;font-weight:700;
  letter-spacing:-.3px;
  color:var(--teal);
  margin-left:auto;
}
.rd-pc-sxe-leverage .rd-sxe-chip-delta{color:#A78BFA}

.rd-pc-blocks{
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
  display:grid;gap:11px;
}
.rd-pc-row{display:grid;grid-template-columns:108px 1fr;gap:12px;align-items:start}
.rd-pc-l{
  font-size:8.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;
  color:var(--muted2);padding-top:3px;line-height:1.4;
}
.rd-pc-b{font-size:12px;line-height:1.6;color:rgba(242,244,247,.82);font-weight:300}
.rd-pc-b strong{color:#fff;font-weight:500}
.rd-fig{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}

.rd-pc-foot{margin-top:14px;display:flex;justify-content:flex-end}
.rd-pc-link{
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
  color:rgba(0,212,200,.78);
  display:inline-flex;align-items:center;gap:6px;
}

.rd-signature{
  text-align:center;margin-top:30px;padding-top:18px;
  border-top:1px solid var(--border);
  font-size:9px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--muted2);font-weight:500;
}

/* iPad layout */
.device-ipad #sc-read .rd-scroll{padding:24px 28px 80px}
.device-ipad .rd-hero{padding:30px 30px 24px}
.device-ipad .rd-hero::before{left:30px;right:30px}
.device-ipad .rd-hero-prose p{font-size:15px;line-height:1.8}
.device-ipad .rd-pulled{font-size:22px;line-height:1.35;padding:20px 0 20px 22px;margin:22px 0}
.device-ipad .rd-sxe{padding:24px 24px 20px}
.device-ipad .rd-sxe-bridge{font-size:15px}
.device-ipad .rd-sxe-states{grid-template-columns:1fr 1fr;gap:12px}
.device-ipad .rd-sxe-band{font-size:21px}
.device-ipad .rd-pillars-intro{font-size:13.5px;margin:10px 0 16px}
.device-ipad .rd-pillar-grid{grid-template-columns:1fr 1fr;gap:12px}
.device-ipad .rd-pc.voice{grid-column:1 / -1}
.device-ipad .rd-pc{padding:22px 22px 18px}
.device-ipad .rd-pc-name{font-size:20px}
.device-ipad .rd-pc-score{font-size:34px}
.device-ipad .rd-pc-q{font-size:12px}
.device-ipad .rd-pc-row{grid-template-columns:118px 1fr;gap:14px}
.device-ipad .rd-pc-b{font-size:12.5px;line-height:1.65}

/* ════════════════════════════════════════════════════════════════
   v29 — Cinematic Read · split CTA + watch panel + video modal
   ════════════════════════════════════════════════════════════════ */

/* Split actions row on overview Read tile (replaces single .read-toggle) */
.read-actions{
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; margin-top:14px;
}
.read-action{
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:11px 12px;
  cursor:pointer;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  transition:background .15s, border-color .15s, transform .15s;
  user-select:none;
}
.read-action:active{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  transform:scale(.985);
}
.read-action.watch{
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  border-color:rgba(124,58,237,.22);
}
.read-action.watch:active{
  background:linear-gradient(135deg, rgba(37,99,235,.2), rgba(124,58,237,.14));
  border-color:rgba(124,58,237,.4);
}
.ra-icon{
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ra-icon-read{
  display:flex; flex-direction:column; gap:2.5px; width:14px;
}
.ra-icon-read::before, .ra-icon-read::after,
.ra-icon-read i{
  content:''; display:block; height:1.5px;
  background:rgba(242,244,247,.62); border-radius:.5px;
}
.ra-icon-read::before{width:100%}
.ra-icon-read i{width:80%}
.ra-icon-read::after{width:60%}
.ra-icon-play{
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid var(--teal);
  margin-left:2px;
  filter:drop-shadow(0 0 4px rgba(0,212,200,.4));
}
.ra-label{
  font-size:10px; letter-spacing:2px;
  font-weight:600; text-transform:uppercase;
  color:rgba(242,244,247,.86);
}
.ra-meta{
  font-family:'Newsreader',Georgia,serif;
  font-size:10px; font-weight:600;
  color:var(--muted); letter-spacing:.5px;
  padding-left:6px; border-left:1px solid rgba(255,255,255,.08);
  margin-left:2px;
}
.read-action.watch .ra-label{color:#fff}

/* Mobile sizing */
.device-mobile .read-action{padding:12px 8px; gap:7px}
.device-mobile .ra-label{font-size:9.5px; letter-spacing:1.6px}
.device-mobile .ra-meta{font-size:9.5px; padding-left:5px}

/* iPad — slightly more presence */
.device-ipad .read-action{padding:14px 16px; gap:12px}
.device-ipad .ra-label{font-size:11px; letter-spacing:2.2px}
.device-ipad .ra-meta{font-size:11px}
.device-ipad .ra-icon{width:20px; height:20px}
.device-ipad .ra-icon-play{
  border-top-width:7px; border-bottom-width:7px; border-left-width:11px;
}

/* ── Watch panel on sc-read screen (prominent header CTA) ── */
.rd-watch-panel{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  margin-bottom:24px;
  cursor:pointer;
  background:
    linear-gradient(135deg, rgba(37,99,235,.14) 0%, rgba(124,58,237,.10) 50%, rgba(0,212,200,.08) 100%),
    rgba(255,255,255,.02);
  border:0.5px solid rgba(124,58,237,.28);
  border-radius:14px;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.rd-watch-panel:active{
  transform:scale(.992);
  border-color:rgba(124,58,237,.5);
}
.rd-watch-panel::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 200px 100px at 12% 50%, rgba(0,212,200,.18) 0%, transparent 60%);
  pointer-events:none;
}
.rd-wp-play{
  position:relative; z-index:1;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:0.5px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .2s ease, border-color .2s ease;
}
.rd-watch-panel:active .rd-wp-play{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.4);
}
.rd-wp-play-icon{
  width:0; height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid #fff;
  margin-left:3px;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.3));
}
.rd-wp-text{position:relative; z-index:1; min-width:0}
.rd-wp-eyebrow{
  font-family:'Inter',sans-serif; font-size:9.5px; font-weight:500;
  letter-spacing:2.2px; text-transform:uppercase;
  color:var(--teal); margin-bottom:3px;
}
.rd-wp-title{
  font-family:'Newsreader',Georgia,serif; font-size:16px; font-weight:600;
  letter-spacing:-.2px; color:#fff; line-height:1.25;
  margin-bottom:2px;
}
.rd-wp-sub{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:300;
  color:rgba(242,244,247,.65); line-height:1.4;
}
.rd-wp-meta{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  flex-shrink:0;
}
.rd-wp-meta-val{
  font-family:'Newsreader',Georgia,serif; font-size:18px; font-weight:700;
  color:#fff; letter-spacing:-.5px;
}
.rd-wp-meta-lbl{
  font-family:'Inter',sans-serif; font-size:9px; font-weight:500;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--muted);
}

.device-mobile .rd-watch-panel{
  padding:16px; gap:14px;
  grid-template-columns:auto 1fr;
}
.device-mobile .rd-wp-meta{display:none}
.device-mobile .rd-wp-play{width:42px; height:42px}
.device-mobile .rd-wp-play-icon{
  border-top-width:7px; border-bottom-width:7px; border-left-width:10px;
}
.device-mobile .rd-wp-title{font-size:15px}
.device-mobile .rd-wp-sub{font-size:10.5px}

.device-ipad .rd-watch-panel{padding:22px 24px; gap:22px}
.device-ipad .rd-wp-play{width:56px; height:56px}
.device-ipad .rd-wp-play-icon{
  border-top-width:10px; border-bottom-width:10px; border-left-width:15px;
}
.device-ipad .rd-wp-title{font-size:19px}
.device-ipad .rd-wp-sub{font-size:12.5px}
.device-ipad .rd-wp-eyebrow{font-size:10.5px}
.device-ipad .rd-wp-meta-val{font-size:22px}

/* ── Video modal (fullscreen iframe overlay) ── */
.video-modal{
  position:fixed; inset:0; z-index:9999;
  background:#060810;
  display:none;
  opacity:0;
  transition:opacity .35s ease;
}
.video-modal.open{
  display:block;
  opacity:1;
}
.video-modal iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  background:#060810;
}
.vm-close{
  position:absolute; top:18px; right:18px; z-index:10;
  width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.5);
  border:0.5px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.vm-close:hover, .vm-close:active{
  background:rgba(0,0,0,.75);
  border-color:rgba(255,255,255,.5);
  transform:scale(1.05);
}
.vm-close-x{
  position:relative; width:14px; height:14px;
}
.vm-close-x::before, .vm-close-x::after{
  content:''; position:absolute;
  top:50%; left:0; right:0; height:1.2px;
  background:#fff; border-radius:1px;
}
.vm-close-x::before{transform:rotate(45deg)}
.vm-close-x::after{transform:rotate(-45deg)}

.device-ipad .vm-close{top:24px; right:24px; width:48px; height:48px}
.device-ipad .vm-close-x{width:16px; height:16px}
.device-mobile .vm-close{top:14px; right:14px; width:38px; height:38px}

/* Hint that fades */
.vm-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:10;
  font-family:'Inter',sans-serif; font-size:10px; font-weight:400;
  letter-spacing:2.4px; text-transform:uppercase;
  color:rgba(255,255,255,.42);
  pointer-events:none;
  opacity:0;
  animation:vm-hint-fade 5s ease forwards;
}
.video-modal.open .vm-hint{animation:vm-hint-fade 5s ease forwards}
@keyframes vm-hint-fade{
  0%{opacity:0}
  15%{opacity:1}
  70%{opacity:1}
  100%{opacity:0}
}
.device-mobile .vm-hint{display:none}

/* ── v29 (UI revision): inline Read body fills the pane, fade if overflow ── */
.read-hero .read-body{
  position:relative;
  margin-top:14px; margin-bottom:0;
  padding-top:14px;
  border-top:0.5px solid rgba(255,255,255,.06);
  cursor:pointer;
  max-height:240px;
  overflow:hidden;
}
.read-hero .read-body.has-overflow::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:54px;
  background:linear-gradient(to bottom, rgba(11,15,26,0) 0%, var(--navy) 100%);
  pointer-events:none;
}
.read-continue{
  display:none;
  font-family:'Inter',sans-serif;
  font-size:10px; letter-spacing:2px;
  text-transform:uppercase; font-weight:600;
  color:var(--teal);
  cursor:pointer;
  margin-top:8px;
  padding:6px 0 2px;
  user-select:none;
  align-items:center; gap:6px;
}
.read-continue.show{display:flex}
.read-continue:active{opacity:.65}
.read-continue .rc-chev{
  font-size:14px; line-height:1;
  transform:translateY(-1px);
}

/* Read-actions when at bottom of pane (v29) — visual separation */
.read-hero > .read-actions{
  margin-top:18px;
  padding-top:14px;
  border-top:0.5px solid rgba(255,255,255,.06);
}

/* Per-device max-height tuning for the body */
.device-mobile .read-hero .read-body{max-height:220px}
.device-ipad #sc-overview .read-body{max-height:340px !important}

/* Body paragraph spacing in the new multi-paragraph summary */
.read-body p{margin:0 0 11px}
.read-body p:last-child{margin-bottom:0}

/* iPad / desktop: make the Read pane fill the stretched column height
   so there's no dead space below the buttons. The grid already stretches
   the column; we make the inner content flex so body grows and actions
   stay pinned to the bottom. */
.device-ipad #sc-overview .read-hero{
  display:flex;
  flex-direction:column;
}
.device-ipad #sc-overview .read-hero .read-body{
  flex:1 1 auto;
  max-height:none !important;
}
.device-ipad #sc-overview .read-hero > .read-actions{
  margin-top:auto;
}
.device-ipad #sc-overview .read-hero .read-continue{
  flex:0 0 auto;
}
.device-ipad #sc-overview .read-hero .read-expanded{
  flex:0 0 auto;
}

/* iPad / desktop: spectrum band labels — slightly larger, tighter
   letter-spacing so they read clearly and never collide on the wider track */
.device-ipad #sc-overview .perf-spectrum-band{
  font-size:8.5px;
  letter-spacing:0.8px;
}
.device-ipad #sc-overview .perf-spectrum-band.bookend{
  font-size:8px;
}

/* ── v29 UI revision: peer rank line in SxE outcome panels ── */
.sxe-outcome-rank{
  display:flex; align-items:baseline; gap:8px;
  margin-top:12px; padding-top:10px;
  border-top:0.5px solid rgba(255,255,255,.06);
}
.sxe-outcome-rank-label{
  font-family:'Inter',sans-serif;
  font-size:9.5px; font-weight:500;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--muted2);
  margin-right:auto;
}
.sxe-outcome-rank-from{
  font-family:'Newsreader',Georgia,serif;
  font-size:13px; font-weight:500;
  color:var(--muted);
  letter-spacing:-.2px;
}
.sxe-outcome-rank-arrow{
  font-size:13px;
  color:var(--muted2);
  margin:0 2px;
}
.sxe-outcome-rank-to{
  font-family:'Newsreader',Georgia,serif;
  font-size:14px; font-weight:700;
  letter-spacing:-.2px;
  color:#14C8B8;
}
.sxe-outcome-rank-to.flat{
  color:var(--muted);
  font-weight:500;
}
.sxe-outcome-down .sxe-outcome-rank-to{
  color:#F87171;
}
.sxe-outcome-down .sxe-outcome-rank-to.flat{
  color:var(--muted);
}

/* iPad sizing */
.device-ipad .sxe-outcome-rank-label{font-size:10.5px; letter-spacing:2px}
.device-ipad .sxe-outcome-rank-from{font-size:15px}
.device-ipad .sxe-outcome-rank-to{font-size:17px}
.device-ipad .sxe-outcome-rank-arrow{font-size:15px}

/* ── v29 UI revision: Pillars page layout — let brief breathe ── */
.device-ipad .pillars-screen-list{
  max-width:1400px; margin:0 auto !important;
  padding:0 !important;
}
.device-ipad .pillar-full-card{
  padding:22px 26px !important;
  border-radius:16px !important;
}
.device-ipad .pf-top{
  gap:36px;
}
.device-ipad .pf-left{
  flex:1 1 auto; min-width:0;
}
.device-ipad .pf-brief{
  max-width:none !important;
  font-size:14.5px !important;
  line-height:1.65 !important;
  margin-top:6px;
}
.device-ipad .pf-name{
  font-size:13px !important;
  letter-spacing:2.6px !important;
}
.device-ipad .pf-icon-name{
  margin-bottom:8px;
}
.device-ipad .pf-right{
  flex-shrink:0;
  min-width:200px;
}
.device-ipad .pf-score{
  font-size:54px !important;
  letter-spacing:-2.5px !important;
}
.device-ipad .pf-trend{
  font-size:13px !important;
  margin-top:4px !important;
}
.device-ipad .pf-rank{
  font-size:11.5px !important;
  margin-top:4px !important;
}
.device-ipad .pf-rating{
  font-size:11px !important;
  letter-spacing:1.4px !important;
  padding:5px 12px !important;
}

/* Mobile: also lift the brief out of the 210px cage so text uses
   the available card width on phones */
.device-mobile .pf-brief{
  max-width:none !important;
}
.device-mobile .pf-left{
  flex:1 1 auto; min-width:0;
}
.device-mobile .pf-top{
  display:flex; gap:14px;
}

/* ── v29 UI revision: Signal Intelligence hub — intro thread + iPad grid ── */
.si-hub-intro{
  max-width:560px;
  margin:6px auto 16px;
  padding:0 6px;
  position:relative; z-index:1;
}
.si-hub-intro-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:9.5px; font-weight:500;
  letter-spacing:3px; text-transform:uppercase;
  color:rgba(0,212,200,.78);
  margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.si-hub-intro-eyebrow::after{
  content:''; flex:1; height:0.5px;
  background:linear-gradient(90deg, rgba(0,212,200,.32), transparent);
}
.si-hub-intro-line{
  font-family:'Newsreader',Georgia,serif;
  font-size:16px; line-height:1.45;
  font-weight:400;
  color:rgba(242,244,247,.82);
  letter-spacing:-.15px;
}
.si-hub-intro-line strong{
  color:#fff; font-weight:500;
}

/* iPad / desktop: hub grid fills the page properly */
.device-ipad .si-hub-grid{
  max-width:1100px !important;
  gap:22px !important;
  padding:14px 0 !important;
}
.device-ipad .si-hub-tile{
  padding:28px 28px 24px !important;
  min-height:300px;
  border-radius:22px !important;
}
.device-ipad .si-hub-tile-icon{
  width:44px !important;
  height:44px !important;
  margin-bottom:6px;
}
.device-ipad .si-hub-tile-wave{
  height:96px !important;
  margin:14px -28px 18px !important;
}
.device-ipad .si-hub-tile-name{
  font-size:30px !important;
  margin-bottom:10px !important;
  letter-spacing:-.5px !important;
}
.device-ipad .si-hub-tile-desc{
  font-size:14.5px !important;
  line-height:1.6 !important;
  padding-right:48px;
  min-height:auto !important;
}
.device-ipad .si-hub-tile-arrow{
  width:38px !important;
  height:38px !important;
  bottom:22px !important;
  right:24px !important;
}
.device-ipad .si-hub-tile-arrow svg{width:16px !important; height:16px !important}

.device-ipad .si-hub-intro{
  max-width:880px;
  margin:8px auto 28px;
}
.device-ipad .si-hub-intro-eyebrow{
  font-size:10.5px;
  letter-spacing:3.4px;
  margin-bottom:14px;
}
.device-ipad .si-hub-intro-line{
  font-size:22px;
  line-height:1.42;
}
.device-ipad .si-hub-brand{
  margin-top:24px;
  margin-bottom:12px;
}
.device-ipad .si-hub-name{font-size:42px}
.device-ipad .si-hub-sub{font-size:11px; letter-spacing:5px; margin-top:8px}

/* Mobile: tighten intro spacing so it doesn't push the grid down */
.device-mobile .si-hub-intro{
  max-width:none;
  padding:0 4px;
  margin:4px 0 14px;
}
.device-mobile .si-hub-intro-line{
  font-size:14.5px;
}

/* ── v29 UI revision: pillar detail Assessment + Early Signals legibility ── */
/* iPad gets one more bump — bigger viewport, more breathing room */
.device-ipad .pd-content{padding:22px 28px 40px}
.device-ipad .pd-verdict{font-size:17px; padding:18px 22px; line-height:1.65; margin-bottom:24px}
.device-ipad .pd-analysis{font-size:15.5px; line-height:1.78; margin-bottom:26px}
.device-ipad .pd-sub-head{font-size:11.5px; letter-spacing:2.4px; margin:28px 0 14px}
.device-ipad .pd-bullet-row{margin-bottom:13px; gap:12px}
.device-ipad .pd-bullet-txt{font-size:15px; line-height:1.7}
.device-ipad .pd-dot{width:6px; height:6px; margin-top:8px}
.device-ipad .pd-why-label{font-size:11.5px; letter-spacing:1.8px}
.device-ipad .pd-why-content{font-size:14.5px; line-height:1.72; padding:6px 18px 17px}
.device-ipad .pd-why-head{padding:13px 18px}
.device-ipad .pd-signal-card{padding:22px 24px 20px; margin-bottom:16px}
.device-ipad .pd-signal-n{font-size:11px; letter-spacing:2px; margin-bottom:10px}
.device-ipad .pd-signal-title{font-size:18px; margin-bottom:12px; line-height:1.32}
.device-ipad .pd-signal-pareto{font-size:15px; line-height:1.7}
.device-ipad .pd-signal-prec{margin-top:16px; padding-top:16px}
.device-ipad .pd-signal-prec-label{font-size:11.5px; letter-spacing:1.8px; margin-bottom:8px}
.device-ipad .pd-signal-prec-txt{font-size:14.5px; line-height:1.7}
.device-ipad .pd-signal-signpost{font-size:14.5px; line-height:1.65}

/* ── v29 UI: Signal Readout — 3 working / 3 at risk distillation ── */
.signal-readout{
  margin:14px 16px 0;
  padding:22px 20px 18px;
  background:
    linear-gradient(135deg, rgba(0,212,200,.04) 0%, transparent 38%, transparent 62%, rgba(217,119,6,.04) 100%),
    rgba(255,255,255,.018);
  border:0.5px solid rgba(255,255,255,.08);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.signal-readout::before{
  content:'';
  position:absolute;
  top:64px; bottom:24px; left:50%;
  width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent 100%);
  display:none;
}
.readout-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
  position:relative; z-index:1;
}
.readout-col{
  flex:1; min-width:0;
}
.readout-col-eyebrow{
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px;
  font-family:'Inter',sans-serif;
  font-size:10px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  font-weight:600;
}
.readout-col.working .readout-col-eyebrow{color:#22D3A8}
.readout-col.atrisk .readout-col-eyebrow{color:#F59E0B}
.readout-mark{
  width:8px; height:8px;
  flex-shrink:0;
}
.readout-col.working .readout-mark{
  border-radius:50%;
  background:#22D3A8;
  box-shadow:0 0 8px rgba(34,211,168,.55);
}
.readout-col.atrisk .readout-mark{
  width:0; height:0;
  background:transparent;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:8px solid #F59E0B;
  filter:drop-shadow(0 0 4px rgba(245,158,11,.5));
}
.readout-items{
  list-style:none;
  margin:0; padding:0;
}
.readout-item{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:14px;
  padding:13px 0;
  border-top:0.5px solid rgba(255,255,255,.05);
  align-items:start;
}
.readout-item:first-child{
  border-top:none;
  padding-top:2px;
}
.readout-num{
  font-family:'Newsreader',Georgia,serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:-1px;
  line-height:1;
  text-align:right;
  padding-top:2px;
}
.readout-col.working .readout-num{color:#22D3A8; opacity:.55}
.readout-col.atrisk .readout-num{color:#F59E0B; opacity:.55}
.readout-body{min-width:0}
.readout-headline{
  font-family:'Newsreader',Georgia,serif;
  font-size:15px;
  font-weight:500;
  color:rgba(242,244,247,.95);
  line-height:1.32;
  letter-spacing:-.2px;
  margin-bottom:5px;
}
.readout-evidence{
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:300;
  color:rgba(242,244,247,.62);
  line-height:1.55;
}

/* iPad / desktop — side-by-side with central hairline */
.device-ipad .signal-readout{
  margin:18px auto 0;
  padding:30px 32px 28px;
  max-width:1400px;
  border-radius:18px;
}
.device-ipad .signal-readout::before{display:block}
.device-ipad .readout-grid{
  flex-direction:row;
  gap:56px;
}
.device-ipad .readout-col-eyebrow{
  font-size:11px;
  letter-spacing:3px;
  margin-bottom:18px;
  gap:11px;
}
.device-ipad .readout-mark{width:9px; height:9px}
.device-ipad .readout-col.atrisk .readout-mark{
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:9px solid #F59E0B;
}
.device-ipad .readout-num{font-size:30px}
.device-ipad .readout-headline{
  font-size:16.5px;
  margin-bottom:7px;
}
.device-ipad .readout-evidence{
  font-size:13.5px;
  line-height:1.6;
}
.device-ipad .readout-item{
  grid-template-columns:48px 1fr;
  gap:18px;
  padding:16px 0;
}

/* ── v29 UI: External image assets ──
   Filenames match the user's existing assets/ folder (with spaces preserved).
   .device-mobile / .device-ipad classes toggle on rotation (orientation-aware).
   Solid color fallback ensures legibility if image fails to load. */

/* 1) Main app splash — first ~3 seconds before onboarding */
.device-mobile .splash{
  background:
    url('assets/1 Main Landing Page signal-embedded-image-1.jpg') center/cover no-repeat,
    #050810;
}
.device-ipad .splash{
  background:
    url('assets/5 Ipad Main Landing Page signal-embedded-image-1.png') center/cover no-repeat,
    #050810;
}

/* 2) Onboarding swipethrough backdrop — persists across all slides */
.device-mobile .ob-wave-bg{
  background:
    url('assets/2 Landing Page Swipethrough backgrounds signal-embedded-image-2.jpg') center/cover no-repeat,
    #080C16;
}
.device-ipad .ob-wave-bg{
  background:
    url('assets/6 Ipad Landing Page Swipethrough backgrounds signal-embedded-image-2.jpg.png') center/cover no-repeat,
    #080C16;
}

/* 3) Signal Intelligence splash — shown on every entry to SI */
.device-mobile .si-splash{
  background:
    url('assets/3 Signal Intel Landing Page signal-embedded-image-3.jpg') center/cover no-repeat,
    #2A2D33;
}
.device-ipad .si-splash{
  background:
    url('assets/7 Ipad Signal Intel Landing Page signal-embedded-image-3.jpg.png') center/cover no-repeat,
    #2A2D33;
}

/* 4) Signal Intelligence hub backdrop — behind the 4-tile grid */
.device-mobile .si-hub{
  background:
    url('assets/4 Signal Intel Swipethrough blank pages signal-embedded-image-4.jpg') center/cover no-repeat,
    #2A2D33;
}
.device-ipad .si-hub{
  background:
    url('assets/8 Ipad Signal Intel Swipethrough blank pages signal-embedded-image-4.jpg.png') center/cover no-repeat,
    #2A2D33;
}

/* Splash text overlays hidden — user's image already contains
   the wordmark, eyebrow and tagline. Image is the design. */
.splash-brand,
.splash-eyebrow,
.splash-tag,
.si-splash-wordmark,
.si-splash-tag{
  display:none;
}

/* ── PEER MAPPING (v32) ─────────────────────────────────────────── */
.pm-wrap{padding:0 16px 24px;overflow-y:auto;height:100%}
.pm-intro{
  background:rgba(37,99,235,.04);
  border:1px solid rgba(37,99,235,.15);
  border-radius:12px;
  padding:13px 14px;
  margin:14px 0;
}
.pm-intro-label{
  font-size:9px;letter-spacing:2px;color:#3B82F6;
  font-weight:500;text-transform:uppercase;margin-bottom:7px;
}
.pm-intro-body{
  font-size:11px;color:rgba(242,244,247,.82);
  line-height:1.7;font-weight:300;
}
.pm-intro-body strong{color:#fff;font-weight:500}

/* Toggle pill bar */
.pm-toggle-row{
  display:flex;gap:6px;overflow-x:auto;
  padding:4px 0 8px;margin-bottom:10px;
  scrollbar-width:none;
}
.pm-toggle-row::-webkit-scrollbar{display:none}
.pm-toggle{
  flex-shrink:0;
  font-size:10.5px;font-weight:500;letter-spacing:.3px;
  padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(242,244,247,.7);
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.pm-toggle:active{transform:scale(.97)}
.pm-toggle.active{
  background:rgba(37,99,235,.15);
  border-color:rgba(37,99,235,.5);
  color:#60A5FA;
  font-weight:600;
}

/* Chart container */
.pm-chart-wrap{
  position:relative;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:18px 14px 14px;
  margin-bottom:14px;
}
.pm-chart-title{
  font-size:9px;letter-spacing:2px;color:var(--muted2);
  font-weight:500;text-transform:uppercase;
  margin-bottom:14px;text-align:center;
}
.pm-chart{
  width:100%;
  display:block;
  /* SVG inherits these dims */
}
.pm-axis-line{stroke:rgba(255,255,255,.12);stroke-width:1}
.pm-grid-line{stroke:rgba(255,255,255,.04);stroke-width:1;stroke-dasharray:2,3}
.pm-axis-label{
  font-family:'Inter',system-ui,sans-serif;
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  fill:var(--muted2);
  font-weight:500;
}
.pm-axis-tick{
  font-family:'Inter',system-ui,sans-serif;
  font-size:9px;
  fill:var(--muted2);
  font-weight:400;
}
.pm-bubble{
  cursor:pointer;
  transition:all .15s ease;
}
.pm-bubble-circle{
  transition:r .15s ease, stroke-width .15s ease;
}
.pm-bubble:hover .pm-bubble-circle,
.pm-bubble.active .pm-bubble-circle{
  stroke-width:2.5;
}
.pm-bubble-label{
  font-family:'Inter',system-ui,sans-serif;
  font-size:9.5px;
  font-weight:500;
  fill:rgba(242,244,247,.85);
  pointer-events:none;
  letter-spacing:.2px;
}
.pm-bubble.serco .pm-bubble-label{
  font-weight:700;
  fill:#fff;
}
.pm-bubble.flagged .pm-bubble-circle{
  stroke-dasharray:3,2;
}
.pm-axis-caption{
  font-family:'Inter',system-ui,sans-serif;
  font-size:8.5px;
  fill:var(--muted2);
  font-style:italic;
}

/* Click-panel (slides in) */
.pm-panel{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  display:none;
}
.pm-panel.show{display:block;animation:pm-fade .25s ease}
@keyframes pm-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pm-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pm-panel-name-block{flex:1;min-width:0}
.pm-panel-name{
  font-family:'Newsreader',Georgia,serif;
  font-size:18px;font-weight:700;color:#fff;
  letter-spacing:-.3px;margin-bottom:3px;
}
.pm-panel-meta{
  font-size:9.5px;color:var(--muted);
  font-weight:300;line-height:1.5;
}
.pm-panel-meta .pm-panel-flag{
  display:inline-block;
  background:rgba(217,119,6,.1);
  border:1px solid rgba(217,119,6,.3);
  color:#F59E0B;
  font-size:8px;font-weight:600;letter-spacing:.5px;
  padding:2px 6px;border-radius:4px;
  margin-left:6px;text-transform:uppercase;
}
.pm-panel-score-block{
  text-align:right;flex-shrink:0;
}
.pm-panel-score{
  font-family:'Newsreader',Georgia,serif;
  font-size:22px;font-weight:800;
  letter-spacing:-.5px;line-height:1;
}
.pm-panel-score-label{
  font-size:8px;letter-spacing:1.5px;
  color:var(--muted2);text-transform:uppercase;
  font-weight:500;margin-top:3px;
}
.pm-panel-close{
  position:absolute;top:14px;right:14px;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border-radius:50%;
  color:var(--muted);font-size:14px;
  cursor:pointer;line-height:1;
}
.pm-panel-close:hover{background:rgba(255,255,255,.1);color:#fff}

/* Composite mode panel content */
.pm-comp-summary{
  font-size:11.5px;color:rgba(242,244,247,.85);
  line-height:1.65;font-weight:300;
  margin-bottom:10px;
}
.pm-comp-cap{
  font-size:11px;color:rgba(242,244,247,.7);
  line-height:1.6;font-weight:300;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.pm-comp-cap-label{
  font-size:8.5px;letter-spacing:1.5px;
  color:#A78BFA;text-transform:uppercase;
  font-weight:600;margin-bottom:5px;display:block;
}
.pm-pillar-hint{
  margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.04);
  font-size:9.5px;color:var(--muted2);
  font-weight:300;font-style:italic;
}

/* Pillar mode panel content */
.pm-cmp-block{margin-bottom:12px}
.pm-cmp-block:last-child{margin-bottom:0}
.pm-cmp-label{
  font-size:9px;letter-spacing:1.5px;
  font-weight:600;text-transform:uppercase;
  margin-bottom:6px;display:block;
}
.pm-cmp-label.better{color:#10B981}
.pm-cmp-label.same{color:#A78BFA}
.pm-cmp-label.worse{color:#F87171}
.pm-cmp-label.different{color:#60A5FA}
.pm-cmp-line{
  font-size:11px;color:rgba(242,244,247,.78);
  line-height:1.55;font-weight:300;
  padding:5px 0 5px 10px;
  border-left:2px solid;
  border-color:transparent;
  margin-bottom:3px;
}
.pm-cmp-line.better{border-color:rgba(16,185,129,.3)}
.pm-cmp-line.same{border-color:rgba(167,139,250,.3)}
.pm-cmp-line.worse{border-color:rgba(248,113,113,.3)}
.pm-cmp-line.different{border-color:rgba(96,165,250,.3)}

/* Hint banner when no peer selected */
.pm-hint{
  text-align:center;
  font-size:10px;color:var(--muted);
  font-weight:300;font-style:italic;
  padding:14px 12px;
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.08);
  border-radius:10px;
  margin-bottom:12px;
}

/* League table heading */
.pm-table-label{
  font-size:9px;letter-spacing:2px;color:var(--muted2);
  font-weight:500;text-transform:uppercase;
  margin:18px 0 10px;padding:0 4px;
}
.pm-table-label-active{color:#60A5FA}

/* Footer note */
.pm-foot{
  margin-top:16px;padding:12px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  font-size:10px;color:var(--muted);
  font-weight:300;line-height:1.65;
}
.pm-foot strong{color:rgba(242,244,247,.85);font-weight:500}

/* iPad responsive — bigger chart, side-by-side panel */
/* ── PEER MAPPING — iPad layout (v33.2)
   Grid-based two-column layout matching the rest of the iPad design
   language (SxE hero, SMC, Pillar grid all use 35/65 or 65/35 splits).

   Structure:
     Row 1 (full width):  intro + about-this-peer-set + toggle bar
     Row 2 (58/42 cols):  chart on left | click-panel on right
     Row 3 (full width):  league table

   This uses the horizontal real estate properly while keeping the
   toggle and league table full-width where breadth helps readability. */

.device-ipad .pm-wrap{
  padding:0 28px 32px;
  max-width:1400px;
  margin:0 auto;
}
.device-ipad .pm-intro{
  padding:18px 22px;
  margin:18px 0 14px;
}
.device-ipad .pm-intro-label{font-size:10px;letter-spacing:2.5px}
.device-ipad .pm-intro-body{font-size:13.5px;line-height:1.75}
.device-ipad .pm-foot{
  margin-top:0;
  margin-bottom:14px;
  padding:14px 18px;
  font-size:12px;
  line-height:1.7;
}

/* Toggle bar — wider, more breathing room on iPad */
.device-ipad .pm-toggle-row{
  gap:10px;
  padding:6px 0 12px;
  margin-bottom:14px;
}
.device-ipad .pm-toggle{
  font-size:12px;
  padding:9px 20px;
  letter-spacing:.4px;
}

/* Chart + panel two-column row */
.device-ipad .pm-main-grid{
  display:grid;
  grid-template-columns: 58fr 42fr;
  column-gap:24px;
  align-items:start;
  margin-bottom:18px;
}
.device-ipad .pm-chart-wrap{
  padding:22px 20px 18px;
  margin-bottom:0;
  /* Chart sized to fill its column elegantly */
  min-height:480px;
  display:flex;
  flex-direction:column;
}
.device-ipad .pm-chart-title{
  font-size:10px;
  letter-spacing:2.5px;
  margin-bottom:18px;
}
.device-ipad .pm-chart{
  flex:1;
  width:100%;
  max-width:none;
  margin:0;
}
.device-ipad .pm-axis-caption{font-size:10px;margin-top:10px}
.device-ipad .pm-bubble-label{font-size:10.5px;font-weight:500}
.device-ipad .pm-axis-label{font-size:10px;letter-spacing:1.8px}
.device-ipad .pm-axis-tick{font-size:10px}

/* Right column — hint shown when nothing selected, panel when a peer is tapped.
   Sits in the same grid cell so the layout doesn't reflow on selection. */
.device-ipad .pm-side-col{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:480px;
  position:sticky;
  top:14px;
}
.device-ipad .pm-hint{
  padding:36px 28px;
  font-size:13px;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:380px;
  gap:14px;
  font-style:normal;
  background:rgba(37,99,235,.025);
  border:1px dashed rgba(37,99,235,.18);
}
.device-ipad .pm-hint::before{
  content:"◇";
  font-size:32px;
  color:rgba(96,165,250,.5);
  display:block;
  font-style:normal;
}
.device-ipad .pm-panel{
  padding:22px 24px;
  margin-bottom:0;
  min-height:380px;
}
.device-ipad .pm-panel-name{font-size:24px;letter-spacing:-.5px}
.device-ipad .pm-panel-meta{font-size:11px;line-height:1.6}
.device-ipad .pm-panel-score{font-size:32px;letter-spacing:-.7px}
.device-ipad .pm-panel-score-label{font-size:9px;letter-spacing:1.8px}
.device-ipad .pm-comp-summary{font-size:13.5px;line-height:1.7;margin-bottom:14px}
.device-ipad .pm-comp-cap{font-size:12.5px;line-height:1.65;padding-top:14px}
.device-ipad .pm-comp-cap-label{font-size:9.5px;letter-spacing:1.8px}
.device-ipad .pm-pillar-hint{font-size:11px;margin-top:14px;padding-top:12px}
.device-ipad .pm-cmp-block{margin-bottom:16px}
.device-ipad .pm-cmp-label{font-size:10px;letter-spacing:1.8px;margin-bottom:8px}
.device-ipad .pm-cmp-line{font-size:12.5px;line-height:1.6;padding:6px 0 6px 12px}

/* League table sits below, full width — looks better with all peers visible across */
.device-ipad .pm-table-label{
  font-size:10.5px;
  letter-spacing:2.5px;
  margin:8px 0 12px;
}

/* ═══════════════════════════════════════════════════════════════
   v35 PASS 2 — OVERVIEW SCREEN (v3 Premium visual language).
   Every rule is scoped to #sc-overview so it cannot leak onto
   any other screen. Mobile-first defaults, .device-ipad overrides
   restore v3's multi-column iPad layout.
═══════════════════════════════════════════════════════════════ */

/* Screen padding — v34's .screen has no horizontal padding by default */
#sc-overview{padding:22px 14px calc(72px + var(--safe-bottom))}
.device-ipad #sc-overview{padding:36px 24px calc(72px + var(--safe-bottom))}

/* Masthead */
#sc-overview .ov2-masthead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid var(--line-1);position:relative;
}
#sc-overview .ov2-masthead::before{
  content:'';position:absolute;left:0;bottom:-1px;width:48px;height:1px;
  background:var(--sig-gradient-h);opacity:.7;
}
#sc-overview .ov2-masthead-edition{
  font-family:var(--font-display);
  font-size:13px;color:var(--ink-soft);font-style:italic;font-weight:500;
}
#sc-overview .ov2-masthead-edition em{color:var(--ink-muted);font-style:italic;font-weight:400}
#sc-overview .ov2-masthead-meta{
  font-size:9.5px;color:var(--ink-muted);font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
}
.device-ipad #sc-overview .ov2-masthead{margin-top:10px;margin-bottom:24px;padding-bottom:16px}
.device-ipad #sc-overview .ov2-masthead-meta{font-size:10.5px}

/* Hero grid — mobile stacks, iPad goes 440px + 1fr */
#sc-overview .ov2-ov-hero-grid{
  display:grid;grid-template-columns:1fr;gap:18px;
  align-items:stretch;margin-bottom:28px;
}
.device-ipad #sc-overview .ov2-ov-hero-grid{
  grid-template-columns:440px 1fr;gap:28px;margin-bottom:38px;
}

/* Composite card */
#sc-overview .ov2-ov-hero{
  background:
    /* Subtle ambient highlight — suggests overhead light catching the
       top of the surface. Very low opacity so it reads as material
       quality rather than decoration. */
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123,77,224,.045) 0%, transparent 55%),
    var(--surface-1);
  border:1px solid var(--line-1);
  border-radius:18px;padding:20px 20px 18px;
  display:flex;flex-direction:column;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(0,0,0,.4),
    0 12px 36px rgba(0,0,0,.25);
  text-align:left;
}
.device-ipad #sc-overview .ov2-ov-hero{
  border-radius:22px;padding:32px 32px 26px;
  /* Floor for both panes — defines the row height that both Composite and
     Read stretch to match. 540 keeps the panes compact while still giving
     Composite content (ring + spectrum + key + foot) enough breathing room. */
  min-height:540px;
}

#sc-overview .ov2-ov-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid var(--line-1);
}
.device-ipad #sc-overview .ov2-ov-head{margin-bottom:22px;padding-bottom:16px}
#sc-overview .ov2-ov-head-label{
  font-family:var(--font-display);
  font-size:14px;color:var(--ink);font-style:italic;font-weight:500;
  letter-spacing:-0.005em;
}
#sc-overview .ov2-ov-head-date{
  font-family:var(--font-display);
  font-size:11.5px;color:var(--ink-muted);font-style:italic;font-weight:400;
}

/* Score row — mobile stacks vertically, iPad goes side-by-side */
#sc-overview .ov2-score-row{
  display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:18px;
}
.device-ipad #sc-overview .ov2-score-row{
  flex-direction:row;align-items:center;
  /* No justify-content centring — meta grows to fill remaining width so
     its right edge (where the values live) aligns with the pane's right
     margin, consistent with the spectrum and foot-link below. */
  gap:28px;margin-bottom:22px;
}

#sc-overview .ov2-score-ring-wrap{
  flex-shrink:0;position:relative;width:160px;height:160px;
}
.device-ipad #sc-overview .ov2-score-ring-wrap{width:184px;height:184px}
#sc-overview .ov2-score-ring-svg{display:block;width:100%;height:100%;overflow:visible}
#sc-overview .ov2-score-num-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
  /* Italic Newsreader digits sit visually low within their line-box;
     nudge the whole stack up a few px so the optical centre matches
     the geometric centre of the ring. */
  transform:translateY(-3px);
}
#sc-overview .ov2-score-num{
  font-family:var(--font-display);
  font-size:64px;font-weight:500;letter-spacing:-0.04em;
  line-height:1;color:var(--ink-pure);
  font-feature-settings:'tnum';
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.device-ipad #sc-overview .ov2-score-num{font-size:60px}
#sc-overview .ov2-score-label-in{
  font-size:8px;color:var(--ink-muted);font-weight:500;
  letter-spacing:0.26em;text-transform:uppercase;margin-top:6px;
}

#sc-overview .ov2-score-meta{
  width:100%;display:flex;flex-direction:column;gap:11px;min-width:0;
}
.device-ipad #sc-overview .ov2-score-meta{flex:1 1 auto;width:auto;min-width:0}

#sc-overview .ov2-rating-pill{
  display:inline-flex;align-items:center;gap:7px;align-self:center;
  padding:5px 11px;
  border:1px solid var(--line-2);background:var(--surface-1);
  border-radius:100px;
  font-size:11.5px;font-weight:500;color:var(--ink);
}
.device-ipad #sc-overview .ov2-rating-pill{align-self:flex-start}
#sc-overview .ov2-rating-pill-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--sig-teal);box-shadow:0 0 6px rgba(20,200,184,.6);
}
#sc-overview .ov2-meta-list{display:flex;flex-direction:column}
#sc-overview .ov2-meta-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11.5px;padding:6px 0;
  /* Refined divider — gradient-faded line instead of flat border. Subtle
     but reads as more considered than a uniform stroke. */
  border-bottom:none;
  background-image:linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
  background-size:100% 1px;
  background-position:bottom;
  background-repeat:no-repeat;
}
#sc-overview .ov2-meta-row:last-child{background-image:none}
#sc-overview .ov2-meta-label{color:var(--ink-muted);font-weight:400}
#sc-overview .ov2-meta-value{
  color:var(--ink);font-weight:500;
  font-feature-settings:'tnum';letter-spacing:-0.005em;
}

/* Spectrum */
#sc-overview .ov2-spectrum{margin-top:14px;padding-top:18px;border-top:1px solid var(--line-1)}
.device-ipad #sc-overview .ov2-spectrum{margin-top:18px;padding-top:22px}
#sc-overview .ov2-spectrum-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;
}
.device-ipad #sc-overview .ov2-spectrum-meta{margin-bottom:18px}
#sc-overview .ov2-spectrum-title{
  font-family:var(--font-display);
  font-size:11px;color:var(--ink-muted);font-style:italic;font-weight:400;
}
#sc-overview .ov2-spectrum-tap-hint{
  font-size:9.5px;color:var(--ink-faint);font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
  transition:color .18s;
}
#sc-overview .ov2-spectrum-tap-hint:hover{color:var(--sig-teal)}
#sc-overview .ov2-spectrum-bands{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:10px;margin-bottom:6px;
}
#sc-overview .ov2-spectrum-bookend{
  font-family:var(--font-display);
  font-size:8.5px;color:var(--ink-fade);font-style:italic;font-weight:400;
  white-space:nowrap;letter-spacing:0;
}
#sc-overview .ov2-spectrum-bands-inner{
  display:flex;justify-content:space-between;
  font-family:var(--font-display);
  font-size:9px;color:var(--ink-faint);font-style:italic;font-weight:400;
  letter-spacing:0;
}
#sc-overview .ov2-spectrum-band-current{color:var(--ink-pure);font-weight:500}
#sc-overview .ov2-spectrum-track-wrap{position:relative;padding:0 10px;margin-top:6px}
#sc-overview .ov2-spectrum-track{
  position:relative;height:1px;
  background:linear-gradient(90deg,
    rgba(123,77,224,.32) 0%,
    rgba(123,77,224,.22) 22%,
    rgba(59,102,229,.20) 50%,
    rgba(20,200,184,.26) 78%,
    rgba(20,200,184,.40) 100%);
  margin:20px 0 24px;
}
#sc-overview .ov2-spectrum-tick{
  position:absolute;top:-4px;width:1px;height:9px;
  background:rgba(255,255,255,.18);
}
#sc-overview .ov2-spectrum-marker{
  position:absolute;top:-5px;width:11px;height:11px;
  background:var(--sig-teal);border:2px solid var(--bg-deep);
  border-radius:50%;transform:translateX(-50%);
  box-shadow:0 0 0 1px var(--sig-teal),0 0 14px rgba(20,200,184,.5);
  z-index:2;
}
#sc-overview .ov2-spectrum-peer-dot{
  position:absolute;top:5px;
  width:8px;height:8px;
  border-radius:50%;
  border:1.5px solid var(--bg-deep);
  transform:translateX(-50%);
}
#sc-overview .ov2-spectrum-peer-dot.median{
  background:#7A93D6;
  box-shadow:0 0 6px rgba(122,147,214,.40);
}
#sc-overview .ov2-spectrum-peer-dot.cohort{
  background:#B79CF0;
  box-shadow:0 0 6px rgba(183,156,240,.40);
}
#sc-overview .ov2-spectrum-key{
  display:flex;flex-direction:column;
  align-items:center;
  gap:7px;
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-1);
}
.device-ipad #sc-overview .ov2-spectrum-key{margin-top:16px;padding-top:14px}
#sc-overview .ov2-spectrum-key-row{
  display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-muted);
}
#sc-overview .ov2-spectrum-key-dot{
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--ink-muted);background:var(--bg-deep);flex-shrink:0;
}
#sc-overview .ov2-spectrum-key-row strong{color:var(--ink);font-weight:500;font-feature-settings:'tnum'}
#sc-overview .ov2-spectrum-key-row em{
  font-family:var(--font-display);font-style:italic;
  color:var(--ink-soft);font-weight:400;
}
#sc-overview .ov2-spectrum-key-row.self .ov2-spectrum-key-dot{
  background:var(--sig-teal);
  border-color:var(--sig-teal);
  box-shadow:0 0 6px rgba(20,200,184,.5);
}
#sc-overview .ov2-spectrum-key-row.self strong{color:var(--ink-pure)}
#sc-overview .ov2-spectrum-key-row.median .ov2-spectrum-key-dot{
  background:#7A93D6;
  border-color:#7A93D6;
  box-shadow:0 0 6px rgba(122,147,214,.35);
}
#sc-overview .ov2-spectrum-key-row.cohort .ov2-spectrum-key-dot{
  background:#B79CF0;
  border-color:#B79CF0;
  box-shadow:0 0 6px rgba(183,156,240,.35);
}

#sc-overview .ov2-ov-foot{
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line-1);
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--ink);font-weight:500;cursor:pointer;
  transition:color .18s;
}
#sc-overview .ov2-ov-foot:hover,#sc-overview .ov2-ov-foot:active{color:var(--sig-teal)}
#sc-overview .ov2-ov-foot-arrow{
  font-size:14px;color:var(--ink-muted);
  transition:transform .25s cubic-bezier(.4,0,.2,1),color .18s;
}
#sc-overview .ov2-ov-foot:hover .ov2-ov-foot-arrow{transform:translateX(4px);color:var(--sig-teal)}

/* Read card */
#sc-overview .ov2-read-hero{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(20,200,184,.04) 0%, transparent 55%),
    var(--surface-1);
  border:1px solid var(--line-1);
  border-radius:18px;padding:22px 22px 20px;
  display:flex;flex-direction:column;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(0,0,0,.4),
    0 12px 36px rgba(0,0,0,.25);
}
.device-ipad #sc-overview .ov2-read-hero{border-radius:22px;padding:36px 40px 32px}

#sc-overview .ov2-read-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid var(--line-1);
}
.device-ipad #sc-overview .ov2-read-head{margin-bottom:22px;padding-bottom:16px}
#sc-overview .ov2-read-label{
  font-family:var(--font-display);
  font-size:14px;color:var(--ink);font-style:italic;font-weight:500;
  display:flex;align-items:baseline;gap:10px;
}
#sc-overview .ov2-read-label-num{
  color:var(--ink-muted);font-style:normal;
  font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
}
#sc-overview .ov2-read-date{
  font-family:var(--font-display);
  font-size:12px;color:var(--ink-muted);font-style:italic;font-weight:400;
}
#sc-overview .ov2-read-statement{
  /* Match body voice and scale — uniform editorial flow. The statement
     reads as the opener of a single article, not a separate headline. */
  font-family:var(--font-body);
  font-size:13.5px;line-height:1.7;
  font-weight:300;letter-spacing:-0.003em;
  color:var(--ink-soft);
  margin-bottom:12px;
  cursor:pointer;
}
.device-ipad #sc-overview .ov2-read-statement{font-size:14px;line-height:1.72;margin-bottom:14px}
/* Bolded text in the statement — used only via the .ov2-emph class for
   the thesis claim. */
#sc-overview .ov2-read-statement strong{font-weight:500;color:var(--ink-pure)}
/* The thesis emphasis — single light blue hue. Reads as a clean intentional
   accent in one tone rather than a multicolour phasing gradient. */
#sc-overview .ov2-read-statement .ov2-emph{
  font-weight:500;
  color:#60A5FA;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:#60A5FA;
}
/* Second sentence — no longer italic, no typeface change. All Read prose
   reads as one continuous voice in Inter. The class is retained for
   semantic structure but applies no special styling. */
#sc-overview .ov2-read-statement .ov2-second{
  /* intentionally empty — inherits font-family, size, weight, colour
     from the .ov2-read-statement parent */
}
#sc-overview .ov2-read-body{
  font-size:13.5px;line-height:1.7;color:var(--ink-soft);
  font-weight:300;letter-spacing:-0.003em;
  cursor:pointer;
}
.device-ipad #sc-overview .ov2-read-body{font-size:14px;line-height:1.72}
#sc-overview .ov2-read-body p{margin-bottom:11px}
#sc-overview .ov2-read-body p:last-child{margin-bottom:0}
#sc-overview .ov2-read-body strong{color:var(--ink-pure);font-weight:500}
#sc-overview .ov2-read-body .ov2-accent{color:var(--sig-teal);font-weight:500}
#sc-overview .ov2-read-continue{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;align-self:flex-start;
  font-family:var(--font-display);
  font-size:12.5px;color:var(--ink-soft);font-weight:400;font-style:italic;
  cursor:pointer;
  padding-bottom:1px;border-bottom:1px solid var(--line-2);
  transition:color .18s,border-color .18s;
}
#sc-overview .ov2-read-continue:hover,#sc-overview .ov2-read-continue:active{color:var(--sig-teal);border-color:var(--sig-teal)}

/* Tensions + So What */
#sc-overview .ov2-read-expanded{
  display:flex;flex-direction:column;gap:22px;
  margin-top:24px;padding-top:22px;
  border-top:1px solid var(--line-1);
}
.device-ipad #sc-overview .ov2-read-expanded{gap:24px;margin-top:26px;padding-top:24px}
#sc-overview .ov2-read-subsection{display:flex;flex-direction:column}
#sc-overview .ov2-read-sub-label{
  font-family:var(--font-display);
  font-size:14px;color:var(--ink-pure);font-style:italic;font-weight:500;
  margin-bottom:12px;letter-spacing:-0.005em;
}

#sc-overview .ov2-tension-list{display:flex;flex-direction:column}
#sc-overview .ov2-tension-item{
  display:grid;grid-template-columns:8px 1fr 14px;
  gap:14px;align-items:flex-start;
  padding:11px 0;
  border-bottom:1px solid var(--line-1);
  cursor:pointer;
}
#sc-overview .ov2-tension-item:first-child{padding-top:6px}
#sc-overview .ov2-tension-item:last-child{border-bottom:none;padding-bottom:6px}
#sc-overview .ov2-tension-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ink-muted);
  margin-top:7px;flex-shrink:0;
}
#sc-overview .ov2-tension-text{
  font-size:12.5px;line-height:1.62;color:var(--ink-soft);
  font-weight:300;letter-spacing:-0.003em;
}
#sc-overview .ov2-tension-text strong{color:var(--ink-pure);font-weight:500}
#sc-overview .ov2-tension-text .ov2-accent{color:var(--sig-teal);font-weight:500}
#sc-overview .ov2-tension-chev{
  color:var(--ink-faint);font-size:14px;font-weight:300;
  transition:color .18s,transform .18s;line-height:1.6;
}
#sc-overview .ov2-tension-item:hover .ov2-tension-chev,
#sc-overview .ov2-tension-item:active .ov2-tension-chev{color:var(--sig-teal);transform:translateX(2px)}
#sc-overview .ov2-tension-item:hover .ov2-tension-dot,
#sc-overview .ov2-tension-item:active .ov2-tension-dot{background:var(--sig-teal)}

#sc-overview .ov2-sw-list{display:flex;flex-direction:column;gap:8px}
#sc-overview .ov2-sw-card{
  display:grid;grid-template-columns:auto 1fr 14px;
  gap:14px;align-items:flex-start;
  padding:14px 16px;
  background:var(--surface-1);
  border:1px solid var(--line-1);
  border-radius:12px;
  cursor:pointer;
  transition:background .25s,border-color .25s,transform .25s;
}
#sc-overview .ov2-sw-card:hover{
  background:var(--surface-2);border-color:var(--line-2);
  transform:translateY(-1px);
}
#sc-overview .ov2-sw-accent{width:3px;height:36px;border-radius:1.5px;flex-shrink:0;align-self:center}
#sc-overview .ov2-sw-accent.voice{background:var(--sig-gradient)}
#sc-overview .ov2-sw-accent.employee{background:var(--watch)}
#sc-overview .ov2-sw-accent.compliance{background:var(--positive)}
#sc-overview .ov2-sw-body{min-width:0}
#sc-overview .ov2-sw-title{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--ink-pure);
  letter-spacing:-0.005em;margin-bottom:3px;
}
#sc-overview .ov2-sw-tag{
  font-family:var(--font-display);
  font-size:11px;font-weight:400;font-style:italic;
}
#sc-overview .ov2-sw-tag.voice{color:var(--sig-teal)}
#sc-overview .ov2-sw-tag.employee{color:var(--watch)}
#sc-overview .ov2-sw-tag.compliance{color:var(--positive)}
#sc-overview .ov2-sw-text{
  font-size:12px;line-height:1.55;color:var(--ink-soft);
  font-weight:300;letter-spacing:-0.003em;
}
#sc-overview .ov2-sw-text strong{color:var(--ink-pure);font-weight:500}
#sc-overview .ov2-sw-chev{
  color:var(--ink-faint);font-size:14px;font-weight:300;
  transition:color .18s,transform .18s;align-self:center;
}
#sc-overview .ov2-sw-card:hover .ov2-sw-chev,
#sc-overview .ov2-sw-card:active .ov2-sw-chev{color:var(--sig-teal);transform:translateX(2px)}

/* Read actions */
#sc-overview .ov2-read-actions{
  display:flex;gap:10px;
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line-1);
}
.device-ipad #sc-overview .ov2-read-actions{gap:12px;padding-top:20px}
#sc-overview .ov2-ra-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 14px;border-radius:100px;
  font-size:11.5px;font-weight:500;cursor:pointer;
  transition:transform .18s,opacity .18s,border-color .18s,background .18s,box-shadow .18s;
  border:1px solid transparent;
  text-transform:uppercase;letter-spacing:0.08em;
}
.device-ipad #sc-overview .ov2-ra-btn{padding:13px 20px;gap:11px;font-size:12.5px}
#sc-overview .ov2-ra-btn:active{transform:scale(.985)}
#sc-overview .ov2-ra-btn-primary{
  background:var(--ink-pure);color:var(--bg-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.6),0 4px 14px rgba(0,0,0,.4);
}
#sc-overview .ov2-ra-btn-primary:hover{opacity:.92}
#sc-overview .ov2-ra-btn-secondary{
  background:var(--surface-1);
  border-color:rgba(20,200,184,.30);color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(20,200,184,.08),
    0 4px 16px rgba(20,200,184,.10);
}
#sc-overview .ov2-ra-btn-secondary:hover{
  border-color:rgba(20,200,184,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(20,200,184,.16),
    0 4px 22px rgba(20,200,184,.18);
}
#sc-overview .ov2-ra-icon{font-size:11px;line-height:1}
#sc-overview .ov2-ra-btn-primary .ov2-ra-icon{color:var(--bg-deep)}
#sc-overview .ov2-ra-btn-secondary .ov2-ra-icon{color:var(--sig-teal);text-shadow:0 0 8px rgba(20,200,184,.5)}
#sc-overview .ov2-ra-meta{
  font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;
  margin-left:2px;padding-left:8px;
  border-left:1px solid currentColor;opacity:.6;
}
.device-ipad #sc-overview .ov2-ra-meta{font-size:10.5px}

/* Sections */
#sc-overview .ov2-section{margin-bottom:30px}
.device-ipad #sc-overview .ov2-section{margin-bottom:38px}
#sc-overview .ov2-section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--line-1);position:relative;
}
.device-ipad #sc-overview .ov2-section-head{padding-bottom:14px;margin-bottom:18px}
#sc-overview .ov2-section-head::before{
  content:'';position:absolute;left:0;bottom:-1px;width:48px;height:1px;
  background:var(--sig-gradient-h);opacity:.5;
}
#sc-overview .ov2-section-label{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;font-style:italic;color:var(--ink-pure);
  letter-spacing:-0.005em;display:flex;align-items:baseline;gap:12px;
  /* v35 P2.5: defeat v34 legacy `.ov2-section-label{text-transform:uppercase;letter-spacing:2.5px}`
     which would otherwise cascade onto our overview section headers. */
  text-transform:none;
}
.device-ipad #sc-overview .ov2-section-label{
  /* v34's `.device-ipad .ov2-section-label{font-size:11.5px!important;letter-spacing:3px!important}`
     uses !important; we have to match it to win. */
  font-size:18px !important;
  letter-spacing:-0.005em !important;
  gap:14px;
}
#sc-overview .ov2-section-label-num{
  font-style:normal;
  font-size:11px;font-weight:500;letter-spacing:0.08em;
  font-feature-settings:'tnum';
  /* Subtle brand-gradient text fill — threads the Signal palette through
     the editorial structure. The 0.75 opacity keeps it quiet so the head
     reads as the primary mark and the number reads as a refined index. */
  background:linear-gradient(135deg, rgba(123,77,224,.85) 0%, rgba(59,102,229,.85) 50%, rgba(20,200,184,.85) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent; /* fallback for non-webkit */
  opacity:0.75;
}
#sc-overview .ov2-section-action{
  font-size:11.5px;color:var(--sig-teal);font-weight:500;cursor:pointer;
  white-space:nowrap;
}
.device-ipad #sc-overview .ov2-section-action{font-size:12px}
#sc-overview .ov2-section-action:hover,#sc-overview .ov2-section-action:active{color:var(--ink-pure)}

/* Readout — mobile stacks vertically */
#sc-overview .ov2-readout{
  background:var(--surface-1);border:1px solid var(--line-1);
  border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:1fr;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 1px 0 rgba(0,0,0,.3),
    0 12px 36px rgba(0,0,0,.2);
}
.device-ipad #sc-overview .ov2-readout{grid-template-columns:1fr 1px 1fr;border-radius:22px}
#sc-overview .ov2-readout-divider{background:var(--line-1);height:1px}
.device-ipad #sc-overview .ov2-readout-divider{height:auto}
#sc-overview .ov2-readout-col{padding:20px 20px}
.device-ipad #sc-overview .ov2-readout-col{padding:26px 30px}
#sc-overview .ov2-readout-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:14px;font-weight:500;font-style:italic;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line-1);
}
.device-ipad #sc-overview .ov2-readout-eyebrow{margin-bottom:20px;padding-bottom:14px}
#sc-overview .ov2-readout-col.working .ov2-readout-eyebrow{color:var(--positive)}
#sc-overview .ov2-readout-col.atrisk .ov2-readout-eyebrow{color:var(--watch)}
#sc-overview .ov2-readout-mark{width:7px;height:7px;border-radius:50%}
#sc-overview .ov2-readout-col.working .ov2-readout-mark{background:var(--positive)}
#sc-overview .ov2-readout-col.atrisk .ov2-readout-mark{background:var(--watch)}
#sc-overview .ov2-readout-items{list-style:none;display:flex;flex-direction:column;gap:14px;padding:0;margin:0}
.device-ipad #sc-overview .ov2-readout-items{gap:16px}
#sc-overview .ov2-readout-item{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:flex-start}
#sc-overview .ov2-readout-num{
  font-family:var(--font-display);
  font-size:22px;font-weight:500;font-style:italic;
  line-height:0.9;padding-top:2px;
  font-feature-settings:'tnum';letter-spacing:-0.02em;
}
#sc-overview .ov2-readout-col.working .ov2-readout-num{color:var(--positive)}
#sc-overview .ov2-readout-col.atrisk .ov2-readout-num{color:var(--watch)}
#sc-overview .ov2-readout-headline{
  font-size:13px;font-weight:600;color:var(--ink-pure);
  letter-spacing:-0.005em;line-height:1.4;margin-bottom:3px;
}
#sc-overview .ov2-readout-evidence{
  font-size:12px;line-height:1.55;color:var(--ink-soft);
  font-weight:300;letter-spacing:-0.003em;
}

/* Pillars grid — mobile is single column, iPad 5 columns */
#sc-overview .ov2-pillars-grid{display:grid;grid-template-columns:1fr;gap:10px}
.device-ipad #sc-overview .ov2-pillars-grid{grid-template-columns:repeat(5,1fr);gap:14px}
#sc-overview .ov2-pillar-card{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(123,77,224,.04) 0%, transparent 60%),
    var(--surface-1);
  border:1px solid var(--line-1);
  border-radius:14px;padding:14px 16px 14px;
  cursor:pointer;display:flex;flex-direction:column;gap:10px;
  transition:border-color .28s ease, background .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.device-ipad #sc-overview .ov2-pillar-card{
  border-radius:16px;
  padding:18px 18px 16px;
  gap:10px !important;
}
#sc-overview .ov2-pillar-card:hover,#sc-overview .ov2-pillar-card:active{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(123,77,224,.06) 0%, transparent 60%),
    var(--surface-2);
  border-color:var(--line-2);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.35),
    0 14px 32px rgba(0,0,0,.30);
}
#sc-overview .ov2-pillar-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
#sc-overview .ov2-pillar-name{
  font-size:10.5px;font-weight:600;color:var(--ink-pure);
  letter-spacing:0.04em;text-transform:uppercase;
}
#sc-overview .ov2-pillar-trend{
  font-size:9.5px;
  font-family:var(--font-display);font-style:italic;
}
#sc-overview .ov2-pillar-trend.up{color:var(--positive)}
#sc-overview .ov2-pillar-trend.down{color:var(--negative)}
#sc-overview .ov2-pillar-trend.flat{color:var(--ink-muted)}
#sc-overview .ov2-pillar-score-row{
  display:flex;align-items:flex-end;gap:10px;margin-top:2px;
  /* flex-end aligns the bottom of the big score number with the bottom of
     the meta stack (rating + rank), so "76" sits flush with "3RD OF 8". */
}
#sc-overview .ov2-pillar-score{
  font-family:var(--font-display);
  font-size:34px;font-weight:500;color:var(--ink-pure);
  letter-spacing:-0.03em;line-height:1;font-feature-settings:'tnum';
}
#sc-overview .ov2-pillar-meta-stack{
  display:flex;flex-direction:column;
  align-items:flex-start;gap:3px;
  /* Bottom-aligned to the score by the parent's align-items:flex-end,
     so no padding-top here. */
}
#sc-overview .ov2-pillar-rating{
  font-family:var(--font-display);
  font-size:11px;color:var(--ink-muted);font-style:italic;font-weight:400;
  line-height:1;
}
/* RAG tinting on the rating word — subtle but legible. Bad bands lean rose,
   neutral leans amber, good bands lean teal/green. Opacity ~0.85 keeps it
   from competing with the score number for attention. */
#sc-overview .ov2-pillar-rating[data-band="foundational"],
#sc-overview .ov2-pillar-rating[data-band="critical"],
#sc-overview .ov2-pillar-rating[data-band="developing"]{
  color:var(--negative);opacity:.85;
}
#sc-overview .ov2-pillar-rating[data-band="established"]{
  color:var(--watch);opacity:.80;
}
#sc-overview .ov2-pillar-rating[data-band="advancing"]{
  color:var(--positive);opacity:.85;
}
#sc-overview .ov2-pillar-rating[data-band="strong"],
#sc-overview .ov2-pillar-rating[data-band="leading"]{
  color:var(--sig-teal);opacity:.90;
}
#sc-overview .ov2-pillar-rank{
  font-size:9.5px;color:var(--ink-faint);
  font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
  font-feature-settings:'tnum';line-height:1;
}
#sc-overview .ov2-pillar-bar{
  position:relative;height:4px;background:rgba(255,255,255,.10);
  border-radius:2px;overflow:hidden;margin-top:2px;
  flex-shrink:0;
}
#sc-overview .ov2-pillar-bar-fill{
  position:absolute;top:0;left:0;height:100%;
  background:var(--sig-gradient-h);border-radius:2px;
}
#sc-overview .ov2-pillar-brief{
  font-size:11px;line-height:1.55;color:var(--ink-muted);
  font-weight:300;margin-top:auto;
}
.device-ipad #sc-overview .ov2-pillar-brief{font-size:10.5px;line-height:1.5}

/* SxE — mobile stacks, iPad goes 1fr + 320px */
#sc-overview .ov2-sxe-frame{
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(59,102,229,.04) 0%, transparent 55%),
    var(--surface-1);
  border:1px solid var(--line-1);
  border-radius:18px;padding:18px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 1px 0 rgba(0,0,0,.3),
    0 12px 36px rgba(0,0,0,.2);
  display:grid;grid-template-columns:1fr;gap:18px;align-items:start;
  cursor:pointer;
}
.device-ipad #sc-overview .ov2-sxe-frame{border-radius:22px;padding:28px 32px;grid-template-columns:1fr 320px;gap:32px}
#sc-overview .ov2-sxe-eyebrow{
  grid-column:1 / -1;
  font-family:var(--font-display);
  font-size:13px;color:var(--ink-soft);font-style:italic;font-weight:400;
  line-height:1.5;margin-bottom:4px;
}
#sc-overview .ov2-sxe-chart-wrap{position:relative;width:100%}
#sc-overview .ov2-sxe-chart{display:block;width:100%;height:auto;aspect-ratio:360/200}
#sc-overview .ov2-sxe-outcomes{
  display:flex;flex-direction:column;gap:12px;
  padding-top:4px;
}
.device-ipad #sc-overview .ov2-sxe-outcomes{
  gap:14px;padding-top:6px;
  /* Centre the two boxes against the chart vertically — without this the
     stack hugs the top of the row and the chart's centre line drifts away
     from the boxes' centre. */
  justify-content:center;
  /* Then shift the whole stack down a touch so the gap between the two
     boxes aligns with the chart's ESTABLISHED band line (y=108 of the
     200-unit viewBox, ~54% from the top), rather than the geometric
     midline at y=100. Reads as "Strong is above, Established is below". */
  transform:translateY(15px);
}
#sc-overview .ov2-sxe-outcome{
  background:var(--surface-1);border:1px solid var(--line-1);
  border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.device-ipad #sc-overview .ov2-sxe-outcome{padding:18px 20px;gap:10px}
#sc-overview .ov2-sxe-outcome-up{border-color:rgba(20,200,184,.28)}
#sc-overview .ov2-sxe-outcome-down{border-color:rgba(251,113,133,.18)}
#sc-overview .ov2-sxe-outcome-head{
  display:flex;align-items:center;gap:8px;
}
#sc-overview .ov2-sxe-outcome-dot{width:6px;height:6px;border-radius:50%}
#sc-overview .ov2-sxe-outcome-dot.up{background:var(--sig-teal);box-shadow:0 0 8px rgba(20,200,184,.6)}
#sc-overview .ov2-sxe-outcome-dot.down{background:var(--negative)}
#sc-overview .ov2-sxe-outcome-label{
  font-size:11.5px;font-weight:600;color:var(--ink-pure);
  letter-spacing:-0.005em;
}
#sc-overview .ov2-sxe-outcome-band{
  font-family:var(--font-display);
  font-size:15px;font-weight:500;font-style:italic;
  color:var(--ink-pure);letter-spacing:-0.005em;
}
#sc-overview .ov2-sxe-outcome-up .ov2-sxe-outcome-band{color:var(--sig-teal)}
#sc-overview .ov2-sxe-outcome-down .ov2-sxe-outcome-band{color:var(--ink)}
#sc-overview .ov2-sxe-outcome-peer{
  font-size:11px;line-height:1.5;color:var(--ink-soft);font-weight:300;
}
#sc-overview .ov2-sxe-outcome-rank{
  display:flex;align-items:baseline;gap:6px;
  font-size:10.5px;color:var(--ink-muted);
  margin-top:2px;
}
#sc-overview .ov2-sxe-outcome-rank-from,
#sc-overview .ov2-sxe-outcome-rank-to{
  font-family:var(--font-display);
  font-size:13px;color:var(--ink-pure);font-weight:500;
  font-feature-settings:'tnum';
}
#sc-overview .ov2-sxe-outcome-rank-to.flat{color:var(--ink-muted)}
#sc-overview .ov2-sxe-outcome-up .ov2-sxe-outcome-rank-to{color:var(--sig-teal)}
#sc-overview .ov2-sxe-outcome-rank-arrow{color:var(--ink-faint)}
#sc-overview .ov2-sxe-method{
  grid-column:1 / -1;
  font-size:11.5px;line-height:1.62;color:var(--ink-muted);
  font-weight:300;letter-spacing:-0.003em;
  padding-top:14px;border-top:1px solid var(--line-1);
  margin-top:4px;
}
.device-ipad #sc-overview .ov2-sxe-method{padding-top:18px;margin-top:6px}
#sc-overview .ov2-sxe-explore{
  grid-column:1 / -1;
  font-size:11px;color:var(--sig-teal);font-weight:500;
  letter-spacing:0.04em;text-transform:uppercase;
  text-align:right;padding-top:4px;
}

/* Market & Competitors */
#sc-overview .ov2-market-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
}
.device-ipad #sc-overview .ov2-market-grid{grid-template-columns:35fr 65fr;gap:20px}
#sc-overview .ov2-market-card{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123,77,224,.045) 0%, transparent 55%),
    var(--surface-1);
  border:1px solid var(--line-1);
  border-radius:18px;padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 1px 0 rgba(0,0,0,.3),
    0 12px 36px rgba(0,0,0,.2);
  transition:background .25s,border-color .25s;
}
.device-ipad #sc-overview .ov2-market-card{border-radius:22px;padding:22px 26px}
#sc-overview .ov2-market-card:hover{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123,77,224,.06) 0%, transparent 55%),
    var(--surface-2);
  border-color:var(--line-2);
}
#sc-overview .ov2-market-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line-1)}
#sc-overview .ov2-market-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:14px;color:var(--sig-teal);
}
#sc-overview .ov2-market-label{
  font-family:var(--font-display);
  font-size:13px;color:var(--ink);font-style:italic;font-weight:500;
  letter-spacing:-0.005em;
}
#sc-overview .ov2-market-value{display:flex;align-items:baseline;gap:10px}
.device-ipad #sc-overview .ov2-market-value{
  /* Together with margin-bottom:auto on .ov2-market-cta, this centres the
     value/segments/trajectory/cta block in the remaining pane height after
     the head, while keeping the head pinned to the top. */
  margin-top:auto;
}
#sc-overview .ov2-market-value-num{
  font-family:var(--font-display);
  font-size:28px;font-weight:500;color:var(--ink-pure);
  letter-spacing:-0.02em;line-height:1;font-feature-settings:'tnum';
}
#sc-overview .ov2-market-value-tag{
  font-size:11.5px;color:var(--positive);font-weight:500;
}
#sc-overview .ov2-market-segments{display:flex;flex-direction:column;gap:0}
#sc-overview .ov2-market-seg-eyebrow{
  font-size:10px;color:var(--ink-muted);font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;margin-bottom:6px;
}
#sc-overview .ov2-market-seg{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;
  align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--line-1);
}
#sc-overview .ov2-market-seg:last-child{border-bottom:none}
#sc-overview .ov2-market-seg-name{font-size:12px;color:var(--ink);font-weight:400}
#sc-overview .ov2-market-seg-arrow{
  font-size:11px;color:var(--ink-muted);font-weight:500;
  font-feature-settings:'tnum';
}
#sc-overview .ov2-market-seg.pos .ov2-market-seg-arrow{color:var(--positive)}
#sc-overview .ov2-market-seg.neg .ov2-market-seg-arrow{color:var(--negative)}
#sc-overview .ov2-market-seg-score{
  font-family:var(--font-display);
  font-size:13px;color:var(--ink);font-weight:500;font-style:italic;
  font-feature-settings:'tnum';
}
#sc-overview .ov2-market-seg.pos .ov2-market-seg-score{color:var(--positive)}
#sc-overview .ov2-market-seg.neg .ov2-market-seg-score{color:var(--negative)}
#sc-overview .ov2-market-seg.flat .ov2-market-seg-score{color:var(--ink-muted)}
#sc-overview .ov2-market-trajectory{
  font-size:11.5px;line-height:1.55;color:var(--ink-soft);font-weight:300;
}
#sc-overview .ov2-market-trajectory strong{color:var(--ink-pure);font-weight:500}
#sc-overview .ov2-market-cta{
  font-size:11px;color:var(--sig-teal);font-weight:500;
  letter-spacing:0.04em;text-transform:uppercase;
  padding-top:10px;border-top:1px solid var(--line-1);
}
.device-ipad #sc-overview .ov2-market-cta{margin-bottom:auto}

/* League card */
#sc-overview .ov2-league-card{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(20,200,184,.04) 0%, transparent 55%),
    var(--surface-1);
  border:1px solid var(--line-1);
  border-radius:18px;padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 1px 0 rgba(0,0,0,.3),
    0 12px 36px rgba(0,0,0,.2);
}
.device-ipad #sc-overview .ov2-league-card{border-radius:22px;padding:22px 26px}
#sc-overview .ov2-league-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line-1);
}
#sc-overview .ov2-league-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:14px;color:var(--sig-teal);
}
#sc-overview .ov2-league-label{
  font-family:var(--font-display);
  font-size:13px;color:var(--ink);font-style:italic;font-weight:500;
}
#sc-overview .ov2-league-list{display:flex;flex-direction:column}
#sc-overview .ov2-league-row{
  display:grid;grid-template-columns:24px 1fr 80px 36px;
  gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line-1);
  cursor:pointer;
  transition:background .18s ease;
}
.device-ipad #sc-overview .ov2-league-row{grid-template-columns:28px 1fr 180px 44px;gap:20px}
#sc-overview .ov2-league-row:last-child{border-bottom:none}
#sc-overview .ov2-league-row:hover{background:rgba(255,255,255,.025)}
#sc-overview .ov2-league-row:hover .ov2-league-name{color:var(--ink-pure)}
#sc-overview .ov2-league-row.self:hover{background:linear-gradient(90deg,rgba(20,200,184,.14),rgba(123,77,224,.06) 65%,rgba(255,255,255,.015))}
#sc-overview .ov2-league-row.self{
  background:linear-gradient(90deg,rgba(20,200,184,.10),rgba(123,77,224,.04) 65%,transparent);
  margin:2px -10px;padding-left:14px;padding-right:10px;
  border-radius:8px;
  position:relative;
}
#sc-overview .ov2-league-row.self::before{
  content:'';
  position:absolute;
  left:2px;top:6px;bottom:6px;width:3px;
  background:var(--sig-teal);
  border-radius:1.5px;
  box-shadow:0 0 8px rgba(20,200,184,.45);
}
#sc-overview .ov2-league-rank{
  font-family:var(--font-display);
  font-size:12px;color:var(--ink-muted);font-weight:500;font-style:italic;
  font-feature-settings:'tnum';
}
#sc-overview .ov2-league-row.self .ov2-league-rank{color:var(--sig-teal);font-weight:600}
#sc-overview .ov2-league-name{font-size:12.5px;color:var(--ink);font-weight:400;transition:color .18s ease}
#sc-overview .ov2-league-row.self .ov2-league-name{color:var(--ink-pure);font-weight:600}
#sc-overview .ov2-league-bar-wrap{
  height:3px;background:rgba(255,255,255,.06);border-radius:1.5px;overflow:hidden;
}
#sc-overview .ov2-league-bar{
  height:100%;border-radius:1.5px;
  /* All peer bars use the Signal gradient at reduced intensity so the table
     reads as one cohort visually. The self row gets full brightness + glow. */
  background:linear-gradient(90deg,
    rgba(123,77,224,.45) 0%,
    rgba(59,102,229,.55) 50%,
    rgba(20,200,184,.65) 100%);
}
#sc-overview .ov2-league-row.self .ov2-league-bar{
  background:var(--sig-gradient-h);
  box-shadow:0 0 10px rgba(20,200,184,.55);
}
#sc-overview .ov2-league-row.self .ov2-league-score{color:var(--sig-teal);font-weight:600}
#sc-overview .ov2-league-score{
  font-family:var(--font-display);
  font-size:14px;color:var(--ink);font-weight:500;font-style:italic;
  text-align:right;font-feature-settings:'tnum';
}

/* Score ring arc draw animation (lifted from v3) */
@keyframes ovScoreRingDraw{from{stroke-dasharray:0 660}to{stroke-dasharray:326 660}}
#sc-overview .ov2-score-ring-arc{animation:ovScoreRingDraw 1.6s .35s both cubic-bezier(.22,.61,.36,1)}

/* ═══════════════════════════════════════════════════════════════
   PILLAR SPECTRUM (v35) — sc-pillars overview pane
   5-lane absolute-scale visualization + editorial prose. Apple-minimal
   layered with Signal brand: thin tracks, RAG markers, generous whitespace,
   weight-driven hierarchy, italic Newsreader for editorial accents.
   Namespace prefix: pls-
   ═══════════════════════════════════════════════════════════════ */
.pls-overview{
  margin:0 16px 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123,77,224,.04) 0%, transparent 55%),
    var(--surface-1, #0f1218);
  border:1px solid var(--line-1, rgba(255,255,255,.08));
  border-radius:18px;
  padding:22px 22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 0 rgba(0,0,0,.4),
    0 12px 36px rgba(0,0,0,.22);
}
.device-ipad .pls-overview{
  margin:0 24px 28px;
  border-radius:22px;
  padding:32px 36px 34px;
}

.pls-grid{display:grid;grid-template-columns:1fr;gap:24px}
.device-ipad .pls-grid{grid-template-columns:65fr 35fr;gap:40px}

/* — VISUALIZATION (left) — */
.pls-viz{display:flex;flex-direction:column;min-width:0}
.pls-eyebrow{
  font-family:var(--font-display, 'Newsreader', Georgia, serif);
  font-size:11px;font-style:italic;font-weight:500;
  color:var(--ink-muted, rgba(188,192,200,.7));
  letter-spacing:-0.005em;
  margin-bottom:18px;
}
.device-ipad .pls-eyebrow{font-size:12.5px;margin-bottom:22px}

.pls-table{display:flex;flex-direction:column;gap:14px}

/* shared row template — name | track | score */
.pls-row{
  display:grid;grid-template-columns:78px 1fr 36px;
  gap:14px;align-items:center;
}
.device-ipad .pls-row{grid-template-columns:104px 1fr 44px;gap:20px}

/* axis row — band labels above the lanes */
.pls-axis-row{margin-bottom:6px}
.pls-axis-bands{
  display:flex;justify-content:space-between;
  font-family:var(--font-display, 'Newsreader', Georgia, serif);
  font-size:9.5px;font-style:italic;font-weight:400;
  color:var(--ink-muted, rgba(188,192,200,.55));
  letter-spacing:-0.003em;
}
.device-ipad .pls-axis-bands{font-size:10.5px}
.pls-axis-current{color:var(--ink-pure, #fff);font-weight:500}

/* lane name (left) */
.pls-lane-name{
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-pure, #fff);font-weight:500;
}
.device-ipad .pls-lane-name{font-size:11px;letter-spacing:0.16em}

/* lane track — thin neutral baseline with band ticks and one score marker */
.pls-lane-track{
  position:relative;height:22px;
}
.pls-lane-track::before{
  content:'';position:absolute;
  left:0;right:0;top:50%;
  transform:translateY(-50%);
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.10) 8%,
    rgba(255,255,255,.10) 92%,
    transparent 100%);
}
.pls-tick{
  position:absolute;top:50%;
  transform:translate(-50%, -50%);
  width:1px;height:5px;
  background:rgba(255,255,255,.16);
  pointer-events:none;
}
.pls-marker{
  position:absolute;top:50%;
  transform:translate(-50%, -50%);
  width:8px;height:8px;border-radius:50%;
  z-index:3;
  border:1.5px solid var(--bg-deep, #060810);
}
.device-ipad .pls-marker{width:9px;height:9px}

/* Peer reference dots — quieter than the Serco marker. Median in muted blue,
   cohort top in muted purple. Echoes the composite spectrum's treatment. */
.pls-peer-dot{
  position:absolute;top:50%;
  transform:translate(-50%, -50%);
  width:6px;height:6px;
  border-radius:50%;
  border:1.5px solid var(--bg-deep, #060810);
  z-index:2;
}
.pls-peer-dot.median{
  background:var(--sig-blue, #3B66E5);
  box-shadow:0 0 5px rgba(59,102,229,.45);
}
.pls-peer-dot.cohort{
  background:#FFFFFF;
  box-shadow:0 0 5px rgba(255,255,255,.40);
}

/* Tiny legend below the lanes — references which dot is which without
   adding obvious chrome. Sits in the track column area (offset from name
   column) so it visually relates to the markers above. */
.pls-legend{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.04);
  font-size:9.5px;color:var(--ink-muted, rgba(188,192,200,.65));
  font-weight:400;letter-spacing:0.02em;
}
.device-ipad .pls-legend{font-size:10px;gap:18px;margin-top:14px;padding-top:14px}
.pls-legend-item{display:inline-flex;align-items:center;gap:6px}
.pls-legend-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--bg-deep, #060810);
}
.pls-legend-dot.self{background:var(--sig-teal, #14C8B8);box-shadow:0 0 4px rgba(20,200,184,.4)}
.pls-legend-dot.median{background:var(--sig-blue, #3B66E5)}
.pls-legend-dot.cohort{background:#FFFFFF}

/* lane score (right) — italic Newsreader, RAG-colored via inline style */
.pls-lane-score{
  font-family:var(--font-display, 'Newsreader', Georgia, serif);
  font-size:14px;font-style:italic;font-weight:500;
  text-align:right;font-feature-settings:'tnum';
  letter-spacing:-0.01em;
}
.device-ipad .pls-lane-score{font-size:16px}

/* — EDITORIAL PROSE (right) — */
.pls-prose{
  display:flex;flex-direction:column;gap:14px;
  padding-top:4px;
}
.device-ipad .pls-prose{
  padding-left:16px;
  border-left:1px solid rgba(255,255,255,.06);
  justify-content:center;
}
.pls-prose-eyebrow{
  font-family:var(--font-display, 'Newsreader', Georgia, serif);
  font-size:14.5px;font-style:italic;font-weight:500;
  color:var(--ink-pure, #fff);
  letter-spacing:-0.005em;line-height:1.3;
  margin-bottom:2px;
}
.device-ipad .pls-prose-eyebrow{font-size:17px}
.pls-prose p{
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  font-size:12.5px;line-height:1.65;
  color:var(--ink-soft, rgba(220,222,228,.78));
  font-weight:300;letter-spacing:-0.003em;
  margin:0;
}
.device-ipad .pls-prose p{font-size:13.5px;line-height:1.7}
.pls-prose-quiet{
  color:var(--ink-muted, rgba(188,192,200,.6)) !important;
  font-style:italic;
}

/* ════════════════════════════════════════════════════════════════
   DATAHUB v2 — analyst cockpit
   Banking-analyst dense layout: 8 KPIs + 9 panes = 17 elements.
   All classes prefixed dh-. Tight, tabular, monospace numbers.
   ════════════════════════════════════════════════════════════════ */
.dh-wrap{
  padding:12px 14px 80px;
  display:flex;flex-direction:column;gap:10px;
}

/* ── Row 1: KPI strip ── */
.dh-kpi-strip{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  position:relative;overflow:hidden;
}
.dh-kpi-strip::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(123,77,224,.45),rgba(59,102,229,.45),rgba(20,200,184,.45),transparent);
  opacity:.45;
}
.dh-kpi{
  padding:13px 14px 12px;
  border-right:1px solid rgba(255,255,255,.04);
  position:relative;
}
.dh-kpi:last-child{border-right:none;}
.dh-kpi-label{
  font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(188,192,200,.6);font-weight:500;margin-bottom:7px;
}
.dh-kpi-value{
  font-size:22px;line-height:1;font-weight:500;color:#fff;
  letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:5px;
}
.dh-kpi-suffix{font-size:11px;font-weight:400;color:rgba(188,192,200,.55);letter-spacing:0;}
.dh-kpi-meta{
  font-size:9.5px;color:rgba(188,192,200,.55);margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:.2px;
}
.dh-kpi-meta.up{color:#34D399;}
.dh-kpi-meta.down{color:#F87171;}

/* ── Pane chrome ── */
.dh-row{display:grid;gap:10px;}
.dh-row-2{grid-template-columns: 0.95fr 1.15fr 0.9fr; min-height:300px;}
.dh-row-3{grid-template-columns: 1.2fr 0.95fr 0.95fr; min-height:240px;}
.dh-row-4{grid-template-columns: 1fr 1fr 1fr; min-height:200px;}
.dh-pane{
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  padding:13px 16px 10px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  min-height:0;
}
.dh-pane::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(123,77,224,.4),rgba(59,102,229,.4),rgba(20,200,184,.4),transparent);
  opacity:.35;
}
.dh-pane-head{
  margin-bottom:10px;padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.dh-pane-eyebrow{
  font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(188,192,200,.6);font-weight:500;
}
.dh-pane-title{
  font-size:12.5px;color:#fff;font-weight:500;margin-top:2px;letter-spacing:-.1px;
}
.dh-pane-body{flex:1;overflow:auto;min-height:0;}

/* ── Tables (shared) ── */
.dh-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:11px;font-variant-numeric:tabular-nums;
}
.dh-table thead th{
  font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(188,192,200,.6);font-weight:500;text-align:left;
  padding:4px 5px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dh-table thead th.num{text-align:right;}
.dh-table tbody td{
  padding:6px 5px;text-align:left;color:#ECEDEF;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.dh-table tbody td.num{text-align:right;}
.dh-table tbody tr:last-child td{border-bottom:none;}
.dh-table tbody tr.median td{
  background:rgba(255,255,255,.018);
  color:rgba(188,192,200,.7);
  border-top:1px solid rgba(255,255,255,.08);
}
.dh-table tbody tr.median td:first-child{font-style:italic;}
.dh-table tbody tr.self td{
  background:rgba(20,200,184,.05);
}
.dh-table tbody tr.self td.dh-co-name,
.dh-table tbody tr.self .dh-co-name{
  color:var(--sig-teal);font-weight:600;
}
.dh-rank{color:rgba(188,192,200,.5);font-size:10px;width:18px;}
.dh-co-name{color:#ECEDEF;}
.dh-cell-up{color:#34D399;}
.dh-cell-down{color:#F87171;}
.dh-cell-flat{color:rgba(188,192,200,.5);}
.dh-spark-cell{padding:3px 5px;}
.dh-spark-cell svg{width:100%;height:18px;display:block;}

/* ── Band-tinted cells (pillar matrix) ── */
.dh-cell-band{font-weight:500;border-radius:3px;text-align:center;}
.dh-cell-band-developing{background:rgba(217,119,6,.18);color:#F4C76B;}
.dh-cell-band-established{background:rgba(8,145,178,.20);color:#5FBED1;}
.dh-cell-band-advancing{background:rgba(5,150,105,.22);color:#34D399;}
.dh-cell-band-strong{background:rgba(22,163,74,.24);color:#42BD64;}
.dh-cell-band-leading{background:rgba(124,58,237,.22);color:#A78BFA;}
.dh-cell-band-critical{background:rgba(220,38,38,.18);color:#FB7185;}
.dh-cell-band-foundational{background:rgba(127,29,29,.20);color:#FB7185;}
.dh-matrix tbody td.dh-co-name{padding-left:0;font-size:10.5px;}

/* ── Sub-component drilldown ── */
.dh-subcomp-row{
  display:grid;grid-template-columns: 1fr 70px 50px;
  gap:8px;align-items:center;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.dh-subcomp-row:last-child{border-bottom:none;}
.dh-subcomp-name{
  font-size:10.5px;color:#ECEDEF;line-height:1.25;
}
.dh-subcomp-weight{
  font-size:8.5px;color:rgba(188,192,200,.45);
  letter-spacing:.4px;
}
.dh-subcomp-bar{
  position:relative;height:5px;background:rgba(255,255,255,.05);
  border-radius:2px;
}
.dh-subcomp-bar-fill{
  position:absolute;top:0;left:0;height:100%;border-radius:2px;
}
.dh-subcomp-score{
  font-size:11.5px;font-variant-numeric:tabular-nums;
  text-align:right;font-weight:500;color:#fff;
}

/* ── SxE chart ── */
#dh-sxe-chart{width:100%;height:100%;min-height:180px;display:flex;}
#dh-sxe-chart svg{width:100%;height:100%;display:block;}

/* ── Market Watch feed ── */
.dh-mw-item{
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  display:flex;flex-direction:column;gap:3px;
}
.dh-mw-item:last-child{border-bottom:none;}
.dh-mw-badge{
  font-size:7.5px;letter-spacing:1px;text-transform:uppercase;
  font-weight:500;padding:2px 6px;border-radius:2px;
  align-self:flex-start;
}
.dh-mw-title{font-size:10.5px;color:#ECEDEF;line-height:1.35;}
.dh-mw-time{font-size:9px;color:rgba(188,192,200,.45);}

/* ── Share Price ── */
#dh-shareprice{display:flex;flex-direction:column;gap:10px;}
.dh-sp-now{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.dh-sp-price{
  font-size:24px;font-weight:500;color:#fff;line-height:1;
  letter-spacing:-.5px;display:inline-flex;align-items:baseline;
}
.dh-sp-suffix{font-size:11px;color:rgba(188,192,200,.5);margin-left:1px;}
.dh-sp-change{font-size:11.5px;font-weight:500;}
.dh-sp-range{display:flex;flex-direction:column;gap:5px;margin-top:2px;}
.dh-sp-range-bar{
  position:relative;height:4px;background:rgba(255,255,255,.05);
  border-radius:2px;
  background-image:linear-gradient(90deg,rgba(248,113,113,.25),rgba(244,199,107,.2),rgba(52,211,153,.25));
}
.dh-sp-range-now{
  position:absolute;top:-3px;bottom:-3px;width:2px;
  background:var(--sig-teal);border-radius:1px;
  box-shadow:0 0 6px rgba(20,200,184,.5);
}
.dh-sp-range-label{
  display:flex;justify-content:space-between;font-size:9.5px;
  color:rgba(188,192,200,.55);font-variant-numeric:tabular-nums;
}
.dh-sp-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.05);
}
.dh-sp-stat-label{
  font-size:9px;color:rgba(188,192,200,.5);letter-spacing:.5px;text-transform:uppercase;
}
.dh-sp-stat-value{
  font-size:11.5px;color:#ECEDEF;font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ── Brokers list ── */
#dh-brokers{display:flex;flex-direction:column;}
.dh-broker-row{
  display:grid;grid-template-columns:1fr 60px 50px;gap:8px;
  align-items:center;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-variant-numeric:tabular-nums;
}
.dh-broker-row:last-child{border-bottom:none;}
.dh-broker-row.consensus{
  margin-top:4px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.012);
}
.dh-broker-name{font-size:11px;color:#ECEDEF;}
.dh-broker-action{font-size:9px;color:rgba(188,192,200,.5);margin-top:1px;}
.dh-broker-target{
  font-size:12px;color:#fff;font-weight:500;text-align:right;
}
.dh-broker-upside{font-size:10.5px;text-align:right;font-weight:500;}

/* ── Operating Metrics ── */
#dh-opmetrics{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  width:100%;height:100%;
}
.dh-op{
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.04);
  border-right:1px solid rgba(255,255,255,.04);
}
.dh-op:nth-child(2n){border-right:none;}
.dh-op:nth-last-child(-n+2){border-bottom:none;}
.dh-op-label{
  font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(188,192,200,.55);font-weight:500;
}
.dh-op-value{
  font-size:15px;color:#fff;font-weight:500;margin-top:3px;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px;
}
.dh-op-meta{
  font-size:9px;color:rgba(188,192,200,.5);margin-top:1px;line-height:1.3;
}

/* ── Mobile fallback ── */
@media (max-width:767px){
  .dh-wrap{padding:12px 12px 80px;}
  .dh-kpi-strip{grid-template-columns:repeat(2,1fr);}
  .dh-kpi{border-right:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);}
  .dh-kpi:nth-child(2n){border-right:none;}
  .dh-kpi:nth-last-child(-n+2){border-bottom:none;}
  .dh-row-2,.dh-row-3,.dh-row-4{grid-template-columns:1fr;}
  .dh-pane{min-height:auto;}
}

/* ════════════════════════════════════════════════════════════════
   INTELLIGENCE HOME (sih-) — pass28 redesign
   Hero + 4-card chooser. Drops the wave-dot tiles + cool-grey palette
   in favour of brand-aligned dark surface, illustrated SVG art per
   layer, and live preview status footers.
   ════════════════════════════════════════════════════════════════ */
.sih-close{
  position:absolute;
  top:calc(var(--safe-top) + 16px);
  right:18px;
  width:32px;height:32px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.55);
  font-size:13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;
  z-index:3;line-height:1;padding:0;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.sih-close:hover{
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.12);
}

/* HERO */
.sih-hero{
  text-align:center;
  margin-top:32px;
  margin-bottom:26px;
  padding:0 16px;
  position:relative;
  z-index:2;
  flex-shrink:0;
}
.sih-hero-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:10px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(188,192,200,.6);
  margin-bottom:14px;
}
.sih-hero-title{
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-.6px;
  color:#ECEDEF;
  margin:0 0 14px;
}
.sih-hero-title em{
  font-style:italic;
  font-weight:500;
  /* color inherits — the italic carries the emphasis */
}
.sih-hero-sub{
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:rgba(242,244,247,.7);
  line-height:1.7;
  max-width:540px;
  margin:0 auto;
  font-weight:300;
}

/* GRID */
.sih-grid{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding:0 0 12px;
  min-height:0;
}

/* CARD */
.sih-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,.025), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.022) 0%, rgba(255,255,255,.010) 100%);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease, background .25s ease;
}
.sih-card::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--card-color, rgba(255,255,255,.4)), transparent);
  opacity:.55;
  transition:opacity .25s ease;
  z-index:3;
}
.sih-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.10);
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,.045), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.018) 100%);
}
.sih-card:hover::before{opacity:.95;}
.sih-card.locked{cursor:default;opacity:.72;}
.sih-card.locked:hover{transform:none;}

.sih-card-art{
  height:108px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.sih-card-art svg{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
}

.sih-card-body{
  padding:14px 22px 16px;
  display:flex;flex-direction:column;
  flex:1;position:relative;z-index:2;
}
.sih-card-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(188,192,200,.5);font-weight:600;
  margin-bottom:6px;
}
.sih-card-name{
  font-family:'Newsreader',Georgia,serif;
  font-size:22px;font-weight:600;letter-spacing:-.4px;
  color:#ECEDEF;margin:0 0 8px;line-height:1.05;
}
.sih-card-desc{
  font-family:'Inter',sans-serif;
  font-size:12.5px;line-height:1.6;
  color:rgba(242,244,247,.65);
  margin:0 0 14px;
  font-weight:300;
  flex-shrink:0;
}
.sih-card-status{
  margin-top:auto;
  display:flex;align-items:center;gap:8px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.05);
}
.sih-card-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(188,192,200,.4);flex-shrink:0;
}
.sih-card-status-dot.active{
  background:#34D399;box-shadow:0 0 6px rgba(52,211,153,.5);
}
.sih-card-status-dot.upcoming{
  background:#F4C76B;box-shadow:0 0 6px rgba(244,199,107,.45);
}
.sih-card-status-text{
  font-family:'Inter',sans-serif;
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(188,192,200,.65);font-weight:500;flex:1;
}
.sih-card-arrow{
  font-size:14px;
  color:var(--card-color,#fff);
  opacity:.55;line-height:1;
  transition:opacity .25s ease, transform .25s ease;
}
.sih-card:hover .sih-card-arrow{opacity:1;transform:translateX(3px);}
.sih-card.locked .sih-card-arrow{display:none;}

@media (max-width:767px){
  .sih-hero{margin-top:24px;margin-bottom:18px;}
  .sih-hero-title{font-size:24px;}
  .sih-hero-sub{font-size:12px;}
  .sih-grid{grid-template-columns:1fr;max-width:100%;gap:10px;}
  .sih-card-art{height:88px;}
  .sih-card-name{font-size:18px;}
}

/* ═══════════════════════════════════════════════════════════════════
   v36 — MARKET INTELLIGENCE & TALENT/TECH SCREEN PAGES
   New Market hub absorbing the four Intelligence Layers as peer-move
   lenses. Talent and Tech promoted to standalone screens reachable
   from peer-move lens links. SMC, Peer Mapping, Datahub remain as
   drill-throughs.
═══════════════════════════════════════════════════════════════════ */

/* Content cap for Market screen (mobile defaults; iPad caps wider below) */
.mi-cap{max-width:1140px;margin:0 auto;padding:0 16px}

/* MASTHEAD */
.mi-masthead{padding:18px 0 6px}
.mi-masthead-eyebrow{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted2);font-weight:500;margin-bottom:10px}
.mi-masthead-title{font-family:var(--font-display);font-size:34px;line-height:1.05;letter-spacing:-1.2px;font-weight:600;color:var(--text)}
.mi-masthead-title em{font-style:italic;font-weight:600;color:#fff}
.mi-masthead-meta{margin-top:10px;font-size:11px;color:var(--muted2);letter-spacing:.4px;display:flex;align-items:center;gap:8px}
.mi-masthead-meta-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(20,200,184,.5)}

/* HERO — THE MARKET READ */
.mi-hero{margin:14px 0 4px;background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px 18px 18px;position:relative}
.mi-hero::before{content:'';position:absolute;inset:0;border-radius:16px;background:radial-gradient(ellipse 200px 80px at 80% 0%,rgba(123,77,224,.10),transparent 70%);pointer-events:none}
.mi-hero-left,.mi-hero-right{position:relative;z-index:1}
.mi-hero-label{font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--purple);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.mi-hero-label-num{background:rgba(123,77,224,.10);color:var(--purple);padding:1.5px 7px;border-radius:3px;font-size:9px;letter-spacing:.5px;font-weight:600}
.mi-hero-statement{font-family:var(--font-display);font-size:21px;line-height:1.32;letter-spacing:-.3px;font-weight:500;color:var(--text);margin-bottom:14px}
.mi-hero-statement em{font-style:italic;color:#fff;font-weight:500}
.mi-hero-statement strong{font-weight:600;color:#fff;font-style:normal}
.mi-hero-body{font-size:13.5px;line-height:1.65;color:var(--muted);font-weight:300}
.mi-hero-body p{margin-bottom:9px}
.mi-hero-body p:last-child{margin-bottom:0}
.mi-hero-body strong{color:var(--text);font-weight:500}

/* SECTION HEADS */
.mi-section{padding:24px 0 0}
.mi-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.mi-section-label{font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:baseline;gap:8px}
.mi-section-label-num{color:var(--muted2);font-weight:400}
.mi-section-action{font-size:11px;color:var(--teal);font-weight:400;letter-spacing:.2px;cursor:pointer}
.mi-section-action::after{content:' →';opacity:.7}

/* SEA STATE */
.mi-seastate{background:rgba(5,150,105,.05);border:1px solid rgba(5,150,105,.15);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .15s}
.mi-seastate:hover{border-color:rgba(5,150,105,.30)}
.mi-seastate-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid rgba(255,255,255,.05)}
.mi-seastate-composite{display:flex;align-items:baseline;gap:10px}
.mi-seastate-num{font-family:var(--font-display);font-size:34px;line-height:1;letter-spacing:-1.4px;font-weight:600;color:var(--green)}
.mi-seastate-rating{background:rgba(5,150,105,.12);color:var(--green);padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:500;letter-spacing:.5px;border:1px solid rgba(5,150,105,.22)}
.mi-seastate-context{text-align:right;font-size:10px;color:var(--muted2);letter-spacing:.3px;line-height:1.5}
.mi-seastate-context strong{color:var(--green);font-weight:500}
.mi-seg{padding:9px 0;display:flex;align-items:center;gap:12px}
.mi-seg+.mi-seg{border-top:1px solid rgba(255,255,255,.04)}
.mi-seg-name{flex:0 0 auto;font-size:12px;color:var(--text);font-weight:400;width:112px}
.mi-seg-name-sub{font-size:9.5px;color:var(--muted2);font-weight:300}
.mi-seg-bar-wrap{flex:1;display:flex;align-items:center;gap:8px;height:14px;position:relative}
.mi-seg-track{flex:1;height:3px;background:rgba(255,255,255,.04);border-radius:2px;position:relative;overflow:hidden}
.mi-seg-zero{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(255,255,255,.10)}
.mi-seg-fill{position:absolute;top:0;bottom:0;height:100%;border-radius:2px}
.mi-seg-score{flex:0 0 50px;text-align:right;font-size:11.5px;font-weight:600;letter-spacing:.2px;font-variant-numeric:tabular-nums}

/* FILTER CHIPS */
.mi-filter{padding:14px 0 0;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.mi-filter::-webkit-scrollbar{display:none}
.mi-chip{flex:0 0 auto;font-size:11px;letter-spacing:.2px;padding:6px 12px;border-radius:99px;cursor:pointer;background:rgba(255,255,255,.025);border:1px solid var(--line-1);color:var(--muted);transition:all .15s;white-space:nowrap}
.mi-chip:hover{background:rgba(255,255,255,.05);color:var(--text)}
.mi-chip.active{background:rgba(59,102,229,.10);border-color:rgba(59,102,229,.35);color:#fff}

/* PEER MOVES */
.mi-moves{padding:8px 0 0}
.mi-move{margin-top:14px;background:rgba(255,255,255,.018);border:1px solid var(--line-1);border-radius:16px;overflow:hidden}
.mi-move-meta{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.mi-move-meta-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mi-move-tag{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted2);font-weight:600}
.mi-move-pillar{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;padding:2px 7px;border-radius:3px}
.mi-move-pillar.employee{background:rgba(244,199,107,.12);color:var(--amber)}
.mi-move-pillar.investor{background:rgba(52,211,153,.10);color:var(--green)}
.mi-move-pillar.voice{background:rgba(123,77,224,.12);color:#A78BFA}
.mi-move-pillar.customer{background:rgba(59,102,229,.12);color:#7BA0F0}
.mi-move-time{font-size:10px;color:var(--muted2);font-weight:400;letter-spacing:.3px}
.mi-move-body{padding:14px 16px 4px}
.mi-move-headline{font-family:var(--font-display);font-size:20px;line-height:1.18;letter-spacing:-.4px;font-weight:500;color:var(--text);margin-bottom:6px}
.mi-move-headline em{font-style:italic;color:#fff}
.mi-move-lede{font-size:13px;line-height:1.6;color:var(--muted);font-weight:300;margin-bottom:14px}
.mi-move-lede strong{color:var(--text);font-weight:500}

/* TIMELINE */
.mi-timeline{display:flex;align-items:center;gap:0;padding:0 0 14px;font-size:9.5px;color:var(--muted2);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.mi-timeline-track{flex:1;height:1px;background:rgba(255,255,255,.08);position:relative;margin:0 8px}
.mi-timeline-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--teal);top:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(20,200,184,.5)}
.mi-timeline-mark{position:absolute;width:1px;height:7px;background:rgba(255,255,255,.12);top:50%;transform:translate(-50%,-50%)}

/* LENSES */
.mi-lenses{border-top:1px solid rgba(255,255,255,.04);padding:6px 0 4px}
.mi-lens{padding:14px 16px 14px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .15s}
.mi-lens:hover{background:rgba(255,255,255,.012)}
.mi-lens:last-child{border-bottom:none}
.mi-lens-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.mi-lens-glyph{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--teal);background:rgba(20,200,184,.08);border:1px solid rgba(20,200,184,.18)}
.mi-lens-label{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--text);font-weight:600}
.mi-lens-count{font-size:9.5px;color:var(--muted2);font-weight:400;letter-spacing:.3px;margin-left:auto}
.mi-lens-arrow{font-size:13px;color:var(--muted2);margin-left:6px;opacity:.7}
.mi-lens-body{font-size:12.5px;line-height:1.65;color:var(--muted);font-weight:300;padding-left:27px}
.mi-lens-body strong{color:var(--text);font-weight:500}
.mi-lens-body em{color:#A78BFA;font-style:normal;font-weight:500}

/* NAMED ITEMS */
.mi-named{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mi-named-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.04);border-radius:9px}
.mi-named-init{flex:0 0 28px;width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,rgba(123,77,224,.18),rgba(20,200,184,.10));border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;letter-spacing:.5px}
.mi-named-text{flex:1;min-width:0}
.mi-named-name{font-size:12px;font-weight:500;color:var(--text);letter-spacing:-.1px;line-height:1.3}
.mi-named-role{font-size:10.5px;color:var(--muted2);margin-top:1px;font-weight:300;line-height:1.3}
.mi-named-tags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.mi-named-tag{font-size:9px;letter-spacing:.3px;padding:2px 6px;border-radius:3px;background:rgba(20,200,184,.08);color:var(--teal);border:1px solid rgba(20,200,184,.14)}
.mi-tool-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:12px;border-top:1px solid rgba(255,255,255,.04)}
.mi-tool-row:first-child{border-top:none}
.mi-tool-name{color:var(--text);font-weight:500}
.mi-tool-context{color:var(--muted2);font-size:10.5px;font-weight:300}
.mi-tool-status{font-size:9.5px;color:var(--teal);letter-spacing:.5px;font-weight:600;flex-shrink:0;margin-left:10px}

/* TAKE-IT */
.mi-takeit{margin:14px 0 4px;background:rgba(20,200,184,.04);border:1px solid rgba(20,200,184,.14);border-radius:10px;padding:11px 14px}
.mi-takeit-label{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:5px}
.mi-takeit-body{font-size:12px;line-height:1.55;color:var(--text);font-weight:400}
.mi-takeit-body em{color:#fff;font-style:italic;font-weight:500}

/* SKETCH MOVES */
.mi-move.sketch .mi-lenses{display:none}
.mi-move-expand{padding:11px 16px;font-size:11px;color:var(--teal);border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:space-between;cursor:pointer;letter-spacing:.2px}
.mi-move-expand-arrow{font-size:14px}

/* DRILL-THROUGHS */
.mi-drills{padding:8px 0 0}
.mi-drill{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;margin-bottom:8px;background:rgba(255,255,255,.018);border:1px solid var(--line-1);border-radius:11px;cursor:pointer;transition:background .15s}
.mi-drill:hover{background:rgba(255,255,255,.035)}
.mi-drill-text{flex:1}
.mi-drill-name{font-size:13px;color:var(--text);font-weight:500;letter-spacing:-.1px}
.mi-drill-sub{font-size:10.5px;color:var(--muted2);margin-top:2px;font-weight:300;letter-spacing:.2px}
.mi-drill-arrow{font-size:14px;color:var(--muted2);margin-left:8px}

/* ASK SIGNAL */
.mi-ask{margin:24px 0 32px;padding:18px;background:linear-gradient(135deg,rgba(123,77,224,.06),rgba(20,200,184,.04));border:1px solid rgba(123,77,224,.20);border-radius:14px;position:relative;overflow:hidden}
.mi-ask::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(20,200,184,.08),transparent 60%);pointer-events:none}
.mi-ask-left,.mi-ask-right{position:relative;z-index:1}
.mi-ask-right{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.mi-ask-label{font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:8px}
.mi-ask-prompt{font-family:var(--font-display);font-size:18px;line-height:1.3;letter-spacing:-.3px;font-weight:500;color:var(--text)}
.mi-ask-prompt em{font-style:italic;color:#fff}
.mi-ask-suggestion{font-size:12px;color:var(--muted);font-weight:300;padding:9px 12px;background:rgba(255,255,255,.025);border:1px solid var(--line-1);border-radius:8px;cursor:pointer;transition:all .15s}
.mi-ask-suggestion:hover{background:rgba(255,255,255,.05);color:var(--text)}
.mi-ask-suggestion::before{content:'›  ';color:var(--teal);font-weight:500}

/* iPad reflow — multi-column where it earns it */
.device-ipad .mi-cap{padding:0 4px;max-width:1140px}
.device-ipad .mi-masthead{padding:24px 4px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.device-ipad .mi-masthead-left{flex:1;min-width:0}
.device-ipad .mi-masthead-eyebrow{font-size:11px;letter-spacing:3px;margin-bottom:14px}
.device-ipad .mi-masthead-title{font-size:48px;letter-spacing:-1.6px;line-height:1}
.device-ipad .mi-masthead-meta{font-size:12px;letter-spacing:.5px;padding-bottom:6px;margin-top:0}
.device-ipad .mi-hero{margin:18px 4px 8px;border-radius:20px;padding:32px 36px 30px;display:grid;grid-template-columns:1.15fr 1fr;gap:36px}
.device-ipad .mi-hero::before{border-radius:20px;background:radial-gradient(ellipse 400px 140px at 92% 0%,rgba(123,77,224,.10),transparent 70%)}
.device-ipad .mi-hero-label{font-size:11px;letter-spacing:3px;margin-bottom:22px}
.device-ipad .mi-hero-label-num{padding:2px 8px;font-size:10px}
.device-ipad .mi-hero-statement{font-size:32px;line-height:1.18;letter-spacing:-.6px;margin-bottom:0}
.device-ipad .mi-hero-body{font-size:15px;line-height:1.7}
.device-ipad .mi-hero-body p{margin-bottom:12px}
.device-ipad .mi-section{padding:32px 4px 0}
.device-ipad .mi-section-head{margin-bottom:18px}
.device-ipad .mi-section-label{font-size:11px;letter-spacing:3px;gap:10px}
.device-ipad .mi-section-action{font-size:12px;letter-spacing:.3px}
.device-ipad .mi-seastate{border-radius:16px;padding:22px 26px;display:grid;grid-template-columns:230px 1fr 1fr 1fr;gap:28px;align-items:center}
.device-ipad .mi-seastate-top{display:none}
.device-ipad .mi-seastate-composite{display:block;border-right:1px solid rgba(255,255,255,.05);padding-right:28px}
.device-ipad .mi-seastate-composite::before{content:'Composite SMC';display:block;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);font-weight:500;margin-bottom:6px}
.device-ipad .mi-seastate-num{font-size:42px;letter-spacing:-1.6px;display:inline-block}
.device-ipad .mi-seastate-rating{margin-left:12px;display:inline-block}
.device-ipad .mi-seg{padding:0;display:block}
.device-ipad .mi-seg+.mi-seg{border-top:none}
.device-ipad .mi-seg-name{width:auto;font-size:13px;font-weight:500}
.device-ipad .mi-seg-name-sub{font-size:10.5px;margin-top:2px}
.device-ipad .mi-seg-bar-wrap{margin-top:11px;height:auto}
.device-ipad .mi-seg-score{font-size:13px;flex-basis:auto;text-align:left;margin-left:6px;flex:0 0 auto}
.device-ipad .mi-filter{padding:14px 4px 0;gap:8px}
.device-ipad .mi-chip{font-size:12px;letter-spacing:.3px;padding:7px 14px}
.device-ipad .mi-moves{padding:14px 0 0}
.device-ipad .mi-move{border-radius:18px;margin-top:14px}
.device-ipad .mi-move-meta{padding:18px 28px 12px}
.device-ipad .mi-move-tag{font-size:10px;letter-spacing:1.8px}
.device-ipad .mi-move-pillar{font-size:10px;padding:3px 8px}
.device-ipad .mi-move-time{font-size:11px}
.device-ipad .mi-move-body{padding:22px 28px 8px}
.device-ipad .mi-move-headline{font-size:28px;line-height:1.18;letter-spacing:-.6px;margin-bottom:12px}
.device-ipad .mi-move-lede{font-size:14.5px;line-height:1.65}
.device-ipad .mi-timeline{font-size:10.5px}
.device-ipad .mi-lenses{padding:18px 28px 22px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.device-ipad .mi-lens{padding:18px 24px 18px 0;border-right:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.device-ipad .mi-lens:nth-child(2n){padding-right:0;padding-left:24px;border-right:none}
.device-ipad .mi-lens.full{grid-column:1 / -1;padding-left:0;padding-right:0;border-right:none}
.device-ipad .mi-lens.no-bottom{border-bottom:none}
.device-ipad .mi-lens-head{margin-bottom:12px}
.device-ipad .mi-lens-glyph{width:22px;height:22px;border-radius:5px;font-size:11px}
.device-ipad .mi-lens-label{font-size:10.5px;letter-spacing:2.4px}
.device-ipad .mi-lens-count{font-size:10.5px;letter-spacing:.4px}
.device-ipad .mi-lens-body{font-size:13px;line-height:1.7;padding-left:33px}
.device-ipad .mi-named-init{flex-basis:30px;width:30px;height:30px;font-size:10.5px}
.device-ipad .mi-named-name{font-size:13px}
.device-ipad .mi-named-role{font-size:11.5px}
.device-ipad .mi-named-tag{font-size:9.5px;letter-spacing:.4px;padding:2px 7px}
.device-ipad .mi-tool-row{padding:9px 0;font-size:13px}
.device-ipad .mi-tool-context{font-size:11px;margin-top:2px}
.device-ipad .mi-takeit{margin:18px 28px 22px;border-radius:12px;padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.device-ipad .mi-takeit-label{font-size:10px;letter-spacing:2.2px;margin-bottom:0;white-space:nowrap}
.device-ipad .mi-takeit-body{font-size:13px;line-height:1.6}
.device-ipad .mi-sketches{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.device-ipad .mi-sketches .mi-move{margin-top:0}
.device-ipad .mi-drills{padding:12px 0 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.device-ipad .mi-drill{padding:16px 20px;margin-bottom:0;border-radius:13px}
.device-ipad .mi-drill-name{font-size:14px}
.device-ipad .mi-drill-sub{font-size:11.5px;margin-top:3px}
.device-ipad .mi-drill-arrow{font-size:15px}
.device-ipad .mi-ask{margin:32px 0 16px;padding:26px 32px;border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.device-ipad .mi-ask-right{margin-top:0}
.device-ipad .mi-ask-label{font-size:10.5px;letter-spacing:2.4px;margin-bottom:10px}
.device-ipad .mi-ask-prompt{font-size:22px;line-height:1.3;letter-spacing:-.4px}
.device-ipad .mi-ask-suggestion{font-size:13px;padding:11px 14px;border-radius:9px}

/* Talent / Tech standalone screen wrapper */
.ts-content,.tc-content{padding:14px 16px 24px}
.device-ipad .ts-content,.device-ipad .tc-content{padding:14px 32px 32px;max-width:1400px;margin:0 auto}

/* ═══════════════════════════════════════════════════════════════════
   v37 — MARKET INTELLIGENCE BASE CAMP + THE BUYER READ
   Base camp orientation page (sc-market) + skeleton Buyer Read
   (sc-market-buyer). Children sc-market-read and sc-market-moves
   reuse mi-* classes from v36.
═══════════════════════════════════════════════════════════════════ */

/* Orientation line under masthead */
.mb-orient{
  margin:14px 4px 18px;
  font-family:var(--font-display);
  font-size:17px;line-height:1.4;letter-spacing:-.2px;
  font-weight:400;font-style:italic;color:var(--muted);
}

/* Three editorial cards — visually distinct */
.mb-edcards{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}

.mb-edcard{
  background:rgba(255,255,255,.022);
  border:1px solid var(--line-1);
  border-radius:16px;overflow:hidden;cursor:pointer;
  transition:all .18s ease;
  display:flex;flex-direction:column;
  position:relative;
}
.mb-edcard:hover{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.034);
  transform:translateY(-1px);
}
.mb-edcard-art{
  height:96px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line-1);
}
.mb-edcard-body{padding:16px 18px 16px}
.mb-edcard-tag{
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted2);font-weight:600;margin-bottom:8px;
}
.mb-edcard-title{
  font-family:var(--font-display);
  font-size:22px;line-height:1.1;letter-spacing:-.6px;
  font-weight:600;color:var(--text);margin-bottom:8px;
}
.mb-edcard-sub{
  font-size:12.5px;line-height:1.55;color:var(--muted);
  font-weight:300;margin-bottom:12px;
}
.mb-edcard-meta{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;color:var(--muted2);font-weight:400;
  letter-spacing:.3px;
}
.mb-meta-dot{
  width:6px;height:6px;border-radius:50%;
  box-shadow:0 0 8px rgba(255,255,255,.15);
}
.mb-edcard-arrow{
  margin-left:auto;font-size:14px;color:var(--muted2);
}

/* Card 1 — The Market Read: editorial cover */
.mb-card-read .mb-edcard-art{
  background:
    radial-gradient(ellipse 200px 80px at 80% 50%,rgba(123,77,224,.10),transparent 70%),
    rgba(123,77,224,.025);
}
.mb-art-read{
  position:absolute;inset:0;padding:18px 22px;
  display:flex;align-items:center;gap:14px;
}
.mb-art-read-q{
  font-family:var(--font-display);
  font-size:54px;line-height:.6;color:rgba(123,77,224,.55);
  font-weight:600;flex-shrink:0;
}
.mb-art-read-line{
  font-family:var(--font-display);
  font-size:16px;line-height:1.25;letter-spacing:-.3px;
  font-style:italic;font-weight:400;color:var(--text);
}
.mb-art-read-line em{font-style:italic;color:#fff;font-weight:500}

/* Card 2 — Peer Moves: case-study lozenge */
.mb-card-moves .mb-edcard-art{
  background:
    radial-gradient(ellipse 220px 80px at 50% 50%,rgba(20,200,184,.08),transparent 70%),
    rgba(20,200,184,.02);
}
.mb-art-moves{
  position:absolute;inset:0;
  display:flex;align-items:center;
}
.mb-art-peer{
  position:absolute;
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,rgba(20,200,184,.2),rgba(123,77,224,.14));
  border:1px solid rgba(20,200,184,.25);
  display:flex;align-items:center;justify-content:center;
  z-index:2;top:50%;transform:translateY(-50%);
  box-shadow:0 0 16px rgba(20,200,184,.18);
}
.mb-art-peer span{
  font-family:var(--font-display);
  font-size:14px;font-weight:600;color:#fff;letter-spacing:-.3px;
}
.mb-art-peer-line{
  position:absolute;
  height:1px;background:linear-gradient(90deg,rgba(20,200,184,.4),rgba(20,200,184,.1));
  top:50%;z-index:1;
}

/* Card 3 — Buyer Read: decoder grid */
.mb-card-buyer .mb-edcard-art{
  background:
    radial-gradient(ellipse 240px 70px at 50% 50%,rgba(123,77,224,.10),transparent 70%),
    rgba(123,77,224,.02);
}
.mb-art-buyer{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.mb-art-grid{
  display:flex;align-items:flex-end;gap:10px;height:30px;
}
.mb-art-trace{
  width:28px;background:linear-gradient(180deg,rgba(123,77,224,.55),rgba(123,77,224,.18));
  border-radius:2px;
  height:calc(28% + var(--d) * 14%);
}
.mb-art-trace:nth-child(1){height:42%}
.mb-art-trace:nth-child(2){height:62%}
.mb-art-trace:nth-child(3){height:80%}
.mb-art-trace:nth-child(4){height:54%}
.mb-art-trace:nth-child(5){height:72%}
.mb-art-buyer-label{
  font-size:9px;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(123,77,224,.85);font-weight:600;
}

/* Section label */
.mb-section-head{padding:24px 4px 12px}
.mb-section-label{
  font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* Drill-through data row */
.mb-data{display:flex;flex-direction:column;gap:8px}
.mb-datacard{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  background:rgba(255,255,255,.018);
  border:1px solid var(--line-1);
  border-radius:11px;cursor:pointer;
  transition:background .15s;
}
.mb-datacard:hover{background:rgba(255,255,255,.035)}
.mb-datacard-glyph{
  width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-1);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--muted);flex-shrink:0;
}
.mb-datacard-body{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.mb-datacard-name{font-size:13px;color:var(--text);font-weight:500;letter-spacing:-.1px}
.mb-datacard-sub{font-size:10.5px;color:var(--muted2);margin-top:2px;font-weight:300}
.mb-datacard-metric{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.3px;
  flex-shrink:0;text-align:right;
}
.mb-datacard-metric span{
  display:block;font-family:var(--font-body);
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted2);font-weight:500;margin-top:2px;letter-spacing:1.2px;
}

/* iPad reflow — base camp */
.device-ipad .mb-orient{
  font-size:21px;letter-spacing:-.3px;line-height:1.4;
  margin:18px 4px 24px;max-width:880px;
}
.device-ipad .mb-edcards{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;
  margin-bottom:0;
}
.device-ipad .mb-edcard-art{height:140px}
.device-ipad .mb-edcard-body{padding:22px 24px 22px}
.device-ipad .mb-edcard-tag{font-size:10px;letter-spacing:2.2px;margin-bottom:10px}
.device-ipad .mb-edcard-title{font-size:26px;letter-spacing:-.7px;margin-bottom:10px}
.device-ipad .mb-edcard-sub{font-size:13.5px;line-height:1.55;margin-bottom:16px}
.device-ipad .mb-edcard-meta{font-size:11px}
.device-ipad .mb-art-read-q{font-size:64px}
.device-ipad .mb-art-read-line{font-size:18px}
.device-ipad .mb-art-peer{width:40px;height:40px}
.device-ipad .mb-art-peer span{font-size:16px}
.device-ipad .mb-art-grid{height:42px;gap:14px}
.device-ipad .mb-art-trace{width:34px}
.device-ipad .mb-section-head{padding:32px 4px 14px}
.device-ipad .mb-section-label{font-size:11px;letter-spacing:3px}
.device-ipad .mb-data{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.device-ipad .mb-datacard{padding:16px 18px;border-radius:13px}
.device-ipad .mb-datacard-glyph{width:40px;height:40px;font-size:16px}
.device-ipad .mb-datacard-name{font-size:14px}
.device-ipad .mb-datacard-sub{font-size:11.5px;margin-top:3px}
.device-ipad .mb-datacard-metric{font-size:22px}
.device-ipad .mb-datacard-metric span{font-size:9.5px;margin-top:3px;letter-spacing:1.4px}

/* ═══════════════════════════════════════════
   THE BUYER READ — skeleton page CSS (bu-*)
═══════════════════════════════════════════ */

.bu-streams{display:flex;flex-direction:column;gap:14px}

.bu-stream{
  display:flex;gap:14px;
  padding:18px 16px 18px;
  background:rgba(255,255,255,.018);
  border:1px solid var(--line-1);
  border-radius:14px;
  transition:background .15s;
}
.bu-stream:hover{background:rgba(255,255,255,.03)}
.bu-stream-num{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:24px;line-height:1;
  font-weight:600;color:rgba(123,77,224,.6);
  letter-spacing:-1px;font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.bu-stream-body{flex:1;min-width:0}
.bu-stream-title{
  font-family:var(--font-display);
  font-size:18px;line-height:1.18;letter-spacing:-.4px;
  font-weight:500;color:var(--text);margin-bottom:8px;
}
.bu-stream-prose{
  font-size:13px;line-height:1.65;color:var(--muted);font-weight:300;
  margin-bottom:11px;
}
.bu-stream-prose strong{color:var(--text);font-weight:500}
.bu-stream-prose em{color:#A78BFA;font-style:italic;font-weight:500}
.bu-stream-meta{
  font-size:10.5px;color:var(--muted2);
  letter-spacing:.3px;line-height:1.5;
  font-weight:300;
}
.bu-meta-status{
  background:rgba(123,77,224,.10);color:#A78BFA;
  padding:2px 7px;border-radius:3px;
  font-size:9.5px;letter-spacing:.5px;font-weight:600;
  border:1px solid rgba(123,77,224,.18);
  margin-right:6px;
}

/* Methodology block */
.bu-method{
  background:rgba(255,255,255,.018);
  border:1px solid var(--line-1);
  border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:11px;
}
.bu-method-line{
  font-size:12.5px;line-height:1.65;color:var(--muted);font-weight:300;
}
.bu-method-line strong{color:var(--text);font-weight:500}

/* iPad reflow — Buyer Read */
.device-ipad .bu-streams{gap:16px}
.device-ipad .bu-stream{padding:24px 28px;gap:24px;border-radius:16px}
.device-ipad .bu-stream-num{font-size:34px;letter-spacing:-1.5px;padding-top:0}
.device-ipad .bu-stream-title{font-size:22px;line-height:1.18;letter-spacing:-.5px;margin-bottom:10px}
.device-ipad .bu-stream-prose{font-size:14px;line-height:1.65;margin-bottom:14px}
.device-ipad .bu-stream-meta{font-size:11.5px}
.device-ipad .bu-meta-status{font-size:10px;padding:2px 8px}
.device-ipad .bu-method{padding:22px 26px;border-radius:14px;gap:13px}
.device-ipad .bu-method-line{font-size:13.5px;line-height:1.65}

/* ────── Buyer Read — Trace narrative blocks (macro, department, intros) ────── */
.bu-trace-block{
  background:rgba(255,255,255,.018);
  border:1px solid var(--line-1);
  border-radius:14px;
  padding:18px 18px 16px;
  margin-bottom:14px;
}
.bu-trace-block:empty{display:none;padding:0;border:none;margin:0}
.bu-trace-eyebrow{
  font-size:9.5px;letter-spacing:1.5px;font-weight:500;
  color:rgba(167,139,250,.95);text-transform:uppercase;
  margin-bottom:8px;
}
.bu-trace-title{
  font-family:var(--font-display);
  font-size:18px;line-height:1.22;letter-spacing:-.4px;
  font-weight:500;color:var(--text);margin-bottom:12px;
}
.bu-trace-prose{
  font-size:13px;line-height:1.65;color:var(--muted);font-weight:300;
  margin-bottom:11px;
}
.bu-trace-prose:last-child{margin-bottom:0}
.bu-trace-prose strong{color:var(--text);font-weight:500}
.bu-trace-prose em{color:#A78BFA;font-style:italic;font-weight:500}

/* ────── Buyer Read — Named human profile card ────── */
.bu-human{
  background:linear-gradient(180deg,rgba(123,77,224,.07),rgba(123,77,224,.02));
  border:1px solid rgba(123,77,224,.20);
  border-radius:14px;
  padding:18px 18px 16px;
}
.bu-human-eyebrow{
  font-size:9.5px;letter-spacing:1.5px;font-weight:500;
  color:#A78BFA;text-transform:uppercase;margin-bottom:6px;
}
.bu-human-name{
  font-family:var(--font-display);
  font-size:22px;line-height:1.1;letter-spacing:-.6px;
  font-weight:500;color:var(--text);margin-bottom:5px;
}
.bu-human-role{
  font-size:10.5px;color:var(--muted2);letter-spacing:.2px;
  margin-bottom:13px;
}
.bu-human-prose{
  font-size:13px;line-height:1.65;color:var(--muted);font-weight:300;
  margin:0 0 10px;
}
.bu-human-prose:last-child{margin-bottom:0}
.bu-human-prose strong{color:var(--text);font-weight:500}
.bu-human-section{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(167,139,250,.14);
}
.bu-human-section-title{
  font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;
  font-weight:500;color:#A78BFA;margin-bottom:10px;
}

/* Implications list */
.bu-impl{margin-top:2px}
.bu-impl-item{margin-bottom:12px}
.bu-impl-item:last-child{margin-bottom:0}
.bu-impl-label{
  font-family:var(--font-display);
  font-size:13.5px;letter-spacing:-.2px;font-weight:500;
  color:#A78BFA;margin-bottom:3px;
}
.bu-impl-body{
  font-size:13px;line-height:1.6;color:var(--muted);font-weight:300;
}

/* iPad reflow — new Buyer Read blocks */
.device-ipad .bu-trace-block{padding:24px 28px;border-radius:16px;margin-bottom:16px}
.device-ipad .bu-trace-title{font-size:22px;line-height:1.2;letter-spacing:-.5px}
.device-ipad .bu-trace-prose{font-size:14px;line-height:1.65}
.device-ipad .bu-human{padding:26px 28px;border-radius:16px}
.device-ipad .bu-human-name{font-size:28px;letter-spacing:-.8px;margin-bottom:6px}
.device-ipad .bu-human-role{font-size:11.5px;margin-bottom:15px}
.device-ipad .bu-human-prose{font-size:14px;line-height:1.65}
.device-ipad .bu-human-section{margin-top:16px;padding-top:16px}
.device-ipad .bu-human-section-title{font-size:11.5px}
.device-ipad .bu-impl-label{font-size:15px}
.device-ipad .bu-impl-body{font-size:14px;line-height:1.6}


/* ═══════════════════════════════════════════════════════════════════════
   Topbar logo — PNG lockup, dark/light variants (added 13 May 2026)
   Both variants in DOM; CSS swaps via theme class.
   Light variant currently hidden — activates once .theme-light is wired up.
   ═══════════════════════════════════════════════════════════════════════ */
.topbar-logo{height:56px;width:auto;display:block}
.topbar-logo-light{display:none}
/* Phase 3 (light mode toggle) will add:
   .theme-light .topbar-logo-dark{display:none}
   .theme-light .topbar-logo-light{display:block} */

/* Override flex centring with absolute positioning so the logo sits at the
   true viewport centre, independent of hamburger (left) and co-pill (right)
   widths. Without this, the logo is centred in the flex remainder which sits
   off-centre because co-pill is wider than the hamburger. */
.topbar{position:relative}
.logo-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  pointer-events:none;  /* lets clicks pass through to anything underneath */
}

/* iPad slightly larger logo treatment */
.device-ipad .topbar-logo{height:72px}

/* ────────────────────────────────────────────────────────────
   BACKGROUND WAVE OVERLAY
   Subtle particle wave layered over the existing gradient base.
   Mobile uses the portrait crop; iPad uses the landscape crop.
   Opacity .4 + mix-blend-mode:screen keeps it as a quiet glow.
   ──────────────────────────────────────────────────────────── */
.app{ isolation:isolate; }

.app::after{
  content:'';
  position:absolute; inset:0;
  background-size:cover;
  background-position:bottom right;
  background-repeat:no-repeat;
  opacity:.4;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:-1;
}

.device-mobile .app::after{
  background-image:url('assets/2 Landing Page Swipethrough backgrounds signal-embedded-image-2.jpg');
}

.device-ipad .app::after{
  background-image:url('assets/6 Ipad Landing Page Swipethrough backgrounds signal-embedded-image-2.jpg.png');
}

/* ═══════════════════════════════════════════════════════════════════════
   SIGNAL v39 — RESTRAINT PASS
   Final override layer. Each rule below tightens or removes; nothing
   added is decorative. Tabular figures · slow motion · hairlines ·
   stripped pill · live pulse. If a move doesn't land, comment out the
   numbered block.

   NOTE: rule 9 from the original pass (wave-field radial overlays) was
   dropped — V38 already has the wave image as .app::after with
   mix-blend-mode:screen, which is the right answer.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 ─ Tabular, lining numerals — global
   Premium financial UIs use fixed-width digits so numbers sit in
   columns. One declaration cascades through every score, percentage,
   peer rank, ordinal and date in the product. */
html {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum', 'lnum';
}

/* 2 ─ Tighter score numeral
   The composite is the one moment that earns confident tracking.
   -0.05em reads as deliberate rather than tightly-set. */
#sc-overview .ov2-score-num { letter-spacing: -0.05em; }

/* 3 ─ Slower screen transitions, softer easing
   250ms → 400ms with a deeper cubic curve. The product reads as
   composed rather than reactive. The 30px transform stays. */
.screen {
  transition:
    opacity .4s cubic-bezier(.4, 0, .2, 1),
    transform .4s cubic-bezier(.4, 0, .2, 1) !important;
}

/* 4 ─ Hairline, not box, on the composite hero
   Strip the full perimeter border; keep a single top-edge hairline
   that catches light. Shadow demoted so the surface reads as a
   tonal layer rather than a floating object. */
#sc-overview .ov2-ov-hero {
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 1px 0 rgba(0, 0, 0, .3) !important;
}

/* 5 ─ Demote the rating pill
   Chip-with-dot is a 2022 SaaS convention. Restraint version: small
   caps next to a single dot, no border, no chip, no glow. The band
   reads on its own; the dot retains its status-colour role. */
#sc-overview .ov2-rating-pill {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  gap: 8px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft, rgba(255, 255, 255, .78)) !important;
}
#sc-overview .ov2-rating-pill-dot {
  width: 4px !important;
  height: 4px !important;
  box-shadow: none !important;  /* the glow was doing too much */
}

/* 6 ─ Spectrum panel — softer divider
   The 1px line above the spectrum competes with the score block
   above it. Demote to match the hero's top-edge hairline. */
#sc-overview .ov2-spectrum {
  border-top-color: rgba(255, 255, 255, .05) !important;
}

/* 7 ─ Live-signal pulse (injected via JS into masthead meta)
   A single 5px teal dot, pulsing on a 3.2s cycle. The only ambient
   motion on a stable screen. Carries the "intelligence is awake"
   read without anything else having to move. */
.signal-live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sig-teal, #14C8B8);
  margin-right: 8px;
  vertical-align: 1px;
  animation: signalLivePulse 3.2s ease-in-out infinite;
}
@keyframes signalLivePulse {
  0%, 100% { opacity: .30; box-shadow: 0 0 0 0 rgba(20, 200, 184, 0); }
  50%      { opacity: .85; box-shadow: 0 0 6px 1px rgba(20, 200, 184, .22); }
}

/* 8 ─ Score-ring path draw-on — re-timed
   The existing rule fires the ring animation on page load. Problem:
   it runs behind splash + onboarding and finishes before the user
   lands on overview, so they see the final state with no reveal.
   Override: kill the auto-run animation, hold the arc at 0, only
   fire when .score-revealed is added (post-onboard). Number count-up
   in JS uses the same duration so both resolve on the same beat. */
#sc-overview .ov2-score-ring-arc {
  animation: none !important;
  stroke-dasharray: 0 660;
}
#sc-overview.score-revealed .ov2-score-ring-arc {
  animation: scoreRingFill 1.1s cubic-bezier(.4, 0, .2, 1) forwards !important;
}
@keyframes scoreRingFill {
  to { stroke-dasharray: 326 660; }
}