/* ============================================================
   Intropy · shared styles for Solutions product pages
   Mirrors the home page / how-it-works design system.
   ============================================================ */
:root{
  --bg:#0A0921; --bg-2:#0c0e13; --panel:rgba(15,26,51,.72); --panel-2:#11141a;
  --ink:#f2f4f7; --ink-dim:#c2c6cf; --muted:#7c828f; --faint:#565c68;
  --line:#182f52; --line-2:rgba(255,255,255,.16); --grid:rgba(255,255,255,.035);
  --accent:#f53b00; --accent-soft:rgba(245,59,0,.12); --accent-line:rgba(245,59,0,.42);
  --green:#1f8a5b; --green-soft:rgba(31,138,91,.12);
  --display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Poppins",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--display); -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:#fff}

.wrap{max-width:1280px; margin:0 auto; padding:0 32px; position:relative}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:500; display:flex; align-items:center; gap:10px; width:max-content; max-width:100%; white-space:nowrap; margin:0 0 18px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); display:inline-block}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.025em; line-height:.98}

.grid-field{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 92%)}
main, nav, footer{position:relative; z-index:2}

/* ---------- nav + dropdown ---------- */
nav{position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; box-sizing:border-box; z-index:60; display:flex; align-items:center; justify-content:flex-start; padding:0 32px; height:68px; background:transparent; backdrop-filter:none; border:1px solid transparent; transition:border-color .6s ease, background .6s ease, height .8s cubic-bezier(.4,0,.2,1), box-shadow .6s ease, border-radius .8s cubic-bezier(.4,0,.2,1), top .8s cubic-bezier(.4,0,.2,1), width .8s cubic-bezier(.4,0,.2,1), padding .8s cubic-bezier(.4,0,.2,1)}
nav.scrolled{top:14px; width:min(462px, calc(100vw - 28px)); height:56px; padding:0 15px 0 29px; border:1px solid var(--line-2); border-radius:999px; background:rgba(9,18,41,.92); backdrop-filter:blur(16px) saturate(120%); box-shadow:0 14px 36px -14px rgba(0,0,0,.7)}
nav.scrolled .nav-right{gap:0; margin-left:0}
nav.scrolled .nav-links{margin-left:auto; padding-left:4px}
nav.scrolled .nav-cta{max-width:0; padding:0; margin:0; border-width:0; opacity:0; pointer-events:none}
.brand{display:flex; align-items:center; gap:14px; height:100%}
.brand img{height:30px; width:auto; display:block; transition:height .8s cubic-bezier(.4,0,.2,1)}
nav.scrolled .brand img{height:23px}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav-right{display:flex; align-items:center; gap:18px; margin-left:22px}
.nav-links a, .nav-dd-btn{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); padding:9px 14px; transition:color .2s; white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active{color:var(--accent)}
.nav-dd{position:relative; display:flex; align-items:center}
.nav-dd-btn{appearance:none; background:transparent; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-transform:none}
.nav-dd-btn .caret{width:7px; height:7px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); transition:transform .25s, color .2s}
.nav-dd-btn:hover,.nav-dd.active .nav-dd-btn,.nav-dd-btn.on{color:var(--ink)}
.nav-dd.active .nav-dd-btn{color:var(--accent)}
.nav-dd-menu{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px); min-width:320px; background:#0f1a33; backdrop-filter:blur(16px); border:1px solid var(--line); padding:8px; opacity:0; visibility:hidden; transition:opacity .22s, transform .22s; box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd-menu.open{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-dd:hover .nav-dd-btn .caret{transform:rotate(225deg) translate(-1px,-1px)}
.nav-dd-menu a{display:flex; align-items:flex-start; gap:13px; padding:13px 14px; color:var(--muted); border:1px solid transparent; transition:.18s; text-transform:none; letter-spacing:0}
.nav-dd-menu a:hover{background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink)}
.nav-dd-menu a .ddno{font-family:var(--mono); font-size:11px; color:var(--accent); padding-top:2px; flex:none}
.nav-dd-menu a .ddt{display:block; font-family:var(--display); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.nav-dd-menu a .ddd{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--faint); margin-top:4px; line-height:1.45}
.nav-cta{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink); border:1px solid var(--line-2); padding:10px 18px; white-space:nowrap; display:inline-flex; align-items:center; gap:9px; overflow:hidden; max-width:160px; transition:max-width .8s cubic-bezier(.4,0,.2,1), padding .8s cubic-bezier(.4,0,.2,1), margin .8s cubic-bezier(.4,0,.2,1), opacity .12s linear, border-color .3s ease, background .2s ease}
.nav-cta{background:var(--accent); border-color:var(--accent); color:#fff}
.nav-cta::after{content:"→"; color:#fff; transition:transform .2s}
.nav-cta:hover{border-color:var(--accent); background:#ff5a24; color:#fff}
.nav-cta:hover::after{transform:translateX(3px)}

/* ---------- mobile menu ---------- */
.nav-toggle{display:none; appearance:none; background:transparent; border:1px solid var(--line-2); width:40px; height:38px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:0}
.nav-toggle span{width:17px; height:1.6px; background:var(--ink); transition:transform .25s, opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.mobile-menu{position:fixed; top:68px; left:0; right:0; z-index:55; background:rgba(8,9,12,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-2); padding:0 20px 14px; transform:translateY(-12px); opacity:0; visibility:hidden; transition:opacity .25s, transform .25s; max-height:calc(100vh - 68px); overflow-y:auto}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0)}
.mm-group{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); padding:11px 0 2px}
.mm-group:first-child{padding-top:4px}
.mobile-menu a{display:block; color:var(--ink-dim); padding:9px 12px; border-bottom:1px solid var(--line); transition:.15s}
.mobile-menu a:hover,.mobile-menu a:active{background:var(--accent-soft); color:var(--ink)}
.mobile-menu a.sub{display:flex; align-items:baseline; gap:12px}
.mobile-menu a.sub .n{font-family:var(--mono); font-size:11px; color:var(--accent); flex:none}
.mobile-menu a.sub .t{font-weight:600; font-size:14px}
.mobile-menu .mm-cta{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; background:var(--accent); color:#fff; border:1px solid var(--accent); font-family:var(--mono); font-size:13px; letter-spacing:.04em; padding:15px; border-bottom:1px solid var(--accent)}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .nav-right{margin-left:auto}
}
@media(min-width:861px){ .mobile-menu{display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; font-weight:500; padding:15px 24px; background:var(--accent); color:#fff; transition:.2s; border:1px solid var(--accent)}
.btn .arr{transition:transform .2s}
.btn:hover{background:#ff4d12; transform:translateY(-1px)} .btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.ghost:hover{background:rgba(255,255,255,.04); border-color:var(--ink-dim)}

section.block{padding:118px 0; position:relative}
.sec-head{display:flex; align-items:flex-end; justify-content:flex-start; gap:40px; flex-wrap:wrap}
.sec-index{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--faint); margin-bottom:auto; align-self:flex-start; padding-top:8px}
.lead{font-size:clamp(28px,4vw,52px); font-weight:500; letter-spacing:-.03em; max-width:20ch; line-height:1}
.lead .o{color:var(--ink)}

/* ---------- page hero ---------- */
.phero{padding:128px 0 0}
.phero .inner{border-bottom:1px solid var(--line); padding-bottom:56px}
.phero .meta{display:flex; gap:26px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:28px; flex-wrap:wrap}
.phero .meta b{color:var(--muted); font-weight:500}
.phero .meta .o{color:var(--accent)}
.phero h1{font-size:clamp(40px,6.4vw,92px); font-weight:500; letter-spacing:-.035em; text-transform:uppercase; line-height:.9}
.phero h1 .o{color:var(--accent)}
.phero .sub{color:var(--ink-dim); font-size:clamp(16px,1.5vw,20px); line-height:1.6; max-width:640px; margin:28px 0 0}
.phero .actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}

/* ---------- ROI metric boxes ---------- */
.roi{background:var(--panel); display:grid; grid-template-columns:repeat(var(--roi-n,3),1fr); margin-top:0; border:1px solid var(--line); border-top:0}
.roi .cell{padding:46px 34px 40px; border-right:1px solid var(--line); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start}
.roi .cell .k{min-height:1.2em}
.roi .cell:last-child{border-right:0}
.roi .cell::after{content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--accent); transition:width .5s ease}
.roi .cell:hover::after{width:100%}
.roi .cell .k{font-family:var(--mono); font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:20px}
.roi .cell .n{font-size:clamp(40px,4.6vw,60px); font-weight:500; letter-spacing:-.04em; line-height:.9; color:var(--ink)}
.roi .cell .n em{color:var(--ink); font-style:normal}
.roi .cell .d{color:var(--muted); font-size:13.5px; margin-top:16px; line-height:1.55; max-width:34ch; min-height:4.65em}
@media(max-width:860px){.roi{grid-template-columns:1fr 1fr} .roi .cell:nth-child(2n){border-right:0}}
@media(max-width:560px){.roi{grid-template-columns:1fr} .roi .cell{border-right:0; border-bottom:1px solid var(--line)} .roi .cell:last-child{border-bottom:0}}

/* ---------- solutions / problems section (full-width, sequential) ---------- */
.sols{display:flex; flex-direction:column; gap:22px; margin-top:60px}
.sol{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    "pn     pn    pn"
    "title  title title"
    "plabel flow  slabel"
    "pain   flow  fix";
  column-gap:52px;
  border:1px solid var(--line);
  padding:38px 46px 42px;
  background:var(--panel);
  position:relative; transition:background .3s;
}
.sol:hover{background:rgba(23,36,63,.8)}
.sol .pn{grid-area:pn; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--faint); display:flex; justify-content:space-between; margin-bottom:24px}
.sol .pn .prob{color:var(--accent)}
.sol h3{grid-area:title; font-size:clamp(22px,2.3vw,28px); margin-bottom:34px; letter-spacing:-.015em; line-height:1.14; max-width:36ch}
.sol .pain{grid-area:pain; color:var(--muted); font-size:15px; line-height:1.64; margin:0}
.sol .fix{grid-area:fix; color:var(--ink-dim); font-size:15px; line-height:1.64; margin:0}
.sol .fix b{color:var(--ink); font-weight:600}
/* problem → solution framing */
.ps-k{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin-bottom:15px}
.ps-k::before{content:""; width:7px; height:7px; transform:rotate(45deg)}
.ps-k.problem{grid-area:plabel; color:var(--accent)} .ps-k.problem::before{background:var(--accent)}
.ps-k.solution{grid-area:slabel; color:var(--green)} .ps-k.solution::before{background:var(--green)}
.ps-flow{grid-area:flow; display:flex; flex-direction:column; align-items:center; gap:12px; margin:0; align-self:stretch; color:var(--faint)}
.ps-flow::before,.ps-flow::after{content:""; width:1px; flex:1; background:var(--line)}
.ps-flow span{font-family:var(--mono); font-size:16px; color:var(--accent); line-height:1}
@media(max-width:760px){
  .sol{grid-template-columns:1fr; grid-template-areas:"pn" "title" "plabel" "pain" "flow" "slabel" "fix"; column-gap:0; padding:26px 22px 30px}
  .sol .pn{font-size:10.5px; letter-spacing:.12em; gap:14px; flex-wrap:wrap; margin-bottom:16px}
  .sol h3{font-size:21px; line-height:1.2; margin-bottom:20px; max-width:none}
  .sol .pain,.sol .fix{font-size:14px; line-height:1.62}
  .ps-k{font-size:11px; letter-spacing:.14em; margin-bottom:9px}
  .ps-flow{flex-direction:row; align-self:auto; margin:22px 0; width:100%; gap:14px}
  .ps-flow::before,.ps-flow::after{width:auto; height:1px; flex:1}
  .ps-flow span{transform:rotate(90deg); font-size:14px}
}

