/* ============ DATA SECURITY DECK — presenter mode ============
   Fully independent of pitch.css / pitch.js by design (Ram's explicit call,
   2026-09-24) — no shared classes, ids, or JS state with the investor pitch
   deck. Visual language intentionally matches it (same colors, same fonts,
   same mechanics) but every selector here uses the ds- prefix so nothing in
   this file can ever affect, or be affected by, pitch.css. */
#ds-overlay{position:fixed;inset:0;z-index:12000;background:#0D1F3C;display:none;flex-direction:column;font-family:'DM Sans','Calibri',sans-serif;color:#fff}
#ds-overlay.active{display:flex}
.ds-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;flex-shrink:0}
#ds-fs-btn{margin-left:auto}
.ds-close{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12px}
.ds-close:hover{border-color:#D92D20;color:#D92D20}
.ds-stage-outer{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.ds-stage{width:1200px;height:700px;flex-shrink:0;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:24px 72px 16px;text-align:center;position:relative;transform-origin:center center;will-change:transform}
.ds-stage::before,.ds-stage::after{content:'';position:absolute;pointer-events:none;border-radius:50%;background:transparent}
.ds-stage::before{width:400px;height:400px;right:-160px;top:-160px;border:1.5px solid rgba(217,45,32,.35)}
.ds-stage::after{width:300px;height:300px;left:-130px;bottom:-130px;border:1.5px solid rgba(11,122,117,.32)}
.ds-header{flex:0 0 auto;width:100%;max-width:960px;margin:0 auto 16px;position:relative;z-index:1}
.ds-body{flex:1;min-height:0;width:100%;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;position:relative;z-index:1}
.ds-body-inner{width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;transform-origin:top center}
.ds-badge{display:inline-block;background:#D92D20;color:#fff;font-size:22px;font-weight:700;letter-spacing:3px;padding:4px 24px;border-radius:22px;margin-bottom:16px}
.ds-badge.teal{background:#0B7A75}
.ds-title{font-size:clamp(22px,3.4vw,42px);font-weight:700;line-height:1.18;margin:0 auto;max-width:820px;text-align:center}
.ds-title:empty{display:none;margin:0}
.ds-sub{font-size:clamp(13px,1.3vw,16px);color:rgba(255,255,255,.72);max-width:700px;line-height:1.55;margin:14px auto 0;text-align:center}

/* ---- Title-slide overview list ---- */
.ds-intro-list{display:flex;flex-direction:column;gap:14px;max-width:640px;width:100%;margin:8px auto 0;flex:1 1 auto;justify-content:center}
.ds-intro-item{display:flex;align-items:center;gap:18px;text-align:left;opacity:0;animation:dsRise .45s ease-out forwards}
.ds-intro-num{flex:0 0 auto;font-family:'Lora',serif;font-size:22px;font-weight:700;color:rgba(11,122,117,.55);width:38px}
.ds-intro-item>div{display:flex;flex-direction:column;gap:2px}
.ds-intro-item strong{font-size:17px;font-weight:700;color:#fff}
.ds-intro-item span{font-size:12.5px;color:rgba(255,255,255,.6)}
.ds-intro-conclusion{font-size:15px;font-style:italic;color:#0B7A75;max-width:640px;margin:26px auto 0;padding-top:18px;border-top:1px solid rgba(11,122,117,.3);text-align:center;font-weight:600}
.ds-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;max-width:1000px;width:100%;margin:6px 0;flex:1 1 auto;align-content:center}
.ds-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px 14px 0;text-align:left;opacity:0;animation:dsRise .48s ease-out forwards;display:flex;flex-direction:column;min-height:168px}
.ds-tile i{font-size:20px;margin-bottom:10px;display:block}
.ds-tile h4{margin:0 0 6px;font-size:14.5px;font-weight:700}
.ds-tile p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.65);flex:1 1 auto}
.ds-tile-retention{margin:10px -14px 0}
.ds-tile-retention-label{padding:6px 14px 2px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#0B7A75;background:rgba(11,122,117,.18);border-top:1px solid rgba(11,122,117,.3)}
.ds-tile-retention-value{padding:2px 14px 9px;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.75);background:transparent;border-radius:0 0 11px 11px}
.ds-tiles-1col{display:flex;flex-direction:column;gap:16px;max-width:920px;width:100%;flex:1 1 auto;justify-content:center;margin:10px auto}
.ds-tiles-1col .ds-tile{display:flex;flex-direction:row;align-items:center;gap:20px;padding:18px 24px;text-align:left;min-height:0}
.ds-tiles-1col .ds-tile-head{display:flex;align-items:center;gap:12px;flex:0 0 260px}
.ds-tiles-1col .ds-tile i{font-size:20px;margin-bottom:0;color:#0B7A75;display:inline}
.ds-tiles-1col .ds-tile h4{font-size:17px;margin:0}
.ds-tiles-1col .ds-tile p{flex:1 1 auto;margin:0;font-size:14px;line-height:1.55}
.ds-flex-spacer{flex:1 1 auto;min-height:24px}
.ds-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;width:100%;text-align:left}
@media(max-width:700px){.ds-cols{grid-template-columns:1fr}}
.ds-col-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px;opacity:0;animation:dsRise .48s ease-out forwards}
.ds-col-card h3{margin:0 0 12px;font-size:16px;color:#0B7A75}
.ds-col-card i{margin-right:8px}
.ds-col-card ul{margin:0;padding-left:18px;font-size:13px;line-height:1.8;color:rgba(255,255,255,.8)}
/* Roomier variant (Third-Party Vendors slide) — with the title and closing
   line removed from that slide, the two cards now have the full body height
   to themselves; bigger text and looser line spacing fill it properly
   instead of leaving a small, cramped list floating above empty space. */
.ds-cols-roomy{max-width:960px}
.ds-cols-roomy .ds-col-card{padding:28px 30px}
.ds-cols-roomy .ds-col-card h3{font-size:19px;margin-bottom:18px}
.ds-cols-roomy .ds-col-card ul{font-size:15px;line-height:2.3}
.ds-bigstat{font-family:'Lora',serif;font-size:clamp(36px,6vw,72px);font-weight:700;color:#fff;margin:6px 0;opacity:0;animation:dsPop .6s cubic-bezier(.2,.8,.3,1.2) .1s forwards}
.ds-bigstat .accent{color:#D92D20}
.ds-navbar{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px 14px;flex-shrink:0}
.ds-nav-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:10px 22px;cursor:pointer;font-size:13px;font-weight:600}
.ds-nav-btn:hover:not(:disabled){background:#D92D20;border-color:#D92D20}
.ds-nav-btn:disabled{opacity:.3;cursor:default}
.ds-jump{display:flex;align-items:center;gap:5px;margin:0 8px}
.ds-jump button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:rgba(255,255,255,.6);font-size:10.5px;cursor:pointer;flex-shrink:0}
.ds-jump button.cur{background:#0B7A75;border-color:#0B7A75;color:#fff;font-weight:700}
.ds-jump-dots{color:rgba(255,255,255,.4);font-size:12px;padding:0 1px}
html.ds-locked,body.ds-locked{overflow:hidden!important;height:100%}
@media(max-width:768px){.ds-jump{display:none}}

/* ---- Data Flows slide: numbered legend + core-centered diagram, explicit
   left/right/bottom groups ---- */
.ds-legend{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0 auto;opacity:0;animation:dsRise .45s ease-out forwards}
.ds-legend span{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.75);white-space:nowrap}
.ds-legend b{width:23px;height:23px;border-radius:50%;background:rgba(11,122,117,.25);border:1px solid rgba(11,122,117,.6);color:#3ecfc7;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
.ds-arch-diagram{position:relative;flex:1 1 auto;min-height:0;width:100%;margin:0 auto}
.ds-arch-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:#0B7A75;border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:12px 26px;box-shadow:0 0 0 6px rgba(11,122,117,.12);white-space:nowrap}
.ds-arch-core>i{font-size:18px}
.ds-arch-core span{font-size:21px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:9px}
.ds-arch-core small{font-size:13px;font-weight:500;color:rgba(255,255,255,.65);letter-spacing:.3px}
.ds-arch-node{position:absolute;z-index:1;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 14px;white-space:nowrap}
.ds-arch-node.ds-arch-side{transform:translateY(-50%)}
.ds-arch-node.ds-arch-bot{transform:translateX(-50%)}
.ds-arch-node i{font-size:14px;color:rgba(255,255,255,.55);width:15px;text-align:center}
.ds-arch-node span{font-size:13px;font-weight:600}
.ds-arch-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ds-arch-svg text{user-select:none}

/* ---- Reveal system (identical mechanics to pitch.css, ds- namespaced) ---- */
[data-ds-reveal]{opacity:0!important;transform:translateY(12px) scale(.97);transition:opacity .4s ease-out, transform .4s ease-out}
[data-ds-reveal].ds-revealed{opacity:1!important;transform:translateY(0) scale(1)}
/* The reveal system's own transform (above) targets the same `transform`
   property these diagram elements use for POSITIONING (centering via
   translate), and — being later in the file with equal-or-higher
   specificity — was silently overwriting it, leaving every node offset by
   half its own size. Re-assert the positioning transform after the reveal
   rules so it always wins, in both the hidden and revealed reveal-states. */
[data-ds-reveal].ds-arch-core{transform:translate(-50%,-50%)!important}
[data-ds-reveal].ds-arch-node.ds-arch-side{transform:translateY(-50%)!important}
[data-ds-reveal].ds-arch-node.ds-arch-bot{transform:translateX(-50%)!important}

/* ---- Entrance animations ---- */
@keyframes dsDropIn{from{opacity:0;transform:translateY(-16px)}60%{transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes dsRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes dsPop{from{opacity:0;transform:scale(.9)}70%{transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@keyframes dsDrift{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(18px,12px) rotate(6deg)}100%{transform:translate(0,0) rotate(0deg)}}
.ds-header .ds-badge{opacity:0;animation:dsDropIn .45s ease-out .03s forwards}
.ds-header .ds-title{opacity:0;animation:dsRise .5s ease-out .14s forwards}
.ds-body-inner>.ds-sub:not([data-ds-reveal]){opacity:0;animation:dsRise .5s ease-out .3s forwards}
.ds-stage::before{animation:dsDrift 46s ease-in-out infinite}
.ds-stage::after{animation:dsDrift 60s ease-in-out infinite reverse}

@keyframes dsDrawLine{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.ds-connector-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:dsDrawLine .6s ease-out forwards}

@media(prefers-reduced-motion:reduce){
  .ds-badge,.ds-title,.ds-sub:not([data-ds-reveal]),.ds-tile,.ds-col-card{opacity:1;animation:none}
  [data-ds-reveal]{transition:none}
  .ds-connector-draw{animation:none;stroke-dashoffset:0}
  .ds-stage::before,.ds-stage::after{animation:none}
}
