/* ============================================================================
   Global Data — "Our Data Sources" page component styles.
   Scoped under (the shared flexible-content design system). Pairs with
   the site-wide portal.css (pt-* system) + ds.js. Drop into your theme assets
   and enqueue on the Data Sources page, or inline into flexible-content.php.
   Tokens: primary #13ec80 / accessible green #047857 / Manrope / Material Symbols.
   ============================================================================ */

:root {
  --p:#13ec80; --p-dark:#0eb561;
  --green:#047857; --green-700:#065f46; --green-soft:#ecfdf5; --green-line:#a7f3d0;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f7; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --amber-bg:#fef3c7; --amber-tx:#b45309; --rose-bg:#ffe4e6; --rose-tx:#be123c;
  --violet:#7c3aed; --deep:#06281a;
}

  /* ---- data-sources page specifics ---- */
  .ds-new{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:var(--green-700); background:var(--green-soft); border:1px solid var(--green-line);
    padding:3px 8px; border-radius:100px; }
  .ds-new::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--p); }

  /* hero sources panel */
  .ds-panel{ border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff;
    box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
  .ds-panel-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px;
    background:var(--surface-2); border-bottom:1px solid var(--line); }
  .ds-panel-top b{ font-size:12.5px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; }
  .ds-panel-top b .material-symbols-outlined{ font-size:17px; color:var(--green); }
  .ds-panel-top span{ font-size:10.5px; font-weight:700; color:var(--muted); }
  .ds-panel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; }
  .ds-tile{ display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--line);
    border-radius:11px; background:#fff; }
  .ds-tile .ti{ width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
  .ds-tile .ti .material-symbols-outlined{ font-size:18px; }
  .ds-tile b{ display:block; font-size:11.5px; font-weight:800; color:var(--ink); line-height:1.2; }
  .ds-tile span{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .ds-tile.is-new{ border-color:var(--green-line); background:linear-gradient(180deg,#ffffff,var(--green-soft)); }
  .ds-panel-foot{ display:flex; align-items:center; gap:8px; padding:11px 16px; border-top:1px solid var(--line);
    background:var(--surface-2); font-size:11.5px; font-weight:600; color:var(--green-700); }
  .ds-panel-foot .material-symbols-outlined{ font-size:16px; color:var(--green); }

  /* ============ CATALOGUE: category sections + feature/compact tiles ============ */
  .dc-sec{ margin-top:48px; }
  .dc-sec:first-child{ margin-top:0; }
  .dc-sec[hidden]{ display:none; }
  .dc-sec-h{ display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:22px; }
  .dc-sec-h .ci{ width:36px; height:36px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft,var(--green-soft)); border:1px solid var(--accent-line,var(--green-line)); color:var(--accent,var(--green)); }
  .dc-sec-h .ci .material-symbols-outlined{ font-size:20px; }
  .dc-sec-h b{ font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
  .dc-sec-h .cnt{ font-size:11px; font-weight:800; color:var(--accent,var(--green-700)); background:var(--accent-soft,var(--green-soft));
    border:1px solid var(--accent-line,var(--green-line)); border-radius:100px; padding:3px 11px; }

  .dc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:900px){ .dc-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .dc-grid{ grid-template-columns:1fr; } }

  .dc-tile{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column;
    box-shadow:0 2px 10px -4px rgba(15,23,42,.06); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  .dc-tile[hidden]{ display:none; }
  .dc-tile:hover{ transform:translateY(-4px); border-color:var(--accent-line,var(--green-line)); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
  .dc-tile .ti{ width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft,var(--green-soft)); border:1px solid var(--accent-line,var(--green-line)); color:var(--accent,var(--green));
    margin-bottom:15px; transition:background .22s ease, color .22s ease, border-color .22s ease; }
  .dc-tile .ti .material-symbols-outlined{ font-size:24px; }
  .dc-tile:hover .ti{ background:var(--accent,var(--p)); border-color:var(--accent,var(--p)); color:#fff; }
  .dc-tile .tname{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .dc-tile .tname b{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.25; }
  .dc-tile .tdesc{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.45; }
  .dc-tile .tchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:14px; }

  /* feature tile (flagship per category, full-width) */
  .dc-feat{ grid-column:1 / -1; display:flex; align-items:center; gap:24px; padding:24px 26px; border-radius:18px;
    background:linear-gradient(118deg,#ffffff 0%,var(--accent-soft,var(--green-soft)) 100%); border:1px solid var(--accent-line,var(--green-line));
    box-shadow:0 14px 36px -20px rgba(15,23,42,.2); transition:transform .22s ease, box-shadow .22s ease; }
  .dc-feat[hidden]{ display:none; }
  .dc-feat:hover{ transform:translateY(-3px); box-shadow:0 24px 52px -22px rgba(15,23,42,.28); }
  .dc-feat .fi{ width:64px; height:64px; border-radius:17px; flex:none; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--accent-line,var(--green-line)); color:var(--accent,var(--green)); box-shadow:0 6px 16px -8px rgba(15,23,42,.2); }
  .dc-feat .fi .material-symbols-outlined{ font-size:32px; }
  .dc-feat .fmain{ flex:1; min-width:0; }
  .dc-feat .fname{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .dc-feat .fname b{ font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
  .dc-feat .fstat{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--accent,var(--green-700)); font-weight:700; margin-top:6px; }
  .dc-feat .fstat .material-symbols-outlined{ font-size:16px; }
  .dc-feat .fdesc{ font-size:13.5px; color:var(--body); margin-top:7px; line-height:1.5; max-width:680px; }
  .dc-feat .tchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
  @media (max-width:600px){ .dc-feat{ flex-direction:column; align-items:flex-start; gap:16px; padding:20px; } }

  .dc-rt{ font-size:11px; font-weight:700; color:var(--body); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:4px 9px; transition:.16s; }
  .dc-tile:hover .dc-rt, .dc-feat:hover .dc-rt{ border-color:var(--accent-line,var(--green-line)); color:var(--accent,var(--green-700)); }

  /* category accents */
  [data-accent="amber"]{ --accent:#b45309; --accent-soft:#fef3c7; --accent-line:#fcd34d; }
  [data-accent="green"]{ --accent:#047857; --accent-soft:#ecfdf5; --accent-line:#a7f3d0; }

  /* category explorer (two-column master / detail) */
  .dc-ex{ display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; }
  @media(max-width:880px){ .dc-ex{ grid-template-columns:1fr; } }
  .dc-menu{ display:flex; flex-direction:column; gap:12px; position:sticky; top:24px; }
  @media(max-width:880px){ .dc-menu{ position:static; flex-direction:row; flex-wrap:wrap; } }
  .dc-cat{ font-family:inherit; cursor:pointer; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:18px; position:relative; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
  @media(max-width:880px){ .dc-menu .dc-cat{ flex:1 1 230px; } }
  .dc-cat:hover{ border-color:var(--accent-line); box-shadow:0 14px 30px -16px rgba(15,23,42,.18); }
  .dc-cat .ci{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); margin-bottom:13px; transition:.2s; }
  .dc-cat .ci .material-symbols-outlined{ font-size:24px; }
  .dc-cat .cx{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
  .dc-cat h3{ font-size:16.5px; font-weight:800; color:var(--ink); line-height:1.2; }
  .dc-cat .cn{ font-size:11px; font-weight:800; color:var(--accent); white-space:nowrap; }
  .dc-cat p{ font-size:12.5px; color:var(--muted); margin-top:7px; line-height:1.45; }
  .dc-cat .chev{ position:absolute; top:20px; right:18px; font-size:19px; color:var(--faint); transition:.2s; }
  .dc-cat:hover .chev{ color:var(--accent); }
  .dc-cat.on{ border-color:var(--accent); background:#fff;
    box-shadow:0 0 0 1px var(--accent) inset, 0 16px 36px -18px rgba(15,23,42,.22); }
  .dc-cat.on .ci{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .dc-cat.on .chev{ color:var(--accent); transform:translateX(2px); }

  .dc-panel{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 18px 50px -26px rgba(15,23,42,.2); }
  .dc-pane{ display:none; }
  .dc-pane.on{ display:block; }
  .dc-phead{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line);
    background:#fff; }
  .dc-phead .ph-ic{ width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; }
  .dc-phead .ph-ic .material-symbols-outlined{ font-size:22px; }
  .dc-phead b{ display:block; font-size:15px; font-weight:800; color:var(--ink); }
  .dc-phead span{ font-size:11.5px; font-weight:700; color:var(--accent); }
  .dc-srow{ display:flex; align-items:flex-start; gap:15px; padding:16px 20px; border-bottom:1px solid var(--line-soft); transition:background .16s ease; }
  .dc-srow:last-child{ border-bottom:none; }
  .dc-srow:hover{ background:var(--accent-soft); }
  .dc-srow .si{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); transition:.16s; }
  .dc-srow:hover .si{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .dc-srow .si .material-symbols-outlined{ font-size:22px; }
  .dc-srow .sx{ flex:1; min-width:0; }
  .dc-srow .sname{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .dc-srow .sname b{ font-size:15.5px; font-weight:800; color:var(--ink); }
  .dc-srow .sstat{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--accent); margin-top:4px; }
  .dc-srow .sstat .material-symbols-outlined{ font-size:15px; }
  .dc-srow .sdesc{ font-size:13px; color:var(--muted); margin-top:4px; line-height:1.45; }
  .dc-srow .schips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
  .dc-srow.is-feat{ background:#fff; }
  .dc-srow.is-feat .si{ width:52px; height:52px; background:#fff; box-shadow:0 6px 16px -8px rgba(15,23,42,.2); }
  .dc-srow.is-feat .sname b{ font-size:17px; }
  html[data-catalogue="compact"] .dc-srow .sdesc{ display:none; }

  /* density (Tweak): compact hides descriptions */
  html[data-catalogue="compact"] .dc-tile .tdesc,
  html[data-catalogue="compact"] .dc-feat .fdesc{ display:none; }
  html[data-catalogue="compact"] .dc-tile{ padding:16px; }

  /* coverage light theme (Tweak) */
  html[data-coverage="light"] #coverage{ background:#fff!important; }
  html[data-coverage="light"] #coverage .ds-cv-mesh{ display:none; }
  html[data-coverage="light"] #coverage .ds-cv-badge{ background:var(--green-soft)!important; color:var(--green-700)!important; border-color:var(--green-line)!important; }
  html[data-coverage="light"] #coverage h2{ color:var(--ink)!important; }
  html[data-coverage="light"] #coverage .ds-cv-sub{ color:var(--body)!important; }
  html[data-coverage="light"] #coverage .ds-cv-tile{ background:#fff!important; border-color:var(--line)!important; }
  html[data-coverage="light"] #coverage .ds-cv-tile .lbl{ color:var(--muted)!important; }
  html[data-coverage="light"] #coverage .ds-cv-cap{ color:var(--muted)!important; }
  html[data-coverage="light"] #coverage .ds-cv-num{ color:var(--green)!important; }

  .ds-cv-num{ font-weight:800; line-height:1; color:var(--p); }

  /* ============ HERO: source constellation ============ */
  .ds-orbit{ position:relative; width:100%; max-width:520px; aspect-ratio:1/1; margin-inline:auto; }
  .ds-orbit-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
  .ds-orbit-lines circle{ fill:none; stroke:var(--line); stroke-dasharray:3 8; stroke-width:1.4; }
  .ds-orbit-lines line{ stroke:var(--green-line); stroke-width:1.6; transition:stroke .35s ease; }
  .ds-orbit-lines line.live{ stroke:var(--p); stroke-width:3; }
  .ds-pulse{ fill:var(--p); filter:drop-shadow(0 0 6px rgba(19,236,128,.9)); opacity:0; }

  /* center record card */
  .ds-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:212px;
    background:radial-gradient(circle at 30% 0%,#11223e,var(--deep)); color:#fff; border-radius:16px; padding:13px;
    box-shadow:0 22px 50px -14px rgba(4,40,26,.7), 0 0 0 7px rgba(19,236,128,.07); }
  .ds-core-h{ display:flex; align-items:center; gap:8px; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid rgba(255,255,255,.12); }
  .ds-core-h .material-symbols-outlined{ font-size:18px; color:var(--p); }
  .ds-core-h b{ font-size:12.5px; font-weight:800; }
  .ds-core-h .lv{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#6ee7b7; }
  .ds-core-h .lv::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--p); box-shadow:0 0 0 0 rgba(19,236,128,.6); animation:pt-pulse 1.6s infinite; }
  .ds-core-row{ display:flex; align-items:center; gap:8px; padding:4.5px 0; font-size:10.5px; }
  .ds-core-row .tk{ width:15px; height:15px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); color:rgba(255,255,255,.32); transition:background .3s ease, color .3s ease; }
  .ds-core-row .tk .material-symbols-outlined{ font-size:12px; }
  .ds-core-row .lbl{ font-weight:700; color:rgba(255,255,255,.55); transition:color .3s ease; }
  .ds-core-row .src{ margin-left:auto; font-size:9px; font-weight:700; color:rgba(255,255,255,.32); letter-spacing:.02em; }
  .ds-core-row.matched .tk{ background:var(--p); color:var(--deep); }
  .ds-core-row.matched .tk .material-symbols-outlined{ font-variation-settings:'FILL' 1; }
  .ds-core-row.matched .lbl{ color:#fff; }
  .ds-core-row.flash{ animation:ds-flash .6s ease; }
  @keyframes ds-flash{ 0%{ background:rgba(19,236,128,.18); } 100%{ background:transparent; } }

  /* source nodes */
  .ds-node{ position:absolute; transform:translate(-50%,-50%); z-index:2; width:88px; display:flex; flex-direction:column;
    align-items:center; gap:6px; text-align:center; }
  .ds-node .ndi{ width:54px; height:54px; border-radius:16px; background:#fff; border:1px solid var(--line); color:var(--green);
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -8px rgba(15,23,42,.18);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; position:relative; }
  .ds-node .ndi .material-symbols-outlined{ font-size:25px; }
  .ds-node b{ font-size:10.5px; color:var(--ink); font-weight:800; line-height:1.15; }
  .ds-node .ndtag{ display:none; }
  .ds-node.is-new .ndi{ border-color:var(--green-line); background:linear-gradient(180deg,#fff,var(--green-soft)); }
  .ds-node.live .ndi{ border-color:var(--p); background:var(--p); color:var(--deep); transform:translateY(-3px) scale(1.08);
    box-shadow:0 16px 32px -10px rgba(19,236,128,.55); }
  .ds-node.is-new .ndi::after{ content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
    background:var(--p); border:2px solid #fff; }
  .ds-node.n0{ left:50%; top:9%; }   .ds-node.n1{ left:81%; top:25%; }
  .ds-node.n2{ left:90%; top:59%; }  .ds-node.n3{ left:67%; top:86%; }
  .ds-node.n4{ left:33%; top:86%; }  .ds-node.n5{ left:10%; top:59%; }
  .ds-node.n6{ left:19%; top:25%; }
  @media (max-width:560px){
    .ds-orbit { max-width: 100%; aspect-ratio: 1/1; }
    
    /* Make the central card narrower to prevent overlap, but keep text scaled up */
    .ds-core { width: 146px; padding: 8px 10px; border-radius: 12px; box-shadow: 0 10px 25px -8px rgba(4,40,26,.8), 0 0 0 3px rgba(19,236,128,.07); }
    .ds-core-h { padding-bottom: 7px; margin-bottom: 7px; gap: 5px; }
    .ds-core-h b { font-size: 12px; }
    .ds-core-h .material-symbols-outlined { font-size: 15px; }
    .ds-core-h .lv { font-size: 8px; gap: 3px; }
    .ds-core-h .lv::before { width: 4px; height: 4px; }
    
    /* Shrink the rows padding but keep fonts readable */
    .ds-core-row { padding: 2px 0; font-size: 9px; gap: 4px; }
    .ds-core-row .tk { width: 13px; height: 13px; border-radius: 3px; }
    .ds-core-row .tk .material-symbols-outlined { font-size: 10px; }
    .ds-core-row .src { font-size: 7.5px; margin-left: auto; letter-spacing: -0.2px; }
    
    /* Make outer nodes bounding box narrower so they don't hit the core */
    .ds-node { width: 56px; gap: 4px; }
    .ds-node .ndi { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 4px 12px -4px rgba(15,23,42,.15); }
    .ds-node .ndi .material-symbols-outlined { font-size: 18px; }
    .ds-node b { font-size: 8.5px; line-height: 1.05; letter-spacing: -0.1px; }
  }

  /* ============ BUSINESS: interactive KYB panel ============ */
  .ds-kyb{ display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }
  .ds-kyb-rail{ display:flex; flex-direction:column; gap:8px; }
  .ds-kyb-tab{ font-family:inherit; text-align:left; cursor:pointer; display:flex; align-items:center; gap:12px;
    padding:14px 15px; border-radius:14px; border:1px solid var(--line); background:#fff; transition:.2s; position:relative; }
  .ds-kyb-tab:hover{ border-color:var(--green-line); transform:translateX(2px); }
  .ds-kyb-tab .kt-ico{ width:42px; height:42px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); transition:.2s; }
  .ds-kyb-tab .kt-ico .material-symbols-outlined{ font-size:22px; }
  .ds-kyb-tab .kt-x{ min-width:0; }
  .ds-kyb-tab .kt-x b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.2; }
  .ds-kyb-tab .kt-x span{ font-size:11.5px; color:var(--muted); font-weight:600; }
  .ds-kyb-tab .ds-new{ position:absolute; top:10px; right:11px; }
  .ds-kyb-tab.on{ border-color:var(--ink); background:var(--ink); box-shadow:0 16px 34px -16px rgba(15,23,42,.4); }
  .ds-kyb-tab.on .kt-x b{ color:#fff; }
  .ds-kyb-tab.on .kt-x span{ color:rgba(255,255,255,.6); }
  .ds-kyb-tab.on .kt-ico{ background:var(--p); border-color:var(--p); color:var(--deep); }
  .ds-kyb-tab.on .ds-new{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.25); }

  .ds-kyb-stage{ position:relative; }
  .ds-kyb-pane{ display:none; }
  .ds-kyb-pane.on{ display:block; animation:dp-in .42s cubic-bezier(.22,.8,.2,1); }
  .ds-rr{ border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff;
    box-shadow:0 18px 40px -18px rgba(15,23,42,.16); }
  .ds-rr-top{ display:flex; align-items:center; gap:9px; padding:13px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
  .ds-rr-top .material-symbols-outlined{ font-size:18px; color:var(--green); }
  .ds-rr-top b{ font-size:13.5px; font-weight:800; color:var(--ink); }
  .ds-rr-top .rr-src{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .ds-rr-body{ padding:6px 16px; }
  .ds-rr-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
  .ds-rr-row:last-child{ border-bottom:none; }
  .ds-rr-row .rl{ font-size:12.5px; color:var(--muted); font-weight:600; width:148px; flex:none; }
  .ds-rr-row .rv{ font-size:13px; color:var(--ink); font-weight:700; }
  .ds-rr-row .rv.ok{ display:inline-flex; align-items:center; gap:5px; color:var(--green-700); }
  .ds-rr-row .rv.ok .material-symbols-outlined{ font-size:17px; color:var(--green); font-variation-settings:'FILL' 1; }
  .ds-rr-foot{ padding:14px 16px; border-top:1px solid var(--line); }
  .ds-rr-note{ display:flex; align-items:flex-start; gap:8px; font-size:11.5px; line-height:1.45; color:var(--green-700);
    background:var(--green-soft); border:1px solid var(--green-line); border-radius:11px; padding:10px 12px; margin-bottom:12px; }
  .ds-rr-note .material-symbols-outlined{ font-size:16px; color:var(--green); flex:none; margin-top:1px; }
  @media (max-width:820px){
    .ds-kyb{ grid-template-columns:1fr; }
    .ds-kyb-rail{ flex-direction:row; flex-wrap:wrap; }
    .ds-kyb-tab{ flex:1 1 220px; }
  }
  @media (max-width:520px){
    .ds-rr-row{ flex-direction:column; align-items:flex-start; gap:2px; }
    .ds-rr-row .rl{ width:auto; }
  }

  /* ============ CATALOGUE: filter chips + count ============ */
  .ds-filter{ display:flex; flex-wrap:wrap; gap:8px; }
  .ds-fbtn{ font-family:inherit; font-size:13px; font-weight:700; color:var(--body); background:#fff;
    border:1px solid var(--line); border-radius:100px; padding:9px 16px; cursor:pointer; transition:.18s; }
  .ds-fbtn:hover{ border-color:var(--green-line); color:var(--green-700); }
  .ds-fbtn.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .ds-count{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--muted);
    background:#fff; border:1px solid var(--line); border-radius:100px; padding:7px 14px; }
  .ds-count b{ color:var(--ink); font-weight:800; }

  /* hero motion tweak: static disables animation */
  html[data-heromotion="static"] .ds-pulse{ display:none; }

  /* tweaks panel */
  .ds-tweaks{ position:fixed; right:18px; bottom:18px; z-index:9999; width:248px; background:#fff; border:1px solid #e2e8f0;
    border-radius:16px; box-shadow:0 24px 60px -16px rgba(15,23,42,.34); font-family:'Manrope',sans-serif; padding:16px; display:none; }
  .ds-tweaks.open{ display:block; }
  .ds-tweaks .tw-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .ds-tweaks .tw-head b{ font-size:14px; color:#0f172a; font-weight:800; }
  .ds-tweaks .tw-x{ border:none; background:#f1f5f9; width:26px; height:26px; border-radius:8px; cursor:pointer; color:#475569; font-size:16px; line-height:1; }
  .ds-tweaks .tw-lbl{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748b; margin:14px 0 8px; }
  .ds-tweaks .tw-lbl:first-of-type{ margin-top:0; }
  .ds-tweaks .seg{ display:flex; background:#f1f5f9; border-radius:10px; padding:3px; gap:3px; }
  .ds-tweaks .seg button{ flex:1; border:none; background:transparent; cursor:pointer; font-family:inherit; font-weight:700; font-size:12.5px; color:#475569; padding:8px 4px; border-radius:8px; transition:.15s; }
  .ds-tweaks .seg button.on{ background:#fff; color:#065f46; box-shadow:0 1px 4px rgba(15,23,42,.12); }



.ds-section {
    position: relative;
    padding: 96px 24px;
    min-height: 100vh;
    overflow: hidden;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(8, 145, 178, 0.04) 0%, transparent 50%);
}

.ds-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.ds-header {
    text-align: center;
    margin-bottom: 64px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(5, 150, 105, 0.1);
    color: var(--primary-emerald);
    padding: 6px 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

.ds-eyebrow-icon {
    font-size: 18px;
}

.ds-heading {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    color: #0F172A;
}

.ds-highlight {
    color: var(--primary-emerald);
}

.ds-body {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* SaaS Filter Bar */
.ds-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
    background: #FFFFFF;
    padding: 12px;
    border-radius: 100px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}

.ds-filters-wrapper {
    position: relative;
    max-width: 100%;
}

.ds-mobile-filters {
    display: none;
}

.ds-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.ds-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ds-filters::-webkit-scrollbar { display: none; }

.ds-filter-btn {
    background: transparent;
    border: none;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.ds-filter-btn:hover {
    color: var(--text-main);
    background: #F1F5F9;
}

.ds-filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-emerald-glow);
}

.ds-filter-btn.active {
    background: var(--text-main);
    color: #FFFFFF;
}

.ds-search {
    position: relative;
    flex-grow: 1;
    max-width: 320px;
    min-width: 200px;
}

.ds-search .material-symbols-outlined {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 20px;
}

.ds-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-main);
    background: #F8FAFC;
    transition: all 0.2s ease;
    outline: none;
}

.ds-search input:focus {
    background: #FFFFFF;
    border-color: var(--primary-emerald);
    box-shadow: 0 0 0 3px var(--primary-emerald-glow);
}


.ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* Card Design - Light Theme SaaS style */
.ds-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 24px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.02), 0 1px 2px -1px rgba(0,0,0,0.02);
}

/* Spotlight glow driven by JS */
.ds-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
        rgba(5, 150, 105, 0.04),
        transparent 40%
    );
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ds-card:hover::before {
    opacity: 1;
}

.ds-card > * {
    position: relative;
    z-index: 1;
}

.ds-card:hover {
    transform: translateY(-4px);
    border-color: rgba(5, 150, 105, 0.3);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
                0 8px 10px -6px rgba(0, 0, 0, 0.02);
}

.ds-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(19, 236, 128, 0.12);
    border: 1px solid rgba(19, 236, 128, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #047857; /* var(--green) */
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ds-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.ds-card-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    flex-grow: 1;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ds-card {
    animation: fadeInUp 0.6s ease-out backwards;
}

.ds-card:nth-child(1) { animation-delay: 0.1s; }
.ds-card:nth-child(2) { animation-delay: 0.15s; }
.ds-card:nth-child(3) { animation-delay: 0.2s; }
.ds-card:nth-child(4) { animation-delay: 0.25s; }
.ds-card:nth-child(5) { animation-delay: 0.3s; }
.ds-card:nth-child(6) { animation-delay: 0.35s; }
.ds-card:nth-child(7) { animation-delay: 0.4s; }
.ds-card:nth-child(8) { animation-delay: 0.45s; }
.ds-card:nth-child(9) { animation-delay: 0.5s; }
.ds-card:nth-child(10) { animation-delay: 0.55s; }
.ds-card:nth-child(11) { animation-delay: 0.6s; }
.ds-card:nth-child(12) { animation-delay: 0.65s; }
.ds-card:nth-child(13) { animation-delay: 0.7s; }

@media (max-width: 768px) {
    .ds-section {
        padding: 40px 16px;
    }
    
    .ds-header {
        margin-bottom: 40px;
    }

    .ds-heading {
        font-size: 32px;
        margin-bottom: 16px;
    }
    
    .ds-body {
        font-size: 16px;
    }

    .ds-controls {
        flex-direction: column;
        border-radius: 20px;
        align-items: stretch;
        padding: 16px;
        margin-bottom: 32px;
    }

    .ds-filters.ds-desktop-filters {
        display: none !important;
    }

    .ds-mobile-filters {
        display: block;
        position: relative;
        width: 100%;
    }

    .ds-custom-select {
        position: relative;
        width: 100%;
        z-index: 20; /* Ensure it stays above everything */
    }

    .ds-select-trigger {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #F8FAFC;
        border: 1px solid var(--border-color);
        padding: 14px 16px;
        border-radius: 12px;
        font-family: inherit;
        font-size: 16px;
        color: var(--text-main);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ds-select-trigger:focus,
    .ds-select-trigger[aria-expanded="true"] {
        outline: none;
        background: #FFFFFF;
        border-color: var(--primary-emerald);
        box-shadow: 0 0 0 3px var(--primary-emerald-glow);
    }

    .ds-select-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        background: #FFFFFF;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
        list-style: none;
        padding: 8px;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    .ds-custom-select.open .ds-select-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .ds-select-dropdown li {
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-muted);
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .ds-select-dropdown li:hover {
        background: #F1F5F9;
        color: var(--text-main);
    }

    .ds-select-dropdown li[aria-selected="true"] {
        background: rgba(5, 150, 105, 0.1);
        color: var(--primary-emerald);
        font-weight: 700;
    }

    .ds-custom-select.open .ds-dropdown-icon {
        transform: rotate(180deg);
    }

    .ds-dropdown-icon {
        color: var(--text-muted);
        font-size: 20px;
        transition: transform 0.3s ease;
    }

    .ds-filters-wrapper {
        width: 100%;
        margin-bottom: 8px;
    }

    .ds-filters-wrapper::before,
    .ds-filters-wrapper::after {
        display: none;
    }

    .ds-search {
        max-width: 100%;
    }

    .ds-search input {
        padding: 14px 16px 14px 44px;
        font-size: 16px; /* Prevents iOS auto-zoom */
    }

    .ds-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .ds-card {
        padding: 16px;
        display: grid;
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
        gap: 4px 16px;
        align-items: start;
    }

    .ds-card::before {
        display: none; /* Disable mouse hover spotlight on mobile */
    }

    .ds-icon-wrapper {
        grid-row: 1 / 3;
        grid-column: 1;
        margin-bottom: 0;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .ds-card-title {
        grid-row: 1;
        grid-column: 2;
        margin-bottom: 0;
        align-self: end;
        font-size: 16px; /* Slightly smaller for density */
    }

    .ds-card-desc {
        grid-row: 2;
        grid-column: 2;
        font-size: 13px; /* Slightly smaller for density */
    }
}


/* Responsive sizing for the data attributes iframe */
.gdds-motion-frame {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9/16;
}
@media (min-width: 768px) {
    .gdds-motion-frame {
        aspect-ratio: 16/9;
        max-height: 820px;
    }
}