/* ============================================================
   ProPDF Privacy — section graphics
   Each .g is a 300×240 stage. Animations pause until the card
   scrolls into view (.pcard.in), then loop gently.
   ============================================================ */

.g { position: relative; width: 300px; height: 240px; }
.g * { will-change: transform, opacity; }

/* pause everything until the parent card is in view */
.pcard-figure [class*="anim"],
.pcard-figure .g [style*="animation"],
.pcard-figure .g * { animation-play-state: paused; }
.pcard.in .pcard-figure .g * { animation-play-state: running; }

/* shared mono tag */
.g-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  color: var(--brand); text-transform: uppercase;
}
.g-doc-lines { display: flex; flex-direction: column; gap: 6px; }
.g-doc-lines i { display: block; height: 5px; border-radius: 3px; background: currentColor; opacity: .22; }

/* ============================================================
   G1 — Delete files (30-day countdown → dissolve)
   ============================================================ */
.g-del { display: grid; place-items: center; }
.g-del-ring { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.g-del-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.g-del-track { fill: none; stroke: var(--border); stroke-width: 6; }
.g-del-prog {
  fill: none; stroke: url(#delGrad); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 471; stroke-dashoffset: 0;
  animation: delDeplete 9s linear infinite;
}
@keyframes delDeplete { to { stroke-dashoffset: 471; } }
.g-del-doc {
  position: relative; width: 78px; height: 96px; border-radius: 9px;
  background: var(--white); border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(31,31,46,.12);
  padding: 14px 12px; color: var(--text);
  animation: delDoc 9s ease-in-out infinite;
}
.g-del-doc .g-doc-lines i:nth-child(1) { width: 70%; }
.g-del-doc .g-doc-lines i:nth-child(3) { width: 85%; }
.g-del-doc .g-doc-lines i:nth-child(4) { width: 55%; }
@keyframes delDoc {
  0%, 62% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  82% { opacity: 0; transform: scale(.82) translateY(10px); filter: blur(3px); }
  86%, 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.g-del-bits { position: absolute; inset: 0; pointer-events: none; }
.g-del-bits span {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 2px;
  background: var(--brand-3); opacity: 0; animation: delBit 9s ease-in infinite;
}
.g-del-bits span:nth-child(1) { --tx: -34px; --ty: 26px; animation-delay: 0s; }
.g-del-bits span:nth-child(2) { --tx: 30px; --ty: 30px; background: var(--brand); }
.g-del-bits span:nth-child(3) { --tx: -20px; --ty: 40px; background: var(--brand-2); }
.g-del-bits span:nth-child(4) { --tx: 22px; --ty: 18px; }
@keyframes delBit {
  0%, 64% { opacity: 0; transform: translate(-50%,-50%); }
  72% { opacity: 1; }
  84% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))); }
  100% { opacity: 0; }
}
.g-del-label {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; box-shadow: var(--shadow-sm); white-space: nowrap;
}

/* ============================================================
   G2 — Data stays with us (vault + blocked externals)
   ============================================================ */
.g-vault { display: grid; place-items: center; }
.g-vault-core {
  position: relative; width: 110px; height: 110px; border-radius: 24px;
  background: var(--grad-brand);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px rgba(79,70,229,.32);
  z-index: 2;
}
.g-vault-core::after {
  content: ""; position: absolute; inset: -14px; border-radius: 34px;
  border: 1.5px dashed rgba(124,58,237,.45); animation: vaultRing 14s linear infinite;
}
@keyframes vaultRing { to { transform: rotate(360deg); } }
.g-vault-core svg { width: 42px; height: 42px; stroke: #fff; }
.g-vault-pulse {
  position: absolute; width: 110px; height: 110px; border-radius: 24px;
  border: 2px solid var(--brand-3); opacity: 0; animation: vaultPulse 4s ease-out infinite;
}
@keyframes vaultPulse {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}
.g-vault-node {
  position: absolute; width: 34px; height: 34px; border-radius: 9px;
  background: var(--white); border: 1px solid var(--border); display: grid; place-items: center;
  color: var(--muted); box-shadow: var(--shadow-sm); z-index: 1;
}
.g-vault-node svg { width: 16px; height: 16px; }
.g-vault-node.n1 { top: 4px; left: 16px; }
.g-vault-node.n2 { top: 10px; right: 14px; }
.g-vault-node.n3 { bottom: 8px; right: 30px; }
.g-vault-node .x {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 700;
}
/* data dot that tries to escape and bounces back */
.g-vault-dot {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-3); box-shadow: 0 0 10px var(--brand-3);
  animation: vaultDot 4.5s ease-in-out infinite;
}
@keyframes vaultDot {
  0%, 100% { transform: translate(-50%,-50%); }
  35% { transform: translate(34px,-30px); }
  45% { transform: translate(28px,-24px); }   /* bounce back at boundary */
  70% { transform: translate(-30px,26px); }
  80% { transform: translate(-24px,20px); }
}

