/* ============================================================================
   Global Data — "Data Compliance" page styles. SELF-CONTAINED.
   Tokens + the small base layer this page uses are defined here directly, so
   the page does NOT depend on the Portal page's portal.css. Pairs with
   compliance.js. Tokens: primary #13ec80 / accessible green #047857 / Manrope /
   Material Symbols Outlined. Section markup is scoped under .datacompliance (a local
   scope hook only — no external stylesheet is required).
   ============================================================================ */

/* ---- design tokens (scoped) ---- */
.datacompliance{
  --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;
  --deep:#06281a;
}
.datacompliance .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  width:1em; height:1em; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; }


/* ---- brand badge / eyebrow ---- */
.datacompliance .pt-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-700); background:var(--green-soft); padding:7px 14px; border-radius:100px; border:1px solid var(--green-line); }
.datacompliance .pt-badge .material-symbols-outlined{ font-size:15px; }
.datacompliance .pt-dot{ width:7px; height:7px; border-radius:50%; background:var(--p); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:pt-pulse 1.8s infinite; }
@keyframes pt-pulse{ 0%{box-shadow:0 0 0 0 rgba(19,236,128,.55)} 70%{box-shadow:0 0 0 7px rgba(19,236,128,0)} 100%{box-shadow:0 0 0 0 rgba(19,236,128,0)} }

/* ---- hero mesh ---- */
.datacompliance.pt-hero-mesh, .datacompliance .pt-hero-mesh{ background-color:#fff;
  background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 12% 8%,rgba(4,120,87,.08),transparent 40%); }

/* ---- buttons (bright green bg, dark text) ---- */
.datacompliance .pt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1; border:1px solid transparent; border-radius:12px;
  padding:13px 22px; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s; white-space:nowrap; text-decoration:none; }
.datacompliance .pt-btn .material-symbols-outlined{ font-size:18px; }
.datacompliance .pt-btn-primary{ background:var(--p); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.datacompliance .pt-btn-primary:hover{ background:var(--p-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.datacompliance .pt-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--line); color:var(--green-700); }
.datacompliance .pt-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.datacompliance .pt-btn-on-dark{ background:#fff; color:#06281a; }
.datacompliance .pt-btn-on-dark:hover{ background:var(--p); transform:translateY(-2px); }
.datacompliance .pt-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.datacompliance .pt-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* ---- checklist ---- */
.datacompliance .pt-checks{ display:grid; gap:11px; }
.datacompliance .pt-checks li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink); font-weight:600; }
.datacompliance .pt-checks .tk{ width:23px; height:23px; border-radius:7px; background:var(--green-soft); border:1px solid var(--green-line);
  color:var(--green); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.datacompliance .pt-checks .tk .material-symbols-outlined{ font-size:16px; }

/* ---- reveal on scroll (gated on JS; shows end-state if script never runs) ---- */
.datacompliance .pt-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.pt-anim .datacompliance .pt-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.datacompliance .pt-reveal.in{ opacity:1; transform:none; }
.datacompliance .pt-reveal.d1{ transition-delay:.08s } .datacompliance .pt-reveal.d2{ transition-delay:.16s } .datacompliance .pt-reveal.d3{ transition-delay:.24s }

/* ============================================================================
   Bookmark sidebar nav (hover-to-expand)
   ============================================================================ */
.fc-bookmark-nav{ position:absolute; left:0; top:0; transform:translateY(-50%); width:56px; max-height:84vh;
  transition:width .4s cubic-bezier(.32,.72,0,1); z-index:100; border-radius:0 20px 20px 0; overflow:hidden;
  display:flex; flex-direction:column; background:rgba(255,255,255,.85); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6); border-left:none; box-shadow:0 10px 40px -12px rgba(15,23,42,.22); }
.fc-bookmark-nav:hover{ width:264px; }
.fc-bookmark-nav .nav-label{ opacity:0; white-space:nowrap; max-width:0; overflow:hidden; margin-left:0;
  transition:max-width .4s ease,opacity .3s ease,margin .4s ease; }
