/* ================= Bespoke page components =================
   Shared by the hand-built company / product pages. Loaded after
   style.css on pages. Page-specific one-offs keep their own file
   (e.g. news.css for the Newsroom).
   ========================================================== */

/* ---- 3-up solution/value cards (base .sol-grid is 3-col; this pins it) ---- */
.sol-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.sol-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sol-grid-3{grid-template-columns:1fr}}

/* ---- Differentiator grid: icon + statement, no body copy (dark sections) ---- */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.diff-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.diff-grid{grid-template-columns:1fr}}
.diff{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:26px 24px;transition:transform .25s,border-color .25s}
.diff:hover{border-color:rgba(217,123,136,.4);transform:translateY(-4px)}
.diff-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(217,123,136,.12);border:1px solid rgba(217,123,136,.26);color:#d97b88;margin-bottom:16px}
.diff-ico svg{width:20px;height:20px}
.diff h3{font-family:'Inter',sans-serif;font-size:15.5px;font-weight:700;line-height:1.45;color:#fff;margin:0}

/* ---- Quotes ---- */
.quote-sec{background:var(--bg-light);padding:clamp(72px,9vw,110px) 0;position:relative}
.quote-sec:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(175,60,69,.07) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.quote-sec .wrap{position:relative}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.quote-grid{grid-template-columns:1fr}}
.quote{background:var(--paper);border:1px solid rgba(175,60,69,.12);border-radius:20px;padding:clamp(28px,3vw,40px);box-shadow:0 6px 30px rgba(175,60,69,.07);display:flex;flex-direction:column;margin:0}
.quote-mark{display:block;font-family:'Inter',sans-serif;font-size:54px;font-weight:800;line-height:.62;color:var(--accent);opacity:.26;margin-bottom:14px}
.quote p{font-family:'Cabin',sans-serif;font-size:17px;line-height:1.75;color:var(--zinc-700);margin:0 0 22px}
.quote cite{margin-top:auto;font-style:normal;display:flex;align-items:center;gap:12px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--ink)}
.quote cite:before{content:'';width:26px;height:2px;background:var(--accent);flex:none}
.quote cite span{font-weight:500;color:var(--zinc-500)}

/* ---- Homepage KYCopilot section (dfeat df-c) ----
   df-c already exists in style.css as dark grey WITH the facet texture.
   These fill the gaps df-a/df-b have explicit rules for but df-c does not. */