/* ============================================================
   G3 — Results stay on our systems (formats → server → you)
   ============================================================ */
.g-res { width: 260px; height: 230px; }
.g-res-chips { display: flex; gap: 8px; justify-content: center; }
.g-res-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--brand);
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; box-shadow: var(--shadow-sm);
  animation: resChip 3.6s ease-in-out infinite;
}
.g-res-chip:nth-child(2) { animation-delay: .25s; }
.g-res-chip:nth-child(3) { animation-delay: .5s; }
.g-res-chip:nth-child(4) { animation-delay: .75s; }
@keyframes resChip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.g-res-flow { position: relative; height: 44px; margin: 6px 0; }
.g-res-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-res-flow path { fill: none; stroke: var(--border); stroke-width: 1.5; }
.g-res-flow .pkt {
  fill: var(--brand); r: 3.5;
}
.g-res-server {
  width: 150px; margin: 0 auto; border-radius: 12px; background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.g-res-server .led { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: resLed 2s ease-in-out infinite; }
@keyframes resLed { 0%,100%{opacity:1} 50%{opacity:.3} }
.g-res-server .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--text); font-weight: 600; }
.g-res-down {
  display: flex; flex-direction: column; align-items: center; margin-top: 10px; color: var(--brand);
}
.g-res-down .arrow { animation: resDown 2.4s ease-in-out infinite; }
@keyframes resDown { 0%,100%{ transform: translateY(0); opacity:.5 } 50%{ transform: translateY(5px); opacity:1 } }
.g-res-you {
  margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 8px; padding: 5px 12px;
}

/* ============================================================
   G4 — Marketing trackers & cookies (analytics)
   ============================================================ */
.g-track { width: 256px; }
.g-track-panel {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 18px 18px 14px;
}
.g-track-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.g-track-head .g-tag { color: var(--muted); }
.g-track-toggle { width: 34px; height: 19px; border-radius: 999px; background: var(--brand); position: relative; }
.g-track-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; animation: trToggle 4s ease-in-out infinite;
}
@keyframes trToggle { 0%,46%{ left: 17px } 54%,100%{ left: 17px } }
.g-track-bars { display: flex; align-items: flex-end; gap: 9px; height: 92px; }
.g-track-bars span {
  flex: 1; border-radius: 5px 5px 0 0; background: var(--grad-brand); opacity: .9;
  transform-origin: bottom; transform: scaleY(var(--h));
  animation: trBar 4.5s ease-in-out infinite;
}
.g-track-bars span:nth-child(1){ --h:.45; animation-delay:.0s }
.g-track-bars span:nth-child(2){ --h:.7; animation-delay:.12s }
.g-track-bars span:nth-child(3){ --h:.4; animation-delay:.24s }
.g-track-bars span:nth-child(4){ --h:.95; animation-delay:.36s }
.g-track-bars span:nth-child(5){ --h:.6; animation-delay:.48s }
.g-track-bars span:nth-child(6){ --h:.8; animation-delay:.6s }
@keyframes trBar {
  0%, 100% { transform: scaleY(calc(var(--h) * 0.5)); }
  50% { transform: scaleY(var(--h)); }
}
.g-track-cookie {
  position: absolute; right: 4px; bottom: -6px; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c89a5b, #a9742f);
  box-shadow: 0 6px 14px rgba(169,116,47,.4); display: grid; place-items: center;
  animation: ckBob 3.4s ease-in-out infinite;
}
.g-track-cookie i, .g-track-cookie b {
  position: absolute; background: #5a3a15; border-radius: 50%;
}
.g-track-cookie i { width: 6px; height: 6px; }
.g-track-cookie b { width: 4px; height: 4px; }
.g-track-cookie i:nth-of-type(1){ top: 12px; left: 14px }
.g-track-cookie i:nth-of-type(2){ bottom: 11px; right: 12px }
.g-track-cookie b:nth-of-type(1){ top: 22px; right: 14px }
.g-track-cookie b:nth-of-type(2){ bottom: 14px; left: 16px }
@keyframes ckBob { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-5px) rotate(8deg) } }

