/* Security page: quiet surfaces, compact illustrations and a 4 + 2 card grid. */
:root:not([data-theme='dark']) {
  --bg: #f8fafc;
  --ink: #101333;
  --ink-2: #596782;
  --accent: #0866f5;
  --accent-ink: #075bea;
}
.security-page { --shell: 1440px; --gutter: clamp(24px, 3vw, 48px); --security-action: #075bea; }
.security-page .scroll-progress { display: none; }
.security-page .btn-primary { background: var(--security-action); box-shadow: none; }
.security-page .btn-primary:hover { background: color-mix(in srgb, var(--security-action) 92%, black); box-shadow: none; }
.sec-nav-menu, .sec-search { position: relative; }
.sec-nav-menu > summary { display: flex; align-items: center; gap: 7px; color: var(--ink-2); cursor: pointer; list-style: none; }
.sec-nav-menu summary::-webkit-details-marker, .sec-search summary::-webkit-details-marker { display: none; }
.sec-nav-menu > summary svg { width: 12px; height: 12px; }
.sec-nav-panel { position: absolute; top: calc(100% + 20px); left: -16px; min-width: 220px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-3); }
.security-page .sec-nav-panel a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.sec-nav-panel a:hover, .sec-search-results a:hover { background: var(--surface-2); }
.sec-search > summary { list-style: none; border: none; }
.sec-search-panel { position: absolute; right: 0; top: calc(100% + 14px); width: min(370px, calc(100vw - 40px)); max-height: calc(100svh - 100px); overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); box-shadow: var(--shadow-3); }
.sec-search-panel label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.sec-search-panel input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 14px; background: var(--bg); color: var(--ink); }
.sec-search-results { margin-top: 10px; display: grid; gap: 4px; }
.sec-search-results a { display: block; padding: 9px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; }
.sec-search-panel [role='status'] { color: var(--ink-2); font-size: 12px; margin-top: 12px; }
.sec-search-results li[hidden] { display: none; }

