/* ===== Landing page: KYC Orchestration ===== */

/* hero */
.hero{padding:84px 0 88px;background:
  radial-gradient(900px 500px at 90% -10%,var(--nk-blue-soft),transparent 60%),
  linear-gradient(180deg,#fff,var(--nk-canvas))}
.hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{margin:20px 0 18px}
.hero h1 em{font-style:normal;color:var(--nk-blue)}
.hero .lead{margin-bottom:26px}
.points{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.points li{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--nk-ink);font-weight:500}
.points li::before{content:"";width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--nk-blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l3 3 5.5-6.5' fill='none' stroke='%23F26B1D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain;flex-shrink:0}

/* hero routing diagram */
.route{background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-lg);padding:20px 22px 16px;box-shadow:var(--sh-hero)}
.route .hd{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--nk-ink-3);margin-bottom:8px}
.route .hd b{color:var(--nk-navy);font-weight:600;display:flex;align-items:center;gap:8px}
.route .hd b i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.route svg{width:100%;height:auto;display:block}
.route .step{font-family:var(--mono);font-size:12px;color:var(--nk-ink-2);margin-top:6px;min-height:18px}

/* shared diagram language */
.nd rect{fill:#fff;stroke:var(--nk-line);stroke-width:1.5;rx:10}
.nd text{font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;fill:var(--nk-navy)}
.nd .sub{font-size:11px;font-weight:500;fill:var(--nk-ink-3)}
.nd.hub rect{fill:var(--nk-blue);stroke:var(--nk-blue)}
.nd.hub text{fill:#fff}.nd.hub .sub{fill:var(--nk-on-brand)}
.nd.on rect{stroke:var(--nk-blue);stroke-width:2}
.nd.bad rect{stroke:var(--fail);fill:var(--fail-soft)}
.nd.good rect{stroke:var(--ok);fill:var(--ok-soft)}
.nd.dim{opacity:.45}
.ln{stroke:var(--nk-line);stroke-width:2;fill:none}
.ln.on{stroke:var(--nk-blue)}
.ln.bad{stroke:var(--fail);stroke-dasharray:4 4}
.ln.good{stroke:var(--ok)}
.dot{fill:var(--nk-blue)}
.badge{font-family:var(--mono);font-size:11.5px;font-weight:500}

/* problem */
.prob{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;margin-top:44px}
.pain{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.pain li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--nk-ink)}
.pain li::before{content:"";width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:3px;background:var(--fail-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='%23DC2626' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain}
.lanes{display:grid;grid-template-columns:1fr 1.35fr;gap:14px}
.lane{border:1px solid var(--nk-line);border-radius:var(--r-lg);background:#fff;padding:18px 18px 14px}
.lane.px{border-color:var(--nk-blue-line);background:linear-gradient(180deg,#fff,var(--nk-blue-soft))}
.lane .laneh{font-family:Inter,sans-serif;font-size:13px;color:var(--nk-ink-3);font-weight:600;letter-spacing:.02em;margin:0 0 10px;display:flex;justify-content:space-between}
.lane.px .laneh{color:var(--nk-brand-text)}
.lane svg{width:100%;height:auto;display:block}
.lane .res{margin-top:8px;text-align:center;font-family:var(--mono);font-size:12px;font-weight:500}
.lane.trad .res{color:var(--fail-text)}
.lane.px .res{color:var(--ok-text)}

/* intro flow */
.flow{margin-top:34px;background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-lg);padding:26px 28px;display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr auto 1fr;gap:14px;align-items:center}
.fn{border:1px solid var(--nk-line);border-radius:var(--r);padding:16px 18px;text-align:center}
.fn b{display:block;font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink)}
.fn span{font-size:13px;color:var(--nk-ink-2)}
.fn.hub{background:var(--nk-blue);border-color:var(--nk-blue)}
.fn.hub b{color:#fff}.fn.hub span{color:var(--nk-on-brand)}
.fn.hub small{display:block;font-family:var(--mono);font-size:11px;color:var(--nk-on-brand);margin-top:8px}
.fa{color:var(--nk-brand-text);font-size:20px;text-align:center}

/* single API */
.api{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;margin-top:44px}
.hub-vis{background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-lg);padding:22px 22px 18px;box-shadow:var(--sh-card)}
.hub-vis svg{width:100%;height:auto;display:block}

/* orchestration at scale */
.big{background:var(--nk-navy);color:#fff;padding:96px 0}
.big h2,.big h3{color:#fff}
.big .lead{color:#B9B5AE}
.big .eyebrow,.big .kicker{background:none;padding:0;color:#FFB08C}
.stage{margin-top:40px;background:var(--nk-navy-2);border:1px solid #333131;border-radius:var(--r-lg);padding:18px}
.stage canvas{width:100%;height:auto;display:block;border-radius:var(--r)}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.cnt{background:rgba(255,255,255,.05);border:1px solid #333131;border-radius:var(--r);padding:12px 14px}
.cnt span{font-size:12px;color:#A6A199}
.cnt b{display:block;font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.cnt b.ok{color:#63D6A2}.cnt b.warn{color:#FFC97A}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:#A6A199}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* simulator */
.sim{background:var(--nk-canvas)}
.simbox{margin-top:40px;background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-lg);padding:24px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px}
.ctrl .ctrlh{font-family:Inter,sans-serif;font-size:12px;color:var(--nk-ink-3);font-weight:600;letter-spacing:.04em;margin:0 0 10px}
.chk{display:grid;gap:8px;margin-bottom:22px}
.chk button{text-align:left;background:#fff;border:1px solid var(--nk-line);color:var(--nk-navy);border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}
.chk button span{font-family:var(--mono);font-size:11px;color:var(--nk-ink-3)}
.chk button.act{border-color:var(--nk-blue);background:var(--nk-blue-soft)}
.tog{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--nk-ink);cursor:pointer;margin-bottom:10px}
.tog input{width:16px;height:16px;margin-top:3px}
.tog small{display:block;color:var(--nk-ink-3);font-size:12px}
.runbtn{margin-top:8px;width:100%;justify-content:center}
.canvasb{background:var(--nk-canvas);border:1px solid var(--nk-line);border-radius:14px;padding:20px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,1.6fr);gap:12px;align-items:start}
.col{min-width:0}
.col .colh{font-family:var(--mono);font-size:11.5px;color:var(--nk-ink-3);letter-spacing:.06em;font-weight:500;margin:0 0 12px}
.nodeb{background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;margin-bottom:10px;transition:border-color .3s,box-shadow .3s,opacity .3s}
.nodeb b{display:block;font-weight:600;color:var(--nk-navy);font-size:13px;overflow-wrap:anywhere}
.nodeb span{color:var(--nk-ink-3);font-size:12px}
.nodeb .tag{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:5px;background:var(--nk-blue-soft);color:var(--nk-brand-text)}
.nodeb.active{border-color:var(--nk-blue);box-shadow:0 0 0 3px var(--nk-blue-soft)}
.nodeb.ok{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.nodeb.ok .tag{background:var(--ok-soft);color:var(--ok-text)}
.nodeb.down{border-color:var(--fail);opacity:.8}
.nodeb.down .tag{background:var(--fail-soft);color:var(--fail-text)}
.nodeb.warn{border-color:var(--warn)}
.nodeb.warn .tag{background:var(--warn-soft);color:var(--warn-text)}
.nodeb.faded{opacity:.4}
.router{background:var(--nk-blue);border-color:var(--nk-blue)}
.router b{color:#fff}
.router ul{margin:8px 0 0;padding-left:16px;color:var(--nk-on-brand);font-size:12.5px;line-height:1.55}
.outb{font-family:var(--mono);font-size:11px;min-width:0;max-width:100%;line-height:1.6;color:var(--ok-text);background:#fff;border:1px solid #BEE3D2;border-radius:var(--r-sm);padding:12px 14px;white-space:pre;overflow:auto}
.outb .k{color:var(--nk-ink-3)}
.log{grid-column:1/-1;border-top:1px solid var(--nk-line);padding-top:12px;font-family:var(--mono);font-size:12px;color:var(--nk-ink-2);min-height:60px}
.log div{padding:2px 0}
.log .l-ok{color:var(--ok-text)}
.log .l-warn{color:var(--warn-text)}
.log .l-fail{color:var(--fail-text)}

/* dashboard */
.dash{margin-top:40px;background:#fff;border:1px solid var(--nk-line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-card)}
.dash .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13px;color:var(--nk-ink-3);gap:12px;flex-wrap:wrap}
.dash .dh b{font-family:var(--sans);font-size:15px;color:var(--ink);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi{background:var(--nk-canvas);border-radius:var(--r-sm);padding:14px 16px}
.kpi span{font-size:12px;color:var(--nk-ink-3)}
.kpi b{display:block;font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:-.01em;margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi small{font-size:11.5px;color:var(--ok-text);font-family:var(--mono)}
.kpi small.bad{color:var(--fail-text)}
.prov{margin-top:16px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;font-size:13px}
.prov>div{padding:10px 12px;border-bottom:1px solid var(--nk-line)}
.prov .h{font-family:var(--mono);font-size:11px;color:var(--nk-ink-3);letter-spacing:.04em}
.barw{display:flex;align-items:center;gap:8px}
.barw i{flex:1;height:6px;border-radius:3px;background:var(--nk-line);overflow:hidden;display:block}
.barw i::after{content:"";display:block;height:100%;width:var(--w);background:var(--ok);border-radius:3px}

/* affluency teaser */
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:24px}
.teaser h2{max-width:none}
.teaser .pts{list-style:none;margin:26px 0 28px;padding:0;display:grid;gap:14px}
.teaser .pts li{position:relative;padding-left:30px;font-size:15px;line-height:1.55;color:var(--nk-ink-2)}
.teaser .pts li b{color:var(--nk-navy);font-weight:600}
.teaser .pts li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--nk-blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l3 3 5.5-6.5' fill='none' stroke='%23F26B1D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain}

@media (max-width:1000px){
  .hero .grid,.prob,.api,.simbox,.teaser{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .fa{transform:rotate(90deg)}
  .canvasb{grid-template-columns:1fr 1fr}
  .kpis,.counters{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .canvasb,.points,.lanes,.kpis,.counters{grid-template-columns:1fr}
  .prov{grid-template-columns:1fr 1fr}
  .prov .hide{display:none}
}

/* the Affluency feature reads as a different product, so it gets its own ground
   and breaks the white-on-white run between Coverage and Use cases */
.featband{background:
  radial-gradient(700px 400px at 15% 0%,var(--nk-blue-soft),transparent 62%),
  linear-gradient(180deg,#fff,var(--nk-canvas))}