.fc-bookmark-nav:hover .nav-label{ opacity:1; max-width:180px; margin-left:12px; }
.fc-bookmark-nav.is-closed{ width:56px!important; }
.fc-bookmark-nav.is-closed .nav-label{ opacity:0!important; max-width:0!important; margin-left:0!important; }
.tab-progress-container{ position:absolute; right:0; top:0; bottom:0; width:3px; background:rgba(15,23,42,.06); }
.tab-progress-bar{ width:100%; background:#13ec80; height:0%; }
.nav-link.active{ background:#ecfdf5; color:#065f46; font-weight:600; }
.nav-link.active .material-symbols-outlined{ color:#047857; }
.bottom-action-btn{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  transition:all .3s ease; padding:0; background:#0b1220; color:#fff; }
.fc-bookmark-nav:hover .bottom-action-btn{ width:100%; justify-content:flex-start; padding:0 12px; }
.fc-bookmark-nav.is-closed .bottom-action-btn{ width:38px!important; justify-content:center!important; padding:0!important; }
.mobile-close-nav{ opacity:0; pointer-events:none; transition:opacity .3s; }
.fc-bookmark-nav:hover .mobile-close-nav{ opacity:1; pointer-events:auto; }
.mesh-gradient{ background-image:radial-gradient(at 0% 0%,rgba(19,236,128,.06) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(4,120,87,.04) 0,transparent 50%); }
@media (max-width:1023px){ .fc-bookmark-nav{ display:none; } }

/* ============================================================================
   HERO: compliance panel
   ============================================================================ */
.datacompliance .dc-panel{ border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff;
  box-shadow:0 25px 50px -12px rgba(15,23,42,.18); max-width:430px; margin-inline:auto; }
.datacompliance .dc-pl-top{ display:flex; align-items:center; gap:9px; padding:14px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.datacompliance .dc-pl-top .material-symbols-outlined{ font-size:18px; color:var(--green); }
.datacompliance .dc-pl-top b{ font-size:13px; font-weight:800; color:var(--ink); }
.datacompliance .dc-pl-top .lv{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green-700); }
.datacompliance .dc-pl-top .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; }
.datacompliance .dc-pl-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-soft); transition:background .35s ease; }
.datacompliance .dc-pl-row:last-child{ border-bottom:none; }
.datacompliance .dc-pl-row .ic{ width:36px; height:36px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--faint); border:1px solid var(--line); transition:background .35s ease, color .35s ease, border-color .35s ease; }
.datacompliance .dc-pl-row .ic .material-symbols-outlined{ font-size:19px; }
.datacompliance .dc-pl-row .tx{ flex:1; min-width:0; }
.datacompliance .dc-pl-row .tx b{ display:block; font-size:13px; font-weight:800; color:var(--ink); line-height:1.25; }
.datacompliance .dc-pl-row .tx span{ font-size:11px; color:var(--muted); font-weight:600; }
.datacompliance .dc-pl-row .tk{ width:24px; height:24px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--faint); transition:background .35s ease, color .35s ease; }
.datacompliance .dc-pl-row .tk .material-symbols-outlined{ font-size:15px; }
.datacompliance .dc-pl-row.on .ic{ background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
.datacompliance .dc-pl-row.on .tk{ background:var(--p); color:var(--deep); }
.datacompliance .dc-pl-row.on .tk .material-symbols-outlined{ font-variation-settings:'FILL' 1; }
.datacompliance .dc-pl-row.flash{ background:rgba(19,236,128,.10); }
.datacompliance .dc-pl-foot{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface-2); font-size:11.5px; font-weight:600; color:var(--green-700); }
.datacompliance .dc-pl-foot .material-symbols-outlined{ font-size:16px; color:var(--green); }
/* no-JS / pre-anim fallback: panel shows verified end-state */
html:not(.pt-anim) .datacompliance .dc-pl-row .ic{ background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
html:not(.pt-anim) .datacompliance .dc-pl-row .tk{ background:var(--p); color:var(--deep); }
html:not(.pt-anim) .datacompliance .dc-pl-row .tk .material-symbols-outlined{ font-variation-settings:'FILL' 1; }

/* ============================================================================
   Certifications strip
   ============================================================================ */
.datacompliance .dc-cert{ display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:#fff;
  box-shadow:0 2px 10px -4px rgba(15,23,42,.06); }
.datacompliance .dc-cert .ci{ width:48px; height:48px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
.datacompliance .dc-cert .ci .material-symbols-outlined{ font-size:26px; }
.datacompliance .dc-cert b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.2; }
.datacompliance .dc-cert span{ font-size:12px; color:var(--muted); font-weight:600; }

/* ============================================================================
   ISO: certificate card + risk loop
   ============================================================================ */
.datacompliance .dc-iso-card{ border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 25px 50px -16px rgba(15,23,42,.2); }
.datacompliance .dc-iso-seal{ display:flex; align-items:center; gap:16px; padding:24px; background:#fff; border-bottom:1px solid var(--line); }
.datacompliance .dc-iso-seal .sl-img{ width:64px; height:64px; flex:none; display:block; }
.datacompliance .dc-iso-badge{ width:100%; max-width:360px; height:auto; display:block; }
.datacompliance .dc-iso-seal .sl{ width:64px; height:64px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--green-line); color:var(--green); box-shadow:0 8px 20px -8px rgba(19,236,128,.5); }
.datacompliance .dc-iso-seal .sl .material-symbols-outlined{ font-size:34px; font-variation-settings:'FILL' 1; }
.datacompliance .dc-iso-seal b{ display:block; font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.datacompliance .dc-iso-seal span{ font-size:12.5px; color:var(--green-700); font-weight:700; display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.datacompliance .dc-iso-seal span .material-symbols-outlined{ font-size:15px; }
.datacompliance .dc-iso-body{ padding:22px 24px; }
.datacompliance .dc-iso-h{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.datacompliance .dc-loop{ display:flex; align-items:stretch; gap:0; }
.datacompliance .dc-loop .node{ flex:1; text-align:center; padding:14px 8px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); }
.datacompliance .dc-loop .node .ni{ width:38px; height:38px; border-radius:11px; margin:0 auto 9px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); }
.datacompliance .dc-loop .node .ni .material-symbols-outlined{ font-size:21px; }
.datacompliance .dc-loop .node b{ font-size:13px; font-weight:800; color:var(--ink); }
.datacompliance .dc-loop .arrow{ display:flex; align-items:center; color:var(--faint); padding:0 6px; }
.datacompliance .dc-loop .arrow .material-symbols-outlined{ font-size:20px; }
@media (max-width:420px){ .datacompliance .dc-loop{ flex-direction:column; gap:10px; } .datacompliance .dc-loop .arrow{ transform:rotate(90deg); padding:2px 0; justify-content:center; } }
.datacompliance .dc-iso-audit{ display:flex; align-items:center; gap:9px; margin-top:16px; padding:13px 15px; border-radius:12px;
  background:var(--green-soft); border:1px solid var(--green-line); font-size:13px; font-weight:700; color:var(--green-700); }
.datacompliance .dc-iso-audit .material-symbols-outlined{ font-size:18px; color:var(--green); }

/* ============================================================================
   Feature cards (privacy / lineage / security)
   ============================================================================ */
.datacompliance .dc-feat-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; height:100%;
  box-shadow:0 2px 10px -4px rgba(15,23,42,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.datacompliance .dc-feat-card:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.datacompliance .dc-feat-card .fi{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); border:1px solid var(--green-line); color:var(--green); margin-bottom:16px; transition:.25s; }
.datacompliance .dc-feat-card:hover .fi{ background:var(--p); border-color:var(--p); color:var(--deep); }
.datacompliance .dc-feat-card .fi .material-symbols-outlined{ font-size:25px; }
.datacompliance .dc-feat-card h3{ font-size:17px; font-weight:800; color:var(--ink); }
.datacompliance .dc-feat-card .abbr{ font-size:12px; font-weight:700; color:var(--green-700); margin-top:2px; }
.datacompliance .dc-feat-card p{ font-size:13.5px; color:var(--body); line-height:1.55; margin-top:10px; }

/* ============================================================================
   LINEAGE: record trace
   ============================================================================ */
.datacompliance .dc-lineage{ border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 25px 50px -16px rgba(15,23,42,.18); max-width:460px; margin-inline:auto; }
.datacompliance .dc-ln-top{ display:flex; align-items:center; gap:9px; padding:14px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.datacompliance .dc-ln-top .material-symbols-outlined{ font-size:18px; color:var(--green); }
.datacompliance .dc-ln-top b{ font-size:13px; font-weight:800; color:var(--ink); }
.datacompliance .dc-ln-top .src-h{ margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.datacompliance .dc-ln-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line-soft); }
.datacompliance .dc-ln-row:last-child{ border-bottom:none; }
.datacompliance .dc-ln-row .tk{ width:22px; height:22px; border-radius:6px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--faint); transition:background .35s ease, color .35s ease; }
.datacompliance .dc-ln-row .tk .material-symbols-outlined{ font-size:14px; }
.datacompliance .dc-ln-row .lbl{ font-size:13.5px; font-weight:700; color:var(--body); }
.datacompliance .dc-ln-row .src{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.03em; color:var(--muted);
  background:var(--surface-3); border:1px solid var(--line); border-radius:100px; padding:4px 11px;
  opacity:0; transform:translateX(8px); transition:opacity .4s ease, transform .4s ease, background .4s ease, color .4s ease, border-color .4s ease; }
.datacompliance .dc-ln-row.on .tk{ background:var(--p); color:var(--deep); }
.datacompliance .dc-ln-row.on .tk .material-symbols-outlined{ font-variation-settings:'FILL' 1; }
.datacompliance .dc-ln-row.on .src{ opacity:1; transform:none; color:var(--green-700); background:var(--green-soft); border-color:var(--green-line); }
.datacompliance .dc-ln-foot{ display:flex; align-items:flex-start; gap:8px; padding:13px 16px; border-top:1px solid var(--line); background:var(--surface-2); font-size:11.5px; line-height:1.45; font-weight:600; color:var(--green-700); }
.datacompliance .dc-ln-foot .material-symbols-outlined{ font-size:16px; color:var(--green); flex:none; margin-top:1px; }
/* no-JS fallback */
html:not(.pt-anim) .datacompliance .dc-ln-row .tk{ background:var(--p); color:var(--deep); }
html:not(.pt-anim) .datacompliance .dc-ln-row .tk .material-symbols-outlined{ font-variation-settings:'FILL' 1; }
html:not(.pt-anim) .datacompliance .dc-ln-row .src{ opacity:1; transform:none; color:var(--green-700); background:var(--green-soft); border-color:var(--green-line); }

/* ---- lineage motion-graphic iframe ---- */
.datacompliance .dc-motion-frame{ width:100%; aspect-ratio:1 / 1; max-width:520px; margin-inline:auto; border:0; background:transparent; display:block; }

/* ---- lineage flow viz (animated SVG: docs -> database) ---- */
.datacompliance .dc-flowviz{ padding:18px 14px 8px; background:
  radial-gradient(circle at 30% 30%, rgba(19,236,128,.05), transparent 60%); }
.datacompliance .dc-flowviz svg{ width:100%; height:auto; display:block; }
.datacompliance .dc-flowviz text{ font-family:'Manrope',sans-serif; font-size:13px; font-weight:800; fill:var(--muted);
  text-anchor:middle; letter-spacing:.02em; }
.datacompliance .dc-flowviz .dc-glow{ fill:rgba(19,236,128,.18); animation:dc-glow 3.2s ease-in-out infinite; }
.datacompliance .dc-flowviz .dc-conn path{ stroke-dasharray:5 7; animation:dc-dash 1.1s linear infinite; }
.datacompliance .dc-flowviz .band{ opacity:0; }
.datacompliance .dc-flowviz .pk rect{ fill:var(--p); stroke:#065f46; stroke-width:1; }

.datacompliance .dc-flowviz .pa{ offset-path:path('M358 60 H180 V128'); }
.datacompliance .dc-flowviz .pb{ offset-path:path('M358 190 H226'); }
.datacompliance .dc-flowviz .pc{ offset-path:path('M358 318 H180 V286'); }
.datacompliance .dc-flowviz .pk{ offset-rotate:0deg; opacity:0; animation:dc-flow 3.2s ease-in-out infinite; }
.datacompliance .dc-flowviz .pb{ animation-delay:.45s; }
.datacompliance .dc-flowviz .pc{ animation-delay:.9s; }

.datacompliance .dc-flowviz .band.b1{ animation:dc-band 3.2s ease-in-out infinite; }
.datacompliance .dc-flowviz .band.b2{ animation:dc-band 3.2s ease-in-out infinite .45s; }
.datacompliance .dc-flowviz .band.b3{ animation:dc-band 3.2s ease-in-out infinite .9s; }
.datacompliance .dc-flowviz .ah.a{ animation:dc-ah 3.2s ease-in-out infinite; }
.datacompliance .dc-flowviz .ah.b{ animation:dc-ah 3.2s ease-in-out infinite .45s; }
.datacompliance .dc-flowviz .ah.c{ animation:dc-ah 3.2s ease-in-out infinite .9s; }

@keyframes dc-dash{ to{ stroke-dashoffset:-12; } }
@keyframes dc-glow{ 0%,100%{ opacity:.5; transform:scaleX(.92); } 50%{ opacity:1; transform:scaleX(1.04); } }
@keyframes dc-flow{
  0%{ offset-distance:0%; opacity:0; }
  6%{ opacity:1; }
  40%{ offset-distance:100%; opacity:1; }
  47%{ offset-distance:100%; opacity:0; }
  100%{ offset-distance:100%; opacity:0; }
}
@keyframes dc-band{ 0%,40%{ opacity:0; } 47%{ opacity:.9; } 70%{ opacity:0; } 100%{ opacity:0; } }
@keyframes dc-ah{ 0%,40%{ fill:#94a3b8; } 47%{ fill:var(--green); } 72%{ fill:#94a3b8; } 100%{ fill:#94a3b8; } }

@media (prefers-reduced-motion: reduce){
  .datacompliance .dc-flowviz .dc-glow,
  .datacompliance .dc-flowviz .dc-conn path,
  .datacompliance .dc-flowviz .pk,
  .datacompliance .dc-flowviz .band,
  .datacompliance .dc-flowviz .ah{ animation:none!important; }
  .datacompliance .dc-flowviz .pk{ opacity:0; }
  .datacompliance .dc-flowviz .band{ opacity:.45; }
}

/* ============================================================================
   WHY band: locked dark. Selectors match BOTH the preview (section nested
   inside the .datacompliance wrapper) AND production (the ACF partial renders
   class="fc-section datacompliance" on the #why section itself, with no
   .datacompliance ancestor), so the dark band survives in both contexts.
   ============================================================================ */
.datacompliance , .datacompliance#why{ background:#0b1220; position:relative; overflow:hidden; }
.datacompliance  .dc-why-mesh, .datacompliance#why .dc-why-mesh{ position:absolute; inset:0; pointer-events:none; }
.datacompliance  > .relative, .datacompliance#why > .relative{ position:relative; z-index:1; }
.datacompliance  .dc-why-card, .datacompliance#why .dc-why-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:24px; }
.datacompliance  .dc-why-card .qi, .datacompliance#why .dc-why-card .qi{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(19,236,128,.12); border:1px solid rgba(19,236,128,.25); color:#6ee7b7; margin-bottom:14px; }
.datacompliance  .dc-why-card .qi .material-symbols-outlined, .datacompliance#why .dc-why-card .qi .material-symbols-outlined{ font-size:22px; }
.datacompliance  .dc-why-card p, .datacompliance#why .dc-why-card p{ font-size:15px; color:rgba(255,255,255,.82)!important; line-height:1.55; }
/* Typography + layout driven from CSS (not Tailwind) so the ACF partial renders
   correctly even in a production build that purges unused utility classes.
   Colours are !important so a theme's global heading/paragraph colours can't
   override them on this permanently-dark band. */
.datacompliance #why .dc-why-head, .datacompliance#why .dc-why-head{ max-width:48rem; margin:0 auto 3rem; text-align:center; }
.datacompliance #why h2, .datacompliance#why h2{ color:#fff!important; font-size:clamp(28px,3.2vw,42px); font-weight:800; line-height:1.15; letter-spacing:-.02em; }
.datacompliance #why .dc-why-lead, .datacompliance#why .dc-why-lead{ color:rgba(255,255,255,.72)!important; font-size:18px; line-height:1.6; margin-top:1rem; }
.datacompliance #why .dc-why-foot, .datacompliance#why .dc-why-foot{ color:rgba(255,255,255,.6)!important; font-size:14px; text-align:center; max-width:42rem; margin:2.5rem auto 0; }
.datacompliance #why .dc-why-grid, .datacompliance#why .dc-why-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:56rem; margin:0 auto; }
@media (min-width:768px){ .datacompliance #why .dc-why-grid, .datacompliance#why .dc-why-grid{ grid-template-columns:1fr 1fr; } }
.datacompliance #why .dc-why-card, .datacompliance#why .dc-why-card{ display:flex; flex-direction:column; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .datacompliance *{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
  .datacompliance .pt-reveal{ opacity:1!important; transform:none!important; }
}