/* Restored lead section, with its original shield, proof points and motion. */
.sec-hero { padding-block: clamp(3rem, 5.5vw, 5rem) clamp(2.5rem, 4vw, 3.5rem); background: linear-gradient(118deg, color-mix(in srgb, var(--bg) 96%, var(--violet)), var(--bg) 52%, color-mix(in srgb, var(--surface) 96%, var(--violet))); }
.sec-hero-grid { display: grid; align-items: center; gap: clamp(2rem, 4vw, 4.5rem); }
.sec-hero-copy { min-width: 0; }
.sec-hero h1 { margin-top: var(--s-4); font-size: clamp(2.6rem, 4.1vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
.sec-hero h1 span { color: var(--accent-ink); }
.sec-hero h1 .sec-hero-accent { color: var(--p-mon); }
.sec-hero .lede { max-width: 61ch; margin-top: var(--s-4); }
.sec-hero-actions { margin-top: var(--s-5); gap: var(--s-3); }
.sec-hero-actions .btn { display: inline-flex; align-items: center; gap: .55rem; }
.sec-hero-actions .btn svg { width: 1rem; height: 1rem; }
.sec-hero-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--line) 78%, var(--violet)); }
.sec-hero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.sec-hero-point { display: grid; grid-template-columns: 2rem 1fr; align-items: start; column-gap: .65rem; }
.sec-hero-point-icon { grid-row: span 2; width: 1.8rem; height: 1.8rem; color: var(--accent-ink); }
.sec-hero-point:nth-child(2) .sec-hero-point-icon { color: var(--p-mon); }
.sec-hero-point strong { color: var(--ink); font-size: var(--fs-md); line-height: 1.35; }
.sec-hero-point span { margin-top: .15rem; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.4; }
.sec-hero-point--interactive {
  position: relative;
  z-index: 0;
  border-radius: 12px;
  isolation: isolate;
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1), background-color 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.sec-hero-point--interactive::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -.4rem -.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: background-color 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.sec-hero-point--interactive .sec-hero-point-icon {
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sec-hero-point--interactive:hover,
  .sec-hero-point--interactive:focus-visible { transform: translateY(-3px); }
  .sec-hero-point--interactive:hover::before,
  .sec-hero-point--interactive:focus-visible::before {
    background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    box-shadow: 0 10px 20px -18px rgb(34 77 150 / .42);
  }
  .sec-hero-point--interactive:hover .sec-hero-point-icon,
  .sec-hero-point--interactive:focus-visible .sec-hero-point-icon { transform: scale(1.1); opacity: 1; }
  .sec-hero-point--interactive:hover strong,
  .sec-hero-point--interactive:focus-visible strong { color: var(--accent-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-hero-point--interactive,
  .sec-hero-point--interactive::before,
  .sec-hero-point--interactive .sec-hero-point-icon { transition: none; }
  .sec-hero-point--interactive:hover,
  .sec-hero-point--interactive:focus-visible { transform: none; }
  .sec-hero-point--interactive:hover .sec-hero-point-icon,
  .sec-hero-point--interactive:focus-visible .sec-hero-point-icon { transform: none; }
}
.sec-hero-art { position: relative; width: 100%; max-width: 700px; min-height: 500px; justify-self: end; isolation: isolate; }
.sec-hero-orbit { position: absolute; top: 46%; left: 52%; width: min(72%, 410px); aspect-ratio: 1; border: 1px dashed color-mix(in srgb, var(--accent) 20%, var(--line-2)); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 5%, transparent), transparent 68%); transform: translate(-50%, -50%); }
.sec-hero-orbit::before { content: ''; position: absolute; inset: 10%; border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--line)); border-radius: inherit; }
.sec-hero-orbit::after { content: ''; position: absolute; inset: 21%; border: 1px solid color-mix(in srgb, var(--violet) 24%, var(--line)); border-radius: inherit; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 5%, transparent), transparent 70%); }
.sec-hero-network { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--accent) 36%, var(--line-2)); }
.sec-hero-network path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 4 7; }
.sec-hero-network circle { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.sec-hero-ringcopy { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--ink-3); }
.sec-hero-ringcopy path { fill: none; stroke: none; }
.sec-hero-ringcopy text { fill: currentColor; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.sec-hero-core { position: absolute; z-index: 2; top: 43%; left: 52%; display: grid; place-items: center; width: 250px; text-align: center; transform: translate(-50%, -50%); }
.sec-hero-shield { display: grid; place-items: center; width: 236px; height: 260px; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 7%, transparent), transparent 69%); }
.sec-hero-shield svg { width: 210px; height: 236px; filter: drop-shadow(0 12px 12px rgb(20 48 120 / .16)); }
.sec-hero-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: .75rem; width: clamp(160px, 31%, 220px); padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--line) 90%, var(--accent)); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 98%, var(--accent)); box-shadow: var(--shadow-2); }
.sec-hero-float--people { top: 18%; left: 0; --tile: var(--azure-500); --tile-bg: var(--azure-50); }
.sec-hero-float--data { bottom: 24%; left: 0; --tile: var(--good); --tile-bg: color-mix(in srgb, var(--good) 11%, var(--surface)); }
.sec-hero-float--process { top: 24%; right: 0; --tile: var(--p-mon); --tile-bg: color-mix(in srgb, var(--violet) 10%, var(--surface)); border-color: color-mix(in srgb, var(--violet) 22%, var(--line)); }
.sec-hero-float--audit { bottom: 29%; right: 0; --tile: var(--warn); --tile-bg: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.sec-hero-float-icon { display: grid; flex: none; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: var(--r-sm); color: var(--tile); background: var(--tile-bg); }
.sec-hero-float-icon svg { width: 1.45rem; height: 1.45rem; }
.sec-hero-float-copy { display: grid; gap: .16rem; min-width: 0; }
.sec-hero-float-copy strong { color: var(--ink); font-size: var(--fs-md); line-height: 1.3; }
.sec-hero-float-copy span { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.35; }
.sec-hero-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.sec-hero-control {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 1.65rem 1fr;
  align-items: center;
  column-gap: .55rem;
  min-width: 0;
  border-radius: 12px;
  isolation: isolate;
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1), background-color 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.sec-hero-control::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -.4rem -.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: background-color 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.sec-hero-control-icon {
  grid-row: span 2;
  width: 1.55rem;
  height: 1.55rem;
  color: var(--ink-3);
  opacity: .88;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease;
}
.sec-hero-control strong { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.25; }
.sec-hero-control span { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.25; }
@media (hover: hover) and (pointer: fine) {
  .sec-hero-control:hover,
  .sec-hero-control:focus-visible { transform: translateY(-3px); }
  .sec-hero-control:hover::before,
  .sec-hero-control:focus-visible::before {
    background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    box-shadow: 0 10px 20px -18px rgb(34 77 150 / .42);
  }
  .sec-hero-control:hover .sec-hero-control-icon,
  .sec-hero-control:focus-visible .sec-hero-control-icon { transform: scale(1.12); opacity: 1; }
  .sec-hero-control:hover strong,
  .sec-hero-control:focus-visible strong { color: var(--accent-ink); }
}
.sec-hero-point-icon--chat {
  width: 1.5rem;
  height: 1.5rem;
  justify-self: center;
  transform-origin: center;
  transition: transform 250ms cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .sec-hero-point:hover .sec-hero-point-icon--chat,
  .sec-hero-point:focus-visible .sec-hero-point-icon--chat { transform: translateY(-2px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-hero-control,
  .sec-hero-control::before,
  .sec-hero-control-icon,
  .sec-hero-point-icon--chat { transition: none; }
  .sec-hero-control:hover,
  .sec-hero-control:focus-visible { transform: none; }
  .sec-hero-control:hover .sec-hero-control-icon,
  .sec-hero-control:focus-visible .sec-hero-control-icon,
  .sec-hero-point:hover .sec-hero-point-icon--chat,
  .sec-hero-point:focus-visible .sec-hero-point-icon--chat { transform: none; }
}
/* A single, staged entrance explains the shield and its surrounding controls.
   Backwards fill releases transforms afterwards, so interactions stay responsive. */
@keyframes sec-hero-enter { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sec-shield-enter { from { opacity: .4; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sec-ring-enter { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes sec-network-enter { from { opacity: 0; } to { opacity: 1; } }
html.js body.ready .sec-hero-copy > * { animation: sec-hero-enter var(--dur-slow) var(--ease) calc(var(--i, 0) * 55ms) backwards; }
.sec-hero-copy > .kicker { display: inline-block; }
.sec-hero-copy > h1 { --i: 1; }
.sec-hero-copy > .lede { --i: 2; }
.sec-hero-copy > .sec-hero-actions { --i: 3; }
html.js body.ready .sec-hero-shield { animation: sec-shield-enter calc(var(--dur-slow) * 2) var(--ease) 55ms backwards; }
html.js body.ready .sec-hero-orbit::before,
html.js body.ready .sec-hero-orbit::after { animation: sec-ring-enter calc(var(--dur-slow) * 2) var(--ease) 110ms backwards; }
html.js body.ready .sec-hero-orbit::after { animation-delay: 165ms; }
html.js body.ready .sec-hero-network,
html.js body.ready .sec-hero-ringcopy { animation: sec-network-enter var(--dur-slow) var(--ease-out) 220ms backwards; }
html.js body.ready .sec-hero-float { animation: sec-hero-enter var(--dur-slow) var(--ease) calc(165ms + var(--i, 0) * 55ms) backwards; }
html.js body.ready .sec-hero-proof { animation: sec-hero-enter var(--dur-slow) var(--ease) 220ms backwards; }
.sec-hero-float--people { --i: 0; }
.sec-hero-float--process { --i: 1; }
.sec-hero-float--data { --i: 2; }
.sec-hero-float--audit { --i: 3; }
.sec-hero-actions .btn-primary svg { transition: transform var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sec-hero-actions .btn-primary:hover svg { transform: translateX(3px); }
}
@media (min-width: 1050px) {
  .sec-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(460px, .94fr); }
}
@media (max-width: 1049px) {
  .sec-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-hero-copy { max-width: 800px; }
  .sec-hero-art { justify-self: center; width: min(100%, 660px); }
  .sec-hero-proof { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sec-hero { padding-block: 2.5rem 2rem; }
  .sec-hero h1 { font-size: clamp(2.45rem, 10vw, 3.5rem); }
  .sec-hero h1 br { display: none; }
  .sec-hero-actions { align-items: stretch; }
  .sec-hero-actions .btn { justify-content: center; width: 100%; }
  .sec-hero-points { grid-template-columns: 1fr; gap: .8rem; }
  .sec-hero-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-hero-art { min-height: 360px; }
  .sec-hero-orbit { width: min(70%, 290px); }
  .sec-hero-core { top: 44%; width: 175px; }
  .sec-hero-shield { width: 154px; height: 170px; }
  .sec-hero-shield svg { width: 142px; height: 160px; }
  .sec-hero-float { width: clamp(138px, 26vw, 168px); gap: .5rem; padding: .65rem; }
  .sec-hero-float--people { top: 9%; left: 0; }
  .sec-hero-float--data { bottom: 4%; left: 0; }
  .sec-hero-float--process { top: 9%; right: 0; }
  .sec-hero-float--audit { bottom: 4%; right: 0; }
  .sec-hero-float-icon { width: 2.3rem; height: 2.3rem; }
  .sec-hero-float-icon svg { width: 1.25rem; height: 1.25rem; }
}
@media (max-width: 390px) {
  .sec-hero-art { min-height: 350px; }
  .sec-hero-float { width: min(138px, calc(50% - .25rem)); }
  .sec-hero-float-icon { width: 1.8rem; height: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.js body.ready .sec-hero-copy > *,
  html.js body.ready .sec-hero-shield,
  html.js body.ready .sec-hero-orbit::before,
  html.js body.ready .sec-hero-orbit::after,
  html.js body.ready .sec-hero-network,
  html.js body.ready .sec-hero-ringcopy,
  html.js body.ready .sec-hero-float,
  html.js body.ready .sec-hero-proof { animation: none; }
  .sec-hero-actions .btn-primary:hover svg { transform: none; }
}
.sec-hero .kicker { color: var(--p-mon); }

.sec-overview { padding-block: 56px 64px; background: color-mix(in srgb, var(--bg) 96%, var(--violet)); }
.sec-intro { margin: 0 0 20px; padding-inline: 2px; }
.sec-intro .kicker { font-size: 11px; color: var(--p-mon); letter-spacing: .19em; }
.sec-intro h2 { margin-top: 8px; font-size: clamp(34px, 3.65vw, 54px); line-height: 1.12; letter-spacing: -.045em; text-wrap: pretty; }
.sec-intro h2 span { color: var(--accent-ink); }
.sec-intro .lede { margin-top: 6px; max-width: none; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.sec-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sec-card {
  --card-accent: #0866f5;
  --card-ink: #075bea;
  --card-tint: #f3f8ff;
  --card-edge: #d9e7fc;
  position: relative; min-width: 0; padding: 22px;
  border: 1px solid var(--card-edge); border-radius: 22px;
  background: linear-gradient(145deg, var(--surface), var(--card-tint));
  box-shadow: 0 2px 5px rgb(17 33 62 / .015), 0 10px 24px -18px rgb(17 33 62 / .08);
  scroll-margin-top: 20px;
}
/* Fade the extra elevation in; the text stays still while the artwork responds. */
.sec-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 2px 4px rgb(17 33 62 / .03), 0 12px 28px -16px rgb(17 33 62 / .18); opacity: 0; transition: opacity var(--dur) var(--ease); }
.sec-card--green { --card-accent: #08b96c; --card-ink: #087b50; --card-tint: #f1faf6; --card-edge: #dcefe6; }
.sec-card--purple { --card-accent: #783cf4; --card-ink: #6b2cd8; --card-tint: #f7f4ff; --card-edge: #e8e0fb; }
.sec-card--orange { --card-accent: #f78a19; --card-ink: #b95a04; --card-tint: #fff8f0; --card-edge: #f8e9d7; }
.sec-card--wide { grid-column: span 2; }
.sec-card--infrastructure { --card-accent: #08b96c; --card-ink: #087b50; }
.sec-card-head { position: relative; min-height: 132px; margin-bottom: 12px; }
.sec-card-number { display: inline-grid; place-items: center; min-width: 36px; height: 32px; padding-inline: 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--card-accent) 24%, transparent); background: color-mix(in srgb, var(--card-accent) 7%, var(--surface)); color: var(--card-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sec-card-heading { position: relative; z-index: 1; width: 64%; margin-top: 12px; }
.sec-card-category { display: block; color: var(--card-ink); font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .11em; text-transform: uppercase; }
.sec-card h3 { margin-top: 8px; font-size: 19px; font-weight: 650; line-height: 1.16; letter-spacing: -.032em; text-wrap: pretty; }
.sec-card-art { position: absolute; width: 53%; height: 148px; object-fit: contain; top: -12px; right: -12px; pointer-events: none; transition: transform var(--dur) var(--ease); }
.sec-card-body, .sec-card-list { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.sec-card-list { display: grid; gap: 9px; margin-top: 17px; }
.sec-card-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; }
.sec-card-list svg { width: 18px; height: 18px; margin-top: 1px; padding: 4px; color: white; background: var(--card-accent); border-radius: 50%; }
.sec-card--wide .sec-card-head { min-height: 116px; }
.sec-card--wide .sec-card-heading { width: 46%; max-width: 215px; }
.sec-card--wide .sec-card-art { width: 52%; height: 164px; right: -8px; top: -18px; }
.sec-card--wide .sec-card-list { gap: 8px; }
.sec-card--infrastructure .sec-card-category { color: var(--accent-ink); }
:root[data-theme='dark'] .sec-card { --card-tint: color-mix(in srgb, var(--card-accent) 6%, var(--surface)); --card-edge: color-mix(in srgb, var(--card-accent) 18%, var(--line)); --card-ink: color-mix(in srgb, var(--card-accent) 50%, white); }

/* Short, one-time entrances; artwork settles without a continuous animation. */
@keyframes sec-intro-enter { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sec-art-enter { from { opacity: .4; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sec-check-enter { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
html.js body.ready .sec-intro.in > * { animation: sec-intro-enter var(--dur-slow) var(--ease) calc(var(--i, 0) * 55ms) backwards; }
.sec-intro h2 { --i: 1; }
.sec-intro .lede { --i: 2; }
html.js body.ready .sec-card.in .sec-card-art { animation: sec-art-enter calc(var(--dur-slow) + var(--dur-fast)) var(--ease) calc(var(--i, 0) * 55ms) backwards; }
html.js body.ready .sec-card.in .sec-card-list svg { animation: sec-check-enter var(--dur) var(--ease) calc(var(--i, 0) * 55ms + 110ms + var(--check, 0) * 45ms) backwards; }
.sec-card-list li:nth-child(2) { --check: 1; }
.sec-card-list li:nth-child(3) { --check: 2; }
.sec-card-list li:nth-child(4) { --check: 3; }
.sec-card:target { outline: 2px solid var(--card-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sec-card.in:hover .sec-card-art { transform: translateY(-3px) scale(1.015); }
  .sec-card.in:hover::after { opacity: 1; }
}

@media (max-width: 1200px) {
  .sec-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-card--wide { grid-column: auto; }
  .sec-card--wide .sec-card-head { min-height: 132px; }
  .sec-card--wide .sec-card-heading { width: 64%; }
  .sec-card--wide .sec-card-art { width: 53%; height: 148px; top: -12px; right: -12px; }
  .sec-card-art { width: 46%; }
}
@media (max-width: 1120px) {
  .sec-nav-menu > summary { padding-block: 12px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .sec-nav-panel { position: static; box-shadow: none; margin-block: 8px; }
  .sec-search-panel { position: fixed; top: 76px; right: 20px; }
}
@media (max-width: 620px) {
  .sec-overview { padding-block: 24px 40px; }
  .sec-intro { margin-bottom: 24px; }
  .sec-intro h2 { max-width: 16ch; font-size: 36px; }
  .sec-intro .lede { margin-top: 12px; }
  .sec-card-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sec-card { padding: 22px; border-radius: 20px; }
  .sec-card h3 { font-size: 20px; }
  .sec-card-body, .sec-card-list { font-size: 14px; }
  .sec-card-head { min-height: 136px; }
  .sec-card-art { width: 48%; }
}
@media (max-width: 370px) {
  .sec-card { padding: 18px; }
  .sec-card-heading, .sec-card--wide .sec-card-heading { width: 65%; }
  .sec-card h3 { font-size: 18px; }
  .sec-card-art, .sec-card--wide .sec-card-art { width: 46%; right: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js body.ready .sec-intro.in > *,
  html.js body.ready .sec-card.in .sec-card-art,
  html.js body.ready .sec-card.in .sec-card-list svg { animation: none; }
}

/* Existing disclosure and security-position sections. */
.section[aria-labelledby="claims-h"] { background: color-mix(in srgb, var(--bg) 99%, var(--violet)); }
.section[aria-labelledby="disclose-h"] { background: color-mix(in srgb, var(--bg) 99%, var(--violet)); }
.sec-claims-layout,
.sec-disclosure-layout { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.sec-claims-layout { align-items: center; }
.sec-claims-copy,
.sec-standing,
.sec-contact,
.sec-process { min-width: 0; }
.sec-claims-copy { border-left: 1px solid var(--line-2); padding-left: clamp(1.25rem, 2vw, 2rem); }
.sec-claims-copy h2 { max-width: 13ch; }
.sec-claims-copy h2 span,
.sec-contact h2 span { color: var(--accent-ink); }
.sec-claims-copy .prose { max-width: 66ch; }
.sec-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.sec-principle { display: grid; grid-template-columns: 2rem 1fr; align-items: start; column-gap: .75rem; }
.sec-principle-icon { grid-row: span 2; width: 2rem; height: 2rem; color: var(--accent-ink); }
.sec-principle strong { color: var(--ink); font-size: var(--fs-md); line-height: 1.35; }
.sec-principle span { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; }
.sec-standing { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }
.sec-standing > p,
.sec-process > p { color: var(--ink-2); margin-top: .35rem; }
.sec-standing-cards { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.sec-standing-card { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: start; gap: var(--s-4); padding: var(--s-4); border: 1px solid color-mix(in srgb, var(--line) 86%, var(--violet)); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 96%, var(--violet)); box-shadow: var(--shadow-1); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur) var(--ease); }
.sec-standing-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-sm); color: var(--accent-ink); background: var(--accent-soft); }
.sec-standing-icon svg { width: 1.65rem; height: 1.65rem; }
.sec-standing-icon.is-amber { color: var(--warn); background: color-mix(in srgb, #ffb324 17%, var(--surface)); }
.sec-standing-icon.is-violet { color: var(--p-mon); background: color-mix(in srgb, var(--violet) 11%, var(--surface)); }
.sec-standing-copy h3 { color: var(--ink); font-size: var(--fs-md); line-height: 1.35; }
.sec-standing-copy p { margin-top: .25rem; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.sec-status { align-self: start; white-space: nowrap; padding: .4rem .7rem; border-radius: 999px; color: var(--accent-ink); background: var(--accent-soft); font-size: .68rem; font-weight: 700; letter-spacing: .045em; }
.sec-status.is-amber { color: var(--warn); background: color-mix(in srgb, #ffb324 18%, var(--surface)); }
.sec-status.is-violet { color: var(--p-mon); background: color-mix(in srgb, var(--violet) 11%, var(--surface)); }
.sec-disclosure-layout { align-items: start; border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 5vw, 4rem); }
.sec-contact h2 { max-width: 16ch; }
.sec-contact .prose { color: var(--ink-2); }
.sec-contact .prose a { color: var(--accent-ink); }
.sec-contact .prose strong { color: var(--ink); }
.sec-contact .cluster { gap: .75rem; }
.sec-contact .btn { gap: .55rem; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }

/* Keep the contact-link handoff scoped to this one disclosure button. */
.security-page .sec-contact .sec-contact-form-label {
  display: inline-block;
  width: max-content;
  line-height: 1;
  white-space: nowrap;
}
.security-page .sec-contact .sec-contact-form-arrow {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: -10px;
  color: currentColor;
  transition: max-width 220ms ease, opacity 220ms ease, margin-left 220ms ease;
}
.security-page .sec-contact .sec-contact-form-arrow svg {
  width: 18px;
  height: 18px;
  max-width: none;
  flex: none;
}
.security-page .sec-contact .sec-contact-form:focus-visible .sec-contact-form-arrow,
.security-page .sec-contact .sec-contact-form.is-arrow-visible .sec-contact-form-arrow {
  max-width: 20px;
  opacity: 1;
  margin-left: 0;
}
.security-page .sec-contact .sec-contact-form {
  transition: border-color 150ms ease, background-color 150ms ease, transform var(--dur-fast) var(--ease);
}
.security-page .sec-contact .sec-contact-form:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .security-page .sec-contact .sec-contact-form:hover {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 6%, var(--surface));
  }
  .security-page .sec-contact .sec-contact-form:hover .sec-contact-form-arrow {
    max-width: 20px;
    opacity: 1;
    margin-left: 0;
  }
}
.security-page .sec-contact .sec-contact-form:active {
  transform: translateY(1px) scale(.98);
}
@media (prefers-reduced-motion: reduce) {
  .security-page .sec-contact .sec-contact-form-arrow { transition: none; }
}

/* Keep the email affordance scoped to the existing disclosure button. */
.security-page .sec-contact .sec-email-team {
  position: relative;
  overflow: hidden;
  gap: 12px;
}
.security-page .sec-contact .sec-email-team svg {
  width: 22px;
  height: 22px;
  flex: none;
  overflow: visible;
}
.security-page .sec-contact .sec-email-team .flap {
  transform-box: fill-box;
  transform-origin: 12px 7px;
  transition: transform 350ms cubic-bezier(.4, 0, .2, 1);
}
.security-page .sec-contact .sec-email-team .letter {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 250ms var(--ease), transform 300ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .security-page .sec-contact .sec-email-team:hover .flap,
  .security-page .sec-contact .sec-email-team:focus-visible .flap { transform: scaleY(-1); }
  .security-page .sec-contact .sec-email-team:hover .letter,
  .security-page .sec-contact .sec-email-team:focus-visible .letter {
    opacity: 1;
    transform: translateY(0);
  }
}
.security-page .sec-contact .sec-email-team:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--security-action) 88%, black);
}
.security-page .sec-contact .sec-email-team.is-opening .flap { transform: scaleY(-1); }
.security-page .sec-contact .sec-email-team.is-opening .letter {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .security-page .sec-contact .sec-email-team .flap,
  .security-page .sec-contact .sec-email-team .letter { transition: none; }
  .security-page .sec-contact .sec-email-team.is-opening .flap { transform: none; }
  .security-page .sec-contact .sec-email-team.is-opening .letter {
    opacity: 0;
    transform: none;
  }
}
.sec-process { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }
.sec-process h3 { color: var(--ink); font-size: var(--fs-xl); }
.sec-process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.sec-process-step { position: relative; text-align: center; padding-inline: .3rem; }
.sec-process-icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto var(--s-3); color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 50%; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sec-process-step:nth-child(2) .sec-process-icon { color: var(--p-mon); background: color-mix(in srgb, var(--violet) 10%, var(--surface)); border-color: color-mix(in srgb, var(--violet) 20%, var(--line)); }
.sec-process-step:nth-child(3) .sec-process-icon { color: var(--good); background: color-mix(in srgb, #20b26b 11%, var(--surface)); border-color: color-mix(in srgb, #20b26b 22%, var(--line)); }
.sec-process-step:nth-child(4) .sec-process-icon { color: var(--warn); background: color-mix(in srgb, #ffb324 15%, var(--surface)); border-color: color-mix(in srgb, #ffb324 27%, var(--line)); }
.sec-process-icon svg { width: 1.65rem; height: 1.65rem; }
.sec-process-step h4 { color: var(--ink); font-size: var(--fs-md); }
.sec-process-step p { max-width: 15ch; margin: .35rem auto 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.sec-process-arrow { position: absolute; top: 1.15rem; right: -.8rem; width: 1.25rem; height: 1.25rem; color: var(--accent-ink); }
@keyframes sec-icon-arrive { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes sec-arrow-arrive { from { opacity: .4; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.sec-standing-card.in .sec-standing-icon,
.sec-process-step.in .sec-process-icon { animation: sec-icon-arrive var(--dur) var(--ease) calc(var(--i, 0) * 55ms) backwards; }
.sec-process-step.in .sec-process-arrow { animation: sec-arrow-arrive var(--dur) var(--ease) calc(var(--i, 0) * 55ms) backwards; }
@media (hover: hover) and (pointer: fine) {
  .sec-contact .btn:hover { transform: translateY(-2px); }
  .sec-standing-card:hover { transform: translateY(-2px); }
  .sec-process-step:hover .sec-process-icon { transform: translateY(-3px) scale(1.04); }
}
@media (min-width: 1100px) {
  .sec-claims-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); }
  .sec-disclosure-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 1200px) {
  .sec-standing-card { grid-template-columns: 3rem minmax(0, 1fr); gap: .75rem; }
  .sec-standing-icon { width: 3rem; height: 3rem; }
  .sec-status { grid-column: 2; justify-self: start; margin-top: -.4rem; }
}
@media (max-width: 700px) {
  .sec-principles { grid-template-columns: 1fr; gap: var(--s-3); }
  .sec-process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .sec-process-step:nth-child(2) .sec-process-arrow { display: none; }
}
@media (max-width: 420px) {
  .sec-process-steps { grid-template-columns: 1fr; }
  .sec-process-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-standing-card.in .sec-standing-icon,
  .sec-process-step.in .sec-process-icon,
  .sec-process-step.in .sec-process-arrow { animation: none; }
  .sec-standing-card:hover,
  .sec-process-step:hover .sec-process-icon,
  .sec-contact .btn:hover { transform: none; }
}


/* Compact closing CTA. The graphic determines a modest natural row height. */
.security-page .cta-section { padding-block: 40px 64px; scroll-margin-top: 0; }
.security-page .sec-started { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'content'; align-items: center; padding: 56px 24px; min-height: 0; border-radius: 24px; border-color: #d7e3f8; overflow: visible; box-shadow: 0 18px 36px -24px rgb(49 80 130 / .2); }
.sec-started::before { background: radial-gradient(ellipse at 0% 5%, #eef5ff 0, transparent 26%), radial-gradient(ellipse at 100% 90%, #f0f3ff 0, transparent 25%); }
/* The shared homepage CTA rule gives direct children a relative position. Keep
   this Security-only artwork out of the content grid so it cannot create a
   second, viewport-sized row inside the compact card. */
.security-page .sec-started > .sec-started-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.sec-started-copy { grid-area: content; position: relative; z-index: 2; width: 100%; max-width: min(1000px, calc(100% - 280px)); min-width: 0; margin-inline: auto; }
.security-page .sec-started .kicker { font-size: 14px; line-height: 1.5; letter-spacing: .1em; color: #0065ff; }
.security-page .sec-started h2 { max-width: 1000px; margin: 24px auto 0; font-size: clamp(48px, 3.6vw, 54px); line-height: 1.12; letter-spacing: -.025em; font-weight: 650; text-wrap: balance; }
.security-page .sec-started .lede { margin-top: 24px; font-size: 22px; line-height: 1.5; color: #596b98; }
.security-page .sec-started .cluster { margin-top: 32px; gap: 16px; }
.security-page .sec-started .btn { min-height: 52px; padding: 14px 26px; border-radius: 12px; font-size: 17px; font-weight: 600; transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.security-page .sec-started .btn-primary { background: #0065ff; box-shadow: 0 6px 14px -8px rgb(0 101 255 / .3); }
.sec-started .btn svg { width: 20px; height: 20px; transition: transform 160ms var(--ease-out); }
.security-page .sec-started .talk-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: auto; height: 52px; white-space: nowrap; transition: width 380ms cubic-bezier(.4,0,.2,1), padding 380ms ease, border-radius 380ms ease, background-color 150ms ease, transform 100ms ease; }
.security-page .sec-started .talk-btn .lb,
.security-page .sec-started .talk-btn .ar { position: relative; z-index: 1; }
.security-page .sec-started .talk-btn .ar { display: inline-flex; align-items: center; justify-content: center; }
.security-page .sec-started .talk-btn .bub { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 6px; }
.security-page .sec-started .talk-btn .bub i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: security-talk-typing 1s ease-in-out infinite; }
.security-page .sec-started .talk-btn .bub i:nth-child(2) { animation-delay: .15s; }
.security-page .sec-started .talk-btn .bub i:nth-child(3) { animation-delay: .3s; }
.security-page .sec-started .talk-btn.typing { width: 96px !important; padding: 0; border-radius: 26px; }
.security-page .sec-started .talk-btn.typing .lb,
.security-page .sec-started .talk-btn.typing .ar { display: none; }
.security-page .sec-started .talk-btn.typing .bub { display: flex; }
@keyframes security-talk-typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.security-page .sec-started .btn-ghost { background: rgb(255 255 255 / .9); border-color: #d7e3f8; box-shadow: none; }
.security-page .sec-started .plans-wrap { position: relative; display: inline-block; }
.security-page .sec-started .plans-btn { transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out); }
.security-page .sec-started .plans-btn:hover,
.security-page .sec-started .plans-btn:focus-visible { border-color: #0065ff; background: color-mix(in srgb, #0065ff 5%, rgb(255 255 255 / .9)); }
.security-page .sec-started .deck { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; }
.security-page .sec-started .deck i { --line: #d7e3f8; --card-bg: #fff; position: absolute; left: -34px; top: -40px; width: 68px; height: 88px; border: 1px solid var(--line); border-radius: 10px; opacity: 0; transform-origin: 50% 100%; background: linear-gradient(var(--c), var(--c)) 0 0 / 100% 6px no-repeat, linear-gradient(var(--line), var(--line)) 10px 22px / 28px 8px no-repeat, linear-gradient(var(--line), var(--line)) 10px 38px / 46px 5px no-repeat, linear-gradient(var(--line), var(--line)) 10px 50px / 40px 5px no-repeat, linear-gradient(var(--line), var(--line)) 10px 62px / 44px 5px no-repeat, var(--card-bg); box-shadow: 0 10px 24px rgb(10 30 90 / .2); }
.sec-started .btn:focus-visible { outline: 3px solid #0065ff; outline-offset: 4px; }
.security-page .sec-started .btn:active { transform: translateY(1px); }
.sec-started-graphic { grid-area: content; position: relative; justify-self: end; width: 180px; height: 360px; margin-right: -16px; pointer-events: none; }
.sec-started-shield { position: absolute; width: 120px; left: 50px; top: 126px; filter: drop-shadow(4px 7px 8px rgb(48 122 238 / .12)); }
.sec-started-shield svg { width: 100%; }
.sec-started-tile { position: absolute; width: 50px; height: 50px; }
.sec-started-tile > span { display: grid; place-items: center; width: 100%; height: 100%; background: rgb(255 255 255 / .96); border-radius: 12px; box-shadow: 0 8px 18px -12px rgb(63 129 226 / .25); }
.sec-started-tile svg { width: 26px; height: 26px; }
.sec-started-tile--database { top: 48px; left: 78px; width: 58px; height: 58px; color: #0065ff; }
.sec-started-tile--people { top: 268px; left: 12px; color: #45b80d; }
.sec-started-tile--document { top: 300px; left: 122px; color: #ffa000; }
@keyframes sec-cta-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sec-cta-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sec-cta-lock { from { transform: translateY(-4px); } to { transform: none; } }
.sec-started.in:not(.no-anim) .sec-started-copy > * { animation: sec-cta-enter 450ms cubic-bezier(.22,1,.36,1) backwards; }
.sec-started.in:not(.no-anim) .sec-started-copy > :nth-child(1) { animation-delay: 80ms; }
.sec-started.in:not(.no-anim) .sec-started-copy > :nth-child(2) { animation-delay: 160ms; }
.sec-started.in:not(.no-anim) .sec-started-copy > :nth-child(3) { animation-delay: 240ms; }
.sec-started.in:not(.no-anim) .sec-started-copy > :nth-child(4) { animation-delay: 320ms; }
.sec-started.in:not(.no-anim) .sec-path-draw { stroke-dasharray: 1; animation: sec-cta-draw 900ms cubic-bezier(.22,1,.36,1) 300ms backwards; }
.sec-started.in:not(.no-anim) .sec-started-shield { animation: sec-cta-enter 450ms cubic-bezier(.22,1,.36,1) 500ms backwards; }
.sec-started.in:not(.no-anim) .sec-started-tile { animation: sec-cta-enter 450ms var(--ease-out) 650ms backwards; }
.sec-started.in:not(.no-anim) .sec-started-tile--people { animation-delay: 750ms; }
.sec-started.in:not(.no-anim) .sec-started-tile--document { animation-delay: 850ms; }
.sec-started.in:not(.no-anim) .sec-started-nodes { animation: sec-cta-enter 300ms var(--ease-out) 1100ms backwards; }
.sec-started.in:not(.no-anim) .sec-lock-shackle { animation: sec-cta-lock 300ms var(--ease-out) 1300ms backwards; }
.sec-started.motion-paused *, .sec-started.motion-paused { animation-play-state: paused !important; }
[data-theme='dark'] .sec-started::before { opacity: .12; }
[data-theme='dark'] .sec-started-art { opacity: .5; }
[data-theme='dark'] .sec-started .lede { color: var(--ink-2); }
[data-theme='dark'] .sec-started .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .security-page .sec-started .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgb(0 101 255 / .35); }
  .sec-started .btn-primary:hover svg { transform: translateX(3px); }
  .security-page .sec-started .btn-ghost:hover { border-color: #aac6f5; background: var(--accent-soft); }
}
@media (max-width: 1199px) {
  .sec-started-graphic { width: 120px; }
  .sec-started-shield { left: 0; width: 100px; top: 145px; }
  .sec-started-tile { display: none; }
  .sec-started-copy { max-width: calc(100% - 240px); }
  .sec-started-break { display: none; }
  .security-page .sec-started h2 { font-size: 42px; }
  .security-page .sec-started .lede { font-size: 20px; }
}
@media (max-width: 900px) {
  .security-page .sec-started { grid-template-areas: 'copy' 'art'; gap: 24px; padding: 48px 28px; }
  .sec-started-copy { grid-area: copy; max-width: 100%; }
  .sec-started-graphic { grid-area: art; justify-self: center; width: 230px; height: 180px; margin: 0; }
  .sec-started-shield { top: 15px; left: 55px; width: 120px; }
  .sec-started-tile { display: block; }
  .sec-started-tile--database { top: 0; left: 172px; }
  .sec-started-tile--people { top: 110px; left: 0; }
  .sec-started-tile--document { top: 130px; left: 178px; }
  .sec-started-paths, .sec-started-nodes { display: none; }
}
@media (max-width: 600px) {
  .security-page .cta-section { padding-block: 28px 48px; }
  .security-page .sec-started { padding: 40px 20px; }
  .security-page .sec-started h2 { font-size: clamp(30px, 8vw, 34px); }
  .security-page .sec-started .kicker { font-size: 13px; }
  .security-page .sec-started .lede { font-size: 20px; }
  .security-page .sec-started .cluster { flex-direction: column; }
  .security-page .sec-started .btn { width: 100%; font-size: 16px; padding-inline: 20px; white-space: normal; }
  .security-page .sec-started .plans-wrap { width: 100%; }
}
@media (max-width: 380px) {
  .sec-started-graphic { width: 200px; }
  .sec-started-shield { left: 40px; }
  .sec-started-tile--database { left: 142px; }
  .sec-started-tile--document { left: 150px; }
  .security-page .site-header .lockup img { width: 128px; }
  .security-page .icon-btn { width: 40px; height: 40px; flex-shrink: 0; }
  .security-page .menu-toggle { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .security-page .sec-started, .security-page .sec-started * { animation: none !important; transition: none !important; }
  .security-page .sec-started .btn:hover, .security-page .sec-started .btn:active, .sec-started .btn:hover svg { transform: none; }
  .security-page .sec-started .talk-btn .bub i { animation: none; }
}

/* Security shield diagram --------------------------------------------------
   This block owns only the diagram in the Security hero. The stage uses the
   920 x 640 design coordinate system so the rings, shield and card orbit stay
   concentric at every desktop size. */
.security-page .sec-hero-art {
  position: relative;
  width: min(100%, 920px);
  max-width: 920px;
  min-height: 0;
  justify-self: end;
  isolation: isolate;
}
.security-page .sec-hero-diagram { width: 100%; }
.security-page .sec-diagram-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 920 / 640;
  container-type: inline-size;
}
.security-page .sec-diagram-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #607091;
}
.security-page .sec-diagram-glow { opacity: 1; }
.security-page .sec-diagram-ring {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.security-page .sec-diagram-ring--outer { stroke: #9fc1fa; stroke-width: 1.2; stroke-dasharray: 3 7; }
.security-page .sec-diagram-ring--middle,
.security-page .sec-diagram-ring--inner { stroke: #b8cff5; stroke-width: 1.15; }
.security-page .sec-diagram-ring--middle { stroke-opacity: .72; }
.security-page .sec-diagram-ring--inner { stroke: #c2c3fb; stroke-opacity: .7; }
.security-page .sec-diagram-labels { fill: currentColor; }
.security-page .sec-diagram-labels text { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; }
.security-page .sec-diagram-shield { transform-box: fill-box; transform-origin: center; }
.security-page .sec-diagram-shield-shadow { opacity: .8; }
.security-page .sec-lock-shackle { transform-box: fill-box; transform-origin: center; }
.security-page .sec-hero-card {
  --card-accent: #2f6bff;
  --card-tile: #eaf0ff;
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: clamp(34px, 6.2cqw, 56px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.45cqw, 14px);
  box-sizing: border-box;
  width: 29.35%;
  height: 20%;
  padding: clamp(9px, 1.65cqw, 18px);
  border: 1px solid #bfd5f6;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 98%, #eaf2ff);
  box-shadow: 0 12px 28px -18px rgb(33 73 143 / .28), 0 2px 5px rgb(24 45 90 / .06);
  transform-origin: center;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.security-page .sec-hero-card--people { top: 15.78%; left: 0; }
.security-page .sec-hero-card--process { top: 15.78%; right: 0; --card-accent: #7b4dff; --card-tile: #eee8ff; border-color: #cfc2fa; }
.security-page .sec-hero-card--data { top: 64.22%; left: 0; --card-accent: #1fa85a; --card-tile: #e3f6ea; }
.security-page .sec-hero-card--audit { top: 64.22%; right: 0; --card-accent: #c7861a; --card-tile: #f7ecd6; }
:root[data-theme='dark'] .security-page .sec-hero-card--people { --card-tile: color-mix(in srgb, #2f6bff 22%, var(--surface)); }
:root[data-theme='dark'] .security-page .sec-hero-card--process { --card-tile: color-mix(in srgb, #7b4dff 22%, var(--surface)); }
:root[data-theme='dark'] .security-page .sec-hero-card--data { --card-tile: color-mix(in srgb, #1fa85a 22%, var(--surface)); }
:root[data-theme='dark'] .security-page .sec-hero-card--audit { --card-tile: color-mix(in srgb, #c7861a 22%, var(--surface)); }
.security-page .sec-hero-card-icon {
  display: grid;
  place-items: center;
  width: clamp(34px, 6.2cqw, 56px);
  height: clamp(34px, 6.2cqw, 56px);
  border-radius: 26%;
  color: var(--card-accent);
  background: var(--card-tile);
}
.security-page .sec-hero-card-icon svg { width: 48%; height: 48%; }
.security-page .sec-hero-card-copy { display: grid; gap: .28em; min-width: 0; }
.security-page .sec-hero-card-copy strong {
  color: var(--ink);
  font-size: clamp(13px, 2cqw, 20px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.security-page .sec-hero-card-copy span {
  color: var(--ink-2);
  font-size: clamp(11px, 1.55cqw, 16px);
  line-height: 1.32;
}
.security-page .sec-hero-diagram-replay {
  display: block;
  margin: 12px auto 0;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.security-page .sec-hero-diagram-replay:hover { color: var(--accent-ink); border-color: var(--accent); }
.security-page .sec-hero-diagram-replay:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-glow,
html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-ring,
html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-labels { opacity: 0; }
html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-ring--middle,
html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-ring--inner { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-shield { opacity: 0; transform: scale(.72); }
html.js .security-page .sec-hero-diagram.is-pending .sec-lock-shackle { transform: translateY(-13px); }
html.js .security-page .sec-hero-diagram.is-pending .sec-hero-card { opacity: 0; }
html.js .security-page .sec-hero-diagram.is-animating .sec-diagram-glow { animation: sec-diagram-glow-in 1400ms var(--ease-out) both; }
html.js .security-page .sec-hero-diagram.is-animating .sec-diagram-ring--outer { animation: sec-diagram-fade-in 700ms var(--ease-out) 300ms both; }
html.js .security-page .sec-hero-diagram.is-animating .sec-diagram-ring--middle,
html.js .security-page .sec-hero-diagram.is-animating .sec-diagram-ring--inner { animation: sec-diagram-ring-draw 1600ms var(--ease-out) 80ms both; }
html.js .security-page .sec-hero-diagram.is-animating .sec-diagram-ring--inner { animation-delay: 180ms; }
html.js .security-page .sec-hero-diagram.is-animating .sec-diagram-labels { animation: sec-diagram-fade-in 700ms var(--ease-out) 500ms both; }
html.js .security-page .sec-hero-diagram.is-animating .sec-diagram-shield { animation: sec-diagram-shield-in 1000ms cubic-bezier(.22,.8,.3,1) 350ms both; }
html.js .security-page .sec-hero-diagram.is-animating .sec-lock-shackle { animation: sec-diagram-lock 550ms var(--ease-out) 1250ms both; }
@keyframes sec-diagram-glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sec-diagram-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sec-diagram-ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sec-diagram-shield-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes sec-diagram-lock { from { transform: translateY(-13px); } to { transform: translateY(0); } }
@keyframes sec-diagram-card-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) {
  .security-page .sec-hero-card.is-orbit-complete:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -17px rgb(33 73 143 / .34), 0 3px 7px rgb(24 45 90 / .08); }
}
@media (max-width: 1049px) and (min-width: 761px) {
  .security-page .sec-hero-art { width: min(100%, 660px); justify-self: center; }
}
@media (max-width: 760px) {
  .security-page .sec-hero-art { width: 100%; }
  .security-page .sec-diagram-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    aspect-ratio: auto;
    overflow: hidden;
  }
  .security-page .sec-diagram-svg {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    width: 170%;
    max-width: none;
    height: auto;
    margin-left: -35%;
    overflow: hidden;
  }
  .security-page .sec-hero-card {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 86px;
    padding: 10px;
    gap: 8px;
    transform: none;
  }
  .security-page .sec-hero-card-copy strong { font-size: 14px; }
  .security-page .sec-hero-card-copy span { font-size: 12px; }
  html.js .security-page .sec-hero-diagram.is-pending .sec-hero-card { transform: translateY(22px); }
  html.js .security-page .sec-hero-diagram.is-animating .sec-hero-card { animation: sec-diagram-card-in 550ms var(--ease-out) calc(var(--card-index) * 130ms) both; }
}
@media (max-width: 459px) {
  .security-page .sec-diagram-stage { grid-template-columns: 1fr; }
  .security-page .sec-diagram-svg { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-glow,
  html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-ring,
  html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-labels,
  html.js .security-page .sec-hero-diagram.is-pending .sec-diagram-shield,
  html.js .security-page .sec-hero-diagram.is-pending .sec-hero-card { opacity: 1; transform: none; }
  .security-page .sec-hero-diagram *, .security-page .sec-hero-diagram { animation: none !important; transition: none !important; }
  .security-page .sec-hero-card.is-orbit-complete:hover { transform: none; }
}