/* ============================================================
   FLOW LAYER — homepage pilot (2026-08-24)
   One continuous dark canvas; sections dissolve into passages.
   References: Supabase (canvas + bento cards), Oxide (hairlines,
   technical calm), Mintlify (soft violet atmosphere).
   Scoped to body.home (front page only). Loads after style.css
   and pages.css, so equal-specificity rules here win by order.
   No coloured glows — ambient radial FIELDS on the canvas are
   background atmosphere, never element box-shadows.
   ============================================================ */

/* ---------- 1. Canvas ---------- */
body.home{background:#060a15}
body.home .hero{
  background:
    radial-gradient(1100px 560px at 74% -18%, rgba(194,76,86,.34), transparent 65%),
    radial-gradient(760px 420px at 4% 108%, rgba(104,162,246,.10), transparent 65%) !important;
}

/* ---------- 2. Header: dark glass ---------- */
body.home .site-header{background:rgba(6,10,21,.72);backdrop-filter:saturate(140%) blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
body.home ul.nav-menu>li>a{color:rgba(231,233,237,.82)}
body.home ul.nav-menu>li>a:hover{color:#fff}
body.home .nav-right .login{color:rgba(231,233,237,.85);border-color:rgba(255,255,255,.22)}
body.home ul.sub-menu{background:#0e1322;border:1px solid rgba(255,255,255,.1)}
body.home ul.sub-menu li a{color:rgba(231,233,237,.78)}
body.home ul.sub-menu li a:hover{color:#d97b88}

/* ---------- 3. Sections dissolve onto the canvas ---------- */
body.home .logo-strip-section{background:#f5f7fc;border-top:1px solid rgba(213,111,124,.1);border-bottom:1px solid rgba(213,111,124,.1)}
body.home .tp-sec,
body.home .stat-sec,
body.home .cta-sec{background:transparent}
body.home .ngx-meter-sec{background:radial-gradient(900px 480px at 50% 20%, rgba(175,60,69,.16), transparent 70%)}
body.home .dfeat.df-a,
body.home .dfeat.df-b,
body.home .dfeat.df-c{background:transparent !important}
body.home .dfeat.df-a{background:radial-gradient(820px 480px at 92% 12%, rgba(175,60,69,.14), transparent 68%) !important}
body.home .dfeat.df-b{background:radial-gradient(820px 460px at 0% 50%, rgba(175,60,69,.13), transparent 68%) !important}
body.home .ngx-shard-sec{background:transparent;border-bottom:0}
body.home .spotlight{background:transparent !important}
body.home .site-footer{background:#060a15 !important;border-top:1px solid rgba(255,255,255,.07)}

/* previously light sections -> dark passages */
body.home .ngx-diff-sec{background:transparent}
body.home .sol-sec-light{background:radial-gradient(880px 500px at 88% 0%, rgba(175,60,69,.12), transparent 68%)}
body.home .ngx-fica-sec{background:transparent;border-top:0}
body.home .api-sec{background:transparent}

/* ---------- 4. Uniform passage voice ---------- */
body.home .eyebrow{color:#d97b88 !important}
body.home .center h2,
body.home .sol-head h2,
body.home .api-copy h2,
body.home .ngx-fica-sec .cap-copy h2{color:#fff}
body.home .center p,
body.home .sol-head p,
body.home .api-copy p,
body.home .ngx-fica-sec .cap-copy p{color:rgba(231,233,237,.62)}
body.home .ngx-fica-pts li{color:rgba(231,233,237,.72)}
body.home .ngx-fica-sec .fca-priv{color:rgba(231,233,237,.5)}
body.home .ngx-fica-sec .fca-priv svg{color:rgba(231,233,237,.5)}

/* ---------- 5. Logo strip: monochrome on canvas ----------
   brightness(0) invert(1) = white silhouette; perfect for text marks but
   solid-glyph logos (Standard Bank shield, Shoprite box) turn into blobs.
   Those two use grayscale+invert instead, which keeps internal detail. */
body.home .logo-strip-label{color:#646871}
body.home .logo-strip-row img{filter:none;opacity:1;transition:opacity .25s}
body.home .logo-strip-row img:hover{opacity:1;filter:none}
body.home .logo-strip-row img[src*="standard-bank"],
body.home .logo-strip-row img[src*="Shoprite"]{filter:none}
body.home .logo-strip-row img[src*="standard-bank"]:hover,
body.home .logo-strip-row img[src*="Shoprite"]:hover{filter:none}

/* ---------- 6. Diff ledger: dark cards ---------- */
body.home .ngx-diff-head span{color:rgba(231,233,237,.4)}
body.home .ngx-diff-head span:last-child{color:#d97b88}
body.home .ngx-old{background:rgba(255,255,255,.035);color:rgba(231,233,237,.55);border:1px solid rgba(255,255,255,.07)}
body.home .ngx-new{background:rgba(213,111,124,.07);color:#edeff4;border:1px solid rgba(213,111,124,.2);border-left:3px solid #d56f7c;box-shadow:none}

/* ---------- 7. Bento cards (solutions / api / spotlight) ---------- */
body.home .sol-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);box-shadow:none}
body.home .sol-card:hover{border-color:rgba(213,111,124,.42);box-shadow:none}
body.home .sol-card h4{color:#e2e3e5}
body.home .sol-card p{color:rgba(231,233,237,.55)}
body.home .ico{background:rgba(213,111,124,.12);color:#d97b88}
body.home .more{color:#d97b88}
body.home .api-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);box-shadow:none}
body.home .api-card:hover{border-color:rgba(213,111,124,.42);box-shadow:none}
body.home .api-card h4{color:#e2e3e5}
body.home .api-card p{color:rgba(231,233,237,.55)}
body.home .spotlight .post{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);box-shadow:none}
body.home .spotlight .post:hover{border-color:rgba(213,111,124,.42);box-shadow:none}
body.home .spotlight .post h4{color:#edeff4}
body.home .spotlight .post p{color:rgba(231,233,237,.55)}
body.home .spotlight .post .k{background:rgba(213,111,124,.14);color:#d97b88}
body.home .spotlight .post .meta,
body.home .spotlight .post time{color:rgba(231,233,237,.45)}
body.home .post-more{color:#d97b88}

/* ---------- 8. FICA teaser card: dark screen ---------- */
body.home .ngx-fica-card{background:#10172a;border:1px solid rgba(255,255,255,.1);box-shadow:none}
body.home .ngx-fica-top{background:rgba(213,111,124,.1)}
body.home .ngx-fica-top span{color:#d97b88}
body.home .ngx-fica-top i{background:rgba(255,255,255,.1);color:#e2e3e5}
body.home .ngx-fica-ring:after{background:#10172a}
body.home .ngx-fica-ring b{color:#fff}
body.home .ngx-fica-ring em{color:rgba(231,233,237,.45)}
body.home .ngx-fica-row{border:1px solid rgba(255,255,255,.1)}
body.home .ngx-fica-row b{color:rgba(231,233,237,.8)}
body.home .ngx-fq-prog{background:rgba(255,255,255,.1)}
body.home .ngx-fq-prog span{background:#d56f7c}
body.home .ngx-fq-q b{color:#fff}
body.home .ngx-fq-opt{color:rgba(231,233,237,.7)}
body.home .ngx-fq-opt:before{background:rgba(213,111,124,.1)}
body.home .ngx-fq-mark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
body.home .ngx-fq-opt{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#c7cad0}
body.home .ngx-fq-opt:before{background:rgba(213,111,124,.13);border-color:#d56f7c}

/* ---------- 9. Dark terminal mocks ---------- */
body.home .app-frame{background:#090d18;border:1px solid rgba(255,255,255,.1)}
body.home .app-body{background:transparent}
body.home .app-bar{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
body.home .app-title{color:#c7cad0}
body.home .app-url{background:transparent;border:1px solid rgba(255,255,255,.12);color:#91949a}
body.home .mock,
body.home .app-body .mock{background:#0e1322;border:1px solid rgba(255,255,255,.08);color:#c7cad0;box-shadow:none !important}
body.home .mk-head{color:#e2e3e5;border-bottom-color:rgba(255,255,255,.08)}
body.home .mk-row{color:#b1b5be;border-bottom-color:rgba(255,255,255,.05)}
body.home .mk-row b{color:#fff}
body.home .mk-row .dim{color:#8d93a0}
body.home .mk-row .ok{color:#4ade80}
body.home .mk-pill{background:rgba(154,178,206,.15);color:#a6bbd4}
body.home .mk-legend{color:#a1a4aa}
body.home .mk-legend .lg b{color:#e2e3e5}
body.home .mk-sub,body.home .mk-right{color:#8b8e94}
body.home .mk-foot{color:#9096a3;border-top-color:rgba(255,255,255,.06)}
body.home .mk-tabs{color:#9096a3}
body.home .mk-tabs .on,body.home .mk-tabs.stat .on{color:#a6bbd4;border-bottom-color:#a6bbd4}
body.home .mk-ranges span{color:#8b8e94;border-color:rgba(255,255,255,.14)}
body.home .rng-note{color:#8d93a0 !important}
body.home .track{background:rgba(255,255,255,.09)}
body.home .bar-row label{color:#a1a4aa}
body.home .bar-row b{color:#e2e3e5}
body.home .vals b{color:#d4d6db}
body.home .tgl{background:rgba(255,255,255,.16)}
body.home .dn-val,body.home .dn-val .swap b,body.home .mk-donut b{color:#fff}
body.home .mk-donut{-webkit-mask:radial-gradient(circle at 50% 50%,transparent 26px,#000 27px);mask:radial-gradient(circle at 50% 50%,transparent 26px,#000 27px)}
body.home .i2g-body .mock-article{background:#0e1322;border-color:rgba(255,255,255,.08);border-left:3px solid var(--accent)}
body.home .art-head{color:#edeff4}
body.home .art-src{color:#d97b88}
body.home .art-snip{color:#b1b5be}
body.home .art-snip mark{background:rgba(213,111,124,.24);color:#edeff4}
body.home .art-snip mark.mk-red{background:rgba(193,73,83,.3);color:#f2dfe1}
body.home .kyc-ent b{color:#fff}
body.home .kyc-ent>div:first-child span{color:#8b8e94}
body.home .kyc-slab{color:#8b8e94}
body.home .kyc-gen{color:#a1a4aa;border-top-color:rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.08)}
body.home .kyc-gen em{color:#d4d6db}
body.home .kyc-tier{color:#8b8e94;border-color:rgba(255,255,255,.16)}

/* ---------- 9b. Industries shards: restore the dark-glass treatment
   (the site-wide "white open card" override reads as a slab here) ---------- */
body.home .ngx-shard{background:rgba(255,255,255,.045)}
body.home .ngx-shard.on{background:rgba(255,255,255,.06);border-color:rgba(217,123,136,.5)}
body.home .ngx-swm{color:#d97b88}
body.home .ngx-sico{background:rgba(213,111,124,.14);border-color:rgba(217,123,136,.32);color:#d97b88}
body.home .ngx-skicker{color:#d97b88}
body.home .ngx-sbody h3{color:#fff}
body.home .ngx-sbody p{color:rgba(255,255,255,.82)}
body.home .ngx-stags i{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22);background:transparent}
body.home .ngx-smore{border-color:rgba(255,255,255,.28);color:#fff}
body.home .ngx-smore:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff}

/* ---------- 9c. Per-card accent hues (KYCopilot bento language) ----------
   Icon tile + read-more + hover border carry the hue; text stays neutral.
   Severity meanings unaffected (these are decorative card accents). */
body.home .sol-grid .sol-card:nth-child(6n+1) .sol-ico{background:rgba(74,222,128,.1);color:#4ade80}
body.home .sol-grid .sol-card:nth-child(6n+1) .more{color:#4ade80}
body.home .sol-grid .sol-card:nth-child(6n+1):hover{border-color:rgba(74,222,128,.45)}
body.home .sol-grid .sol-card:nth-child(6n+2) .sol-ico{background:rgba(213,111,124,.12);color:#d97b88}
body.home .sol-grid .sol-card:nth-child(6n+2) .more{color:#d97b88}
body.home .sol-grid .sol-card:nth-child(6n+2):hover{border-color:rgba(213,111,124,.45)}
body.home .sol-grid .sol-card:nth-child(6n+3) .sol-ico{background:rgba(251,191,36,.1);color:#fbbf24}
body.home .sol-grid .sol-card:nth-child(6n+3) .more{color:#fbbf24}
body.home .sol-grid .sol-card:nth-child(6n+3):hover{border-color:rgba(251,191,36,.4)}
body.home .sol-grid .sol-card:nth-child(6n+4) .sol-ico{background:rgba(104,162,246,.1);color:#68a2f6}
body.home .sol-grid .sol-card:nth-child(6n+4) .more{color:#68a2f6}
body.home .sol-grid .sol-card:nth-child(6n+4):hover{border-color:rgba(104,162,246,.45)}
body.home .sol-grid .sol-card:nth-child(6n+5) .sol-ico{background:rgba(219,131,143,.12);color:#db838f}
body.home .sol-grid .sol-card:nth-child(6n+5) .more{color:#db838f}
body.home .sol-grid .sol-card:nth-child(6n+5):hover{border-color:rgba(219,131,143,.45)}
body.home .sol-grid .sol-card:nth-child(6n+6) .sol-ico{background:rgba(34,211,238,.1);color:#22d3ee}
body.home .sol-grid .sol-card:nth-child(6n+6) .more{color:#22d3ee}
body.home .sol-grid .sol-card:nth-child(6n+6):hover{border-color:rgba(34,211,238,.4)}
body.home .api-cards .api-card:nth-child(odd) .sol-ico{background:rgba(104,162,246,.1);color:#68a2f6}
body.home .api-cards .api-card:nth-child(even) .sol-ico{background:rgba(74,222,128,.1);color:#4ade80}
body.home .tp-proof>div:nth-child(1) .tp-ico{background:rgba(213,111,124,.12);color:#d97b88}
body.home .tp-proof>div:nth-child(2) .tp-ico{background:rgba(74,222,128,.1);color:#4ade80}
body.home .tp-proof>div:nth-child(3) .tp-ico{background:rgba(104,162,246,.1);color:#68a2f6}
body.home .tp-proof>div:nth-child(4) .tp-ico{background:rgba(251,191,36,.1);color:#fbbf24}

/* ---------- 10. Flow details ---------- */
body.home .hero .hero-anim{background:transparent;box-shadow:none}
body.home .blog-hero{border:0}

/* ============================================================
   11. OXIDE PASS — line architecture + exploded mocks
   Guide lines break the uniform canvas: fixed side rails at the
   container edges, hairline rules on every passage, centred
   drop-lines leading the eye down, ruled contiguous grids.
   ============================================================ */

/* 11a. Vertical side rails at the container edges (var(--maxw)) */
@media(min-width:1100px){
  body.home::before,body.home::after{content:'';position:fixed;top:0;bottom:0;width:1px;background:rgba(255,255,255,.055);z-index:1;pointer-events:none}
  body.home::before{left:calc(50% - var(--maxw)/2)}
  body.home::after{left:calc(50% + var(--maxw)/2)}
}

/* 11b. Hairline rules at passage boundaries (document feel) */
body.home .tp-sec,
body.home .ngx-diff-sec,
body.home .dfeat.df-a,
body.home .dfeat.df-b,
body.home .dfeat.df-c,
body.home .sol-sec-light,
body.home .ngx-fica-sec,
body.home .api-sec,
body.home .ngx-meter-sec,
body.home .stat-sec,
body.home .ngx-shard-sec,
body.home .spotlight,
body.home .cta-sec{border-top:1px solid rgba(255,255,255,.055)}
/* the dfeat shimmer hairlines would double up with the border rules */
body.home .dfeat.df-a:before,
body.home .dfeat.df-b:before,
body.home .dfeat.df-c:before{display:none}

/* 11c. Centred guide lines leading down the page */
body.home .tp-sec::after,
body.home .ngx-diff-sec::after,
body.home .dfeat.df-a::after,
body.home .dfeat.df-c::after,
body.home .api-sec::after,
body.home .stat-sec::after{content:'';display:block;position:absolute;inset:auto;left:50%;bottom:0;width:1px;height:72px;background:linear-gradient(180deg,transparent,rgba(217,123,136,.45));pointer-events:none}
body.home .tp-sec,body.home .ngx-diff-sec,body.home .api-sec,body.home .stat-sec{position:relative}

/* 11d. Solutions bento -> contiguous ruled grid */
body.home .sol-grid{gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09)}
body.home .sol-grid .sol-card{border:0;border-radius:0;background:#070b16;box-shadow:none}
body.home .sol-grid .sol-card:hover{transform:none;background:#0d1324;border:0}
/* per-hue hover borders would break the ruled grid — hue lives in tile/link */
body.home .sol-grid .sol-card:nth-child(6n+1):hover,
body.home .sol-grid .sol-card:nth-child(6n+2):hover,
body.home .sol-grid .sol-card:nth-child(6n+3):hover,
body.home .sol-grid .sol-card:nth-child(6n+4):hover,
body.home .sol-grid .sol-card:nth-child(6n+5):hover,
body.home .sol-grid .sol-card:nth-child(6n+6):hover{border:0}

/* 11e. Why-NGA proof strip: ruled dividers between the four items */
body.home .tp-grid .tp-proof>div{border-left:1px solid rgba(255,255,255,.08);padding-left:22px}
body.home .tp-grid .tp-proof>div:first-child{border-left:0;padding-left:0}

/* 11f. Mono annotation voice (Oxide technical labels) */
body.home .eyebrow{font-family:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,monospace;font-weight:600}
body.home .logo-strip-label{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace}

/* 11g. EXPLODED MOCKS — RiskSecure (df-a) and I2G (df-b) lose their
   window chrome; inner panels float as numbered fragments. KYCopilot
   (df-c) keeps its window for contrast. */
body.home .df-a .app-frame,
body.home .df-b .app-frame{background:transparent;border:0;overflow:visible}
body.home .df-a .app-bar,
body.home .df-b .app-bar{display:none}
body.home .df-a .app-body,
body.home .df-b .app-body,
body.home .df-b .i2g-body{overflow:visible}
body.home .df-a .app-body.ui-stage{gap:20px;padding:6px 0 0}
body.home .df-a .ui-stage .mock{position:relative;border-radius:3px;overflow:visible}
body.home .df-a .ui-stage .mock::after{position:absolute;top:-9px;left:12px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;font-weight:600;letter-spacing:.14em;color:#a6bbd4;background:#060a15;border:1px solid rgba(166,187,212,.4);border-radius:2px;padding:1px 7px;line-height:1.5}
body.home .df-a .ui-stage .mock:nth-child(1)::after{content:'01'}
body.home .df-a .ui-stage .mock:nth-child(2)::after{content:'02'}
body.home .df-a .ui-stage .mock:nth-child(3)::after{content:'03'}
body.home .df-a .ui-stage .mock:nth-child(4)::after{content:'04'}
body.home .df-b .i2g-body{gap:18px;padding:0}
body.home .df-b .i2g-body .mock-score{border:1px solid rgba(255,255,255,.08) !important;background:#0e1322;border-radius:3px;padding:14px 16px;position:relative}
body.home .df-b .i2g-body .mock-article{margin:0;border-radius:3px;position:relative !important;overflow:visible}
body.home .df-b .i2g-body .mock-score::after{content:'01';position:absolute;top:-9px;left:12px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;font-weight:600;letter-spacing:.14em;color:#a6bbd4;background:#060a15;border:1px solid rgba(166,187,212,.4);border-radius:2px;padding:1px 7px;line-height:1.5}
body.home .df-b .i2g-body .mock-article::after{content:'02';position:absolute;top:-9px;left:12px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;font-weight:600;letter-spacing:.14em;color:#a6bbd4;background:#060a15;border:1px solid rgba(166,187,212,.4);border-radius:2px;padding:1px 7px;line-height:1.5}
/* fragment corners square, in the rectilinear language */
body.home .df-a .ui-stage .mock,
body.home .df-c .app-frame{border-radius:3px}
body.home .df-c .app-body .mock{border-radius:3px}

/* ============================================================
   12. OXIDE DIAGRAM PASS
   ============================================================ */

/* 12a. Chapter numbering — every passage indexed in mono, Oxide-style */
body.home .tp-sec .eyebrow::before{content:'01 / '}
body.home .ngx-diff-sec .eyebrow::before{content:'02 / '}
body.home .df-a .eyebrow::before{content:'05 / '}
body.home .df-b .eyebrow::before{content:'06 / '}
body.home .df-c .eyebrow::before{content:'07 / '}
body.home .sol-sec-light .eyebrow::before{content:'04 / '}
body.home .ngx-fica-sec .eyebrow::before{content:'09 / '}
body.home .api-sec .eyebrow::before{content:'08 / '}
body.home .ngx-meter-sec .eyebrow::before{content:'03 / '}

body.home .ngx-about-sec .eyebrow::before{content:'09 / '}
body.home .ngx-shard-sec .eyebrow::before{content:'10 / '}
body.home .spotlight .eyebrow::before{content:'11 / '}
body.home .eyebrow::before{color:rgba(217,123,136,.55)}

/* 12b. COMFORT meter -> annotated instrument */
body.home .ngx-meter{position:relative}
body.home .ngx-meter::after{content:'';position:absolute;left:0;right:0;top:12px;height:5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5%);pointer-events:none}
body.home .ngx-track{border-radius:2px}
body.home .ngx-ticks{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;letter-spacing:.08em}
body.home .ngx-chip{background:#0e1322;border:1px solid rgba(255,255,255,.14);border-radius:3px}
body.home .ngx-chip b{color:#edeff4}
body.home .ngx-chip em{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;color:#d97b88;border-left-color:rgba(255,255,255,.14)}
body.home .ngx-chip:after{width:0;background:none;border-left:1px dashed rgba(217,123,136,.5);height:30px}
body.home .ngx-cap{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;letter-spacing:.05em}

/* 12c. API topology schematic (line-art wiring under the code frame) */
body.home .api-visual{display:block}
body.home .api-topo{display:grid;grid-template-columns:auto minmax(26px,1fr) auto minmax(26px,1fr) auto;align-items:center;margin-top:24px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace}
body.home .topo-node{border:1px solid rgba(255,255,255,.2);color:#e2e3e5;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:9px 13px;background:#090d18;white-space:nowrap;border-radius:2px}
body.home .topo-core{border-color:rgba(217,123,136,.6);color:#d97b88}
body.home .topo-wire{position:relative;height:1px;background:rgba(255,255,255,.22)}
body.home .topo-wire::after{content:'';position:absolute;right:0;top:-3px;border-left:5px solid rgba(255,255,255,.45);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
body.home .topo-wire i{position:absolute;left:50%;top:-15px;transform:translateX(-50%);font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(231,233,237,.42);background:#060a15;padding:0 6px;white-space:nowrap}
body.home .topo-srcs{display:grid;gap:7px;position:relative;padding-left:16px}
body.home .topo-srcs::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:rgba(255,255,255,.22)}
body.home .topo-srcs span{position:relative;border:1px solid rgba(255,255,255,.13);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#b1b5be;padding:6px 10px;background:#090d18;border-radius:2px;white-space:nowrap}
body.home .topo-srcs span::before{content:'';position:absolute;left:-16px;top:50%;width:16px;height:1px;background:rgba(255,255,255,.22)}
@media(max-width:760px){
  body.home .api-topo{grid-template-columns:1fr;justify-items:start;gap:10px}
  body.home .topo-wire{width:1px;height:18px;margin-left:22px}
  body.home .topo-wire::after{display:none}
  body.home .topo-wire i{display:none}
  body.home .topo-srcs{padding-left:22px}
  body.home .topo-srcs::before{left:6px}
  body.home .topo-srcs span::before{left:-16px;width:16px}
}

/* ============================================================
   13. SECTION REWORK — break the uniform copy|visual split
   ============================================================ */

/* 13a. The NGA Difference -> one ruled comparison table */
body.home .ngx-diff-sec .center{text-align:left;max-width:780px;margin:0 0 8px}
body.home .ngx-diff-sec .center h2,
body.home .ngx-diff-sec .center p{margin-left:0;margin-right:0}
body.home .ngx-diff{max-width:none;counter-reset:dp;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.015)}
body.home .ngx-diff-head{gap:0;margin:0;border-bottom:1px solid rgba(255,255,255,.09)}
body.home .ngx-diff-head span{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.2em;padding:13px 22px}
body.home .ngx-diff-head span:last-child{border-left:1px solid rgba(255,255,255,.09)}
body.home .ngx-pair{gap:0;margin:0;counter-increment:dp;border-top:1px solid rgba(255,255,255,.07)}
body.home .ngx-diff-head+.ngx-pair{border-top:0}
body.home .ngx-old{background:transparent;border:0;border-radius:0;color:rgba(231,233,237,.5);padding:20px 22px 20px 60px;position:relative}
body.home .ngx-old::before{content:counter(dp,decimal-leading-zero);position:absolute;left:22px;top:23px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;letter-spacing:.1em;color:rgba(217,123,136,.5)}
body.home .ngx-new{background:rgba(213,111,124,.05);border:0;border-left:1px solid rgba(255,255,255,.09);border-radius:0;box-shadow:none;position:relative;padding:20px 22px 20px 25px}
body.home .ngx-new::after{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#d56f7c}

/* 13b. RiskSecure -> full-width RULED fragment grid (Supabase bento):
   contiguous 1px rules, equal-height cells, no window, no dead space */
body.home .df-a .app-frame,
body.home .df-b .app-frame{height:auto}
@media(min-width:1150px){
  body.home .df-a .dfeat-grid{display:block}
  body.home .df-a .dfeat-copy{max-width:840px;margin-bottom:48px}
  body.home .df-a .app-body.ui-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);padding:0;align-items:stretch}
  body.home .df-a .ui-stage .mock{height:100%;margin:0;border:0;border-radius:0;background:#070b16;padding:20px 22px}
  body.home .df-a .ui-stage::after{display:none}
  body.home .df-a .ui-stage .mock::after{z-index:2}
}

/* 13c. I2G -> staggered overlapping fragments, scaled up to fill the column */
@media(min-width:700px){
  body.home .df-b .i2g-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0}
  body.home .df-b .i2g-body .mock-score{grid-column:1/13;grid-row:1;z-index:1;padding:22px 24px;max-width:none}
  body.home .df-b .i2g-body .mock-article{grid-column:1/13;grid-row:2;margin-top:16px;z-index:2;padding:18px 20px}
}
@media(min-width:1150px){
  body.home .df-b .dfeat-grid.rev{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}

/* 13d. KYCopilot -> WIDE left-anchored layout: copy block left-aligned,
   large report left, callouts stacked in the right gutter with leader
   lines pointing into the frame */
@media(min-width:1180px){
  body.home .df-c .dfeat-grid{display:block}
  body.home .df-c .dfeat-copy{max-width:800px;margin-bottom:48px}
  body.home .df-c .dfeat-visual{position:relative}
  body.home .df-c .app-frame{max-width:none;margin:0}
  body.home .kyl-notes{display:flex;flex-wrap:wrap;gap:14px 72px;margin-top:24px}
  body.home .kn{position:static;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(231,233,237,.6);line-height:1.7}
  body.home .kn::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#9ab2ce;margin-right:9px;vertical-align:2px}
  body.home .kn::after{content:'';display:inline-block;width:26px;height:1px;background:rgba(166,187,212,.45);margin-left:14px;vertical-align:4px}
  body.home .kn:last-child::after{display:none}
}
@media(max-width:1179px){body.home .kyl-notes{display:none}}

/* 13e. FICA -> horizontal process strip UNDER the copy (the vertical
   middle-column spine read as out of place) */
@media(min-width:1161px){
  body.home .ngx-fica-sec .cap-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0 clamp(34px,4vw,64px);align-items:start}
  body.home .ngx-fica-sec .cap-copy{grid-column:1;grid-row:1}
  body.home .fca-pipe{grid-column:1;grid-row:2;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 0;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.07)}
  body.home .fp-node{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;border:1px solid rgba(255,255,255,.18);border-radius:2px;background:#090d18;color:#c7cad0;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 13px;white-space:nowrap}
  body.home .fp-core{border-color:rgba(217,123,136,.55);color:#d97b88}
  body.home .fp-wire{width:24px;height:0;border-top:1px dashed rgba(217,123,136,.45)}
  body.home .ngx-fica-card{grid-column:2;grid-row:1/3;align-self:stretch}
}
@media(max-width:1160px){body.home .fca-pipe{display:none}}

/* ============================================================
   15. TYPOGRAPHY MATCH — KYCopilot scale (measured from source):
   H2 = Inter 200, clamp(1.75rem,3.5vw,2.75rem), lh 1.1, ls -.02em;
   hero H1 = clamp(2rem,3.8vw,3.5rem), 200 base / 800 gradient line;
   lead copy 17px / 1.7. Bold sub-spans inside headings stay 800.
   ============================================================ */
body.home 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}
body.home h2 b{font-weight:800}
body.home .hero h1{font-size:clamp(2rem,3.8vw,3.5rem);font-weight:200;line-height:1.1;letter-spacing:-.02em}
body.home .hero h1 b{font-weight:800}
body.home .center p,
body.home .sol-head p,
body.home .dfeat-copy>p,
body.home .api-copy>p,
body.home .ngx-fica-sec .cap-copy>p,
body.home .hero .lead{font-size:1.0625rem;line-height:1.7}
/* CTA band keeps its compact title */
body.home .cta h2{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:200}

/* ============================================================
   16. ONE-HUE DIAGRAMS (Oxide reference): every mock goes
   near-monochrome with a single neon accent per panel.
   ============================================================ */

/* 03 fragment 01 — Risk grading: PURPLE */
body.home .df-a .m-grading .sw{background:#9ab2ce !important}

/* 03 fragment 02 — Jurisdiction: BLUE (single-hue donut shades) */
body.home .df-a .m-donut .mk-donut.dn1{background:conic-gradient(#68a2f6 0 64%,rgba(104,162,246,.4) 64% 86%,rgba(255,255,255,.16) 86% 100%)}
body.home .df-a .m-donut .mk-donut.dn2{background:conic-gradient(#68a2f6 0 58%,rgba(104,162,246,.4) 58% 84%,rgba(255,255,255,.16) 84% 100%)}
body.home .df-a .m-donut .mk-legend span:nth-child(1) .sw{background:#68a2f6 !important}
body.home .df-a .m-donut .mk-legend span:nth-child(2) .sw{background:rgba(104,162,246,.45) !important}
body.home .df-a .m-donut .mk-legend span:nth-child(3) .sw{background:rgba(255,255,255,.28) !important}

/* 03 fragment 03 — AML alerts: AMBER */
body.home .df-a .m-alerts .chip{background:rgba(240,180,41,.16) !important;color:#f0b429 !important}
body.home .df-a .m-alerts .chip-a{background:transparent !important;color:rgba(240,180,41,.75) !important;box-shadow:inset 0 0 0 1px rgba(240,180,41,.35)}

/* 03 fragment 04 — Entity dashboard: RED only (gauge goes mono) */
body.home .df-a .m-entity .gauge{background:rgba(255,255,255,.14)}
body.home .df-a .m-entity .mk-row .ok{color:rgba(231,233,237,.75)}

/* 04 I2G: RED */
body.home .df-b .bar-row .bar{background:#c14953 !important}
body.home .df-b .sb-a{background:rgba(193,73,83,.2);color:#e08a92}
body.home .df-b .star{color:rgba(231,233,237,.5)}
body.home .df-b .art-src{color:rgba(231,233,237,.45)}
body.home .df-b .art-tags{color:rgba(231,233,237,.45)}
body.home .df-b .art-snip mark{background:rgba(255,255,255,.14);color:#edeff4}
body.home .df-b .art-snip mark.mk-red{background:rgba(193,73,83,.4);color:#f2dfe1}

/* 05 KYCopilot report: PURPLE */
body.home .df-c .kyc-report .sw{background:#9ab2ce !important}
body.home .df-c .big-score{color:#a6bbd4}
body.home .df-c .kyc-report .ok,
body.home .df-c .kyc-report .mk-row .ok{color:rgba(231,233,237,.75)}

/* ============================================================
   18. LIGHT PASSAGES on the homepage (.lite component fixes)
   ============================================================ */
body.home .lite :is(h2,h3){color:#18181b}
body.home .lite .center p,
body.home .lite .sol-head p,
body.home .lite .api-copy p{color:#545659}

/* comparison table on light */
body.home .lite .ngx-diff{border-color:rgba(175,60,69,.16);background:#fff}
body.home .lite .ngx-diff-head{border-bottom-color:rgba(175,60,69,.12)}
body.home .lite .ngx-diff-head span{color:#737578}
body.home .lite .ngx-diff-head span:last-child{color:#be424d;border-left-color:rgba(175,60,69,.12)}
body.home .lite .ngx-pair{border-top-color:rgba(175,60,69,.08)}
body.home .lite .ngx-old{color:#6b7280}
body.home .lite .ngx-old::before{color:rgba(196,81,91,.6)}
body.home .lite .ngx-new{background:rgba(196,81,91,.05);color:#18181b;border-left-color:rgba(175,60,69,.12)}
body.home .lite .ngx-new::after{background:#c4515b}

/* solutions ruled grid on light */
body.home .lite .sol-grid{background:rgba(175,60,69,.14);border-color:rgba(175,60,69,.14)}
body.home .lite .sol-grid .sol-card{background:#fff}
body.home .lite .sol-grid .sol-card:hover{background:#f6f7fb}
body.home .lite .sol-card h4{color:#18181b}
body.home .lite .sol-card p{color:#545659}
body.home .lite .sol-grid .sol-card:nth-child(6n+1) .more{color:#16a34a}
body.home .lite .sol-grid .sol-card:nth-child(6n+2) .more{color:#be424d}
body.home .lite .sol-grid .sol-card:nth-child(6n+3) .more{color:#b45309}
body.home .lite .sol-grid .sol-card:nth-child(6n+4) .more{color:#2563eb}
body.home .lite .sol-grid .sol-card:nth-child(6n+5) .more{color:#c85f68}
body.home .lite .sol-grid .sol-card:nth-child(6n+6) .more{color:#0e7490}

/* api section on light: cards white, code frame stays dark (contrast) */
body.home .lite .api-card{background:#fff;border:1px solid rgba(175,60,69,.13)}
body.home .lite .api-card:hover{border-color:rgba(196,81,91,.4)}
body.home .lite .api-card h4{color:#18181b}
body.home .lite .api-card p{color:#545659}
body.home .lite .topo-node{background:#fff;border-color:rgba(175,60,69,.3);color:#3f4146}
body.home .lite .topo-core{border-color:#c4515b;color:#be424d}
body.home .lite .topo-wire{background:rgba(175,60,69,.3)}
body.home .lite .topo-wire::after{border-left-color:rgba(175,60,69,.45)}
body.home .lite .topo-wire i{color:#737578;background:#fbfcfe}
body.home .lite .topo-srcs::before{background:rgba(175,60,69,.3)}
body.home .lite .topo-srcs span{background:#fff;border-color:rgba(175,60,69,.2);color:#545659}
body.home .lite .topo-srcs span::before{background:rgba(175,60,69,.3)}

/* spotlight cards on light */
body.home .lite .post{background:#fff;border-color:rgba(175,60,69,.12)}
body.home .lite .post:hover{border-color:rgba(196,81,91,.4)}
body.home .lite .post h4{color:#18181b}
body.home .lite .post p{color:#545659}
body.home .lite .post .meta,body.home .lite .post time{color:#737578}
body.home .lite .post-more{color:#be424d}

/* 07 FICA card: AMBER (ring already amber; dots follow, labels mono) */
body.home .ngx-fica-card .ngx-fica-dot{background:#c9a227 !important}
body.home .ngx-fica-card .ngx-fica-row i{color:rgba(231,233,237,.5) !important}

/* ============================================================
   17. SCALE-UP PASS — larger elements, KYCopilot-style presence
   ============================================================ */

/* 09 COMFORT meter spans the full container; header left-aligned */
body.home .ngx-meter{max-width:none}
body.home .ngx-meter-sec .center{text-align:left;max-width:820px;margin:0}
body.home .ngx-meter-sec .center h2,
body.home .ngx-meter-sec .center p{margin-left:0;margin-right:0}
body.home .ngx-cap{text-align:left}
body.home .ngx-facts{justify-content:flex-start}
body.home .ngx-meter-cta{text-align:left}

/* mock typography scaled up across all homepage diagrams */
body.home .mk-head{font-size:13px}
body.home .mk-row{font-size:12.5px;padding:8px 0}
body.home .mk-row b{font-size:13px}
body.home .mk-legend{font-size:11.5px}
body.home .mk-sub,body.home .mk-right{font-size:11px}
body.home .mk-pill{font-size:10px}
body.home .mk-tabs{font-size:11px}
body.home .mk-ranges span{font-size:10px}
body.home .bar-row label{font-size:11px;flex-basis:126px}
body.home .bar-row b{font-size:11px}
body.home .sb{font-size:12px}
body.home .star{font-size:14px}
body.home .art-head{font-size:13px}
body.home .art-src{font-size:10.5px}
body.home .art-snip{font-size:11.5px}
body.home .art-tags{font-size:9.5px}
body.home .kyc-ent b{font-size:16px}
body.home .kyc-ent>div:first-child span{font-size:11px}
body.home .df-c .big-score{font-size:42px}
body.home .kyc-slab{font-size:9px}
body.home .kyc-gen{font-size:11px}
body.home .kyc-tier{font-size:10px}
body.home .mock .chip,body.home .app-body .chip{font-size:10px !important}
body.home .df-a .donut-stack{width:104px;height:104px}
body.home .df-a .mk-donut-wrap{gap:22px}
body.home .df-a .mk-donut{width:104px;height:104px;-webkit-mask:radial-gradient(circle at 50% 50%,transparent 33px,#000 34px);mask:radial-gradient(circle at 50% 50%,transparent 33px,#000 34px)}
body.home .dn-val,body.home .dn-val .swap b{font-size:15px}
body.home .m-entity .big-score{font-size:50px}

/* ============================================================
   14. REFERENCE-PATTERN PASS (Oxide unified-interface band,
   Oxide CTA band, centred-hero diagram heading)
   ============================================================ */

/* 14a. Why NGA -> heading band + ruled halves (lead | proof 2x2) */
@media(min-width:1150px){
  body.home .tp-sec .tp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
  body.home .tp-sec .tp-left{grid-column:1/-1;border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:34px;margin-bottom:0}
  body.home .tp-sec .tp-right{grid-column:1;padding:40px 48px 8px 0;margin:0}
  body.home .tp-sec .tp-right p{font-size:17px;line-height:1.75;max-width:560px}
  body.home .tp-grid .tp-proof{grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px;border-top:0;border-left:1px solid rgba(255,255,255,.09);padding:40px 0 8px 48px;margin-top:0}
  body.home .tp-grid .tp-proof>div{border-left:0;padding-left:0}
}

/* 14b. (retired — KYCopilot copy is left-aligned again per Round 9) */

/* 14c. Closing CTA -> Oxide band: title left, mono buttons right,
   vertical gridline texture behind */
body.home .cta-sec{background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 56px)}
body.home .cta{background:rgba(7,11,22,.85);border:1px solid rgba(255,255,255,.11);border-radius:3px;box-shadow:none;text-align:left;padding:clamp(30px,4vw,52px)}
body.home .cta:before,body.home .cta-glow{display:none}
body.home .cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:center;text-align:left}
body.home .cta .eyebrow{grid-column:1}
body.home .cta h2{grid-column:1;font-size:clamp(1.5rem,2.3vw,2.1rem);margin:10px 0 0;text-align:left}
body.home .cta p{grid-column:1;color:rgba(231,233,237,.55);margin:8px 0 0;max-width:none}
body.home .cta-actions{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;gap:10px;margin:0;justify-content:center}
body.home .cta-actions .btn{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:13px 24px;border-radius:2px;justify-content:center}
body.home .cta-points{grid-column:1/-1;justify-content:flex-start;border-top:1px solid rgba(255,255,255,.08);margin:26px 0 0;padding-top:20px}
@media(max-width:760px){
  body.home .cta-inner{grid-template-columns:1fr}
  body.home .cta-actions{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;margin-top:20px}
  body.home .cta-points{justify-content:flex-start}
}


/* ============================================================
   18. KYCOPILOT FEATURE PASS (2026-08-25) — two new passages
   under df-c: 06 executive-grade depth (ngx-kyd-sec) and
   07 regulatory coverage wall (ngx-reg-sec). Content sourced
   from the KYCopilot site; chapter numbers 06+ shifted in §12a.
   ============================================================ */

/* passages on the canvas: hairline top, section rhythm */
body.home .ngx-kyd-sec,
body.home .ngx-reg-sec{background:transparent;border-top:1px solid rgba(255,255,255,.055);padding:clamp(64px,7vw,104px) 0;position:relative}
body.home .ngx-reg-sec{background:radial-gradient(820px 460px at 50% -10%, rgba(175,60,69,.13), transparent 68%)}
/* guide line dropping into the regulatory band */
body.home .ngx-kyd-sec::after{content:'';position:absolute;inset:auto;left:50%;bottom:0;width:1px;height:72px;background:linear-gradient(180deg,transparent,rgba(217,123,136,.45));pointer-events:none}

/* 18a. band layout — heading spans the section, then copy | scorecard
   halves with EQUAL heights (a centred floating panel left dead space
   above and below it). display:contents lifts the cap-copy children
   into the grid; ≤1160px pages.css stacks the split as before. */
body.home .ngx-kyd-sec .cap-copy h2{color:#fff}
body.home .ngx-kyd-sec .cap-copy>p{color:rgba(231,233,237,.62);font-size:1.0625rem;line-height:1.7}
body.home .kyd-cta{margin-top:34px}
@media(min-width:1161px){
  body.home .ngx-kyd-sec .cap-split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:clamp(34px,4.2vw,64px);row-gap:0;align-items:start}
  body.home .ngx-kyd-sec .cap-copy{display:contents}
  body.home .ngx-kyd-sec .cap-copy .eyebrow{grid-column:1/-1;grid-row:1}
  body.home .ngx-kyd-sec .cap-copy .kyc-lockup{grid-column:1;grid-row:2}
  body.home .ngx-kyd-sec .cap-copy h2{grid-column:1;grid-row:3;margin:0 0 34px;text-wrap:balance}
  body.home .ngx-kyd-sec .cap-copy>p{grid-column:1;grid-row:4;margin:0}
  body.home .ngx-kyd-sec .kyd-tree{grid-column:1;grid-row:5}
  body.home .ngx-kyd-sec .kyd-cta{grid-column:1;grid-row:6;margin-bottom:0;align-self:end}
  body.home .ngx-kyd-sec .kyd-rag{grid-column:2;grid-row:2/7;align-self:stretch;display:flex;flex-direction:column}
  body.home .ngx-kyd-sec .kyd-rag-grid{flex:1;grid-auto-rows:1fr}
}

/* 18b. depth cascade — each investigation level steps in under the last */
body.home .kyd-tree{margin-top:34px}
body.home .kyd-tree>div{position:relative;padding:10px 0;font-family:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,monospace}
body.home .kyd-tree>div b{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(231,233,237,.72)}
body.home .kyd-tree>div em{font-style:normal;font-size:10.5px;letter-spacing:.05em;color:rgba(231,233,237,.4);margin-left:14px}
body.home .kyd-tree>div:nth-child(2){margin-left:26px}
body.home .kyd-tree>div:nth-child(3){margin-left:52px}
body.home .kyd-tree>div:nth-child(4){margin-left:78px}
body.home .kyd-tree>div+div::before{content:'';position:absolute;left:-16px;top:-16px;width:11px;height:34px;border-left:1px solid rgba(217,123,136,.45);border-bottom:1px solid rgba(217,123,136,.45)}
body.home .kyd-tree>div:last-child b{color:#d97b88}

/* 18c. RAG scorecard — ruled dimension grid, severity colours only */
body.home .kyd-rag{background:#090d18;border:1px solid rgba(255,255,255,.1);border-radius:3px;position:relative}
body.home .kyd-rag::after{content:'EDD';position:absolute;top:-9px;left:12px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;font-weight:600;letter-spacing:.14em;color:#d97b88;background:#060a15;border:1px solid rgba(217,123,136,.4);border-radius:2px;padding:1px 7px;line-height:1.5}
body.home .kyd-rag-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.08);color:#e2e3e5;font-weight:700;font-size:15px}
body.home .kyd-rag-head span{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(231,233,237,.42)}
body.home .kyd-rag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.07)}
body.home .kyd-cell{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#090d18;padding:18px 24px;font-size:15px;color:#b1b5be}
body.home .kyd-sev{flex:none;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;border-radius:2px;padding:3px 10px}
body.home .kyd-sev.r{color:#e08a92;background:rgba(193,73,83,.16)}
body.home .kyd-sev.a{color:rgba(240,180,41,.85);background:transparent;box-shadow:inset 0 0 0 1px rgba(240,180,41,.35)}
body.home .kyd-sev.l{color:rgba(231,233,237,.5);background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.home .kyd-rag-foot{padding:15px 24px;border-top:1px solid rgba(255,255,255,.08);font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;letter-spacing:.08em;color:rgba(231,233,237,.42)}
@media(max-width:600px){body.home .kyd-rag-grid{grid-template-columns:1fr}}

/* 18d. regulatory band — left-aligned header + framework wall */
body.home .ngx-reg-sec .center{text-align:left;max-width:820px;margin:0 0 40px}
body.home .ngx-reg-sec .center h2,
body.home .ngx-reg-sec .center p{margin-left:0;margin-right:0}
body.home .reg-wall{display:flex;flex-wrap:wrap;gap:10px}
body.home .reg-chip{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#c7cad0;border:1px solid rgba(255,255,255,.16);background:#090d18;padding:11px 16px;border-radius:2px;white-space:nowrap}
body.home .reg-chip.reg-hl{border-color:rgba(217,123,136,.55);color:#d97b88}
body.home .reg-cap{margin-top:24px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;letter-spacing:.05em;color:rgba(231,233,237,.45)}
@media(max-width:560px){body.home .reg-chip{white-space:normal}}

/* ============================================================
   19. FEEDBACK PASS (2026-08-25) — section 01 divider + proof
   scale-up, logo marquee, 03 padded fragments, 04 stacked
   fragments, centred headers on 03/05/07/08/11.
   ============================================================ */

/* 01: the old design's divider sat flush against the paragraph */
body.home .tp-sec .tp-right{border-left:0}

/* 01: bigger proof tiles — the whole right half gains presence */
body.home .tp-proof .tp-ico{width:64px;height:64px;flex:none}
body.home .tp-proof .tp-ico svg{width:32px;height:32px}
body.home .tp-proof>div{gap:20px}
body.home .tp-proof b{font-size:19px}
body.home .tp-proof i{font-size:15px}
body.home .tp-grid .tp-proof{gap:36px 40px}

/* logo strip → slow marquee inside the content width, fading edges */
body.home .logo-marq{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
body.home .logo-marq-track{display:flex;width:max-content;animation:ngx-logo-marq 46s linear infinite}
body.home .logo-marq .logo-strip-row{flex:none;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:72px;padding-right:72px;width:max-content;max-width:none;margin:0}
@keyframes ngx-logo-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){body.home .logo-marq-track{animation:none}}

/* centred passage headers (user request): 03, 05, 07, 08, 11 —
   everything down to the button centres; diagrams keep their layouts */
body.home .df-a .dfeat-copy{margin:0 auto 48px;text-align:center}
body.home .df-c .dfeat-copy{margin:0 auto 48px;text-align:center}
body.home .df-c .kyc-facts{justify-content:center}
body.home .ngx-reg-sec .center{text-align:center;max-width:820px;margin:0 auto 40px}
body.home .ngx-reg-sec .center h2,
body.home .ngx-reg-sec .center p{margin-left:auto;margin-right:auto}
body.home .reg-wall{justify-content:center}
body.home .reg-cap{text-align:center}
body.home .sol-head{text-align:center;max-width:880px;margin-left:auto;margin-right:auto}
body.home .sol-head p{margin-left:auto;margin-right:auto}
body.home .ngx-meter-sec .center{text-align:center;max-width:820px;margin:0 auto}
body.home .ngx-meter-sec .center h2,
body.home .ngx-meter-sec .center p{margin-left:auto;margin-right:auto}
body.home .ngx-cap{text-align:center}
body.home .ngx-facts{justify-content:center}
body.home .ngx-meter-cta{text-align:center}

/* ============================================================
   20. GRADIENT RULES (2026-08-26) — the centre-fading gradient
   hairline (as under the client list) on SELECTED passages only:
   01 why-nga, 03 risksecure, 06 kycopilot depth, 08 solutions,
   11 meter, CTA. Every other passage keeps the flat hairline —
   deliberately not on all of them.
   ============================================================ */
body.home .tp-sec,
body.home .dfeat.df-a,
body.home .ngx-kyd-sec,
body.home .sol-sec-light,
body.home .ngx-meter-sec,
body.home .cta-sec{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent 3%,rgba(217,123,136,.5) 50%,transparent 97%) 1}

/* ===============================================================
   §21 LITE PASSAGES 2 (2026-08-31) — the 03→data stretch was one
   long dark run; df-b (04, I2G) and ngx-reg-sec now carry .lite.
   These re-colour their dark-scoped pieces for the light ground.
   =============================================================== */
body.home .dfeat.df-b.lite{background:#fbfcfe !important}
body.home .df-b.lite .dfeat-copy h2{color:#18181b}
body.home .df-b.lite .dfeat-copy p{color:#545659}
body.home .df-b.lite .eyebrow::before{color:rgba(175,60,69,.55)}
body.home .df-b.lite .i2g-body .mock-score::after,
body.home .df-b.lite .i2g-body .mock-article::after{background:#fbfcfe;color:#3f5f83;border-color:rgba(63,95,131,.4)}
body.home .df-b.lite .i2g-body .mock-score{border-color:rgba(63,95,131,.22) !important}

body.home .ngx-reg-sec.lite{background:#fbfcfe !important}
body.home .ngx-reg-sec.lite .center h2{color:#18181b}
body.home .ngx-reg-sec.lite .center p{color:#545659}
body.home .ngx-reg-sec.lite .eyebrow::before{color:rgba(175,60,69,.55)}
body.home .ngx-reg-sec.lite .reg-chip{color:#3f4146;border-color:rgba(175,60,69,.22);background:#fff}
body.home .ngx-reg-sec.lite .reg-chip.reg-hl{border-color:rgba(175,60,69,.5);color:#af3c45;background:#f1f4fa}
body.home .ngx-reg-sec.lite .reg-cap{color:#8b8e94}

/* ===============================================================
   §22 HOME POLISH (2026-08-31): 03 asymmetric bento, 04 mock tokens
   re-darkened on the light passage, kyclogo moved into app chrome,
   spotlight restored to its intended light passage.
   =============================================================== */
/* 03: asymmetric ruled bento — 7/5 over 5/7 spans */
@media(min-width:921px){
  body.home .df-a .app-body.ui-stage{grid-template-columns:repeat(12,minmax(0,1fr))}
  body.home .df-a .ui-stage .m-grading{grid-column:1/8;grid-row:1}
  body.home .df-a .ui-stage .m-donut{grid-column:8/13;grid-row:1}
  body.home .df-a .ui-stage .m-entity{grid-column:1/6;grid-row:2}
  body.home .df-a .ui-stage .m-alerts{grid-column:6/13;grid-row:2}
  body.home .df-a .ui-stage .mock{display:flex;flex-direction:column;justify-content:space-between}
}
/* 04: the frame's heavy dark drop-shadow reads as a grey box on the
   light passage — kill it (no-glow rule anyway) */
body.home .df-b.lite .app-frame{box-shadow:none !important}
body.home .df-b.lite .app-body .mock{box-shadow:none !important}
/* 04: the .lite token flip lightened the mock internals — re-scope
   the dark tokens inside the panels so they stay dark instruments */
body.home .df-b.lite .app-body .mock{--paper:#0e1322;--ink:#edeff4;--zinc-700:#cdd0d8;--zinc-600:#b1b5be;--zinc-500:#8b8e94;--zinc-400:#8d93a0;--zinc-200:#242938;--blue:#9ab2ce;--blue-600:#a6bbd4;--blue-400:#6288b3;--blue-300:#9ab2ce;--blue-050:#151e36;--red:#C14953;--red-600:#e08a92;--red-050:#2c141d;--accent:#9ab2ce;--accent-600:#a6bbd4;--accent-050:#121c38}
/* kyclogo as app-chrome mark */
body.home .kyclogo-bar{height:13px;width:auto;margin:0;display:block}
/* kyclogo as a headline lockup: sits between eyebrow and h2, follows
   the column's own alignment so it never floats */
body.home .kyc-lockup{display:flex;margin:6px 0 18px}
body.home .df-c .kyc-lockup{justify-content:center}
body.home .kyc-lockup .kyclogo{height:30px;width:auto;margin:0}
body.home .kyd-rag-ttl{display:inline-flex;align-items:center;gap:9px}
/* spotlight: restore the intended light passage */
body.home .spotlight.lite{background:#fbfcfe !important}
body.home .spotlight.lite .eyebrow{color:#be424d !important}
body.home .spotlight.lite .eyebrow::before{color:rgba(175,60,69,.55)}
body.home .spotlight.lite .spot-head h2{color:#18181b}
body.home .spotlight.lite .btn-ghost-dark{border-color:rgba(196,81,91,.45);color:#be424d}
body.home .spotlight.lite .btn-ghost-dark:hover{background:#c4515b;border-color:#c4515b;color:#fff !important}
body.home .spotlight.lite .post{background:#fff;border:1px solid rgba(175,60,69,.16)}
body.home .spotlight.lite .post:hover{border-color:rgba(196,81,91,.45)}
body.home .spotlight.lite .post h4{color:#18181b}
body.home .spotlight.lite .post p{color:#545659}
body.home .spotlight.lite .post .k{background:#f1f4fa;color:#af3c45}
body.home .spotlight.lite .post .meta,
body.home .spotlight.lite .post time,
body.home .spotlight.lite .post-meta,
body.home .spotlight.lite .post-meta a{color:#737578}

/* ============================================================
   23. PAIN vs PROMISE - section 01 (replaced the "Why HLBNGA"
   rotor band 2026-09-01; old markup in home.html.pre-pain.bak)
   ============================================================ */
body.home .ngx-pain-sec .pain-head{max-width:780px;margin:0 auto 52px}
body.home .ngx-pain-sec .pain-head 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;margin:10px 0 18px;color:#edeff4}
body.home .ngx-pain-sec .pain-head h2 b{font-weight:800}
body.home .pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;text-align:left}
body.home .pain-col{padding:clamp(34px,4.2vw,60px)}
body.home .pain-old{background:#070b16}
body.home .pain-new{background:#0a0f1c;position:relative}
body.home .pain-new::before{content:'';position:absolute;inset:0;background:radial-gradient(560px 320px at 50% -10%,rgba(196,81,91,.16),transparent 70%);pointer-events:none}
body.home .pain-new .pain-lamp{position:absolute;top:0;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,rgba(217,123,136,.75),transparent)}
body.home .pain-kick{display:block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
body.home .pain-old .pain-kick{color:rgba(205,208,216,.62)}
body.home .pain-new .pain-kick{color:#d97b88}
body.home .pain-col h3{font-family:Inter,sans-serif;font-weight:200;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.02em;margin:0 0 30px}
body.home .pain-old h3{color:rgba(205,208,216,.75)}
body.home .pain-new h3{color:#edeff4}
body.home .pain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;position:relative}
body.home .pain-new .pain-list::before{content:'';position:absolute;left:10px;top:16px;bottom:16px;width:1px;background:rgba(213,111,124,.25)}
body.home .pain-list li{display:flex;align-items:flex-start;gap:16px;position:relative}
body.home .pain-ico{flex:none;width:21px;height:21px;margin-top:2px;position:relative;z-index:1}
body.home .pain-new .pain-ico{background:#0a0f1c;border-radius:50%}
body.home .pain-ico svg{width:100%;height:100%;display:block}
body.home .pain-list b{display:block;font-family:Inter,sans-serif;font-weight:700;font-size:15px;letter-spacing:-.01em;margin:0 0 5px}
body.home .pain-old .pain-list b{color:rgba(237,239,244,.88)}
body.home .pain-new .pain-list b{color:#fff}
body.home .ngx-pain-sec .pain-list p{font-size:13.5px;line-height:1.65;margin:0;max-width:none;color:rgba(205,208,216,.5)}
body.home .pain-old .pain-list p{color:rgba(205,208,216,.62)}
body.home .pain-new .pain-list p{color:rgba(205,208,216,.74)}
body.home .pain-more{display:inline-block;margin-top:32px;font-family:Inter,sans-serif;font-weight:700;font-size:14.5px;color:#d97b88;text-decoration:none;position:relative;z-index:1}
body.home .pain-more:hover{color:#ffb6c0}
@media(max-width:900px){body.home .pain-grid{grid-template-columns:1fr}}
/* ============================================================
   24. DARK-SECTION TEXTURE RHYTHM (2026-09-01)
   Alternating textured / plain down the dark passages
   (REMAPPED for the 2026-09-01 homepage reorder): 01 pain GRID
   -> bento plain (radial only) -> 03 meter SCANLINES -> 05 df-a
   plain -> 07 df-c DOTS -> kyd plain -> 09 fica DIAGONAL HATCH
   -> 10 stats plain -> 12 shard DOTS -> cta gridlines. Existing radial fields
   are preserved inside the background-image stacks.
   ============================================================ */
body.home .ngx-pain-sec{background-image:linear-gradient(rgba(213,111,124,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(213,111,124,.05) 1px,transparent 1px);background-size:48px 48px}
body.home .dfeat.df-c{background-image:radial-gradient(circle,rgba(213,111,124,.1) 1px,transparent 1.5px) !important;background-size:26px 26px !important}
body.home .ngx-fica-sec{background-image:radial-gradient(circle,rgba(213,111,124,.12) 1.2px,transparent 1.7px);background-size:20px 20px}
body.home .ngx-meter-sec{background-image:repeating-linear-gradient(0deg,rgba(213,111,124,.05) 0 1px,transparent 1px 44px),radial-gradient(900px 480px at 50% 20%,rgba(175,60,69,.16),transparent 70%)}
body.home .ngx-shard-sec{background-image:radial-gradient(circle,rgba(213,111,124,.1) 1px,transparent 1.5px);background-size:26px 26px}
/* lite-section eyebrows on the homepage: a body.home rule outranks site.css's .lite .eyebrow - re-assert the dark purple */
body.home .lite .eyebrow{color:#be424d !important}

/* ============================================================
   25. LIGHT-SECTION TEXTURE VARIETY (2026-09-01)
   .lite's default 26px dots stay on reg / about / spotlight;
   these three light passages get their own pattern, echoing
   the dark-section rhythm (grid / hatch / scanlines).
   ============================================================ */
body.home .ngx-diff-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:48px 48px}
body.home .sol-sec.lite::before{background-image:radial-gradient(circle,rgba(175,60,69,.09) 1.2px,transparent 1.7px);background-size:22px 22px}
body.home .api-sec.lite::before{background-image:repeating-linear-gradient(0deg,rgba(175,60,69,.045) 0 1px,transparent 1px 44px);background-size:auto}
/* 26. Innovation Leader ribbon in section 01 (from KYCopilot's Case for Change) */
body.home .pain-badge{position:absolute;top:0;right:clamp(20px,4vw,44px);width:92px;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);z-index:2}
body.home .pb-top{background:linear-gradient(135deg,rgba(213,111,124,.85),rgba(175,60,69,.85));height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
body.home .pb-top span{font:800 5.5px Inter,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.75)}
body.home .pb-mid{background:rgba(14,21,40,.92);padding:7px 8px 6px;text-align:center;font:900 11.5px/1.1 Inter,sans-serif;letter-spacing:-.01em;color:rgba(255,255,255,.85)}
body.home .pb-sub{background:linear-gradient(135deg,rgba(213,111,124,.7),rgba(175,60,69,.7));padding:5px 8px;text-align:center;font:800 6px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.88)}
body.home .pb-yr{background:rgba(14,21,40,.92);padding:5px 8px 26px;text-align:center;font:800 9.5px Inter,sans-serif;letter-spacing:.06em;color:rgba(218,128,140,.75)}
@media(max-width:700px){body.home .pain-badge{display:none}}

/* 27. CTA: wider panel, larger type (2026-09-01) */
body.home .cta{padding:clamp(46px,6vw,80px)}
body.home .cta h2{font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.08}
body.home .cta p{font-size:17px;margin-top:12px}
body.home .cta-inner{column-gap:72px;max-width:none}
body.home .cta-actions .btn{font-size:12px;padding:16px 30px}
body.home .cta-points li{font-size:14.5px}
/* 28. gradient display accents on the three big statement headings */
body.home .ngx-pain-sec .pain-head h2 b,
body.home .ngx-data-sec .center h2 b,
body.home .ngx-kyd-sec h2 b{font-weight:800;background:linear-gradient(135deg,#d97a84,#b33d4e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ============================================================
   29. RSMON (2026-09-07) - df-a RiskSecure graphic replaced:
   continuous-monitoring timeline instrument (one entity, one
   year, step-line risk score, red alert focal). Replaces the
   exploded 4-mock bento; sections 13b/16/17/22 df-a mock rules
   are now inert (markup gone).
   ============================================================ */
body.home .df-a .rsmon{background:#070b16;border:1px solid rgba(255,255,255,.09);border-radius:3px;padding:24px 28px 20px;max-width:1160px;margin:0 auto}
body.home .rsm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
body.home .rsm-ttl{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(231,233,237,.62)}
body.home .rsm-live{display:inline-flex;align-items:center;gap:7px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7bc47f}
body.home .rsm-live i{width:6px;height:6px;border-radius:50%;background:#7bc47f}
body.home .rsm-chart{position:relative;height:280px;margin:0 10px}
body.home .rsm-line{position:absolute;inset:0;width:100%;height:100%;display:block}
body.home .rsm-grid{stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
body.home .rsm-path-pre{stroke:#9ab2ce;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
body.home .rsm-path-post{stroke:#c14953;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
body.home .rsm-axis{position:absolute;right:-4px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(231,233,237,.35)}
body.home .rsm-axis-hi{top:4px}
body.home .rsm-axis-lo{bottom:4px}
body.home .rsm-ev{position:absolute;left:var(--x);top:var(--y)}
body.home .rsm-dot{position:absolute;left:0;top:0;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:#9ab2ce;border:2px solid #070b16;box-sizing:content-box}
body.home .rsm-lbl{position:absolute;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;white-space:nowrap}
body.home .rsm-ev.dn .rsm-lbl{top:18px}
body.home .rsm-ev.up .rsm-lbl{bottom:18px}
body.home .rsm-lbl span{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,233,237,.55)}
body.home .rsm-chip{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a6bbd4;background:rgba(154,178,206,.12);border:1px solid rgba(154,178,206,.3);border-radius:2px;padding:3px 9px;line-height:1.5}
body.home .rsm-lbl em{font-style:normal;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(224,138,146,.9)}
body.home .rsm-alert .rsm-dot{background:#c14953}
body.home .rsm-alert .rsm-chip{color:#e08a92;background:rgba(193,73,83,.14);border-color:rgba(193,73,83,.4)}
body.home .rsm-dim .rsm-dot{background:rgba(154,178,206,.45)}
body.home .rsm-dim .rsm-lbl span{color:rgba(231,233,237,.35)}
body.home .rsm-dim .rsm-chip{color:rgba(231,233,237,.5);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
body.home .rsm-now .rsm-dot{background:#070b16;border:2px solid #c14953}
body.home .rsm-now .rsm-lbl span{color:rgba(231,233,237,.4)}
@media(prefers-reduced-motion:no-preference){
  body.home .rsm-now .rsm-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(193,73,83,.6);animation:rsmPulse 2.4s ease-out infinite}
  @keyframes rsmPulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
}
body.home .rsm-months{display:flex;justify-content:space-between;margin:16px 10px 0}
body.home .rsm-months span{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,233,237,.3)}
body.home .rsm-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);margin-top:26px}
body.home .rsm-foot div{background:#070b16;padding:15px 18px}
body.home .rsm-foot b{display:block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a6bbd4;margin-bottom:6px}
body.home .rsm-foot span{font-family:'Cabin',sans-serif;font-size:13px;line-height:1.5;color:rgba(231,233,237,.6)}
/* below the full-width band threshold the split column is too narrow
   for the annotated chart - go full-width block at every width */
@media(max-width:1149px){
  body.home .df-a .dfeat-grid{display:block}
  body.home .df-a .dfeat-copy{margin-bottom:40px}
}
@media(max-width:700px){
  body.home .df-a .rsmon{padding:18px 16px}
  body.home .rsm-line,body.home .rsm-months,body.home .rsm-axis{display:none}
  body.home .rsm-chart{height:auto;margin:0;display:flex;flex-direction:column;gap:16px;border-left:1px solid rgba(255,255,255,.12);padding-left:16px}
  body.home .rsm-ev{position:static;display:flex;gap:12px;align-items:flex-start}
  body.home .rsm-dot{position:static;transform:none;flex:none;margin-top:3px}
  body.home .rsm-lbl{position:static !important;transform:none;align-items:flex-start;white-space:normal;gap:5px}
  body.home .rsm-ev.up .rsm-lbl{bottom:auto}
  body.home .rsm-ev.dn .rsm-lbl{top:auto}
  body.home .rsm-foot{grid-template-columns:1fr}
}
/* 25b. df-b I2G (06) grid texture (2026-09-07, user) - the dfeat
   shimmer hide rule kills .lite's ::before on dfeat sections, so
   re-enable it here with the section-02 grid pattern */
body.home .dfeat.df-b.lite::before{display:block;content:'';position:absolute;inset:0;width:100%;height:100%;z-index:0;transform:none;animation:none;pointer-events:none;background:linear-gradient(rgba(175,60,69,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(175,60,69,.055) 1px,transparent 1px);background-size:48px 48px}

/* ============================================================
   30. KYCOPILOT GREY-BLUE PASSAGES (2026-09-07, user) - the two
   KYCopilot product sections (07 df-c + kyd) take KYCopilot's own
   charcoal-blue surface (sampled from their Compliance Radar) as a
   THIRD ground between the violet canvas and the white lites.
   background-color longhand so the SS24 dot texture (bg-image)
   survives; !important beats the transparent pins.
   ============================================================ */
body.home .dfeat.df-c{background-color:#071029 !important;background-image:radial-gradient(circle,rgba(140,165,230,.09) 1px,transparent 1.5px),linear-gradient(165deg,#071029 0%,#0a1531 55%,#071029 100%) !important;background-size:26px 26px,auto !important}
body.home .ngx-kyd-sec{background-color:#071029 !important;background-image:linear-gradient(345deg,#071029 0%,#0a1531 55%,#071029 100%)}
/* ============================================================
   31. THREE-GROUND ROTATION (2026-09-07, user) - dark passages
   alternate purple/blue down the page, whites stay put:
   pain BLUE -> diff W -> bento PURPLE -> reg W -> meter BLUE ->
   sol W -> df-a PURPLE -> df-b W -> df-c+kyd BLUE (SS30) -> api W
   -> fica PURPLE -> about W -> shard BLUE -> spotlight W -> cta.
   Textures cool from purple to blue-grey on the blue grounds.
   ============================================================ */
body.home .ngx-pain-sec{background-color:#071029 !important;background-image:linear-gradient(rgba(140,165,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,165,230,.06) 1px,transparent 1px),linear-gradient(165deg,#071029 0%,#0a1531 55%,#071029 100%);background-size:48px 48px,48px 48px,auto}
body.home .ngx-meter-sec{background-color:#071029 !important;background-image:repeating-linear-gradient(0deg,rgba(140,165,230,.055) 0 1px,transparent 1px 44px),radial-gradient(900px 480px at 50% 20%,rgba(175,60,69,.14),transparent 70%),linear-gradient(165deg,#071029 0%,#0a1531 55%,#071029 100%)}
body.home .ngx-shard-sec{background-color:#071029 !important;background-image:radial-gradient(circle,rgba(140,165,230,.09) 1px,transparent 1.5px),linear-gradient(345deg,#071029 0%,#0a1531 55%,#071029 100%);background-size:26px 26px,auto}