/* Security overview on the People landing page. */
.people-security {
  position: relative;
  z-index: 2;
  background: transparent;
  color: #111b3e;
  isolation: isolate;
  padding: clamp(44px, 4vw, 64px) 0 clamp(56px, 6vw, 96px);
  transform-origin: 50% 0;
  box-shadow: none;
}
.people-security-divider { position: absolute; z-index: 0; inset: 0; overflow: visible; pointer-events: none; }
.people-security-divider svg { display: block; width: 100%; height: 100%; overflow: visible; }
.people-security-divider #security-surface-shape { fill: #fff; stroke: none; }
.people-security-divider path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.people-security-divider .ps-divider-shadow { stroke: #142d63; stroke-width: 3.5; opacity: 0; filter: url(#security-edge-shadow); }
.people-security-divider .ps-divider-segment { stroke: url(#security-edge-gradient); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.people-security-divider.is-revealed .ps-divider-shadow { animation: ps-edge-shadow-reveal 1200ms cubic-bezier(.22, 1, .36, 1) 120ms both; }
.people-security-divider.is-revealed .ps-divider-segment { animation: ps-edge-draw 900ms cubic-bezier(.22, 1, .36, 1) both; }
.people-security > .wrap { position: relative; z-index: 1; }
.people-security.ps-scroll-ready {
  transform: translate3d(0, var(--ps-section-lift, 70px), 0) scale(var(--ps-section-scale, .985));
  opacity: var(--ps-handoff-opacity, 1);
  filter: blur(var(--ps-handoff-blur, 0px));
  will-change: transform, opacity;
}
.people-security.ps-handoff-sticky {
  position: sticky;
  top: var(--ps-sticky-top, 0px);
}
.people-security.ps-handoff-complete {
  position: relative;
}
.people-security-heading { margin-bottom: 32px; }
.people-security-heading .kicker { display: flex; align-items: center; gap: 16px; color: #2563df; }
.people-security-heading .kicker::after { content: ''; width: 36px; height: 1px; background: currentColor; }
.people-security-heading h2 { margin: 16px 0; font-size: clamp(30px, 3vw, 46px); line-height: 1.15; letter-spacing: -.04em; color: #111b3e; }
.people-security-heading h2 span { color: #2563df; }
.people-security-heading p { max-width: 76ch; color: #596681; font-size: 17px; line-height: 1.65; margin: 0; }
.people-security-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.people-security-card { --security-accent: #2563df; --security-soft: #e8f1ff; --security-line: #d8e6fc; display: flex; flex-direction: column; min-width: 0; padding: 24px 20px; border: 1px solid var(--security-line); border-radius: 16px; background: #f7faff; box-shadow: 0 2px 4px rgb(20 39 69 / 2%), 0 10px 24px rgb(20 39 69 / 3%); }
.people-security-card--2fa { --security-accent: #078647; --security-soft: #e2f6e9; --security-line: #d8eddf; background: #f7fcf9; }
.people-security-card--roles { --security-accent: #7638d6; --security-soft: #eee5ff; --security-line: #e2d8fa; background: #faf8ff; }
.people-security-card--audit { --security-accent: #d66b08; --security-soft: #fff0e1; --security-line: #f5e4d4; background: #fffbf7; }
.people-security-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; color: var(--security-accent, #2563df); background: var(--security-soft, #e8f1ff); border-radius: 13px; border: 1px solid var(--security-line, #d8e6fc); }
.people-security-icon svg { width: 25px; height: 25px; }
.people-security-card h3 { color: #111b3e; font-size: 19px; line-height: 1.3; letter-spacing: -.025em; margin: 18px 0 12px; min-height: 2.6em; }
.people-security-card > p { color: #596681; font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.people-security-visual { margin-top: auto; min-height: 190px; display: flex; align-items: center; justify-content: center; }
.people-security-visual > img, .people-security-storage { width: 100%; max-width: 280px; height: 210px; object-fit: contain; }
.people-security-demo { width: 100%; border: 1px solid #e9edf3; background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgb(20 39 69 / 4%); }
.people-security-code { text-align: center; padding: 20px 12px; }
.people-security-code strong { color: #111b3e; font-size: 14px; }
.people-security-digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 14px 0; }
.people-security-digits span { display: grid; place-items: center; height: 38px; color: #111b3e; background: #fbfdff; border: 1px solid #d5e4fb; border-radius: 6px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.people-security-digits b { font-weight: inherit; }
.people-security-verified { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #078647; font-size: 14px; font-weight: 600; }
.people-security-verified svg { width: 30px; height: 30px; }
.people-security-roles { position: relative; width: 100%; list-style: none; margin: 0; padding: 0 0 0 14px; }
.people-security-roles::before { content: ''; position: absolute; left: 0; top: 25px; bottom: 25px; border: 1px solid #c3b3f3; border-right: 0; width: 10px; border-radius: 8px 0 0 8px; }
.people-security-roles li { position: relative; display: flex; align-items: center; gap: 8px; min-height: 50px; margin-top: 8px; padding: 10px 8px; border: 1px solid #e4ddf9; border-radius: 10px; background: #fff; color: #111b3e; }
.people-security-roles li:first-child { margin-top: 0; }
.people-security-roles li::before { content: ''; position: absolute; width: 5px; height: 5px; left: -17px; border-radius: 50%; background: #8f6bde; }
.people-security-user { width: 18px; height: 18px; flex-shrink: 0; color: #2563df; }
.people-security-roles li:nth-child(2) .people-security-user { color: #7638d6; }
.people-security-roles li:nth-child(3) .people-security-user { color: #7c899e; }
.people-security-roles strong { font-size: 12px; font-weight: 600; }
.people-security-roles span { margin-left: auto; font-size: 10px; color: #64728b; text-align: right; }
.people-security-log { list-style: none; margin: 0; padding: 16px 12px 16px 26px; }
.people-security-log li { position: relative; padding: 0 0 16px 12px; border-left: 1px solid transparent; }
.people-security-log li::after { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: #dce5f0; transform-origin: top; }
.people-security-log li:last-child { padding-bottom: 0; }
.people-security-log li::before { content: ''; position: absolute; z-index: 1; width: 8px; height: 8px; top: 4px; left: -4.5px; border-radius: 50%; background: #2676ee; }
.people-security-log li:nth-child(2)::before { background: #0b985a; }
.people-security-log li:nth-child(3)::before { background: #ed850e; }
.people-security-log time { display: block; color: #64728b; font-size: 10px; font-variant-numeric: tabular-nums; }
.people-security-log strong { display: block; color: #111b3e; font-size: 11px; font-weight: 500; line-height: 1.5; margin-top: 3px; }
.people-security-log span { display: block; font-size: 10px; color: #64728b; margin-top: 2px; }
.people-security-note { display: flex; align-items: center; gap: 20px; padding: 18px 24px; margin-top: 24px; border: 1px solid #d8e6fc; border-radius: 14px; background: #fff; }
.people-security-note .people-security-icon { width: 40px; height: 40px; border: 0; border-radius: 50%; }
.people-security-note p { color: #596681; font-size: 14px; line-height: 1.65; border-left: 1px solid #d8e6fc; padding-left: 20px; margin: 0; }
@media (max-width: 1100px) { .people-security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .people-security-card h3 { min-height: 0; } }
@media (max-width: 599px) { .people-security-grid { grid-template-columns: 1fr; } .people-security-card { padding: 24px; } .people-security-heading p { font-size: 15px; } .people-security-note { padding: 16px; gap: 12px; align-items: flex-start; } .people-security-note p { padding-left: 12px; font-size: 13px; } }

/* Four finite feature demonstrations. No timers or perpetual animation loops. */
.people-security-card { --ps-delay: 0ms; --ps-ease: cubic-bezier(.22, 1, .36, 1); transition: translate 180ms var(--ps-ease), border-color 180ms ease, box-shadow 180ms ease; }
.people-security-card:nth-child(2) { --ps-delay: 80ms; }
.people-security-card:nth-child(3) { --ps-delay: 160ms; }
.people-security-card:nth-child(4) { --ps-delay: 240ms; }
.people-security-card > .people-security-icon { transition: background-color 180ms ease; }
.ps-data-flow, .ps-shield-pulse { opacity: 0; }
.ps-shield, .ps-shield-pulse { transform-box: fill-box; transform-origin: center; }
.ps-ready { opacity: 0; }
.ps-entered { animation: ps-card-enter 400ms var(--ps-ease) var(--ps-delay) both; }
.ps-ready:not(.ps-demonstrate) .ps-server,
.ps-ready:not(.ps-demonstrate) .ps-shield,
.ps-ready:not(.ps-demonstrate) .people-security-digits span,
.ps-ready:not(.ps-demonstrate) .people-security-verified,
.ps-ready:not(.ps-demonstrate) .people-security-roles,
.ps-ready:not(.ps-demonstrate) .people-security-log li { opacity: 0; }
.ps-demonstrate .ps-server { animation: ps-fade 400ms var(--ps-ease) var(--ps-delay) both; }
.ps-demonstrate .ps-data-flow { stroke-dasharray: .18 .82; animation: ps-data 500ms linear calc(var(--ps-delay) + 400ms) both; }
.ps-demonstrate .ps-shield { animation: ps-shield 300ms var(--ps-ease) calc(var(--ps-delay) + 900ms) both; }
.ps-demonstrate .ps-shield-pulse { animation: ps-pulse 200ms ease-out calc(var(--ps-delay) + 1200ms) both; }
.people-security-digits span:nth-child(1) { --step: 0ms; }
.people-security-digits span:nth-child(2) { --step: 80ms; }
.people-security-digits span:nth-child(3) { --step: 160ms; }
.people-security-digits span:nth-child(4) { --step: 240ms; }
.people-security-digits span:nth-child(5) { --step: 320ms; }
.people-security-digits span:nth-child(6) { --step: 400ms; }
.ps-demonstrate .people-security-digits span { animation: ps-fade 180ms var(--ps-ease) calc(var(--ps-delay) + var(--step)) both; }
.ps-demonstrate .people-security-digits b { animation: ps-fade 160ms var(--ps-ease) calc(var(--ps-delay) + var(--step) + 80ms) both; }
.ps-demonstrate .people-security-verified svg { animation: ps-fade 250ms var(--ps-ease) calc(var(--ps-delay) + 650ms) both; }
.ps-demonstrate .people-security-verified path { animation: ps-check 250ms var(--ps-ease) calc(var(--ps-delay) + 650ms) both; }
.ps-demonstrate .people-security-verified > span { animation: ps-text 200ms var(--ps-ease) calc(var(--ps-delay) + 850ms) both; }
.people-security-roles li:nth-child(1), .people-security-log li:nth-child(1) { --row: 0ms; --audit-row: 0ms; }
.people-security-roles li:nth-child(2), .people-security-log li:nth-child(2) { --row: 100ms; --audit-row: 120ms; }
.people-security-roles li:nth-child(3), .people-security-log li:nth-child(3) { --row: 200ms; --audit-row: 240ms; }
.ps-demonstrate .people-security-roles::before { transform-origin: top; animation: ps-branch 350ms var(--ps-ease) var(--ps-delay) both; }
.ps-demonstrate .people-security-roles li { animation: ps-row 280ms var(--ps-ease) calc(var(--ps-delay) + 250ms + var(--row)) both; }
.ps-demonstrate .people-security-roles li span { animation: ps-fade 160ms var(--ps-ease) calc(var(--ps-delay) + 400ms + var(--row)) both; }
.ps-demonstrate .people-security-log li::after { animation: ps-branch 117ms linear calc(var(--ps-delay) + var(--audit-row)) both; }
.ps-demonstrate .people-security-log li::before { animation: ps-marker 180ms var(--ps-ease) calc(var(--ps-delay) + 350ms + var(--audit-row)) both; }
.ps-demonstrate .people-security-log li > * { animation: ps-text 250ms var(--ps-ease) calc(var(--ps-delay) + 350ms + var(--audit-row)) both; }
@keyframes ps-card-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-data { 0% { opacity: 0; stroke-dashoffset: .18; } 15% { opacity: .8; } 85% { opacity: .8; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes ps-shield { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes ps-pulse { 0% { opacity: 0; transform: scale(1); } 30% { opacity: .18; } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes ps-check { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes ps-row { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ps-text { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ps-branch { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ps-marker { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .people-security-card:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--security-line) 75%, var(--security-accent)); box-shadow: 0 3px 6px rgb(20 39 69 / 3%), 0 12px 28px rgb(20 39 69 / 6%); }
  .people-security-card:hover > .people-security-icon { background-color: color-mix(in srgb, var(--security-soft) 75%, white); }
}
@media (max-width: 599px) { .people-security-card { --ps-delay: 0ms !important; } }
@media (prefers-reduced-motion: reduce) {
  .people-security-divider .ps-divider-shadow { opacity: .9; }
  .people-security-divider .ps-divider-segment { opacity: 1; stroke-dashoffset: 0; }
  .people-security *, .people-security *::before, .people-security *::after { animation: none !important; transition: none !important; }
  .people-security .ps-ready, .people-security .ps-ready .ps-server, .people-security .ps-ready .ps-shield,
  .people-security .ps-ready .people-security-digits span, .people-security .ps-ready .people-security-verified,
  .people-security .ps-ready .people-security-roles, .people-security .ps-ready .people-security-log li { opacity: 1; }
}

/* Security → Get Started handoff. The existing sections remain in normal flow;
   only the visual layers are scrubbed after Security's content has been passed. */
.cta-section.ps-handoff-ready {
  position: relative;
  z-index: 3;
  transform: translate3d(0, var(--ps-cta-y, 24vh), 0) scale(var(--ps-cta-scale, .985));
  transform-origin: 50% 0;
  will-change: transform;
}
.cta-section.ps-handoff-ready .cta-panel {
  box-shadow: inset 0 1px 0 var(--tint-lift), var(--shadow-3),
    0 -24px 52px rgb(15 35 80 / 14%),
    0 -8px 26px rgb(37 99 235 / 6%);
}
@media (max-width: 700px) {
  .people-security.ps-scroll-ready { filter: none; }
  .cta-section.ps-handoff-ready .cta-panel {
    box-shadow: inset 0 1px 0 var(--tint-lift), var(--shadow-3),
      0 -18px 38px rgb(15 35 80 / 10%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .people-security.ps-scroll-ready { opacity: 1; filter: none; }
  .people-security.ps-handoff-sticky { position: relative; top: auto; }
  .cta-section.ps-handoff-ready { transform: none; will-change: auto; }
  .cta-section.ps-handoff-ready .cta-panel { box-shadow: inset 0 1px 0 var(--tint-lift), var(--shadow-3); }
}

@keyframes ps-edge-draw { from { opacity: 0; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes ps-edge-shadow-reveal {
  0% { opacity: 0; stroke-width: 8; }
  42% { opacity: .98; stroke-width: 5.5; }
  72% { opacity: .72; stroke-width: 3.8; }
  100% { opacity: .86; stroke-width: 3.5; }
}

/* Scroll-linked choreography. The existing UI remains the finished-state fallback. */
.people-security.ps-scroll-ready > .wrap {
  transform: none;
  opacity: 1;
  will-change: transform, opacity;
}
.people-security.ps-scroll-ready .people-security-heading > * {
  opacity: calc(.35 + var(--ps-heading-progress, 0) * .65);
  transform: translate3d(0, calc((1 - var(--ps-heading-progress, 0)) * 18px), 0);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(.22, 1, .36, 1);
}
.people-security.ps-scroll-ready .people-security-card {
  opacity: 1;
  transform: none;
}
.people-security.ps-scroll-ready .ps-server,
.people-security.ps-scroll-ready .ps-shield,
.people-security.ps-scroll-ready .people-security-digits span,
.people-security.ps-scroll-ready .people-security-roles li,
.people-security.ps-scroll-ready .people-security-log li {
  opacity: var(--ps-inner-progress, 0);
  transform: translate3d(0, calc((1 - var(--ps-inner-progress, 0)) * 14px), 0);
  transition: none;
}
.people-security.ps-scroll-ready .ps-server ellipse {
  opacity: var(--ps-indicator-progress, 0);
  transition: opacity 260ms ease-out;
}
.people-security.ps-scroll-ready .ps-data-flow {
  opacity: var(--ps-inner-progress, 0);
  stroke-dasharray: .18 .82;
  stroke-dashoffset: calc((1 - var(--ps-inner-progress, 0)) * .35);
}
.people-security.ps-scroll-ready .ps-shield .ps-lock {
  opacity: var(--ps-lock-progress, 0);
  transition: opacity 220ms ease-out;
}
.people-security.ps-scroll-ready .people-security-verified {
  opacity: var(--ps-verify-progress, 0);
}
.people-security.ps-scroll-ready .people-security-verified path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ps-verify-progress, 0));
}
.people-security.ps-scroll-ready .people-security-roles::before {
  transform: scaleY(var(--ps-inner-progress, 0));
  transform-origin: top;
  transition: none;
}
.people-security.ps-scroll-ready .people-security-log li::before {
  opacity: var(--ps-card-progress, 0);
  transition: none;
}
.people-security.ps-scroll-ready .people-security-log li::after {
  transform: scaleY(var(--ps-inner-progress, 0));
  transform-origin: top;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .people-security.ps-scroll-ready > .wrap,
  .people-security.ps-scroll-ready .people-security-heading > *,
  .people-security.ps-scroll-ready .ps-server,
  .people-security.ps-scroll-ready .ps-shield,
  .people-security.ps-scroll-ready .people-security-digits span,
  .people-security.ps-scroll-ready .people-security-roles li,
  .people-security.ps-scroll-ready .people-security-log li { opacity: 1; transform: none; transition: none; }
}