.dfeat.df-c:before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);z-index:2}
.df-c .dfeat-visual.flat{padding-bottom:0}
.df-c .dfeat-visual.flat:before{display:none}
.df-c .btn-outline-light:hover{background:var(--paper);border-color:#fff;color:#0d0f15 !important}

/* headline fact row under the copy */
.kyc-facts{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0 0 30px;padding:0;list-style:none}
.kyc-facts li{display:flex;align-items:baseline;gap:7px;font-family:'Inter',sans-serif;font-size:13px;color:rgba(255,255,255,.6)}
.kyc-facts b{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em}

/* coded EDD report mock */
.kyc-report{display:flex;flex-direction:column;height:100%}
.kyc-ent{display:flex;align-items:flex-start;gap:12px;padding:2px 0 10px}
.kyc-ent b{display:block;font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:#f1f3f7;line-height:1.2}
.kyc-ent>div:first-child span{display:block;font-size:9.5px;color:#9096a3;margin-top:3px}
.kyc-score{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.kyc-slab{font-family:'Inter',sans-serif;font-size:8px;font-weight:800;letter-spacing:.12em;color:#9096a3;line-height:1.25}
.kyc-report .big-score{font-size:34px}
.kyc-gen{display:flex;align-items:center;gap:9px;font-size:9.5px;color:#8b8e94;padding:8px 0;margin-bottom:2px;border-top:1px solid #1d2436;border-bottom:1px solid #1d2436}
.kyc-gen .live{margin-left:0}
.kyc-gen em{font-style:normal;margin-left:auto;font-weight:700;color:#cdd0d8;font-variant-numeric:tabular-nums}
.kyc-tiers{display:flex;gap:6px;margin:10px 0 2px}
.kyc-tier{font-family:'Inter',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9096a3;border:1px solid #242938;border-radius:5px;padding:3px 9px}
.kyc-tier.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---- Partner Program form (Fluent Form 4) ----
   Reuses the Contact page form styling by carrying .c-form-wrap, but form 4's
   field map differs from form 3: here `description` IS the message textarea,
   whereas on form 3 it was the single-line Company field that the contact CSS
   squashes to 46px. Undo that and let the message span the full width. */
.pp-form textarea[name='description']{min-height:110px !important;height:auto !important;resize:vertical !important;overflow:auto !important}
.pp-form form fieldset > .ff-el-group:has(textarea[name='description']){grid-column:1 / -1}

/* The Partner Program reuses .c-left but already has a hero <h1>, so its panel
   heading is an <h2>. Give it the same treatment .c-left h1 gets on Contact. */
.c-left h2{font-family:'Inter',sans-serif;font-weight:200;font-size:clamp(1.85rem,3.1vw,2.7rem);line-height:1.14;letter-spacing:-.025em;color:#fff;margin:0 0 20px}
.c-left h2 b{font-weight:800;background:linear-gradient(135deg,#d97a84,#b33d4e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- Partner Program: 'what happens next' list in the outlined panel ---- */
.pp-next{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:16px;counter-reset:ppn}
.pp-next li{position:relative;padding-left:44px;font-family:'Cabin',sans-serif;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.pp-next li:before{counter-increment:ppn;content:counter(ppn,decimal-leading-zero);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(217,123,136,.12);border:1px solid rgba(217,123,136,.28);font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.06em;color:#d97b88}

/* ---- Professional Services: dashboard gallery + screenshots ---- */
.dash-sec{background:var(--paper);padding:clamp(72px,9vw,110px) 0}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.dash-grid{grid-template-columns:1fr}}
.dash{border:1px solid rgba(175,60,69,.14);border-radius:14px;overflow:hidden;background:var(--bg-light);box-shadow:0 6px 30px rgba(175,60,69,.09);transition:transform .25s,box-shadow .25s}
.dash:hover{transform:translateY(-4px);box-shadow:0 24px 50px -20px rgba(175,60,69,.3)}
.dash img{display:block;width:100%;height:auto;margin:0;border-radius:0;box-shadow:none}
/* a single screenshot sitting in a dark feature section's visual column */
.shot{border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;background:#0e162e}
.df-a .shot{box-shadow:0 34px 70px -28px rgba(6,10,20,.85)}
.df-b .shot{box-shadow:0 34px 70px -28px rgba(0,0,0,.7)}
.shot img{display:block;width:100%;height:auto;margin:0;border-radius:0;box-shadow:none}

/* ---- Coded BI dashboard mocks (Professional Services) ----
   Replaces the real client dashboard screenshots. Same approach as the
   homepage product mocks: hand-coded, illustrative, no client data.
   Deliberately avoids .bar / .track so it doesn't inherit the homepage
   mock animations (which require --w1/--w2 custom props). */
.bi-panel{height:100%;display:flex;flex-direction:column}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 12px}
@media(max-width:560px){.kpi-row{grid-template-columns:1fr 1fr}}
.kpi{background:#10172a;border:1px solid #1d2436;border-radius:8px;padding:9px 10px}
.kpi span{display:block;font-family:'Inter',sans-serif;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9096a3;line-height:1.3}
.kpi b{display:block;font-family:'Inter',sans-serif;font-size:15px;font-weight:800;color:#f1f3f7;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.kpi i{font-style:normal;font-family:'Inter',sans-serif;font-size:8.5px;font-weight:700}
.kpi i.up{color:#16a34a}
.kpi i.dn{color:#C14953}
.bi-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0}
@media(max-width:560px){.bi-charts{grid-template-columns:1fr}}
.bi-chart{border:1px solid #1d2436;border-radius:8px;padding:10px 11px;display:flex;flex-direction:column;min-height:0}
.bi-chart h5{font-family:'Inter',sans-serif;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8b8e94;margin:0 0 7px}
.bi-legend{display:flex;gap:10px;font-family:'Inter',sans-serif;font-size:8px;color:#9096a3;margin-bottom:6px}
.bi-legend span{display:flex;align-items:center;gap:4px}
.bi-legend i{width:8px;height:2px;border-radius:2px;display:block}
.spark{display:block;width:100%;flex:1;min-height:0;overflow:visible}

/* ---- Coded RiskSecure "alerts by type" rule table ----
   Replaces the Rules-17-1.png product screenshot. Keeps the real AML/fraud
   typologies from it (mule deposits, Ponzi, rapid in/rapid out, etc.) since
   those demonstrate the rule library, but with descriptive rule codes instead
   of the demo entity's PKR_* codes. */
.rule-panel{height:100%;display:flex;flex-direction:column}
.rt{display:grid;grid-template-columns:44px 62px 1fr 24px 24px 28px;align-items:center;gap:6px;font-family:'Inter',sans-serif;padding:5.5px 0;border-bottom:1px solid #1d2436}
.rt:last-of-type{border-bottom:0}
.rt-head{border-bottom:1px solid #1d2436;padding-bottom:7px;margin-bottom:3px}
.rt-head span{font-size:7.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9096a3;text-align:center}
.rt-head span:nth-child(1),.rt-head span:nth-child(2),.rt-head span:nth-child(3){text-align:left}
.rt-head .st{color:#fff;border-radius:3px;padding:2px 0;letter-spacing:0}
.st-open{background:#d9a92f}
.st-inv{background:#dd8535}
.st-cnf{background:#C14953}
.rt-risk{font-size:7.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;border-radius:3px;padding:3px 0;text-align:center}
.r-high{background:#C14953}
.r-mod{background:#dd9b35}
.r-low{background:#c4515b}
.rt-code{font-size:8px;font-weight:700;color:#8a919c;letter-spacing:.02em}
.rt-rule{font-size:9px;color:#cdd0d8;line-height:1.3}
.rt-n{font-size:8.5px;font-weight:700;color:#cdd0d8;text-align:center;font-variant-numeric:tabular-nums}
.rt-n.zero{color:#cbcfd6}
@media(max-width:560px){.rt{grid-template-columns:40px 1fr 22px 22px 26px}.rt-code{display:none}}

/* ---- Mock search bar + source rows (I2G single-search panel) ---- */
.srch{display:flex;align-items:center;gap:8px;border:1px solid #242938;border-radius:6px;padding:7px 9px;background:var(--paper);margin-bottom:11px}
.srch svg{width:13px;height:13px;color:#9096a3;flex:none}
.srch span{font-family:'Inter',sans-serif;font-size:10.5px;color:#cdd0d8;flex:1}
.srch b{font-family:'Inter',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:4px;padding:5px 11px}
.src-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #1d2436;font-family:'Inter',sans-serif;font-size:10.5px;color:#cdd0d8}
.src-row:last-of-type{border-bottom:0}
.src-row .ok{color:#16a34a;font-weight:700;font-size:9.5px}

/* ---- FAQ (eKYC) ---- plain Q&A rather than an accordion: all answers are
   in the DOM and visible, which reads better and is better for SEO. */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1040px;margin:0 auto}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}}
.faq{background:var(--paper);border:1px solid rgba(175,60,69,.12);border-radius:16px;padding:26px 28px;box-shadow:0 4px 22px rgba(175,60,69,.06)}
.faq h3{display:flex;gap:11px;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;line-height:1.35;color:var(--ink);margin:0 0 10px}
.faq h3:before{content:'?';flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--blue-050);color:var(--blue);font-size:12px;font-weight:800}
.faq p{font-family:'Cabin',sans-serif;font-size:14.5px;line-height:1.7;color:var(--zinc-600);margin:0;padding-left:33px}

/* ---- Report tiers (KYCopilot Essential / Enhanced / Elite) ---- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media(max-width:900px){.tier-grid{grid-template-columns:1fr}}
.tier{background:var(--paper);border:1px solid rgba(175,60,69,.13);border-radius:20px;padding:clamp(24px,2.6vw,32px);box-shadow:0 4px 22px rgba(175,60,69,.07);display:flex;flex-direction:column}
.tier.is-top{border-color:rgba(175,60,69,.34);box-shadow:0 24px 50px -22px rgba(175,60,69,.3)}
.tier-name{display:flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.tier-name em{font-style:normal;font-size:9px;letter-spacing:.1em;color:#fff;background:var(--accent);border-radius:3px;padding:3px 8px}
.tier>p{font-family:'Cabin',sans-serif;font-size:14.5px;line-height:1.6;color:var(--zinc-600);margin:0 0 16px}
.tier ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.tier li{position:relative;padding-left:26px;font-family:'Cabin',sans-serif;font-size:14px;line-height:1.55;color:var(--zinc-700)}
.tier li:before{content:'';position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.tier li b{font-weight:700;color:var(--ink)}

/* horizontal bars used inside the mocks (self-contained) */
.vbar{display:flex;align-items:center;gap:8px;padding:3.5px 0;font-family:'Inter',sans-serif;font-size:8.5px;color:#8b8e94}
.vbar label{flex:0 0 60px;text-align:right}
.vtrack{flex:1;height:7px;border-radius:99px;background:#161d30;overflow:hidden}
.vfill{display:block;height:100%;border-radius:99px}
.vbar b{flex:0 0 24px;font-weight:700;color:#cdd0d8;text-align:right;font-variant-numeric:tabular-nums}

/* ---- Capability tiles: what we build (light gallery) ---- */
.viz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1080px){.viz-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.viz-grid{grid-template-columns:1fr}}
.viz{background:var(--paper);border:1px solid rgba(175,60,69,.13);border-radius:16px;overflow:hidden;box-shadow:0 4px 22px rgba(175,60,69,.07);transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column}
.viz:hover{transform:translateY(-4px);border-color:rgba(175,60,69,.3);box-shadow:0 22px 46px -18px rgba(175,60,69,.26)}
/* min-height sits above the tallest canvas content (the 2x2 KPI grid, ~148px
   + 32px padding) so all four canvases settle at the same height and the card
   titles stay on one line across the row. */
.viz-canvas{background:#10172a;border-bottom:1px solid #1d2436;padding:16px;min-height:184px;display:flex;flex-direction:column;justify-content:center;flex:none;overflow:hidden}
/* The KPI tiles must be tighter inside a viz canvas than in the big mock, or
   the 2x2 grid pushes the canvas past 176px and that tile's title drops out of
   line with the other three. Line-heights are explicit so the maths holds. */
.viz-canvas .vkpi{gap:7px}
.viz-canvas .kpi{padding:6px 9px}
.viz-canvas .kpi span{font-size:7.5px;line-height:1.2}
.viz-canvas .kpi b{font-size:13.5px;line-height:1.15;margin:2px 0 1px}
.viz-canvas .kpi i{font-size:8px;line-height:1.1}
.viz-body{padding:18px 20px 20px}
.viz-body h3{font-family:'Inter',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 7px}
.viz-body p{font-family:'Cabin',sans-serif;font-size:13.5px;line-height:1.6;color:var(--zinc-600);margin:0}
.vdonut{display:flex;align-items:center;gap:14px;justify-content:center}
.ring2{width:78px;height:78px;border-radius:50%;flex:none;-webkit-mask:radial-gradient(circle at 50% 50%,transparent 25px,#000 26px);mask:radial-gradient(circle at 50% 50%,transparent 25px,#000 26px)}
.vleg{display:grid;gap:6px;font-family:'Inter',sans-serif;font-size:8.5px;color:#b1b5be}
.vleg span{display:flex;align-items:center;gap:6px}
.vleg i{width:8px;height:8px;border-radius:2px;display:block;flex:none}
.vkpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---- Diamond checklist inside a dark feature copy column ---- */
.dfeat-copy .feat-list{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:14px}
.dfeat-copy .feat-list li{position:relative;padding-left:26px;font-family:'Cabin',sans-serif;font-size:15px;line-height:1.65;color:rgba(255,255,255,.72)}
.dfeat-copy .feat-list li:before{content:'';position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.dfeat-copy .feat-list b{color:#fff;font-weight:700}

/* ---- Careers: open positions ---- */
.pos-sec{background:var(--paper);padding:clamp(72px,9vw,110px) 0}
.pos{border:1px solid rgba(175,60,69,.14);border-radius:20px;overflow:hidden;box-shadow:0 6px 30px rgba(175,60,69,.07)}
.pos-head{padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,40px);background:var(--bg-light);border-bottom:1px solid rgba(175,60,69,.1);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pos-head h3{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--ink);margin:0;flex:1 1 240px}
.pos-tags{display:flex;gap:8px;flex-wrap:wrap}
.pos-tag{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--blue-050);border:1px solid rgba(175,60,69,.16);border-radius:3px;padding:6px 11px}
.pos-body{padding:clamp(26px,3vw,40px)}
.pos-body>p{font-family:'Cabin',sans-serif;font-size:16px;line-height:1.75;color:var(--zinc-700);margin:0 0 24px}
.pos-lead{font-family:'Inter',sans-serif;font-weight:700;font-size:16.5px;line-height:1.5;color:var(--ink);margin:0 0 24px}
.pos-lists{display:grid;grid-template-columns:1fr 1fr;gap:28px 44px}
@media(max-width:820px){.pos-lists{grid-template-columns:1fr}}
.pos-list h4{font-family:'Inter',sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--zinc-200)}
.pos-list ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pos-list li{position:relative;padding-left:26px;font-family:'Cabin',sans-serif;font-size:14.5px;line-height:1.6;color:var(--zinc-700)}
.pos-list li:before{content:'';position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.pos-foot{margin-top:32px;padding-top:26px;border-top:1px solid var(--zinc-200);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pos-foot p{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.6;color:var(--zinc-600);margin:0;flex:1 1 300px}

/* ---- Careers: stat band with a lead paragraph above the numbers ---- */
.stat-sec .stat-lead{max-width:760px;margin:14px auto 40px;text-align:center;font-family:'Cabin',sans-serif;font-size:16.5px;line-height:1.75;color:rgba(255,255,255,.68)}

/* ---- Light variant of the numbered .step cards ----
   .step is styled for dark sections; this recolours it for a light band so a
   page isn't forced into a long run of consecutive dark sections. */
.step-sec-light{background:var(--bg-light);padding:clamp(72px,9vw,110px) 0;position:relative}
.step-sec-light:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(175,60,69,.07) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.step-sec-light .wrap{position:relative}
.step-sec-light .step{background:var(--paper);border:1px solid rgba(175,60,69,.12);box-shadow:0 3px 18px rgba(175,60,69,.06)}
.step-sec-light .step:hover{border-color:rgba(175,60,69,.3);box-shadow:0 22px 46px -18px rgba(175,60,69,.24);transform:translateY(-4px)}
.step-sec-light .step h3{color:var(--ink)}
.step-sec-light .step p{color:var(--zinc-600)}
.step-sec-light .step-n{color:var(--blue);background:var(--blue-050)}

/* ---- Numbered card grids (reuse .step / .step-n from style.css) ---- */
.step-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.step-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.step-grid-4{grid-template-columns:1fr}}
.step-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.step-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.step-grid-3{grid-template-columns:1fr}}
.step-grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.step-grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.step-grid-5{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.step-grid-5{grid-template-columns:1fr}}
/* modules that link out get an affordance; non-linking ones look identical */
a.step{display:block;text-decoration:none}
a.step .step-go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;color:var(--blue-300);transition:gap .2s}
a.step:hover .step-go{gap:11px}
.step-sec-light a.step .step-go{color:var(--blue)}


/* =====================================================================
   UNIFORMITY PASS - site-wide type + button normalisation
   Loaded after style.css so these win. Audited 2026-07-31: section H2s were
   running on SIX different clamp scales (2.3rem to 3rem max) and eyebrows on
   TWO sizes (11px in sections, 13.5px in heroes/CTAs).
   ===================================================================== */

/* ---- 1. One scale for every BOLD section heading ---- */
.center h2,
.sol-head h2,
.cat-head h2,
.cap-copy h2,
.dfeat-copy h2,
.api-copy h2,
.tp-sec h2,
.why-copy h2,
.ind-copy h2,
.cta h2,
.spot-head h2,
.c-form-wrap h2{
  font-family:'Inter',sans-serif;
  font-weight:200;
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
/* Light display headings are a deliberate SECOND style (hero lines, joined
   panels). Keep them light, but on one shared size. */
.c-left h2,
.news-sub-head h2{
  font-family:'Inter',sans-serif;
  font-weight:200;
  font-size:clamp(1.85rem,3.1vw,2.7rem);
  line-height:1.14;
  letter-spacing:-.03em;
}

/* ---- 2. One eyebrow ---- size only; per-section COLOUR overrides in
   style.css still apply and are needed for dark vs light backgrounds. */
.eyebrow,
.hero .eyebrow,
.blog-hero .eyebrow,
.cta .eyebrow,
.spotlight .eyebrow,
.news-hero .eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:12px;
  margin-left:0;
}

/* ---- 3. Buttons: no glow, no lift, one weight ---- */
.btn{font-weight:700}
.btn,.btn:hover,.btn:focus{box-shadow:none;transform:none}

/* ---- 4. Section intro paragraph under a .center heading ---- */
.center>p{max-width:760px;margin-left:auto;margin-right:auto}

/* ---- 5. One hero H1 ---- audited: FOUR different clamps (max 3.3rem to
   4.4rem) across two weights (200 and 300). Standardised on weight 300. */
.hero h1,
.page-hero h1,
.ind-hero h1,
.blog-hero h1{
  font-family:'Inter',sans-serif;
  font-weight:200;
  font-size:clamp(2rem,3.8vw,3.5rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
/* .c-left h1 is a panel heading, not a full-bleed hero - it stays on the
   light display scale shared with .c-left h2 / .news-sub-head h2. */

/* ---- 6. One card-title size ---- audited: sentence-case card titles were
   running at 15, 15.5, 16, 16.5 and 19px, often two of them on the SAME page
   (.step next to .deliv). Two documented tiers now: standard and wide. */
.step h3,
.deliv h4,
.diff h3,
.viz-body h3,
.faq h3,
.card h4{
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
}
/* wide 2-up cards carry a slightly larger title so it clears the 15px body */
.beyond h3{font-family:'Inter',sans-serif;font-size:18px;font-weight:700;line-height:1.35}

/* ---- 7. One article-card title size ---- .post/.news-card/.news-sitem were
   at 16, 16.5, 17, 17.5 and 18px depending on which grid they sat in. */
.post h4,
.spotlight .post h4,
.blog-main .post h4,
.news-card h3,
.news-sitem h3,
.ind-card-body h4{
  font-family:'Inter',sans-serif;
  font-size:17px;
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.012em;
}


/* =====================================================================
   ARTICLE TEMPLATE (single.php)
   Posts are native block-editor content: paragraphs, h2/h3/h4, ul/ol,
   occasional blockquote, separator and spacer. Everything is styled by tag
   so the author never touches layout.
   ===================================================================== */

/* ---- hero ---- */
.art-hero{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MjAiIGhlaWdodD0iNjI0IiB2aWV3Qm94PSIwIDAgNzIwIDYyNCI+PGcgZmlsbD0ibm9uZSI+PHBvbHlnb24gcG9pbnRzPSI5MCwwIDE4MCw1MiAxODAsMTU2IDkwLDIwOCAwLDE1NiAwLDUyIiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuMDIwIi8+PHBvbHlnb24gcG9pbnRzPSI0NTAsMCA1NDAsNTIgNTQwLDE1NiA0NTAsMjA4IDM2MCwxNTYgMzYwLDUyIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDEwIi8+PHBvbHlnb24gcG9pbnRzPSI2MzAsMTA0IDcyMCwxNTYgNzIwLDI2MCA2MzAsMzEyIDU0MCwyNjAgNTQwLDE1NiIgZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjAyNiIvPjxwb2x5Z29uIHBvaW50cz0iMjcwLDEwNCAzNjAsMTU2IDM2MCwyNjAgMjcwLDMxMiAxODAsMjYwIDE4MCwxNTYiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMC4wMTIiLz48cG9seWdvbiBwb2ludHM9IjkwLDIwOCAxODAsMjYwIDE4MCwzNjQgOTAsNDE2IDAsMzY0IDAsMjYwIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDA2Ii8+PHBvbHlnb24gcG9pbnRzPSI0NTAsMjA4IDU0MCwyNjAgNTQwLDM2NCA0NTAsNDE2IDM2MCwzNjQgMzYwLDI2MCIgZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjAxNyIvPjxwb2x5Z29uIHBvaW50cz0iNjMwLDMxMiA3MjAsMzY0IDcyMCw0NjggNjMwLDUyMCA1NDAsNDY4IDU0MCwzNjQiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMDgiLz48cG9seWdvbiBwb2ludHM9IjI3MCwzMTIgMzYwLDM2NCAzNjAsNDY4IDI3MCw1MjAgMTgwLDQ2OCAxODAsMzY0IiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuMDI0Ii8+PHBvbHlnb24gcG9pbnRzPSI5MCw0MTYgMTgwLDQ2OCAxODAsNTcyIDkwLDYyNCAwLDU3MiAwLDQ2OCIgZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjAxMCIvPjxwb2x5Z29uIHBvaW50cz0iNDUwLDQxNiA1NDAsNDY4IDU0MCw1NzIgNDUwLDYyNCAzNjAsNTcyIDM2MCw0NjgiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMTIiLz48cG9seWdvbiBwb2ludHM9IjYzMCwtMTA0IDcyMCwtNTIgNzIwLDUyIDYzMCwxMDQgNTQwLDUyIDU0MCwtNTIiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMDciLz48cG9seWdvbiBwb2ludHM9IjI3MCw1MjAgMzYwLDU3MiAzNjAsNjc2IDI3MCw3MjggMTgwLDY3NiAxODAsNTcyIiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuMDE0Ii8+PC9nPjwvc3ZnPg==') repeat,linear-gradient(97deg,#070b17 0%,#090e1e 15%,#0b1327 33%,#0e1730 50%,#111c3a 66%,#142144 83%,#17264f 100%);background-size:720px 624px,auto;color:#fff;padding:clamp(46px,6vw,74px) 0 clamp(54px,7vw,86px)}
.art-hero-copy{max-width:820px}
.art-back{display:inline-block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:24px}
.art-back:hover{color:#fff}
.art-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.art-cat{font-family:'Inter',sans-serif;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:3px;padding:6px 12px;transition:.18s}
.art-cat:hover{background:var(--accent);border-color:var(--accent)}
.art-hero h1{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(1.95rem,3.9vw,3.05rem);line-height:1.14;letter-spacing:-.028em;color:#fff;margin:0 0 20px}
.art-lead{font-family:'Cabin',sans-serif;font-size:19px;line-height:1.7;color:rgba(255,255,255,.76);margin:0 0 30px;max-width:720px}
.art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:11px;font-family:'Inter',sans-serif;font-size:13.5px;color:rgba(255,255,255,.62)}
.art-meta i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.34);display:block;flex:none}
.art-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-family:'Inter',sans-serif;font-size:6.5px;font-weight:800;letter-spacing:.04em;flex:none}
.art-by{color:#fff;font-weight:700}

/* ---- featured image AS the hero background ----
   Featured images are all 1200x628 Open Graph social cards, so they make poor
   standalone editorial plates but good hero washes. Same treatment the industry
   heroes use: greyscale the photo, multiply the brand gradient over it, then a
   scrim for legibility. Uses a real <img> rather than an inline
   background-image because Smush rewrites inline background urls into a
   lazy-load placeholder. */
.art-hero{position:relative;isolation:isolate;overflow:hidden}
.art-hero.has-media{display:flex;align-items:center;min-height:clamp(400px,42vw,540px)}
.art-hero-media{position:absolute;inset:0;z-index:0;
  /* The PHOTO carries the transparency ramp; the colour overlay above is
     unmasked. The reveal must begin AFTER the hero text ends, or the image
     shows through behind the title. Text ends at:
       (viewport - container)/2  +  wrap padding  +  .art-hero-copy width
     so the stop is computed rather than a fixed % - a fixed % drifts,
     because the text occupies a LARGER fraction of a narrower viewport.
     Bonus: on narrow screens the stop exceeds the hero width, so the mask
     is fully transparent and the hero degrades to pure gradient. */
  --art-text-end:calc(max(0px,(100% - var(--maxw)) / 2) + 24px + 800px);
  /* Long, gentle ramp. An earlier 4-stop version reached .8 opacity only
     400px past the text, which read as an abrupt edge. This eases across
     the whole remaining width instead. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent var(--art-text-end),rgba(0,0,0,.10) calc(var(--art-text-end) + 140px),rgba(0,0,0,.30) calc(var(--art-text-end) + 330px),rgba(0,0,0,.58) calc(var(--art-text-end) + 540px),rgba(0,0,0,.82) calc(var(--art-text-end) + 760px),#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,transparent var(--art-text-end),rgba(0,0,0,.10) calc(var(--art-text-end) + 140px),rgba(0,0,0,.30) calc(var(--art-text-end) + 330px),rgba(0,0,0,.58) calc(var(--art-text-end) + 540px),rgba(0,0,0,.82) calc(var(--art-text-end) + 760px),#000 100%)}
/* Lift the photo rather than darken it - featured images range from near-black
   screenshots to bright stock, and the gradient above needs something to sit on. */
.art-hero-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;margin:0;border-radius:0;box-shadow:none;filter:grayscale(100%) contrast(1.04) brightness(1.12)}
/* NORMAL blend at fixed opacity, NOT multiply. Multiply over a dark source
   crushes to black and loses the brand gradient completely - which is exactly
   what happened with the near-black screenshots. Normal blend guarantees the
   same brand wash on every post, with the photo reading as texture beneath. */
.art-hero-tint{position:absolute;inset:0;z-index:1;opacity:.62;
  /* Uniform across the WHOLE hero - no mask. The horizontal reveal comes from
     the image mask above, not from fading the colour out. */
  background:linear-gradient(97deg,#070b17 0%,#090e1e 15%,#0b1327 33%,#0e1730 50%,#111c3a 66%,#142144 83%,#17264f 100%)}
/* Light vertical scrim - only enough to guarantee text contrast. */
.art-hero-shade{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(8,12,22,.06) 0%,rgba(8,12,22,.18) 55%,rgba(8,12,22,.38) 100%)}
.art-hero-inner{position:relative;z-index:3;width:100%}
.art-col{min-width:0}

/* ---- body layout: full site container, THREE columns ----
   The article is a fixed 780px reading measure in the centre column, so it sits
   dead centre of the screen, with an equal-width rail either side. Symmetric
   1fr rails are what actually centres it - a 2-column 75/25 split can't. */
.art-main{background:var(--bg-light);padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,88px)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,780px) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
@media(max-width:1180px){
  /* not enough room for two rails - drop to article + one rail */
  .art-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .art-aside-l{grid-column:1/-1;order:-1}
}
@media(max-width:900px){
  .art-grid{grid-template-columns:1fr;gap:34px}
  .art-aside-l{grid-column:auto}
}
.art-aside{min-width:0}
/* The 75% column is ~936px at 1360. Prose at 18.5px would run ~105 characters
   per line there, well past a comfortable measure, so the text block is capped
   at 780px and CENTRED in its column, splitting the slack evenly either side.
   The 75/25 structure is unchanged - this just keeps the line length readable. */
.art-col{min-width:0}


/* ---- side rail ---- */

/* the index reads as a horizontal card once it sits above the article */
@media(max-width:1180px){.art-toc ol{grid-template-columns:1fr 1fr;display:grid;gap:0 26px}}
@media(max-width:640px){.art-toc ol{grid-template-columns:1fr}}
.art-side-h{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--zinc-500);margin-bottom:14px}

/* auto-generated index, built from the post's own h2s */
.art-toc{background:var(--paper);border:1px solid rgba(175,60,69,.12);border-radius:16px;padding:22px 22px 18px;box-shadow:0 3px 18px rgba(175,60,69,.05)}
.art-toc ol{list-style:none;margin:0;padding:0;counter-reset:atoc;display:grid;gap:2px}
.art-toc li{counter-increment:atoc}
.art-toc li>span{display:flex;gap:10px;padding:7px 0;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--zinc-600);border-top:1px solid var(--zinc-200)}
.art-toc li:first-child>span{border-top:0}
.art-toc li>span:before{content:counter(atoc,decimal-leading-zero);flex:none;font-size:10px;font-weight:800;color:var(--blue-300);padding-top:2px}

.art-side-block{background:var(--paper);border:1px solid rgba(175,60,69,.12);border-radius:16px;padding:22px;box-shadow:0 3px 18px rgba(175,60,69,.05)}
.art-share{display:flex;gap:8px}
.art-sh{display:grid;place-items:center;width:38px;height:38px;border-radius:3px;background:var(--bg-light);border:1px solid var(--zinc-200);color:var(--zinc-600);transition:.18s}
.art-sh svg{width:15px;height:15px}
.art-sh:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* compact promo, using the brand gradient so the rail has one dark anchor */
.art-promo{border-radius:16px;padding:24px 22px;color:#fff;
  background:linear-gradient(158deg,#070b17 0%,#111c3b 50%,#0b1224 100%);
  box-shadow:0 16px 40px -18px rgba(175,60,69,.5)}
.art-promo-eyebrow{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-300);margin-bottom:10px}
.art-promo h3{font-family:'Inter',sans-serif;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.02em;color:#fff;margin:0 0 9px}
.art-promo p{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 18px}
.art-promo .btn{width:100%;justify-content:center;padding:12px 18px;font-size:14px}

/* ---- the article itself ---- */
.art-body{font-family:'Cabin',sans-serif;font-size:18.5px;line-height:1.78;color:var(--zinc-700);min-width:0}
.art-body>*:first-child{margin-top:0}
.art-body>p:first-of-type{font-size:20.5px;line-height:1.7;color:var(--ink)}
/* the 18.5px measure is tuned to the wide desktop column; ease it down on
   narrow screens so lines hold a reasonable number of words */
@media(max-width:600px){
  .art-body{font-size:17px;line-height:1.75}
  .art-body>p:first-of-type{font-size:18.5px}
  .art-body h2{font-size:23px;margin-top:38px}
  .art-body h3{font-size:19.5px}
}
.art-body p{margin:0 0 24px}
/* scroll-margin so an "On this page" jump doesn't park the heading behind the
   74px sticky header */
.art-body h2{font-family:'Inter',sans-serif;font-weight:800;font-size:26px;line-height:1.25;letter-spacing:-.022em;color:var(--ink);margin:48px 0 16px;scroll-margin-top:98px}
.art-body h3{font-family:'Inter',sans-serif;font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.015em;color:var(--ink);margin:38px 0 13px}
.art-body h4{font-family:'Inter',sans-serif;font-weight:700;font-size:17.5px;line-height:1.35;color:var(--ink);margin:30px 0 11px}
.art-body h2+h3,.art-body h3+h4{margin-top:20px}
.art-body ul,.art-body ol{margin:0 0 24px;padding-left:0;list-style:none}
.art-body ol{counter-reset:artol}
.art-body li{position:relative;padding-left:30px;margin-bottom:11px}
.art-body ul>li:before{content:'';position:absolute;left:4px;top:11px;width:9px;height:9px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.art-body ol>li:before{counter-increment:artol;content:counter(artol);position:absolute;left:0;top:2px;font-family:'Inter',sans-serif;font-size:12px;font-weight:800;color:var(--blue);background:var(--blue-050);border-radius:4px;width:21px;height:21px;display:grid;place-items:center}
.art-body li>ul,.art-body li>ol{margin:11px 0 0}
.art-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-body a:hover{color:var(--accent)}
.art-body strong{font-weight:700;color:var(--ink)}
.art-body blockquote{margin:34px 0;padding:4px 0 4px 26px;border-left:3px solid var(--accent);font-family:'Inter',sans-serif;font-weight:300;font-size:21px;line-height:1.55;letter-spacing:-.015em;color:var(--ink)}
.art-body blockquote p{margin:0 0 10px}
.art-body blockquote p:last-child{margin:0}
.art-body blockquote cite,.art-body blockquote .wp-block-quote__citation{display:block;margin-top:12px;font-family:'Inter',sans-serif;font-style:normal;font-size:13px;font-weight:700;color:var(--zinc-500)}
.art-body hr,.art-body .wp-block-separator{border:0;height:1px;background:var(--zinc-200);margin:44px 0}
.art-body img,.art-body figure img{max-width:100%;height:auto;border-radius:14px;box-shadow:0 8px 30px rgba(175,60,69,.12)}
.art-body figure{margin:32px 0}
.art-body figcaption{margin-top:10px;font-family:'Inter',sans-serif;font-size:13px;color:var(--zinc-500);text-align:center}
.art-body table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:15.5px}
.art-body th,.art-body td{border:1px solid var(--zinc-200);padding:11px 14px;text-align:left}
.art-body th{background:var(--bg-light);font-family:'Inter',sans-serif;font-weight:700;color:var(--ink)}
.art-body pre{background:#0a0c12;color:#e6edf3;border-radius:12px;padding:18px 20px;overflow-x:auto;font-size:13.5px;line-height:1.6;margin:0 0 26px}
.art-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:rgba(175,60,69,.07);border-radius:4px;padding:2px 5px}
.art-body pre code{background:none;padding:0}

/* ---- tags ---- */
.art-tagrow{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:clamp(34px,4vw,48px);padding-top:26px;border-top:1px solid var(--zinc-200)}

.art-tag-lab{font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--zinc-500);margin-right:4px}
.art-tag{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--zinc-600);background:var(--paper);border:1px solid var(--zinc-200);border-radius:3px;padding:8px 14px;transition:.15s}
.art-tag:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-050)}

/* ---- related ---- */
.art-rel{background:var(--paper);padding:clamp(52px,7vw,84px) 0 clamp(60px,8vw,96px)}
.art-rel .blog-sep{margin:0 0 26px}
.art-rel .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.art-rel .archive-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.art-rel .archive-grid{grid-template-columns:1fr}}
.art-rel .post{background:var(--paper);border:1px solid rgba(175,60,69,.12);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 3px 18px rgba(175,60,69,.06);transition:transform .25s,box-shadow .25s,border-color .25s}
.art-rel .post:hover{transform:translateY(-5px);border-color:rgba(175,60,69,.3);box-shadow:0 22px 46px -18px rgba(175,60,69,.26)}
.art-rel .post .thumb{height:186px;overflow:hidden;background:linear-gradient(140deg,#070b17,#17264f)}
.art-rel .post .thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;box-shadow:none;transition:transform .5s ease}
.art-rel .post:hover .thumb img{transform:scale(1.05)}
.art-rel .post .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}

/* ---- share row, at the foot of the article ---- */
.art-sharerow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid var(--zinc-200)}
.art-sharerow .art-tag-lab{margin:0}

/* Smooth in-page navigation for the article index and every other #anchor
   link on the site (product-page hero links, #apply, #positions...). */
/* NOTE: html{scroll-behavior:smooth} was REMOVED - it fought the JS handler
   in nga.js (both animating the same scroll). The JS owns smooth scrolling. */
/* any anchor target should clear the 74px sticky header, not just article h2s */
[id]{scroll-margin-top:98px}


/* =====================================================================
   CAPABILITY GROUPS - .capg
   Replaces the flat .cap-grid checklist. Same items, grouped by theme with
   an icon and a one-line framing so 11+ bullets read as structure rather
   than a dump. Light sections only (.cap-sec).
   ===================================================================== */
.capg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1160px;margin:0 auto}
@media(max-width:1000px){.capg{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.capg{grid-template-columns:1fr}}
.capg-card{background:var(--paper);border:1px solid rgba(175,60,69,.13);border-radius:14px;padding:24px 22px;box-shadow:0 4px 22px rgba(175,60,69,.07);display:flex;flex-direction:column}
.capg-card .sol-ico{margin-bottom:15px}
.capg-card h3{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-.012em;color:var(--ink);margin:0 0 6px}
.capg-sub{font-family:'Cabin',sans-serif;font-size:13.5px;line-height:1.5;color:var(--zinc-500);margin:0 0 16px}
.capg-card ul{list-style:none;margin:0;padding:15px 0 0;display:grid;gap:9px;border-top:1px solid var(--zinc-200)}
.capg-card li{position:relative;padding-left:22px;font-family:'Cabin',sans-serif;font-size:14.5px;line-height:1.55;color:var(--zinc-700)}
.capg-card li:before{content:'\2713';position:absolute;left:0;top:1px;font-size:11px;font-weight:800;color:var(--accent)}

/* =====================================================================
   ADVERSE SCORE MOCK - .ams  (adverse media hero, right column)
   Coded recreation of the old site's product screenshot. Reuses the shared
   .app-frame chrome. Simplified for a ~590px hero column: the two panels
   that sat side by side in the screenshot are stacked here.
   All content is illustrative - fictional entity, .example.com source.
   ===================================================================== */
.hero-art{position:relative;min-width:0}
/* style.css pins .app-frame to height:483px so the two Professional Services
   frames match. The hero mock is taller and must size to its content. */
.hero-art .app-frame{height:auto;box-shadow:0 44px 90px -34px rgba(0,0,0,.8);border-color:rgba(255,255,255,.18)}
.hero-art .app-body{padding:14px;flex:none;overflow:visible}
.ams{font-family:'Inter',sans-serif;color:#e2e4eb;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ams>*{min-width:0}

/* entity header */
.ams-top{display:flex;align-items:center;gap:11px}
.ams-score{flex:none;width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#C14953,#a63b45);color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em}
.ams-ent{display:grid;gap:2px;min-width:0}
.ams-ent b{font-size:14.5px;font-weight:800;color:#edeff4;letter-spacing:-.015em;line-height:1.2}
.ams-ent span{font-size:9.5px;font-weight:500;color:#9096a3}
.ams-range{margin-left:auto;display:flex;gap:3px;flex:none}
.ams-range i{font-style:normal;font-size:8.5px;font-weight:700;color:#9096a3;background:#121828;border-radius:3px;padding:3px 5px;line-height:1}
.ams-range i.on{background:var(--blue-050);color:var(--blue)}

/* the three ratio stats */
.ams-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ams-stat{background:#10172a;border:1px solid #1d2436;border-radius:8px;padding:8px 9px;display:grid;gap:2px;min-width:0}
.ams-stat b{font-size:13px;font-weight:800;color:#edeff4;letter-spacing:-.01em}
.ams-stat b.dn{color:#C14953}
.ams-stat span{font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9096a3;line-height:1.3}

/* tab strip */
.ams-tabs{display:flex;gap:15px;border-bottom:1px solid #1d2436}
.ams-tabs span{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9096a3;padding-bottom:7px;white-space:nowrap}
.ams-tabs span.on{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}

.ams-lab{display:block;font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9096a3;margin-bottom:9px}

/* category bars - severity ramp, high score reads hottest */
.ams-bars{display:grid;gap:6px}
.ams-bar{display:grid;grid-template-columns:94px 1fr 24px;align-items:center;gap:8px}
.ams-bar>span{font-size:9.5px;font-weight:600;color:#b1b5be;text-align:right;line-height:1.25}
.ams-bar i{display:block;height:14px;border-radius:2px}
.ams-bar em{font-style:normal;height:14px;border-radius:2px;display:grid;place-items:center;font-size:8.5px;font-weight:800;color:#fff}
.s-hi{background:#C14953}
.s-md{background:#E07A46}
.s-lo{background:#E3B23C}
.ams-axis{display:grid;grid-template-columns:94px 1fr 24px;gap:8px;margin-top:6px}
.ams-axis span{grid-column:2;display:flex;justify-content:space-between;border-top:1px solid #1d2436;padding-top:4px}
.ams-axis i{font-style:normal;font-size:8px;font-weight:600;color:#8d93a0}

/* the matched article */
.ams-card{background:var(--paper);border:1px solid #1d2436;border-radius:9px;padding:11px 12px;box-shadow:0 8px 22px rgba(175,60,69,.07)}
.ams-card-top{display:flex;gap:9px;align-items:flex-start;margin-bottom:5px}
.ams-card-top b{font-size:11.5px;font-weight:800;line-height:1.35;color:#edeff4;letter-spacing:-.005em}
.ams-chip{flex:none;font-size:10px;font-weight:800;color:#fff;background:#C14953;border-radius:3px;padding:2px 6px;line-height:1.4}
.ams-src{display:block;font-size:9px;font-weight:500;color:#c4515b;margin-bottom:9px;word-break:break-word}
.ams-card p{font-family:'Cabin',sans-serif;font-size:10.5px;line-height:1.6;color:#b1b5be;margin:0 0 9px}
.ams-card mark{background:none;padding:0 1px;border-radius:2px;font-weight:700}
.ams-card mark.m-b{background:rgba(196,81,91,.16);color:#1d6b8c}
.ams-card mark.m-r{background:rgba(193,73,83,.18);color:#a63b45}
.ams-card mark.m-t{background:rgba(46,160,140,.17);color:#1f7d6c}
.ams-crumb{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ams-crumb span{font-size:8.5px;font-weight:700;color:#C14953}
.ams-crumb span+span:before{content:'\203A';margin-right:4px;color:#d5d6d7}

@media(max-width:920px){
  .hero-art{max-width:620px}
}
/* five tabs will not fit a phone-width frame - drop the last two rather
   than let the strip clip against the frame edge */
@media(max-width:520px){.ams-tabs span:nth-child(n+4){display:none}}
@media(max-width:460px){
  .ams-bar,.ams-axis{grid-template-columns:78px 1fr 24px;gap:6px}
  .ams-bar>span{font-size:9px}
  .ams-range{display:none}
  .ams-stats{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   CATEGORY FAMILIES - .catg  (adverse media "screening categories")
   19 taxonomy categories were a flat 19-chip grid that read as a dump.
   Grouped into four families, each an icon + title + count + tag cluster.
   Dark section (.cat-sec). No box-shadow anywhere - see the no-glow rule.
   ===================================================================== */
.catg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
@media(max-width:1200px){.catg-grid{grid-template-columns:1fr 1fr}}
.catg-grid.catg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.catg-grid.catg-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.catg-grid.catg-3{grid-template-columns:1fr}}
@media(max-width:620px){.catg-grid{grid-template-columns:1fr}}
.catg{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;min-width:0}
.catg-top{display:flex;align-items:flex-start;gap:13px;min-height:44px;margin-bottom:17px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.catg-top>div{padding-top:2px}
.catg-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(217,123,136,.13);border:1px solid rgba(217,123,136,.26);color:#d97b88;flex:none}
.catg-ico svg{width:20px;height:20px;display:block}
.catg h3{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:#fff;margin:0;line-height:1.25;letter-spacing:-.01em}
.catg-n{display:block;margin-top:3px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.catg-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.catg-tags li{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;line-height:1.25;color:rgba(255,255,255,.84);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:4px;padding:8px 11px}
@media(max-width:480px){.catg{padding:20px}.catg-tags li{font-size:12px;padding:7px 10px}}

/* =====================================================================
   ASSOCIATION DETECTION MOCK - .amx  (adverse media "Beyond traditional")
   Recreates the old site's entity-report screenshot: subject + star, the one
   category that fired, and the article whose highlighted names are WHY it
   fired. Reuses the .ams card/mark classes from the hero mock so both read as
   the same product. All content illustrative - see the hero mock note.
   ===================================================================== */
.beyond-split{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,3.4vw,54px);align-items:stretch}
@media(max-width:1020px){.beyond-split{grid-template-columns:1fr}}
.beyond-col{display:grid;gap:22px;min-width:0}
.beyond-visual{min-width:0}
/* style.css pins .app-frame to 483px; this mock sizes to its content */
.beyond-visual .app-frame{height:100%;min-height:100%;border-color:rgba(255,255,255,.16)}
.beyond-visual .app-body{padding:14px;flex:1;min-height:0;overflow:visible;display:grid}
/* fill the column height with evenly spaced rows rather than one tall card */
.amx{height:100%;align-content:space-between}
.amx-more2{background:rgba(175,60,69,.03)}
.amx-more2 .ams-src{margin-bottom:0}
.amx-top{display:flex;align-items:center;gap:8px}
.amx-top b{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;color:#edeff4;letter-spacing:-.015em;line-height:1.2}
.amx-star{color:#E3B23C;font-size:15px;line-height:1}
/* wider label column for multi-bar category charts */
.ams-wide .ams-bar,.ams-wide .ams-axis{grid-template-columns:128px minmax(0,1fr) 24px}
.amx .ams-bar{grid-template-columns:120px auto 24px;justify-content:start}
.amx .ams-bar i{background-image:linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:47px 100%;background-position:47px 0}
.amx .ams-bar>span{font-style:italic}
.amx-flag{flex:none;display:grid;place-items:center;color:#c4515b}
.amx-flag svg{width:13px;height:13px;display:block}
.amx-more{flex:none;margin-left:auto;display:grid;place-items:center;height:18px;padding:0 6px;border:1px solid #242938;border-radius:3px;background:#10172a;font-size:9px;font-weight:800;color:#9096a3;letter-spacing:-1px;line-height:1}
.ams-chip.c-amber{background:#E3B23C;color:#4a3708}
.ams-card mark.m-a{background:rgba(227,178,60,.3);color:#7a5a08}
.amx .ams-bar i{width:188px;max-width:100%}
@media(max-width:520px){.amx .ams-bar{grid-template-columns:92px minmax(0,1fr) 24px}.amx .ams-bar i{width:100%}}

/* =====================================================================
   ONBOARDING JOURNEY FLOW - .jny  (adverse media, journey-sec)
   Recreation of the old site's flow graphic: the onboarding stages down the
   left, the RiskSecure product that serves each one on the right, ROW-ALIGNED
   so the mapping is self-evident, plus the red re-screen loop.
   4 columns: loop gutter | stages | connector | products.
   Rows are placed explicitly (.jr1-.jr6) - auto-placement leaves holes when
   only some rows have a product cell.
   ===================================================================== */
.jny{display:grid;grid-template-columns:30px minmax(0,1fr) 54px minmax(0,1fr);row-gap:16px;align-items:stretch;max-width:1080px;margin:0 auto}
.jny>.jc2{grid-column:2}.jny>.jc3{grid-column:3}.jny>.jc4{grid-column:4}
.jny>.jr1{grid-row:1}.jny>.jr2{grid-row:2}.jny>.jr3{grid-row:3}
.jny>.jr4{grid-row:4}.jny>.jr5{grid-row:5}.jny>.jr6{grid-row:6}

.jny-cap{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);align-self:end;padding-bottom:2px}

/* stage cards */
.jny-stage{position:relative;background:var(--paper);border:1px solid rgba(175,60,69,.18);border-radius:10px;padding:14px 16px;display:grid;align-content:center}
.jny-stage b{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.jny-stage p{font-family:'Cabin',sans-serif;font-size:12.5px;line-height:1.5;color:var(--zinc-600);margin:4px 0 0}
/* the down-chevron that sits in the row gap */
.jny-stage:not(.jny-end):after{content:'';position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);border-top:7px solid rgba(175,60,69,.4);border-left:6px solid transparent;border-right:6px solid transparent}
.jny-hot:after,.jny-new:after{border-top-color:var(--accent)}
/* stage 1: the entities entering the journey */
.jny-new{border-color:rgba(175,60,69,.3)}
.jny-new .jny-lab{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--ink);margin-bottom:9px}
.jny-badge{display:grid;place-items:center;height:19px;padding:0 7px;border-radius:4px;background:var(--blue-050);border:1px solid rgba(175,60,69,.18);font-size:9px;font-weight:800;color:var(--blue);letter-spacing:-1px}
.jny-new ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jny-new li{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--zinc-700);background:var(--bg-light);border:1px solid rgba(175,60,69,.12);border-radius:4px;padding:7px 11px}
/* the action stage - red, as on the original */
.jny-hot{background:var(--accent);border-color:var(--accent)}
.jny-hot b{color:#fff}
.jny-chev{margin-left:7px;font-weight:800;letter-spacing:-1px;color:rgba(213,111,124,.65)}
.jny-hot .jny-chev{color:rgba(255,255,255,.7)}
/* the either/or stage splits in two */
.jny-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;border:0;background:none}
.jny-pair>div{background:var(--paper);border:1px solid rgba(175,60,69,.18);border-radius:10px;padding:13px 15px;display:grid;align-content:center}
.jny-or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;background:var(--paper);border:1px solid rgba(175,60,69,.18);border-radius:99px;width:26px;height:20px;display:grid;place-items:center;font-family:'Inter',sans-serif;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--zinc-500)}
.jny-muted{background:var(--bg-light)}

/* connector into the product column */
.jny-link{align-self:center;height:1px;background:rgba(175,60,69,.28);position:relative;margin:0 8px}
.jny-link:after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:6px solid rgba(175,60,69,.45);border-top:4px solid transparent;border-bottom:4px solid transparent}

/* product cards */
.jny-prod{display:flex;align-items:center;gap:13px;background:var(--bg-light);border:1px solid rgba(175,60,69,.12);border-radius:10px;padding:13px 16px}
.jny-ico{width:38px;height:38px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--paper);border:1px solid rgba(175,60,69,.15);color:var(--blue)}
.jny-ico svg{width:19px;height:19px;display:block}
.jny-prod b{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}

/* the red re-screen loop down the left gutter */
.jny-loop{grid-column:1;grid-row:3/7;position:relative;margin:33px 8px 36px 0;border:2px solid var(--accent);border-right:0;border-radius:9px 0 0 9px}
.jny-loop:after{content:'';position:absolute;right:-1px;top:-2px;border-left:8px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.jny-loop span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(180deg);writing-mode:vertical-rl;background:var(--paper);padding:5px 0;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap}

@media(max-width:900px){
  .jny{grid-template-columns:minmax(0,1fr);row-gap:12px;max-width:520px}
  .jny>.jc2,.jny>.jc3,.jny>.jc4{grid-column:1}
  .jny>.jr1,.jny>.jr2,.jny>.jr3,.jny>.jr4,.jny>.jr5,.jny>.jr6{grid-row:auto}
  .jny-loop,.jny-link,.jny-cap.jc4{display:none}
  .jny-prod{margin-left:20px}
  .jny-stage:not(.jny-end):after{display:none}
}
@media(max-width:520px){.jny-pair{grid-template-columns:1fr}.jny-or{display:none}}

/* =====================================================================
   SANCTIONS PROFILE RESULT MOCK - .prof  (sanctions hero, right column)
   Coded recreation of the old site's screening-result screenshot. Sits in the
   shared .hero-art / .app-frame chrome and reuses .ams-chip + .amx-more so it
   matches the other two mocks. "John Doe" was already the placeholder in the
   original. No box-shadow - see the no-glow rule.
   ===================================================================== */
.prof{font-family:'Inter',sans-serif;color:#e2e4eb;display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
.prof>*{min-width:0}
.prof-top{display:flex;align-items:center;gap:9px}
.prof-top b{font-size:13.5px;font-weight:800;color:#edeff4;letter-spacing:-.012em}
.prof-top b i{font-style:normal;color:#c4515b}
.prof-tabs{display:flex;gap:14px;border-bottom:1px solid #1d2436}
.prof-tabs span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9096a3;padding-bottom:7px;white-space:nowrap}
.prof-tabs span.on{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
.prof-set{border:1px solid #1d2436;border-radius:9px;padding:13px 14px 12px}
.prof-set-h{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9096a3;margin-bottom:10px}
.prof-rows{display:grid;gap:6px}
.prof-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;font-size:11px;line-height:1.45}
.prof-row span{color:#9096a3;font-weight:600}
.prof-row b{color:#cdd0d8;font-weight:600}
.prof-foot{display:flex;justify-content:flex-end}
.prof-btn{font-size:10.5px;font-weight:800;color:#fff;background:var(--blue);border-radius:5px;padding:8px 13px;line-height:1.2}
/* the floating callout, overlapping the frame's right edge as in the original */
.prof-call{position:absolute;right:-26px;top:46%;width:252px;background:#121828;border:1px solid #242938;border-radius:9px;padding:14px 15px;z-index:2}
.prof-call b{display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:800;color:#edeff4;margin-bottom:6px}
.prof-call p{font-family:'Cabin',sans-serif;font-size:10.5px;line-height:1.55;color:#b1b5be;margin:0}
@media(max-width:980px){.prof-call{position:static;right:auto;top:auto;width:auto;margin-top:14px}}
@media(max-width:460px){
  .prof-row{grid-template-columns:84px minmax(0,1fr);gap:8px}
  .prof-tabs span:nth-child(n+4){display:none}
}
/* --- roles-history variant of the callout (PEP hero) --- */
.prof-call-tbl{width:306px;padding:0;overflow:hidden;top:52%}
.prof-tbl{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;table-layout:fixed}
.prof-tbl th{font-size:9.5px;font-weight:800;text-align:left;color:#cdd0d8;background:#161d30;padding:7px 9px;border-bottom:1px solid #2c3348}
.prof-tbl th:nth-child(1),.prof-tbl td:nth-child(1),.prof-tbl th:nth-child(2),.prof-tbl td:nth-child(2){width:74px}
.prof-tbl td{font-size:9.5px;font-weight:600;color:#b1b5be;padding:7px 9px;border-bottom:1px solid #1d2436;vertical-align:top;line-height:1.35}
.prof-tbl td:nth-child(3){color:#cdd0d8}
.prof-tbl tr:last-child td{border-bottom:0}
@media(max-width:980px){.prof-call-tbl{width:auto;top:auto}}

/* =====================================================================
   PEP DATA PIPELINE - .seq  (PEP page, ongoing-monitoring section)
   The old graphic was a UML sequence diagram (5 lifelines with labelled
   messages between them). Adapted to a horizontal 5-stage pipeline: the
   messages become the labelled connectors, and the "monitor and update"
   lifeline becomes a dashed return path under the whole row - which is the
   24/7 loop the section headline is actually about.
   Dark section (.dfeat). No box-shadow - see the no-glow rule.
   ===================================================================== */
.seq{display:grid;max-width:1240px;margin:0 auto}
.seq-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr) minmax(0,.5fr)) minmax(0,1fr);align-items:center}
.seq-node{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:14px 12px;text-align:center;min-width:0}
.seq-n{display:block;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--blue-300);margin-bottom:5px}
.seq-node b{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;line-height:1.3;letter-spacing:-.005em}
/* a message = the connector, with its label sitting above the line */
.seq-msg{position:relative;height:1px;background:rgba(217,123,136,.32);margin:0 7px;min-width:0}
.seq-msg:after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:6px solid rgba(217,123,136,.55);border-top:4px solid transparent;border-bottom:4px solid transparent}
.seq-msg span{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:'Inter',sans-serif;font-style:normal;font-size:9px;font-weight:700;color:rgba(255,255,255,.56);line-height:1.35}
/* the continuous return path */
.seq-loop{display:grid;gap:7px;margin-top:34px}
.seq-loop span{font-family:'Inter',sans-serif;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-300);text-align:center}
.seq-loop i{position:relative;display:block;height:0;border-top:1px dashed rgba(217,123,136,.45)}
.seq-loop i:before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);border-right:6px solid rgba(217,123,136,.55);border-top:4px solid transparent;border-bottom:4px solid transparent}
/* the published outcome */
.seq-out{justify-self:end;margin-top:20px;background:rgba(213,111,124,.12);border:1px solid rgba(217,123,136,.32);border-radius:10px;padding:12px 18px}
.seq-out b{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#fff;line-height:1.3}

/* 4-up delivery cards, for when .deliv-grid runs full width */
.deliv-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px}
@media(max-width:1000px){.deliv-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.deliv-grid-4{grid-template-columns:1fr}}
.seq-cta{display:flex;justify-content:center;margin-top:38px}

@media(max-width:1100px){
  /* stack it: each message becomes a centred caption with a down arrow */
  .seq-row{grid-template-columns:minmax(0,1fr);width:100%;max-width:420px;margin:0 auto}
  .seq-msg{height:auto;background:none;margin:0;padding:10px 0}
  .seq-msg:after{display:none}
  .seq-msg span{position:static;bottom:auto;display:block}
  .seq-msg span:after{content:'';display:block;width:0;margin:7px auto 0;border-top:6px solid rgba(217,123,136,.5);border-left:5px solid transparent;border-right:5px solid transparent}
  .seq-loop{width:100%;max-width:420px;margin:26px auto 0}
  .seq-out{justify-self:center;text-align:center}
}

/* =====================================================================
   .cap-stage - the homepage RiskSecure 360 dashboard mock reused inside a
   LIGHT .cap-sec (fraud page). The mock itself is unchanged; only the frame
   treatment differs, because .df-a/.df-b give it a heavy dark drop shadow that
   is wrong on a light background. Width-capped so the four panels keep roughly
   the proportions they have on the homepage instead of stretching to 1360px.
   ===================================================================== */
/* One shared copy+visual split. .dfeat-grid.split-match opts a dark dfeat
   section into the exact same geometry as the light .cap-split sections.
   minmax(0,...) keeps the tracks strictly proportional - a bare 1fr lets a wide
   mock inflate its own track and squeeze the copy. */
.cap-split,
.dfeat-grid.split-match{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(34px,4.2vw,64px);align-items:center}
@media(max-width:1160px){
  .cap-split,
  .dfeat-grid.split-match{grid-template-columns:minmax(0,1fr);gap:38px}
  .cap-stage{width:100%;max-width:900px;margin-inline:auto}
}
.cap-copy{min-width:0}
.cap-copy h2{color:var(--ink);margin:0 0 16px}
.cap-copy p{font-family:'Cabin',sans-serif;font-size:16.5px;line-height:1.75;color:var(--zinc-600);margin:0 0 28px}
.cap-stage{min-width:0}
.cap-sec .app-frame{height:auto;border-color:rgba(175,60,69,.14);box-shadow:0 4px 22px rgba(175,60,69,.07)}
.cap-sec .app-body{flex:none;overflow:visible}


/* =====================================================================
   FRAUD ALERT MOCK - .alrt  (fraud hero, right column)
   Deliberately NOT another dashboard: this page already has the RiskSecure
   CENTRAL KPI stage (.cap-stage) and the rules panel (.rule-panel), so the hero
   shows the thing those two produce - a single alert, why it fired, and the
   decision. Reuses .app-frame chrome, .chip.chip-r and .ams-chip.
   All content illustrative; entity name matches the homepage mock.
   ===================================================================== */
.alrt{font-family:'Inter',sans-serif;color:#e2e4eb;display:grid;grid-template-columns:minmax(0,1fr);gap:13px}
.alrt>*{min-width:0}
.hero-art .app-body:has(.alrt){padding:18px}
.alrt-top{display:flex;align-items:center;gap:9px}
.alrt-top>b{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:800;color:#edeff4}
.alrt-time{font-size:10.5px;font-weight:600;color:#9096a3}
.alrt-top .ams-chip{margin-left:auto}
.alrt-hd b{display:block;font-family:'Inter',sans-serif;font-size:17.5px;font-weight:800;color:#edeff4;line-height:1.26;letter-spacing:-.018em}
.alrt-hd span{display:block;margin-top:4px;font-size:11px;font-weight:600;color:#9096a3}
.alrt-set{border:1px solid #1d2436;border-radius:10px;padding:14px 15px}
.alrt-lab{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9096a3;margin-bottom:10px}
.alrt-sig{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.alrt-sig li{position:relative;padding-left:21px;font-family:'Cabin',sans-serif;font-size:12.5px;line-height:1.45;color:#b1b5be}
.alrt-sig li:before{content:'';position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:2px;background:rgba(193,73,83,.14);border:1px solid rgba(193,73,83,.42)}
.alrt-rows{display:grid;gap:8px}
.alrt-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;font-size:12.5px;line-height:1.45}
.alrt-row span{color:#9096a3;font-weight:600}
.alrt-row b{color:#cdd0d8;font-weight:600}
.alrt-act{display:flex;gap:9px;padding-top:13px;border-top:1px solid #1d2436}
.alrt-btn{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:800;line-height:1.2;border-radius:6px;padding:10px 16px;background:#121828;border:1px solid #242938;color:#b1b5be}
.alrt-btn-p{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:460px){.alrt-row{grid-template-columns:70px minmax(0,1fr);gap:8px}}



/* =====================================================================
   COMFORT SCORE PANEL - .cmf  (third-party COMFORT section)
   Reuses .score-dial / .score-ring from the pipeline diagram, so the dial is
   the same component the adverse-media page uses. Light section (.cap-sec).
   ===================================================================== */
.cmf{font-family:'Inter',sans-serif;display:grid;gap:14px}
.cmf-dial{display:flex;align-items:center;gap:18px}
.cmf .score-dial{flex:none}
.cmf .score-n{color:var(--blue)}
.cmf .score-ring .t{stroke:rgba(175,60,69,.14)}
.cmf .score-ring .v{stroke:var(--blue);stroke-dasharray:214 289;opacity:1}
.cmf-meta b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.012em}
.cmf-meta span{display:block;margin-top:4px;font-size:11.5px;font-weight:600;color:#9096a3}
.cmf-rows{display:grid;gap:8px;border-top:1px solid #1d2436;padding-top:14px}
.cmf-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;font-size:12.5px;line-height:1.45}
.cmf-row span{color:#9096a3;font-weight:600}
.cmf-row b{color:var(--ink);font-weight:700}
.cmf-foot{border-top:1px solid #1d2436;padding-top:12px;font-family:'Cabin',sans-serif;font-size:11px;line-height:1.5;color:#9096a3}

/* --- GIIP consolidated-sources list (GIIP hero, inside .prof) --- */
.gid-src{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.gid-src li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:9px;align-items:baseline;font-size:11px;line-height:1.45}
.gid-src li:before{content:'\2713';font-size:9px;font-weight:800;color:#16a34a;line-height:1.6}
.gid-src b{font-weight:600;color:#cdd0d8;min-width:0}
.gid-src span{font-weight:600;color:#9096a3;white-space:nowrap}
.ams-chip.c-green{background:#16a34a;color:#fff}

/* =====================================================================
   KYCopilot REPORT BUILDER - .kyl  (KYCopilot hero)
   Recreation of the live app's two-panel "Company Lookup + Essential EDD"
   screen. Kept LIGHT like every other hero mock rather than the app's purple,
   so all the heroes read as one system.
   ===================================================================== */
.kyl{font-family:'Inter',sans-serif;color:#e2e4eb;display:grid;gap:13px}
.kyl-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:11px}
@media(max-width:520px){.kyl-cols{grid-template-columns:1fr}}
.kyl-panel{border:1px solid #1d2436;border-radius:9px;padding:13px 14px;display:grid;gap:10px;align-content:start;min-width:0}
.kyl-h{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9096a3}
.kyl-fld span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9096a3;margin-bottom:5px}
.kyl-fld b{display:block;font-size:11.5px;font-weight:600;color:#cdd0d8;background:#10172a;border:1px solid #242938;border-radius:5px;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kyl-fld b.sel:after{content:'\25BE';float:right;color:#9096a3;font-size:9px}
.kyl-opts{display:grid;gap:8px}
.kyl-opt{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#8b8e94}
.kyl-opt i{flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid #333b52;display:grid;place-items:center}
.kyl-opt.on{color:var(--ink);font-weight:700}
.kyl-opt.on i{border-color:var(--blue)}
.kyl-opt.on i:after{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue)}
.kyl-meta{border-top:1px solid #1d2436;padding-top:9px;display:grid;gap:5px}
.kyl-meta div{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;line-height:1.4}
.kyl-meta span{color:#9096a3;font-weight:600}
.kyl-meta b{color:#cdd0d8;font-weight:700}
.kyl-inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
@media(max-width:520px){.kyl-inc{grid-template-columns:1fr}}
.kyl-inc li{position:relative;padding-left:18px;font-family:'Cabin',sans-serif;font-size:11px;line-height:1.4;color:#b1b5be}
.kyl-inc li:before{content:'\2713';position:absolute;left:0;top:0;font-size:9.5px;font-weight:800;color:#16a34a}
.kyl-act{display:flex;justify-content:flex-end;border-top:1px solid #1d2436;padding-top:12px}

/* --- eKYC onboarding dashboard (eKYC hero) - reuses the .mock donut atoms --- */
.ekyc{display:grid;gap:11px}
.ekyc .mock{box-shadow:none;border:1px solid #1d2436;padding:13px 14px}
.ekyc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ekyc-tile{background:#10172a;border:1px solid #1d2436;border-radius:8px;padding:9px 10px}
.ekyc-tile span{display:block;font-family:'Inter',sans-serif;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9096a3;line-height:1.3}
.ekyc-tile b{display:block;font-family:'Inter',sans-serif;font-size:15px;font-weight:800;color:#f1f3f7;margin-top:3px}
.ekyc-tile b.ok{color:#16a34a}
/* green severity chip - completes the .chip-r / .chip-a pair */
.chip-g{background:rgba(22,163,74,.14);color:#15803d}


/* =====================================================================
   PLATFORM ARCHITECTURE - .arch  (RiskSecure 360, page 1186)
   Recreation of the old site's hexagon architecture graphic. The hexagons are
   rendered as the theme's rounded panels instead - the information (three
   tiers, what sits inside the platform, what it talks to) is what carries the
   meaning, and rounded panels keep it in the site's visual language.
   5 columns: tier | connector | core tier | connector | tier.
   ===================================================================== */
.arch-sec{background:linear-gradient(158deg,#08283a,#111c3b 55%,#0b1224);color:#fff;padding:clamp(72px,9vw,110px) 0}
.arch-sec .center h2{color:#fff}
.arch-sec .center p{color:rgba(255,255,255,.66)}
.arch-sec .center .eyebrow{color:var(--blue-300)}
.arch{display:grid;grid-template-columns:1fr 46px 1.08fr 46px 1fr;grid-template-rows:34px minmax(0,1fr);align-items:stretch;max-width:1240px;margin:0 auto}
.arch-cap{display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-300);text-align:center;line-height:1.2}
.arch-gap{display:block}
.arch-col{display:grid;gap:12px;align-content:start;min-width:0}
.arch-ents{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.arch-ent{display:grid;justify-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 8px;text-align:center}
.arch-ent svg{width:20px;height:20px;color:var(--blue-300)}
.arch-ent b{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;color:#fff;line-height:1.25}
.arch-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:15px;display:grid;gap:9px;min-width:0}
.arch-core{background:rgba(213,111,124,.11);border-color:rgba(217,123,136,.34)}
.arch-h{display:block;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center}
.arch-core .arch-h{color:var(--blue-300)}
.arch-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:9px;padding:11px 13px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.35;text-align:center;min-width:0}
.arch-core .arch-item{background:rgba(255,255,255,.07);border-color:rgba(217,123,136,.24)}
.arch-item.hot{background:rgba(196,81,91,.14);border-color:rgba(196,81,91,.4)}
.arch-link{align-self:center;height:1px;background:rgba(217,123,136,.3);position:relative;margin:0 8px}
.arch-link:after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:6px solid rgba(217,123,136,.5);border-top:4px solid transparent;border-bottom:4px solid transparent}
.arch-link.two:before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);border-right:6px solid rgba(217,123,136,.5);border-top:4px solid transparent;border-bottom:4px solid transparent}

@media(max-width:1080px){
  .arch{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:14px;max-width:520px}
  .arch-cap{justify-content:flex-start;margin-top:14px}
  .arch-cap:first-child{margin-top:0}
  .arch-gap,.arch-link{display:none}
}

/* =====================================================================
   ASSOCIATION MAP - .asc  (I2G COMFORT section)
   The old graphic fanned lines from a matched article out to the entity types
   it extracted. Deliberately LABELLED, unlike the decorative node graph the
   user had removed from the adverse-media Sources card - here the nodes carry
   the meaning (what I2G pulls out of one article).
   ===================================================================== */
.asc{display:grid;grid-template-columns:auto 78px minmax(0,1fr);align-items:center;gap:0}
.asc-sub{background:#10172a;border:1px solid #242938;border-radius:9px;padding:12px 13px;max-width:168px}
.asc-sub b{display:block;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:800;color:var(--ink);line-height:1.3}
.asc-sub span{display:block;margin-top:4px;font-size:9.5px;font-weight:600;color:#9096a3;line-height:1.4}
.asc-fan{position:relative;height:100%;min-height:150px}
.asc-fan svg{position:absolute;inset:0;width:100%;height:100%}
.asc-fan path{fill:none;stroke:rgba(175,60,69,.28);stroke-width:1}
.asc-out{display:grid;gap:7px}
.asc-node{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;background:var(--paper);border:1px solid #242938;border-radius:7px;padding:8px 11px}
.asc-node i{width:7px;height:7px;border-radius:2px;flex:none}
.asc-node b{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:#cdd0d8;min-width:0}
.asc-node em{font-style:normal;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;color:#9096a3}
@media(max-width:560px){
  .asc{grid-template-columns:minmax(0,1fr);gap:12px}
  .asc-sub{max-width:none}
  .asc-fan{display:none}
}

/* --- KYCopilot credit ledger (.crd) - replaces the old isometric credit art
   with something that actually shows how pay-as-you-go behaves --- */
.crd{font-family:'Inter',sans-serif;display:grid;gap:14px}
.crd-bal{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.crd-bal>div span{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9096a3;margin-bottom:6px}
.crd-bal b{font-size:38px;font-weight:200;line-height:1;color:var(--blue);letter-spacing:-.02em}
.crd-bal b em{font-style:normal;font-size:11px;font-weight:700;color:#9096a3;margin-left:7px}
.crd-h{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9096a3;margin-bottom:4px}
.crd-rows{display:grid;border-top:1px solid #1d2436}
.crd-row{display:grid;grid-template-columns:minmax(0,1fr) auto 58px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #1d2436;font-size:11.5px;line-height:1.4}
.crd-row:last-child{border-bottom:0}
.crd-row b{font-weight:600;color:#cdd0d8;min-width:0}
.crd-row i{font-style:normal;font-weight:800;color:#C14953}
.crd-row i.up{color:#16a34a}
.crd-row span{font-weight:600;color:#9096a3;font-size:10.5px;text-align:right}
.crd-foot{border-top:1px solid #1d2436;padding-top:12px;font-family:'Cabin',sans-serif;font-size:11px;line-height:1.5;color:#9096a3}

/* =====================================================================
   SHARED APP TABLE - .tbl  (eKYC feature mocks)
   One table component for the roles/matrix/score-band screens the eKYC page
   needs, rather than three near-identical bespoke ones.
   .app-frame.fit opts a mock out of style.css's 483px pin WITHOUT touching the
   existing rule-panel mocks that depend on it.
   ===================================================================== */
.app-frame.fit{height:auto}
.app-frame.fit .app-body{flex:none;overflow:visible}
.tbl{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;table-layout:fixed}
.tbl th{font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;text-align:left;color:#9096a3;padding:0 8px 8px;border-bottom:1px solid #1d2436}
.tbl td{font-size:11px;font-weight:600;color:#cdd0d8;padding:8px;border-bottom:1px solid #1d2436;line-height:1.35;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .c{text-align:center}
.tbl .yes{color:#16a34a;font-weight:800}
.tbl .no{color:#cdd2da;font-weight:800}
.tbl-pill{display:inline-block;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;border-radius:3px;padding:3px 7px;line-height:1.3}
.p-hi{background:rgba(193,73,83,.14);color:#C14953}
.p-md{background:rgba(240,180,41,.18);color:#a16207}
.p-lo{background:rgba(22,163,74,.14);color:#15803d}
.tbl tr.sel td{background:rgba(175,60,69,.05)}
.tbl-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:#edeff4;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #1d2436}
.tbl-h .mk-pill{margin-left:auto}
.tbl-foot{border-top:1px solid #1d2436;margin-top:10px;padding-top:10px;font-family:'Cabin',sans-serif;font-size:10.5px;color:#9096a3}
/* a document-style preview for the compliance report screen */
.doc{font-family:'Inter',sans-serif}
.doc-top{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:2px solid var(--blue);margin-bottom:12px}
.doc-top b{font-size:13px;font-weight:800;color:#edeff4;line-height:1.3}
.doc-top span{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9096a3;white-space:nowrap}
.doc-rows{display:grid;gap:7px;margin-bottom:12px}
.doc-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;font-size:11px;line-height:1.4}
.doc-row span{color:#9096a3;font-weight:600}
.doc-row b{color:#cdd0d8;font-weight:600}

/* --- risk grading panel (.grd) - RiskSecure 360 "risk grading engine" --- */
.grd{font-family:'Inter',sans-serif;display:grid;gap:12px}
.grd-top{display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid #1d2436}
.grd-top b{font-size:13.5px;font-weight:800;color:#edeff4;letter-spacing:-.012em}
.grd-score{margin-left:auto;display:flex;align-items:baseline;gap:6px}
.grd-score b{font-size:24px;font-weight:200;color:#C14953;line-height:1}
.grd-rows{display:grid;gap:0}
.grd-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 46px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #1d2436;font-size:11.5px;line-height:1.35}
.grd-row:last-child{border-bottom:0}
.grd-row>span{color:#b1b5be;font-weight:600;min-width:0}
.grd-row em{font-style:normal;text-align:right;font-weight:800;font-size:10.5px}
.grd-w{display:flex;align-items:center;gap:5px}
.grd-w i{flex:1;height:4px;border-radius:2px;background:#161d30;position:relative;overflow:hidden}
.grd-w i b{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:2px}
.grd-w span{font-size:9.5px;font-weight:700;color:#9096a3;min-width:10px;text-align:right}

/* =====================================================================
   LEGAL DOCUMENTS - .lgl  (page-legal.php: privacy, terms, notices)
   Long-form legal text. Priorities are a comfortable reading measure, a clear
   heading hierarchy and generous spacing - NOT decoration. The contents list
   is a static overview (not links), matching the article template.
   ===================================================================== */
.lgl-hero{background:linear-gradient(158deg,#070b17,#111c3b 55%,#0b1224);color:#fff;padding:clamp(64px,7vw,96px) 0 clamp(40px,4.5vw,60px)}
.lgl-hero h1{font-family:'Inter',sans-serif;font-size:clamp(2.1rem,4vw,3.1rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:#fff;margin:12px 0 14px}
.lgl-hero .eyebrow{color:var(--blue-300)}
.lgl-meta{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);margin:0}
.lgl-main{background:var(--paper);padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,110px)}
.lgl-grid{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
@media(max-width:940px){.lgl-grid{grid-template-columns:minmax(0,1fr)}}

.lgl-toc{background:var(--bg-light);border:1px solid rgba(175,60,69,.12);border-radius:14px;padding:20px 20px 16px}
.lgl-toc-h{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.lgl-toc ol{list-style:none;margin:0;padding:0;counter-reset:lgl;display:grid;gap:1px}
.lgl-toc li{counter-increment:lgl}
.lgl-toc li>span{display:flex;gap:10px;padding:7px 0;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.45;color:var(--zinc-600);border-top:1px solid var(--zinc-200)}
.lgl-toc li:first-child>span{border-top:0}
.lgl-toc li>span:before{content:counter(lgl,decimal-leading-zero);flex:none;font-size:9.5px;font-weight:800;color:var(--blue-300);padding-top:2px}
.lgl-help{margin-top:18px;padding:16px 18px;border:1px solid rgba(175,60,69,.12);border-radius:12px}
.lgl-help span{display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:5px}
.lgl-help a{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--blue);word-break:break-word}

/* the document itself - these pages share ONE scale with each other. It is
   deliberately tighter than .art-body: legal documents are long and dense, and
   the article's reading size makes them unwieldy. */
.lgl-body{min-width:0;max-width:78ch;font-family:'Cabin',sans-serif;font-size:16px;line-height:1.8;color:var(--zinc-700)}
.lgl-body h2{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.35;color:var(--ink);margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--zinc-200)}
.lgl-body>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.lgl-body h3{font-family:'Inter',sans-serif;font-size:15.5px;font-weight:700;line-height:1.4;color:var(--ink);margin:28px 0 10px}
.lgl-body p{margin:0 0 16px}
.lgl-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.lgl-body a:hover{color:var(--accent)}
.lgl-body ul,.lgl-body ol{margin:0 0 18px;padding-left:22px;list-style:revert}
.lgl-body li{margin-bottom:8px;line-height:1.75;padding-left:0;position:static}
.lgl-body ul>li:before{content:none}
.lgl-body strong{color:var(--ink);font-weight:700}
.lgl-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.lgl-body th,.lgl-body td{border:1px solid var(--zinc-200);padding:10px 12px;text-align:left;vertical-align:top}
.lgl-body th{background:var(--bg-light);font-family:'Inter',sans-serif;font-weight:700;color:var(--ink)}
.lgl-toc li>span:before{content:counter(lgl,decimal-leading-zero);flex:none;font-size:9.5px;font-weight:800;color:var(--blue-300);padding-top:2px}
@media(max-width:600px){.lgl-body{font-size:15.5px}}
/* hero audit log: the Model column is the first to go on narrow screens */
@media(max-width:460px){.tbl-audit th:nth-child(3),.tbl-audit td:nth-child(3){display:none}}


/* copy-column corrections. Two mock/homepage components got reused inside
   copy columns, where their sizing is wrong:
   - .kyl-inc is an in-mock checklist (11px). As page copy it must read at
     body size.
   - .cta-points is the homepage CTA row (centred, divider above). As a button
     row in a copy column it must sit flush left with no divider. */
.cap-copy .kyl-inc,.dfeat-copy .kyl-inc{gap:10px 20px}
.cap-copy .kyl-inc li,.dfeat-copy .kyl-inc li{font-size:15.5px;line-height:1.6;padding-left:24px}
.cap-copy .kyl-inc li:before,.dfeat-copy .kyl-inc li:before{font-size:12px;top:2px}
.dfeat-copy .kyl-inc li{color:rgba(255,255,255,.72)}
.dfeat-copy .kyl-inc li:before{color:#7bc47f}
.cap-copy .cta-points,.dfeat-copy .cta-points{justify-content:flex-start;gap:14px;margin:0;padding:0;border-top:0}
/* a .cap-split copy column inside a DARK .cat-sec: the light-section colours
   (ink heading, zinc text) are illegible there */
.cat-sec .cap-copy h2{color:#fff}
.cat-sec .cap-copy p{color:rgba(255,255,255,.66)}
.cat-sec .cap-copy .kyl-inc li{color:rgba(255,255,255,.78)}
.cat-sec .cap-copy .kyl-inc li:before{color:#7bc47f}




/* =====================================================================
   FEATURE TABS - .ftab  (eKYC key features)
   A mini nav of headings; the chosen feature renders below as a copy+mock
   split. Not an accordion: exactly one panel is always visible. Driven by
   hidden radios (native keyboard support), no JS.
   ===================================================================== */
.ftab-r{position:absolute;opacity:0;pointer-events:none}
.ftab-nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:7px}
.ftab-nav label{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;line-height:1.25;color:var(--zinc-600);background:var(--paper);border:1px solid rgba(175,60,69,.16);border-radius:999px;padding:9px 13px;transition:border-color .16s,color .16s,background .16s}
.ftab-nav label:hover{border-color:rgba(175,60,69,.4);color:var(--ink)}
.ftab-nav label i{font-style:normal;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--blue)}
.ftab-panes{margin-top:26px}
.ftab-pane{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:clamp(28px,4vw,58px);align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:clamp(24px,3.6vw,52px)}
.ftab-copy .catg-ico{margin-bottom:18px}
.ftab-copy h3{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.018em;line-height:1.25;color:var(--ink);margin:0 0 14px}
.ftab-copy p{font-family:'Cabin',sans-serif;font-size:16.5px;line-height:1.75;color:var(--zinc-600);margin:0}
.ftab-mock{min-width:0}
@media(max-width:1020px){.ftab-pane{grid-template-columns:minmax(0,1fr);gap:24px;padding:20px}}
/* active tab + visible pane, one rule pair per feature */
#ekyc-ft1:checked ~ .ftab-nav label[for=ekyc-ft1],
#ekyc-ft2:checked ~ .ftab-nav label[for=ekyc-ft2],
#ekyc-ft3:checked ~ .ftab-nav label[for=ekyc-ft3],
#ekyc-ft4:checked ~ .ftab-nav label[for=ekyc-ft4],
#ekyc-ft5:checked ~ .ftab-nav label[for=ekyc-ft5]{background:var(--blue);border-color:var(--blue);color:#fff}
#ekyc-ft1:checked ~ .ftab-nav label[for=ekyc-ft1] i,
#ekyc-ft2:checked ~ .ftab-nav label[for=ekyc-ft2] i,
#ekyc-ft3:checked ~ .ftab-nav label[for=ekyc-ft3] i,
#ekyc-ft4:checked ~ .ftab-nav label[for=ekyc-ft4] i,
#ekyc-ft5:checked ~ .ftab-nav label[for=ekyc-ft5] i{color:rgba(255,255,255,.72)}
#ekyc-ft1:checked ~ .ftab-panes .ftab-pane:nth-child(1),
#ekyc-ft2:checked ~ .ftab-panes .ftab-pane:nth-child(2),
#ekyc-ft3:checked ~ .ftab-panes .ftab-pane:nth-child(3),
#ekyc-ft4:checked ~ .ftab-panes .ftab-pane:nth-child(4),
#ekyc-ft5:checked ~ .ftab-panes .ftab-pane:nth-child(5){display:grid}
/* .ftab on the dark .cat-sec gradient (eKYC): translucent pills, the active
   one flips to solid white so it cannot blend with the background */
.cat-sec .ftab-nav label{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.cat-sec .ftab-nav label:hover{border-color:rgba(255,255,255,.5);color:#fff}
.cat-sec .ftab-nav label i{color:var(--blue-300)}
.cat-sec #ekyc-ft1:checked ~ .ftab-nav label[for=ekyc-ft1],
.cat-sec #ekyc-ft2:checked ~ .ftab-nav label[for=ekyc-ft2],
.cat-sec #ekyc-ft3:checked ~ .ftab-nav label[for=ekyc-ft3],
.cat-sec #ekyc-ft4:checked ~ .ftab-nav label[for=ekyc-ft4],
.cat-sec #ekyc-ft5:checked ~ .ftab-nav label[for=ekyc-ft5]{background:var(--paper);border-color:#fff;color:var(--ink)}
.cat-sec #ekyc-ft1:checked ~ .ftab-nav label[for=ekyc-ft1] i,
.cat-sec #ekyc-ft2:checked ~ .ftab-nav label[for=ekyc-ft2] i,
.cat-sec #ekyc-ft3:checked ~ .ftab-nav label[for=ekyc-ft3] i,
.cat-sec #ekyc-ft4:checked ~ .ftab-nav label[for=ekyc-ft4] i,
.cat-sec #ekyc-ft5:checked ~ .ftab-nav label[for=ekyc-ft5] i{color:var(--blue)}
.cat-sec .ftab-copy .eyebrow{color:var(--blue-300)}
.cat-sec .ftab-copy h3{color:#fff}
.cat-sec .ftab-copy p{color:rgba(255,255,255,.72)}
/* equal-height mocks across the five tabs: the tallest (compliance report)
   measures 409px at the pane width, so the rest are brought up to it with
   min-height (never clips if content grows) and centre their content in the
   extra room. Desktop only - stacked mobile panes size naturally. */
.ftab-mock .app-frame{display:flex;flex-direction:column}
.ftab-pane .ftab-mock .app-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.ftab-pane .ftab-mock .kyl{flex:1 1 auto;align-content:space-between}
.ftab-pane .ftab-mock .doc{flex:1 1 auto;display:grid;align-content:space-between}
@media(min-width:1021px){.ftab-mock .app-frame{min-height:412px}}

/* ---- search results (search.php) ---- */
.search-refine{max-width:560px;margin-top:22px}
.search-refine .nga-search input[type=search]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#fff}
.search-refine .nga-search input[type=search]::placeholder{color:rgba(255,255,255,.5)}
.search-none{max-width:620px;margin:20px auto 40px;background:var(--paper);border:1px solid rgba(175,60,69,.12);border-radius:16px;padding:clamp(28px,4vw,44px);text-align:center}
.search-none h2{font-family:'Inter',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.search-none p{font-family:'Cabin',sans-serif;font-size:15.5px;line-height:1.7;color:var(--zinc-600);margin:0 0 20px}
.search-none .nga-search{justify-content:center}
.search-none .nga-search input[type=search]{flex:1 1 240px;max-width:320px}
.search-none-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
/* ══ SITE MOTION 2026-08-12 — page components, heroes' mocks, diagrams ══
   Scroll-driven states are gated on .reveal (added by nga.js) so no-JS
   renders fully visible; the whole block honours reduced motion. */
@media(prefers-reduced-motion:no-preference){
@keyframes pgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* — hero product mocks build in on load, row by row — */
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*{opacity:0;animation:pgIn .65s cubic-bezier(.22,1,.36,1) forwards;animation-delay:.6s}
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*:nth-child(2){animation-delay:.72s}
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*:nth-child(3){animation-delay:.84s}
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*:nth-child(4){animation-delay:.96s}
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*:nth-child(5){animation-delay:1.08s}
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*:nth-child(6){animation-delay:1.2s}
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*:nth-child(7){animation-delay:1.32s}
.hero-art :is(.ams,.amx,.prof,.alrt,.kyl,.ekyc,.srch)>*:nth-child(n+8){animation-delay:1.44s}
/* the sanctions/PEP overhang callout arrives last */
.hero-art .prof-call{opacity:0;animation:pgIn .7s cubic-bezier(.22,1,.36,1) 1.5s forwards}
/* — diagram sections cascade when scrolled into view — */
:is(.pipe,.jny,.seq,.arch).reveal>*{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*{opacity:1;transform:none}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(2){transition-delay:.07s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(3){transition-delay:.14s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(4){transition-delay:.21s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(5){transition-delay:.28s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(6){transition-delay:.35s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(7){transition-delay:.42s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(8){transition-delay:.49s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(9){transition-delay:.56s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(10){transition-delay:.63s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(11){transition-delay:.7s}
:is(.pipe,.jny,.seq,.arch).reveal.in-view>*:nth-child(n+12){transition-delay:.77s}
/* — in-page mock rows cascade inside a revealed visual column — */
:is(.dfeat-visual,.cap-split>*).reveal :is(.src-row,.ams-bar,.prof-row,.alrt-sig){opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.22,1,.36,1) .2s,transform .5s cubic-bezier(.22,1,.36,1) .2s}
:is(.dfeat-visual,.cap-split>*).reveal.in-view :is(.src-row,.ams-bar,.prof-row,.alrt-sig){opacity:1;transform:none}
:is(.dfeat-visual,.cap-split>*).reveal.in-view :is(.src-row,.ams-bar,.prof-row,.alrt-sig):nth-child(2){transition-delay:.27s}
:is(.dfeat-visual,.cap-split>*).reveal.in-view :is(.src-row,.ams-bar,.prof-row,.alrt-sig):nth-child(3){transition-delay:.34s}
:is(.dfeat-visual,.cap-split>*).reveal.in-view :is(.src-row,.ams-bar,.prof-row,.alrt-sig):nth-child(4){transition-delay:.41s}
:is(.dfeat-visual,.cap-split>*).reveal.in-view :is(.src-row,.ams-bar,.prof-row,.alrt-sig):nth-child(5){transition-delay:.48s}
:is(.dfeat-visual,.cap-split>*).reveal.in-view :is(.src-row,.ams-bar,.prof-row,.alrt-sig):nth-child(6){transition-delay:.55s}
:is(.dfeat-visual,.cap-split>*).reveal.in-view :is(.src-row,.ams-bar,.prof-row,.alrt-sig):nth-child(n+7){transition-delay:.62s}
}
/* ── Whitepapers & Case Studies library + case-study promo ── */
.wcs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.wcs-type{display:inline-block;font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.wcs-res{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wcs-res>div{background:var(--paper);border:1px solid rgba(175,60,69,.16);border-radius:3px;padding:20px 18px;box-shadow:0 4px 22px rgba(175,60,69,.07)}
.wcs-res b{display:block;font-family:Inter,sans-serif;font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--blue);line-height:1;margin-bottom:8px}
.wcs-res span{font-size:13px;line-height:1.45;color:#b1b5be}
@media(max-width:520px){.wcs-res{grid-template-columns:1fr}}
/* ── case-study section v2: document cover + inline facts + pdf button ── */
.wcs-facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin:18px 0 8px}
.wcs-facts span{font-size:14px;color:#b1b5be;white-space:nowrap}
.wcs-facts b{font-family:Inter,sans-serif;font-weight:800;color:var(--blue);font-size:17px;margin-right:4px}
.wcs-doc{display:flex;justify-content:center;align-items:center}
.wcs-doc img{width:min(100%,360px);height:auto;border:1px solid rgba(175,60,69,.18);border-radius:10px;box-shadow:0 12px 34px rgba(175,60,69,.14);transform:rotate(1.5deg)}
.btn-ico{width:17px;height:17px;flex:none}
@media(max-width:1160px){.wcs-doc{margin-top:26px}.wcs-doc img{width:min(100%,300px)}}
/* ── case-study band v3: hero gradient (no texture), horizontal banner ── */
.wcs-band{background:linear-gradient(97deg,#070b17 0%,#090e1e 15%,#0b1327 33%,#0e1730 50%,#111c3a 66%,#142144 83%,#17264f 100%);padding:clamp(52px,6vw,80px) 0}
.wcs-band-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,60px);align-items:center}
.wcs-band-cover{width:190px;height:auto;border-radius:8px;border:1px solid rgba(255,255,255,.28);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.wcs-band-copy .eyebrow{color:#d97b88}
.wcs-band-copy h2{font-family:Inter,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.22;color:#fff;margin:10px 0 10px}
.wcs-band-copy p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 6px;max-width:560px}
.wcs-band .wcs-facts{margin:12px 0 0}
.wcs-band .wcs-facts span{color:rgba(255,255,255,.72)}
.wcs-band .wcs-facts b{color:#d97b88}
.wcs-band-cta{white-space:nowrap}
@media(max-width:1080px){
.wcs-band-grid{grid-template-columns:1fr;justify-items:flex-start;gap:24px}
.wcs-band-cover{width:150px}
.wcs-band-cta{white-space:normal}
}
/* ── whitepapers library: featured document card ── */
.wcs-feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;background:var(--paper);border:1px solid rgba(175,60,69,.14);border-radius:20px;padding:clamp(26px,3.5vw,46px);box-shadow:0 4px 22px rgba(175,60,69,.07);max-width:1080px;margin:0 auto}
.wcs-feat-cover img{width:clamp(180px,17vw,236px);height:auto;border-radius:8px;border:1px solid rgba(175,60,69,.16);box-shadow:0 10px 28px rgba(175,60,69,.12);display:block;transition:transform .25s ease}
.wcs-feat-cover:hover img{transform:translateY(-4px)}
.wcs-feat-body h3{font-family:Inter,sans-serif;font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px;line-height:1.25}
.wcs-feat-body>p{font-size:15.5px;line-height:1.65;color:#b1b5be;margin:0 0 6px;max-width:640px}
.wcs-feat .wcs-facts{margin:14px 0 22px}
.wcs-feat-cta{margin:0}
@media(max-width:760px){.wcs-feat{grid-template-columns:1fr;justify-items:flex-start}.wcs-feat-cover img{width:170px}}
/* ── whitepapers library: 3-up document card grid ── */
.wcs-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.wcs-card{background:var(--paper);border:1px solid #333b52;border-radius:20px;overflow:hidden;box-shadow:0 14px 30px -6px rgba(175,60,69,.22);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.wcs-card:hover{box-shadow:0 20px 38px -8px rgba(175,60,69,.26)}
.wcs-card:hover{transform:translateY(-4px)}
.wcs-card-cover{display:block;height:216px;overflow:hidden;border-bottom:1px solid rgba(175,60,69,.1);border-radius:19px 19px 0 0}
.wcs-card-cover img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.wcs-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;align-items:flex-start}
.wcs-card-body h3{font-family:Inter,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--ink);margin:0 0 8px}
.wcs-card-body p{font-size:13.5px;line-height:1.6;color:#b1b5be;margin:0 0 18px}
.wcs-card-btn{margin-top:auto;padding:11px 18px;font-size:13px}
@media(max-width:1020px){.wcs-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.wcs-grid3{grid-template-columns:1fr}}
/* ── whitepapers library: grid texture + stacked-paper cards ── */
.wcs-sec{background-image:linear-gradient(rgba(175,60,69,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(175,60,69,.055) 1px,transparent 1px);background-size:56px 56px}
.wcs-card{position:relative;overflow:visible;z-index:1}
.wcs-card:before{content:"";position:absolute;top:16px;left:16px;right:-14px;bottom:-14px;background:#1b2338;border:1px solid #2c3348;border-radius:20px;z-index:-1}
.wcs-card-cover{border-radius:19px 19px 0 0}
.wcs-card-body{background:var(--paper);border-radius:0 0 19px 19px}
/* ── FAQ page: grouped editorial accordion ── */
.faqx-sec{background-image:linear-gradient(rgba(175,60,69,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(175,60,69,.055) 1px,transparent 1px);background-size:56px 56px}
.faqx-sec .wrap{display:flex;flex-direction:column;gap:clamp(48px,6vw,84px)}
.faqx-group{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(30px,4vw,64px);align-items:start;min-height:330px}
.faqx-head{position:static}
.faqx-head .eyebrow{color:var(--accent)}
.faqx-head h2{font-family:Inter,sans-serif;font-weight:200;letter-spacing:-.02em;font-size:clamp(1.75rem,3.5vw,2.75rem);line-height:1.1;color:var(--ink);margin:8px 0 10px}
.faqx-head h2 b{font-weight:800}
.faqx-head p{font-size:14.5px;line-height:1.6;color:#8b8e94;margin:0;max-width:340px}
.faqx-list{display:flex;flex-direction:column;gap:12px}
.faqx{background:var(--paper);border:1px solid rgba(175,60,69,.16);border-radius:12px;overflow:hidden;transition:border-color .2s ease}
.faqx[open]{border-color:rgba(175,60,69,.34)}
.faqx summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:16px 20px;font-family:Inter,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.4}
.faqx summary::-webkit-details-marker{display:none}
.faqx summary:hover{color:var(--blue)}
.faqx summary i{flex:none;width:22px;height:22px;position:relative;border:1px solid rgba(175,60,69,.3);border-radius:50%;transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s ease,border-color .2s ease}
.faqx summary i:before,.faqx summary i:after{content:"";position:absolute;background:var(--blue);top:50%;left:50%}
.faqx summary i:before{width:10px;height:1.6px;transform:translate(-50%,-50%)}
.faqx summary i:after{width:1.6px;height:10px;transform:translate(-50%,-50%)}
.faqx[open] summary i{transform:rotate(45deg);background:var(--accent);border-color:var(--accent)}
.faqx[open] summary i:before,.faqx[open] summary i:after{background:var(--paper)}
.faqx-a{padding:2px 20px 20px}
.faqx-a p{font-size:14.5px;line-height:1.72;color:#b1b5be;margin:0 0 10px}
.faqx-a p:last-child{margin-bottom:0}
@media(max-width:960px){
.faqx-group{grid-template-columns:1fr;gap:18px;min-height:0}
}

/* ══ GLOSSARY (page /glossary/) 2026-08-19 ═════════════════════════════
   Sibling to the FAQ layout: thematic groups, sticky left topic header,
   right column of open (non-accordion — SEO) term entries. Every term
   carries an id, so #pep deep links work via the global anchor handler. */
.glo-sec{padding:clamp(46px,5.5vw,74px) 0 clamp(56px,6.5vw,90px)}
.glo-group{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--zinc-200)}
.glo-group:first-child{border-top:0;padding-top:0}
.glo-head{position:sticky;top:104px;align-self:start}
.glo-head .eyebrow{color:var(--blue-400)}
.glo-head h2{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(1.35rem,2.2vw,1.7rem);letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:6px 0 10px}
.glo-head p{font-family:'Cabin',sans-serif;font-size:15px;line-height:1.65;color:var(--zinc-500);margin:0;max-width:34ch}
.glo-list{min-width:0}
.glo-item{padding:20px 0;border-top:1px solid var(--zinc-200)}
.glo-item:first-child{border-top:0;padding-top:4px}
.glo-item h3{font-family:'Inter',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.glo-item h3 i{font-style:normal;font-weight:600;font-size:14px;color:var(--zinc-500)}
.glo-item p{font-family:'Cabin',sans-serif;font-size:15.5px;line-height:1.7;color:var(--zinc-600);margin:0}
.glo-rel{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(175,60,69,.3);padding-bottom:1px}
.glo-rel:hover{color:var(--accent);border-bottom-color:rgba(196,81,91,.5)}
@media(max-width:960px){
  .glo-group{grid-template-columns:minmax(0,1fr);gap:18px;padding:30px 0}
  .glo-head{position:static}
  .glo-head p{max-width:none}
}

/* ============================================================
   T12 SECTION-VARIETY PASS (2026-08-31) — utilities used to
   de-duplicate same-layout sections flagged by the audit.
   ============================================================ */

/* ruled contiguous grid (dark passages) — replaces a floating-card
   grid where a page carried two of the same */
.rgrid{display:grid;gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:3px;overflow:hidden}
.rgrid>*{background:#070b16;padding:26px 28px;min-width:0;display:block;text-decoration:none}
.rgrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
a.rg-cell{transition:background .2s ease}
a.rg-cell:hover{background:#0c1326}
.rg-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.rg-top b{font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;color:#fff;letter-spacing:-.01em;line-height:1.3}
.rg-top span{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;color:rgba(217,123,136,.55);flex:none}
.rgrid p{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.62;color:#b1b5be;margin:0}
.rg-go{display:inline-block;margin-top:14px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:800;color:#d97b88}
@media(max-width:1100px){.rgrid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rgrid-4{grid-template-columns:1fr}}

/* PEP newsbreak timeline (1172): "searchable within 12 hours" told
   as a timeline instead of a second 2-card grid */
.pep12-lead{max-width:760px;margin:0 auto;text-align:center;font-family:'Cabin',sans-serif;font-size:1.0625rem;line-height:1.7;color:rgba(231,233,237,.7)}
.pep12{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:48px;padding-top:34px}
.pep12::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(213,111,124,.12),rgba(213,111,124,.55),rgba(213,111,124,.12))}
.pep12>div{position:relative;min-width:0}
.pep12>div::before{content:'';position:absolute;top:-37px;left:0;width:7px;height:7px;border-radius:50%;background:#d56f7c}
.pep12 i{display:inline-block;font-style:normal;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d97b88;margin-bottom:10px}
.pep12 h3{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;color:#fff;margin:0 0 8px;letter-spacing:-.01em}
.pep12 p{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.62;color:rgba(231,233,237,.66);margin:0}
@media(max-width:760px){
  .pep12{grid-template-columns:1fr;gap:26px;padding-top:0}
  .pep12::before,.pep12>div::before{display:none}
}

/* flipped copy/visual split (visual leads on desktop, copy leads stacked) */
@media(max-width:1160px){.cap-split.cap-flip>*:first-child{order:2}}

/* WCS page on light (2026-09-01): grid overlay + no offset boxes behind the cards */
.wcs-sec.lite::before{background-image:linear-gradient(rgba(175,60,69,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(175,60,69,.055) 1px,transparent 1px);background-size:52px 52px}
.wcs-sec.lite .wcs-card:before{display:none}
.wcs-sec.lite .wcs-card{border-color:rgba(175,60,69,.16);box-shadow:0 12px 28px -12px rgba(11,19,39,.12)}
.wcs-sec.lite .wcs-card:hover{box-shadow:0 18px 34px -12px rgba(11,19,39,.16)}
.wcs-sec.lite .wcs-card-body p{color:#545659}
.wcs-sec.lite .wcs-card-cover{border-bottom-color:rgba(175,60,69,.12)}
/* ============================================================
   APX (2026-09-07) - /apis/ page 1191: KYCopilot API endpoint
   reference (dark) + API security (lite), ported from
   kycopilot-nextjs app/api-access.
   ============================================================ */
.apx-sec .center h2{color:#fff}
.apx-sec .center p{color:rgba(231,233,237,.62)}
.apx-sec .eyebrow{color:#d97b88}
.apx-sec .kyclogo{margin:0 auto 18px}
.apx-group{margin:0 0 46px}
.apx-group:last-child{margin-bottom:0}
.apx-ghead{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.apx-gico{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(213,111,124,.12);border:1px solid rgba(213,111,124,.28);color:#d56f7c}
.apx-gico svg{width:17px;height:17px}
.apx-ghead span{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#d97b88;white-space:nowrap}
.apx-ghead em{flex:1;height:1px;background:rgba(213,111,124,.18)}
.apx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.apx-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:22px 24px}
.apx-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.apx-m{flex:none;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;font-weight:700;letter-spacing:.1em;padding:2px 9px;border-radius:3px}
.apx-post{color:#d97b88;background:rgba(213,111,124,.1);border:1px solid rgba(213,111,124,.3)}
.apx-get{color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3)}
.apx-meta span{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:#edeff4}
.apx-card code{display:block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11.5px;color:rgba(217,123,136,.65);margin-bottom:12px;word-break:break-all;line-height:1.5}
.apx-card p{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.65;color:rgba(231,233,237,.55);margin:0}
/* -- security section (lite) -- */
.apxs-sec{padding:clamp(64px,8vw,104px) 0}
.apxs-token{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;max-width:720px;margin:0 auto 52px;background:#070b16;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 24px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:13px}
.apxs-token .t1{color:rgba(231,233,237,.4)}
.apxs-token .t2{color:#68a2f6}
.apxs-token b{color:#4ade80;font-weight:700}
.apxs-token .t3{color:rgba(255,255,255,.2);letter-spacing:.04em;word-break:break-all}
.apxs-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.32);border-radius:3px;padding:3px 10px;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4ade80}
.apxs-badge i{width:6px;height:6px;border-radius:50%;background:#4ade80}
@media(prefers-reduced-motion:no-preference){.apxs-badge i{animation:apxsPulse 2s ease-in-out infinite}@keyframes apxsPulse{0%,100%{opacity:1}50%{opacity:.45}}}
.apxs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.apxs-card{--axc:177,105,255;background:#fff;border:1px solid rgba(var(--axc),.25);border-radius:18px;padding:26px;box-shadow:none}
.apxs-card.ax-green{--axc:34,170,90}
.apxs-card.ax-blue{--axc:37,99,235}
.apxs-card.ax-amber{--axc:180,120,10}
.apxs-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(var(--axc),.1);border:1px solid rgba(var(--axc),.25);color:rgb(var(--axc));margin-bottom:16px}
.apxs-ico svg{width:21px;height:21px}
.apxs-card h3{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:#18181b;margin:0 0 8px}
.apxs-card p{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.65;color:#545659;margin:0 0 16px}
.apxs-tags{display:flex;gap:6px;flex-wrap:wrap}
.apxs-tags span{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--axc));background:rgba(var(--axc),.07);border:1px solid rgba(var(--axc),.22);border-radius:3px;padding:3px 9px}
@media(max-width:1100px){.apx-grid,.apxs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media(max-width:640px){.apx-grid,.apxs-grid{grid-template-columns:1fr}}\n@media(max-width:560px){.apxs-token{font-size:11.5px;padding:14px 16px}}
/* KYB pipe: low-risk score variant (red box is the adverse-media default; severity colours are semantic) */
.score-box.sb-low{background:linear-gradient(150deg,#2f855a,#1f5c40)}

/* GIIP df-c: deliv cards as a full-width row under the copy/mock split */
.dfeat-grid .deliv-row4{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
@media(max-width:1100px){.dfeat-grid .deliv-row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.dfeat-grid .deliv-row4{grid-template-columns:1fr}}

/* ams movement: green variant for improving/positive movement */
.ams-stat b.gd{color:#7bc47f}

/* ============================================================
   INDH (2026-09-07) - industry-page photo heroes: the article
   hero's masked-photo treatment with the KYCopilot industry art.
   Images are already brand-graded purple, so no grayscale, and
   the tint eases to .5.
   ============================================================ */
.hero.indh{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(400px,40vw,540px)}
.hero.indh .wrap{position:relative;z-index:3;width:100%}
.hero.indh .art-hero-img{filter:brightness(1.18)}
.hero.indh .art-hero-tint{opacity:.35}
/* narrower copy than articles - pull the reveal in and let it reach full opacity sooner */
.hero.indh .art-hero-media{--art-text-end:calc(max(0px,(100% - var(--maxw)) / 2) + 24px + 660px);-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent var(--art-text-end),rgba(0,0,0,.25) calc(var(--art-text-end) + 130px),rgba(0,0,0,.55) calc(var(--art-text-end) + 300px),rgba(0,0,0,.85) calc(var(--art-text-end) + 520px),#000 100%);mask-image:linear-gradient(90deg,transparent 0,transparent var(--art-text-end),rgba(0,0,0,.25) calc(var(--art-text-end) + 130px),rgba(0,0,0,.55) calc(var(--art-text-end) + 300px),rgba(0,0,0,.85) calc(var(--art-text-end) + 520px),#000 100%)}
/* legal reading surface on light (2026-09-10) - matches the article surface's 52px grid */
.lgl-main.lite::before{background-image:linear-gradient(rgba(175,60,69,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(175,60,69,.05) 1px,transparent 1px);background-size:52px 52px}
.lgl-main.lite .lgl-toc li>span:before{color:#be424d}