/* ---------- full-page dashboard (light app surface) ---------- */
.dashwrap{margin-top:60px; border:1px solid var(--line-2); background:var(--panel)}
.dash-chrome{background:var(--bg-2); padding:12px 18px; display:flex; align-items:center; gap:13px; border-bottom:1px solid var(--line)}
.dash-dots{display:flex; gap:7px}
.dash-dots span{width:11px; height:11px; border-radius:50%; background:var(--line-2)}
.dash-dots span:first-child{background:var(--accent); opacity:.9}
.dash-url{flex:1; background:rgba(255,255,255,.04); border:1px solid var(--line); padding:6px 13px; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em}
.dash-chrome{justify-content:space-between}
.dash-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}

.app{display:grid; grid-template-columns:178px 1fr; background:#f5f6fa; color:#11152a; min-height:0; text-align:left}
.app-side{display:flex; flex-direction:column; background:#0c1020; border-right:1px solid rgba(255,255,255,.08); padding:18px 10px 12px; min-width:0}
.app-brand{margin-bottom:22px; padding:0 8px}
.app-brand img{height:20px; width:auto; display:block}
.app-sgroup{font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#6f7688; padding:14px 9px 7px}
.app-nav{display:flex; align-items:center; gap:11px; padding:8px 10px; color:#8b919e; font-size:12.5px; font-weight:500; transition:.15s; cursor:default; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.app-nav .ic{width:14px; height:14px; border:1.5px solid currentColor; flex:none; border-radius:2px}
.app-nav.active{background:rgba(255,255,255,.07); color:#fff; font-weight:600}
.app-nav.active .ic{background:var(--accent); border-color:var(--accent)}
.app-side .spacer{flex:1; min-height:22px}
.app-user{display:flex; align-items:center; gap:9px; padding:12px 9px 2px; border-top:1px solid rgba(255,255,255,.1); margin-top:8px}
.app-user .av{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#ff8a4d); flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; color:#fff}
.app-user .who{display:flex; flex-direction:column; gap:2px; min-width:0}
.app-user .nm{font-size:12px; line-height:1.1; color:#e8eaf0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.app-user .rl{font-size:10px; line-height:1.1; color:var(--faint); font-family:var(--mono); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.app-main{padding:20px 30px 24px; display:flex; flex-direction:column; gap:13px; min-width:0}
.app-top{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.app-top h4{font-size:21px; font-weight:700; letter-spacing:-.02em; margin:0; color:#0c1020}
.app-top .sub{color:#6a7088; font-size:12.5px; margin-top:5px; font-family:var(--mono)}
.app-top .ctrls{display:flex; gap:8px; align-items:center}
.app-seg{display:flex; border:1px solid #dfe2ec; background:#fff; overflow:hidden}
.app-seg span{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:#8089a0; padding:7px 12px; border-right:1px solid #dfe2ec}
.app-seg span:last-child{border-right:0}
.app-seg span.on{background:#0c1020; color:#fff}
.app-pill{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--green); background:var(--green-soft); border:1px solid rgba(31,138,91,.32); padding:6px 12px; display:inline-flex; align-items:center; gap:7px}
.app-pill .lv{width:6px; height:6px; border-radius:50%; background:var(--green); animation:appPulse 2.4s infinite}
@keyframes appPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.app-pill .lv{animation:none}}

.app-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:11px}
.kpi{background:#fff; border:1px solid #e7e9f2; padding:12px 14px; position:relative; overflow:hidden}
.kpi::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#eef0f6}
.kpi.accent::after{background:var(--accent)}
.kpi.good::after{background:var(--green)}
.kpi .lbl{color:#6a7088; font-size:10px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase}
.kpi .val{font-size:23px; font-weight:700; letter-spacing:-.025em; margin-top:5px; color:#0c1020}
.kpi .val .u{font-size:13px; color:#9099b0; font-weight:600}
.kpi .chg{font-size:10.5px; font-weight:600; margin-top:4px; font-family:var(--mono); display:flex; align-items:center; gap:5px}
.kpi .chg.up{color:var(--green)} .kpi .chg.down{color:var(--accent)} .kpi .chg.flat{color:#9099b0}

.app-body{display:grid; grid-template-columns:1.25fr 1fr; gap:13px; align-items:start}
.app-body.wide{grid-template-columns:1fr}
.panel{background:#fff; border:1px solid #e7e9f2; padding:13px 15px; display:block; min-width:0}
.panel .ph{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; gap:12px}
.panel .ph h5{font-size:14px; font-weight:700; margin:0; color:#0c1020; letter-spacing:-.01em}
.panel .ph .mono{font-family:var(--mono); font-size:10px; color:#9099b0; letter-spacing:.05em}
.legend{display:flex; gap:16px; font-family:var(--mono); font-size:10px; color:#6a7088; letter-spacing:.04em}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:14px; height:0; border-top:2px solid currentColor; display:inline-block}

/* scenario simulations (pricing dashboard) */
.sim-cols{display:grid; grid-template-columns:1.7fr 1fr; gap:13px; align-items:stretch; min-width:0}
.sim-cols>.panel{min-width:0; overflow:hidden}
.sim-cols .simtbl{table-layout:fixed}
.sim-cols .pdesc{max-width:none}
.sim-cols .simtbl th,.sim-cols .simtbl td{padding-right:8px}
.sim-cols .simtbl th{white-space:normal; font-size:10px; line-height:1.3}
.sim-cols .simtbl th:nth-child(1),.sim-cols .simtbl td:nth-child(1){width:34%}
.sim-cols .simtbl th:nth-child(2),.sim-cols .simtbl td:nth-child(2){width:18%}
.sim-cols .simtbl th:nth-child(3),.sim-cols .simtbl td:nth-child(3){width:22%}
.sim-cols .simtbl th:nth-child(4),.sim-cols .simtbl td:nth-child(4){width:26%}
.sim-cols .rev{gap:6px; white-space:nowrap; font-size:12px}
.sim-cols .rev .dot{width:17px; height:17px}
.scsim{display:flex; flex-direction:column; min-height:362px; padding:0}
.scsim .sc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:15px 17px 14px; border-bottom:1px solid #e7e9f2}
.scsim .sc-head h5{font-size:18px; font-weight:700; color:#0c1020; letter-spacing:-.015em; margin:0}
.scsim .sc-head .sc-sub{font-family:var(--mono); font-size:11.5px; color:#6a7088; margin-top:6px; letter-spacing:.02em}
.scsim .sc-reset{appearance:none; width:34px; height:34px; flex:none; border:1px solid #dfe2ec; background:#f5f6fa; color:#6a7088; cursor:pointer; display:grid; place-items:center; transition:.18s}
.scsim .sc-reset:hover{border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft)}
.scsim .sc-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:30px 18px}
.scsim .sc-body h6{font-size:22px; font-weight:600; color:#1b2236; letter-spacing:-.02em; text-align:center; margin:0; max-width:18ch; line-height:1.2}
.scsim .sc-chips{display:flex; flex-direction:column; align-items:center; gap:10px}
.scsim .sc-chip{appearance:none; font-size:13px; color:#2a3045; border:1px solid #dfe2ec; background:#fff; border-radius:999px; padding:9px 18px; cursor:default; transition:.16s; font-family:var(--display)}
.scsim .sc-chip:hover{border-color:#dfe2ec; background:#fff; color:#2a3045}
.scsim .sc-input{display:flex; align-items:center; gap:12px; border:1px solid #dfe2ec; background:#fff; padding:13px 13px 13px 18px; margin:0 17px 17px}
.scsim .sc-input input{flex:1; border:0; outline:0; background:transparent; font-family:var(--display); font-size:15px; color:#0c1020; min-width:0}
.scsim .sc-input input::placeholder{color:#9099b0}
.scsim .sc-send{appearance:none; width:42px; height:42px; flex:none; border:0; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer; display:grid; place-items:center; transition:.18s}
.scsim .sc-send:hover{background:#ff4d12}
.scsim .sc-send svg{width:18px; height:18px}
.legend i.dash{border-top-style:dashed}
.legend i.dot{width:8px; height:8px; border-radius:50%; border:0; background:currentColor}
.chart{width:100%; height:138px; display:block}

/* dashboard tables */
.dtbl{width:100%; border-collapse:collapse}
.dtbl th{text-align:left; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:#9099b0; font-weight:600; padding:0 8px 10px 0; font-family:var(--mono); border-bottom:1px solid #e7e9f2; white-space:nowrap}
.dtbl td{font-size:12px; color:#2a3045; padding:8px 8px 8px 0; border-bottom:1px solid #eef0f6; vertical-align:middle}
.dtbl tr:last-child td{border-bottom:0}
.dtbl td.pn{font-family:var(--mono); font-size:11px; color:#0c1020; font-weight:500; white-space:nowrap}
.dtbl td.num{font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:11px; white-space:nowrap}
.dtbl .strong{font-weight:700; color:#0c1020}
.tag{font-family:var(--mono); font-size:9px; letter-spacing:.03em; padding:3px 7px; display:inline-flex; align-items:center; gap:5px; border:1px solid; white-space:nowrap}
.tag.red{color:#c2410c; background:rgba(245,59,0,.08); border-color:rgba(245,59,0,.32)}
.tag.amber{color:#a16207; background:rgba(217,160,15,.1); border-color:rgba(217,160,15,.34)}
.tag.green{color:var(--green); background:var(--green-soft); border-color:rgba(31,138,91,.32)}
.tag.gray{color:#6a7088; background:#f1f2f7; border-color:#dfe2ec}
.tag .lv{width:5px; height:5px; border-radius:50%; background:currentColor}
.barcell{display:flex; align-items:center; gap:8px}
.barcell .track{flex:1; height:6px; background:#eef0f6; position:relative; min-width:42px}
.barcell .fill{position:absolute; left:0; top:0; bottom:0; background:var(--accent)}
.barcell .fill.green{background:var(--green)}
.barcell .fill.amber{background:#d9a00f}
.delta{font-family:var(--mono); font-size:11px; font-weight:600}
.delta.up{color:var(--green)} .delta.down{color:var(--accent)}

.mini-stat{display:flex; flex-direction:column; gap:3px; padding:9px 0; border-bottom:1px solid #eef0f6}
.mini-stat:last-child{border-bottom:0}
.mini-stat .ms-top{display:flex; align-items:center; justify-content:space-between}
.mini-stat .ms-l{font-size:12.5px; color:#2a3045; font-weight:500}
.mini-stat .ms-v{font-family:var(--mono); font-size:12px; color:#0c1020; font-weight:600}
.mini-stat .ms-bar{height:5px; background:#eef0f6; position:relative}
.mini-stat .ms-bar i{position:absolute; left:0; top:0; bottom:0; background:var(--accent)}

/* ---------- A/B cumulative-impact panel ---------- */
.panel.impact{padding:16px 18px}
.impact-ph{align-items:flex-start; flex-wrap:wrap; row-gap:8px}
.impact-ph h5{margin-bottom:2px; white-space:nowrap}
.impact-sub{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12.5px; color:#6a7088; font-family:var(--mono); letter-spacing:.02em; white-space:nowrap}
.impact-tag{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.02em; color:#fff; background:var(--green); padding:4px 10px; border-radius:3px}
.impact-chart{height:188px}
.impact-axis{display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#9099b0}
.abgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:13px}
.abbox{background:#fff; border:1px solid #e7e9f2; padding:14px 15px; position:relative; overflow:hidden}
.abbox::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#eef0f6}
.abbox.feat::after{background:var(--green)}
.abbox .ablbl{color:#6a7088; font-size:10px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:11px}
.abbox .abrow{display:flex; align-items:baseline; justify-content:space-between; padding:5px 0; border-bottom:1px solid #f1f2f7}
.abbox .abrow .g{font-family:var(--mono); font-size:11px; color:#9099b0; letter-spacing:.03em}
.abbox .abrow .v{font-size:14px; font-weight:700; color:#0c1020; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.abbox .abdelta{margin-top:10px; font-family:var(--mono); font-size:13px; font-weight:600}
.abbox .abdelta.up{color:var(--green)} .abbox .abdelta.down{color:var(--accent)}

@media(max-width:560px){ .abgrid{grid-template-columns:1fr 1fr} }

/* ---------- AI Pricing Simulator dashboard ---------- */
.simkpis{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
.simkpi{background:#fff; border:1px solid #e7e9f2; padding:15px 18px; display:flex; flex-direction:column; gap:9px}
.simkpi .top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.simkpi .top h6{margin:0; font-size:14px; font-weight:600; color:#3a4257; letter-spacing:-.005em}
.simkpi .top .ic{color:#c2c7d3; flex:none}
.simkpi .big{font-size:30px; font-weight:700; letter-spacing:-.03em; color:#0c1020; line-height:1; font-variant-numeric:tabular-nums}
.simkpi .big.accent{color:var(--accent)}
.simkpi .meta{font-size:12px; color:#8089a0; font-family:var(--mono); display:flex; gap:16px; align-items:center; letter-spacing:.01em}
.simkpi .meta .up{color:var(--green); display:inline-flex; align-items:center; gap:5px}
.simkpi .meta .dn{color:var(--accent); display:inline-flex; align-items:center; gap:5px}

.simbar{display:flex; align-items:center; gap:13px; flex-wrap:wrap}
.simtabs{display:inline-flex; background:#f1f2f6; border-radius:9px; padding:3px}
.simtab{font-size:12.5px; font-weight:600; color:#8089a0; padding:8px 17px; border-radius:6px}
.simtab.on{background:#fff; color:#0c1020; box-shadow:0 1px 2px rgba(10,12,20,.09)}
.simsearch{flex:1; min-width:200px; display:flex; align-items:center; gap:10px; background:#f6f7f9; border:1px solid #eceef3; border-radius:9px; padding:10px 15px; color:#9aa0b0; font-size:12.5px}
.simsearch svg{flex:none; color:#b4b9c6}

.simtbl{width:100%; border-collapse:collapse}
.simtbl th{text-align:left; font-size:11px; font-weight:600; color:#8089a0; padding:0 12px 14px 0; border-bottom:1px solid #eceef3; white-space:nowrap}
.simtbl th.r,.simtbl td.r{text-align:right; padding-right:0}
.simtbl td{padding:10px 12px 10px 0; border-bottom:1px solid #f0f1f5; vertical-align:middle}
.simtbl tr:last-child td{border-bottom:0}
.pnum{font-weight:600; font-size:13px; color:#0c1020; font-family:var(--mono)}
.pdesc{font-size:12px; color:#8089a0; margin-top:4px; max-width:330px; line-height:1.45}
.pprice{font-size:13.5px; font-weight:600; color:#0c1020; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:9px}
.pconv{font-size:11px; color:#9099b0; margin-top:4px; font-family:var(--mono)}
.pconv b{color:var(--green); font-weight:600}
.chgtag{font-size:11.5px; font-weight:600; font-family:var(--mono); display:inline-flex; align-items:center; gap:3px}
.chgtag.up{color:var(--green)} .chgtag.down{color:var(--accent)}
.spark{width:104px; height:34px; display:block}
.rev{display:inline-flex; align-items:center; gap:8px; color:var(--green); font-weight:600; font-size:13px; font-family:var(--mono); font-variant-numeric:tabular-nums}
.rev .dot{width:19px; height:19px; border-radius:50%; border:1.6px solid var(--green); display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; flex:none}
@media(max-width:560px){ .simkpis{grid-template-columns:1fr} }

/* ---------- mobile: keep the desktop dashboard layout, just scale it down ---------- */
.dash-scaler{overflow:hidden}
@media(max-width:900px){
  /* render at a fixed desktop width; JS applies transform:scale() to fit */
  .dashwrap{width:1060px; transform-origin:top left}
  /* dashboards keep their desktop configuration inside the fixed-width wrap */
  .dashwrap .abgrid{grid-template-columns:repeat(4,1fr)}
  .dashwrap .simkpis{grid-template-columns:repeat(3,1fr)}
  .dashwrap .bsp-grid{grid-template-columns:minmax(300px,0.95fr) 1.9fr}
  .dashwrap .bsp-map{min-height:560px}
}

/* ---------- cross-sell strip ---------- */
.xsell{background:var(--panel); display:grid; grid-template-columns:repeat(2,1fr); margin-top:60px; border:1px solid var(--line)}
.xs{padding:32px 34px; border-right:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; transition:background .3s}
.xsell .xs:last-child{border-right:0}
.xs:hover{background:var(--accent-soft)}
.xs .xt{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
.xs h4{font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.xs .ar{font-family:var(--mono); color:var(--accent); font-size:20px; flex:none; transition:transform .2s}
.xs:hover .ar{transform:translateX(4px)}
@media(max-width:680px){.xsell{grid-template-columns:1fr} .xs{border-right:0; border-bottom:1px solid var(--line)} .xsell .xs:last-child{border-bottom:0}}

/* ---------- cta ---------- */
.cta{position:relative; border:1px solid var(--line); padding:28px 26px; overflow:hidden; background:var(--panel); margin-top:40px}
.cta-inner{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center}
.cta h2{font-size:clamp(24px,3vw,38px); font-weight:500; letter-spacing:-.03em; text-transform:uppercase; line-height:1.02; max-width:20ch; margin:0 0 12px}
.cta p{color:var(--ink-dim); font-size:15px; max-width:54ch; margin:0}
.cta h2 .o{color:var(--accent)}
.cta .actions{display:flex; flex-direction:column; gap:14px; min-width:220px; align-items:center; justify-content:center}
@media(max-width:820px){.cta{padding:26px 20px} .cta-inner{grid-template-columns:1fr} .cta .actions{flex-direction:row; flex-wrap:wrap}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:0; margin-top:112px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr .8fr .8fr; border-bottom:1px solid var(--line)}
.foot-grid > div{padding:44px 32px; border-right:1px solid var(--line)}
.foot-grid > div:last-child{border-right:0}
.foot-brand img{height:24px; margin-bottom:20px}
.foot-brand p{color:var(--muted); font-size:14px; max-width:34ch; margin:0; line-height:1.6}
.foot-h{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:18px}
.foot-col a{display:block; color:var(--muted); font-size:14px; padding:6px 0; transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:22px 32px}
.foot-bottom span{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--faint)}
.foot-li{display:inline-flex; align-items:center; border:0; padding:0; opacity:.72; transition:opacity .2s}
.foot-li:hover{opacity:1}
.foot-li img{width:24px; height:24px; display:block}
.foot-li svg{width:20px; height:20px; fill:currentColor}
.foot-soc-badge{width:64px; height:auto; display:block}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr} .foot-grid .foot-brand{grid-column:1/-1}}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

/* sidebar meta text */
.app-sgroup{color:#6f7688}
.app-user .rl{color:#7c8394}