/* ============================================================
   G5 — Session cookies (browser session, expires on close)
   ============================================================ */
.g-sess { width: 250px; }
.g-sess-win {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.g-sess-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.g-sess-bar i { width: 9px; height: 9px; border-radius: 50%; }
.g-sess-bar i:nth-child(1){ background:#ff5f57 } .g-sess-bar i:nth-child(2){ background:#febc2e } .g-sess-bar i:nth-child(3){ background:#28c840 }
.g-sess-url {
  margin-left: 8px; flex: 1; height: 18px; border-radius: 6px; background: var(--bg);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); display: flex; align-items: center; padding: 0 8px;
}
.g-sess-body { padding: 18px; display: grid; place-items: center; gap: 12px; min-height: 110px; }
.g-sess-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: rgba(22,163,74,.1); color: var(--success); font-size: 12px; font-weight: 600;
  border: 1px solid rgba(22,163,74,.3);
  animation: sessPill 5s ease-in-out infinite;
}
.g-sess-pill .check {
  width: 14px; height: 14px;
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: sessTick 5s ease-in-out infinite;
}
@keyframes sessPill {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
  50% { box-shadow: 0 0 0 5px rgba(22,163,74,.12); }
}
@keyframes sessTick {
  0%, 12% { stroke-dashoffset: 24; }
  34%, 100% { stroke-dashoffset: 0; }
}
.g-sess-cookie {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 10px; color: var(--muted);
}
.g-sess-cookie .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: pulseSoft 1.8s infinite; }
.g-sess-expire {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); opacity: .7; white-space: nowrap;
}

/* ============================================================
   G6 — Your data is your data (ownership seal)
   ============================================================ */
.g-own { display: grid; place-items: center; }
.g-own-doc {
  position: relative; width: 124px; height: 152px; border-radius: 12px; background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 20px 18px; color: var(--text);
}
.g-own-doc .g-doc-lines i:nth-child(2){ width: 80% } .g-own-doc .g-doc-lines i:nth-child(4){ width: 60% } .g-own-doc .g-doc-lines i:nth-child(5){ width: 90% }
.g-own-seal {
  position: absolute; right: -18px; bottom: -16px; width: 76px; height: 76px; border-radius: 50%;
  background: var(--grad-brand); display: grid; place-items: center; color: #fff;
  box-shadow: 0 10px 24px rgba(79,70,229,.36);
  animation: ownStamp 5s ease-in-out infinite;
  transform: rotate(-8deg);
}
.g-own-seal::before {
  content: ""; position: absolute; inset: 6px; border: 1.5px dashed rgba(255,255,255,.6); border-radius: 50%;
}
.g-own-seal span { font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
@keyframes ownStamp {
  0%, 100% { transform: scale(1) rotate(-8deg); }
  10% { transform: scale(1.07) rotate(-8deg); }
  20% { transform: scale(1) rotate(-8deg); }
}
.g-own-ring {
  position: absolute; width: 96px; height: 96px; right: -28px; bottom: -26px; border-radius: 50%;
  border: 2px solid var(--brand-3); opacity: 0; animation: ownRing 5s ease-out infinite;
}
@keyframes ownRing { 30%{ opacity:.5; transform: scale(.8) } 60%{ opacity:0; transform: scale(1.4) } 100%{opacity:0} }

/* ============================================================
   G7 — Email communication (envelope + sending)
   ============================================================ */
.g-mail { display: grid; place-items: center; }
.g-mail-env {
  position: relative; width: 156px; height: 104px; border-radius: 12px; background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: visible;
}
.g-mail-env .env-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-mail-env .flap-fill { fill: var(--brand-light); opacity: .55; }
[data-theme="dark"] .g-mail-env .flap-fill { fill: rgba(99,102,241,.28); }
.g-mail-env .flap-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.g-mail-fly {
  position: absolute; left: 50%; top: 42%; width: 14px; height: 14px; transform: translate(-50%,-50%);
  color: var(--brand); animation: mailFly 3.8s ease-in-out infinite; z-index: 2;
}
.g-mail-fly svg { width: 16px; height: 16px; }
@keyframes mailFly {
  0%, 12% { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translate(46px,-92px) scale(1.05); opacity: 0; }
}
.g-mail-arc { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.g-mail-arc path { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: .35; }

/* ============================================================
   G8 — Magic links (HERO: email → link token → unlock)
   ============================================================ */
.g-magic { width: 264px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.g-magic-field {
  width: 200px; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.g-magic-field .at { color: var(--brand); }
.g-magic-field .cur { width: 1.5px; height: 13px; background: var(--brand); animation: magicCaret 1s steps(2) infinite; }
@keyframes magicCaret { 50%{ opacity: 0 } }
.g-magic-wire { position: relative; width: 2px; height: 40px; background: var(--border); margin: 2px 0; overflow: visible; }
.g-magic-spark {
  position: absolute; left: 50%; top: 0; width: 10px; height: 10px; border-radius: 50%; transform: translateX(-50%);
  background: var(--brand-3); box-shadow: 0 0 12px var(--brand-3); animation: magicSpark 4s ease-in-out infinite;
}
@keyframes magicSpark {
  0%, 22% { top: -4px; opacity: 0; }
  30% { opacity: 1; }
  60% { top: 38px; opacity: 1; }
  72%, 100% { top: 38px; opacity: 0; }
}
.g-magic-token {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  box-shadow: 0 8px 18px rgba(79,70,229,.32); margin: 2px 0 12px;
  animation: magicToken 4s ease-in-out infinite;
}
.g-magic-token .spk { animation: magicTwinkle 2s ease-in-out infinite; }
@keyframes magicTwinkle { 0%,100%{ opacity:.5; transform: scale(.8) } 50%{ opacity:1; transform: scale(1.15) } }
@keyframes magicToken {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 18px rgba(79,70,229,.32); }
  50% { transform: translateY(-3px); box-shadow: 0 13px 26px rgba(79,70,229,.44); }
}
.g-magic-lock {
  position: relative; width: 60px; height: 60px; border-radius: 16px; background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--brand);
}
.g-magic-lock .shackle {
  transform-origin: 14px 14px; animation: magicUnlock 4s ease-in-out infinite;
}
@keyframes magicUnlock {
  0%, 55% { transform: rotate(0) translateX(0); }
  68%, 92% { transform: rotate(-18deg) translateX(-2px); }
  100% { transform: rotate(0); }
}
.g-magic-once {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); margin-top: 9px; letter-spacing: .3px;
}

/* ============================================================
   G9 — OCR accuracy (scan line + accuracy meter)
   ============================================================ */
.g-ocr { display: flex; align-items: center; gap: 18px; }
.g-ocr-doc {
  position: relative; width: 120px; height: 150px; border-radius: 10px; background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 16px 14px; overflow: hidden; color: var(--text);
}
.g-ocr-doc .g-doc-lines i:nth-child(2){width:90%} .g-ocr-doc .g-doc-lines i:nth-child(4){width:65%} .g-ocr-doc .g-doc-lines i:nth-child(6){width:80%}
.g-ocr-flag {
  display: inline-block; width: 22px; height: 5px; border-radius: 3px; background: var(--warning) !important; opacity: .9 !important;
  animation: ocrFlag 5s ease-in-out infinite;
}
@keyframes ocrFlag { 0%,40%,100%{ opacity:.22 } 55%,70%{ opacity:.9 } }
.g-ocr-scan {
  position: absolute; left: 0; right: 0; height: 26px;
  background: linear-gradient(180deg, transparent, rgba(79,70,229,.18), transparent);
  border-top: 1px solid rgba(79,70,229,.5); border-bottom: 1px solid rgba(79,70,229,.5);
  animation: ocrScan 5s ease-in-out infinite;
}
@keyframes ocrScan { 0%{ top: -26px } 50%{ top: 150px } 100%{ top: -26px } }
.g-ocr-meter { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.g-ocr-meter svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.g-ocr-meter .track { fill: none; stroke: var(--border); stroke-width: 7; }
.g-ocr-meter .prog {
  fill: none; stroke: var(--success); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 245; stroke-dashoffset: 245; animation: ocrMeter 5s ease-out infinite;
}
@keyframes ocrMeter { 0%{ stroke-dashoffset: 245 } 60%,100%{ stroke-dashoffset: 7 } }
.g-ocr-meter .pct { font-size: 17px; font-weight: 800; color: var(--text); }
.g-ocr-meter .pct small { font-size: 9px; font-weight: 600; color: var(--muted); display: block; font-family: var(--font-mono); }

/* ============================================================
   G10 — Use at your own risk (review checklist + caution)
   ============================================================ */
.g-risk { display: grid; place-items: center; }
.g-risk-doc {
  position: relative; width: 150px; border-radius: 12px; background: var(--white);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 16px; display: flex; flex-direction: column; gap: 11px;
}
.g-risk-row { display: flex; align-items: center; gap: 9px; }
.g-risk-box {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--success); background: var(--success);
  display: grid; place-items: center; color: #fff; flex: none;
}
.g-risk-row .bar { flex: 1; height: 6px; border-radius: 3px; background: currentColor; color: var(--text); opacity: .2; }
.g-risk-row:nth-child(1) .g-risk-box { animation: riskCheck 4.5s ease-in-out infinite; }
.g-risk-row:nth-child(2) .g-risk-box { animation: riskCheck 4.5s ease-in-out infinite .4s; }
.g-risk-row:nth-child(3) .g-risk-box { animation: riskCheck 4.5s ease-in-out infinite .8s; }
@keyframes riskCheck {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
.g-risk-row .check { opacity: 1; }
.g-risk-caution {
  position: absolute; top: -16px; right: -16px; width: 46px; height: 46px;
  display: grid; place-items: center; color: var(--warning);
  animation: ckBob 3.6s ease-in-out infinite;
}
.g-risk-caution svg { width: 46px; height: 46px; filter: drop-shadow(0 4px 10px rgba(217,119,6,.3)); }

/* ============================================================
   G11 — HIPAA (shield + in-progress status)
   ============================================================ */
.g-hipaa { display: grid; place-items: center; gap: 18px; }
.g-hipaa-shield {
  position: relative; width: 108px; height: 124px; display: grid; place-items: center; color: #fff;
  filter: drop-shadow(0 10px 22px rgba(79,70,229,.3));
}
.g-hipaa-plate {
  position: absolute; inset: 0; background: var(--grad-brand);
  clip-path: polygon(50% 0, 100% 16%, 100% 58%, 50% 100%, 0 58%, 0 16%);
}
.g-hipaa-cross { position: relative; z-index: 1; width: 40px; height: 40px; }
.g-hipaa-cross::before, .g-hipaa-cross::after {
  content: ""; position: absolute; background: #fff; border-radius: 3px;
}
.g-hipaa-cross::before { width: 14px; height: 40px; left: 13px; }
.g-hipaa-cross::after { width: 40px; height: 14px; top: 13px; }
.g-hipaa-sweep {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  clip-path: polygon(50% 0, 100% 16%, 100% 58%, 50% 100%, 0 58%, 0 16%);
}
.g-hipaa-sweep::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  animation: hipaaSweep 4.5s ease-in-out infinite;
}
@keyframes hipaaSweep { 0%{ left: -60% } 55%,100%{ left: 130% } }
.g-hipaa-status {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 180px;
}
.g-hipaa-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px;
  background: rgba(217,119,6,.1); border: 1px solid rgba(217,119,6,.35); color: var(--warning);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
}
.g-hipaa-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); animation: pulseSoft 1.6s infinite; }
.g-hipaa-track { width: 100%; height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.g-hipaa-fill {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--warning), var(--brand-2));
  width: 0; animation: hipaaFill 5s ease-in-out infinite;
}
@keyframes hipaaFill { 0%{ width: 8% } 55%,80%{ width: 64% } 100%{ width: 8% } }
.g-hipaa-cap { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }