/* Security page on the Orbit design. Loaded after orbit.css and pages.css; reuses their tokens, tabs,
   product previews, stack, team panel and FAQ. The drawings show their final state by default, and
   security.js plays them in when JavaScript runs */

.ic-cloud { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 18.5a4.5 4.5 0 01-.6-9A6 6 0 0118 9a4.8 4.8 0 01-.5 9.5z'/%3E%3C/svg%3E"); }
.ic-file { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.ic-box { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1.5'/%3E%3Cpath d='M5 9v11h14V9M10 13h4'/%3E%3C/svg%3E"); }
.ic-lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E"); }

.ic-key { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='8' cy='15' r='4.5'/%3E%3Cpath d='M11.2 11.8L20 3M16.5 6.5l2.5 2.5M14 9l2 2'/%3E%3C/svg%3E"); }
.ic-list { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2.5'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.ic-check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.5-3.2 8.2-7.5 9.5-4.3-1.3-7.5-5-7.5-9.5V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.ic-user { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0115 0'/%3E%3C/svg%3E"); }
.ic-sign { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M15 4l5 5L9 20H4v-5z'/%3E%3Cpath d='M13 6l5 5'/%3E%3C/svg%3E"); }
/* an icon in a small tile */
.sx-tile, .sx-ic, .sx-plans .ic, .sx-chips .ic { position: relative; -webkit-mask: none; mask: none; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--trace); }
.sx-tile::after, .sx-ic::after, .sx-plans .ic::after, .sx-chips .ic::after { content: ""; position: absolute; inset: 26%; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ---------- hero: your data inside Sfere, behind its controls ---------- */
.sx-hero { padding-bottom: 56px; }
.sx-hero h1 > span, .sx-lx .lx-copy h3 { text-wrap: balance; }
.sx-hero .lede { text-wrap: pretty; }
.sx-hero h1 sup, #soc-2 sup { font-size: .42em; vertical-align: super; line-height: 0; }
.sx-badge { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); max-width: 540px; }
.sx-seal { flex: none; display: block; width: 64px; border-radius: 50%; transition: transform .25s var(--ease), box-shadow .25s; }
.sx-seal img { display: block; width: 100%; height: auto; }
.sx-seal:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(146, 107, 247, .7); }
.sx-seal.lg { width: 76px; }
.sx-badge p b { display: block; font-weight: 500; font-size: 15px; }
.sx-badge p span { display: block; margin-top: 3px; color: var(--mute); font-size: 13.5px; }

.sx-vis { position: relative; height: 600px; isolation: isolate; }
.sx-vis::before { content: ""; position: absolute; inset: 6% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(118, 79, 246, .26), rgba(118, 79, 246, .06) 62%, transparent); pointer-events: none; }
.sx-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the lock at the centre of the sphere */
.sx-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center; border-radius: 28px; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(146, 107, 247, .55), rgba(24, 20, 38, .92) 72%); border: 1px solid rgba(167, 135, 255, .65);
  box-shadow: 0 0 0 8px rgba(118, 79, 246, .08), 0 0 70px -4px rgba(118, 79, 246, .95), 0 20px 40px -16px rgba(0, 0, 0, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sx-core svg { width: 40px; height: auto; overflow: visible; filter: drop-shadow(0 0 10px rgba(214, 199, 252, .7)); }
.sx-core .sh { fill: none; stroke: #e8e0ff; stroke-width: 11; stroke-linecap: round; }
.sx-core rect:first-of-type { fill: #e8e0ff; }
.sx-core circle, .sx-core rect + circle + rect { fill: #5b3ee0; }
/* three controls, labelled around the shield */
.sx-chips { list-style: none; margin: 0; padding: 0; }
.sx-chips li { position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; font-size: 13.5px; white-space: nowrap; color: var(--ink);
  background: rgba(20, 18, 30, .72); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9); animation: sxFloat 7s ease-in-out infinite; }
.sx-chips .ic { width: 28px; height: 28px; border-radius: 9px; color: #fff; background: rgba(118, 79, 246, .35); border-color: rgba(167, 135, 255, .55); }
.sx-chips .c1 { top: 9%; inset-inline-start: 0; }
.sx-chips .c2 { top: 59%; inset-inline-end: -8px; animation-delay: -2.3s; }
.sx-chips .c3 { bottom: 11%; inset-inline-start: 3%; animation-delay: -4.6s; }
@keyframes sxFloat { 50% { transform: translateY(-6px); } }
/* what the moving dots mean */
.sx-key { position: absolute; inset-block-end: 12px; inset-inline-start: 4px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 10px; color: var(--dim); }
.sx-key > span { display: inline-flex; align-items: center; gap: 8px; }
.sx-key i { width: 6px; height: 6px; border-radius: 50%; background: #cfcbe0; }
.sx-key .k-lock { width: 7px; height: 7px; border-radius: 2px; background: #a98bff; box-shadow: 0 0 8px rgba(146, 107, 247, .9); }
.sx-key .k-out { background: #f6b08f; box-shadow: 0 0 8px rgba(240, 138, 93, .8); }
.sx-vis .illus { inset-block-end: 12px; inset-inline-end: 4px; }
html:not(.js) .sx-key { display: none; }

/* ---------- figures from the report ---------- */
.sx-band { position: relative; }
.sx-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(118, 79, 246, .06) 50%, transparent); }
.sx-nums li { padding: 34px 28px 36px; }
.sx-nums li:first-child { padding-inline-start: 0; }
.sx-nums li + li { border-inline-start: 1px solid var(--line); }
.sx-nums b { display: block; font-weight: 500; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.05; letter-spacing: -.035em; white-space: nowrap;
  background: linear-gradient(92deg, #efe9ff 0%, #b597fb 60%, #8763f8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-nums span { display: block; margin-top: 12px; max-width: 250px; color: var(--mute); font-size: 14.5px; line-height: 1.45; }

/* ---------- controls explorer ---------- */
.sx-lx .lx-panels { padding: 36px; }
.sx-lx .lx-p { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: ". ui" "copy ui" "feats ui" ". ui"; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); gap: 0 56px; }
.sx-lx .lx-copy { padding-bottom: 28px; }
.sx-lx .lx-copy h3 { font-size: 30px; }
.sx-ic { display: block; width: 50px; height: 50px; margin-bottom: 24px; border-radius: 15px; color: #fff;
  background: radial-gradient(circle at 30% 22%, rgba(167, 135, 255, .6), rgba(118, 79, 246, .22) 70%); border-color: rgba(167, 135, 255, .55); box-shadow: 0 0 34px -6px rgba(146, 107, 247, .85); }
.sx-feats { grid-area: feats; align-self: start; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-feats li { display: grid; align-content: start; gap: 3px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(9, 9, 13, .4); }
.sx-feats b { font-weight: 500; font-size: 14.5px; }
.sx-feats span { color: var(--mute); font-size: 13px; line-height: 1.4; }
.sx-lx .lx-ui { min-height: 400px; padding: 20px 22px 22px; }
/* once the tabs run, every panel shares one cell, so the box keeps the tallest panel's height and the
   page below does not move when a tab changes */
.sx-lx.stacked .lx-panels { display: grid; }
.sx-lx.stacked .lx-p { grid-area: 1 / 1; }
.sx-lx.stacked .lx-p[hidden] { display: grid; visibility: hidden; }
.sx-lx.stacked .lx-ui { align-self: stretch; }
.sx-lx.stacked .ui-enc { display: flex; flex-direction: column; }
.sx-lx.stacked .ui-enc .enc-flow { flex: 1; }

/* encryption: a wire with packets crossing it, then three stores, each locked */
.enc-flow { display: grid; grid-template-columns: 104px minmax(0, 1fr) 104px; align-items: center; padding: 30px 0 26px; }
.enc-end { display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 12.5px; text-align: center; color: var(--mute); }
.enc-end .ic { width: 40px; height: 40px; border-radius: 12px; }
.enc-end:last-child .ic { color: #fff; background: rgba(118, 79, 246, .35); border-color: rgba(167, 135, 255, .6); box-shadow: 0 0 22px -4px rgba(146, 107, 247, .8); }
.enc-wire { position: relative; height: 2px; margin: 0 4px 22px; background: repeating-linear-gradient(90deg, rgba(214, 199, 252, .35) 0 6px, transparent 6px 11px); }
.enc-wire em { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--trace); white-space: nowrap; }
.enc-wire i { position: absolute; top: -8px; left: 0; width: 18px; height: 18px; border-radius: 6px; background: rgba(118, 79, 246, .55); border: 1px solid rgba(214, 199, 252, .7); box-shadow: 0 0 14px rgba(146, 107, 247, .8); }
.enc-wire i:nth-child(1) { left: 16%; } .enc-wire i:nth-child(2) { left: calc(50% - 9px); } .enc-wire i:nth-child(3) { left: calc(84% - 18px); }
.enc-wire i::after { content: ""; position: absolute; inset: 3px; background: #fff; -webkit-mask: var(--lk) center / contain no-repeat; mask: var(--lk) center / contain no-repeat; }
.enc-wire i { --lk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E"); }
.lx-p.on .enc-wire i { animation: sxPacket 2.7s linear infinite backwards; }
.lx-p.on .enc-wire i:nth-child(2) { animation-delay: .9s; }
.lx-p.on .enc-wire i:nth-child(3) { animation-delay: 1.8s; }
@keyframes sxPacket { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 18px); opacity: 0; } }
html[dir="rtl"] .enc-wire { transform: scaleX(-1); }
html[dir="rtl"] .enc-wire em { transform: translateX(-50%) scaleX(-1); }
.enc-lbl { display: block; padding-top: 16px; border-top: 1px solid var(--line); font-size: 10px; color: var(--trace); }
.enc-rest { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.enc-rest li { position: relative; display: grid; justify-items: start; gap: 10px; padding: 14px 12px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(9, 9, 13, .45); }
.enc-rest b { font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.enc-rest span { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--mono); letter-spacing: .04em; color: #8fe8b0; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(111, 227, 156, .08); border: 1px solid rgba(111, 227, 156, .25); }
.enc-rest span::before { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--lk) center / contain no-repeat; mask: var(--lk) center / contain no-repeat; }
.enc-rest { --lk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E"); }
.lx-p.on .enc-rest li { animation: evIn .5s var(--ease) both; }
.lx-p.on .enc-rest li:nth-child(2) { animation-delay: .12s; } .lx-p.on .enc-rest li:nth-child(3) { animation-delay: .24s; }

/* access: three roles reach for the record; only the one that needs it gets through */
.acc-map { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; padding: 14px 0 6px; }
.acc { list-style: none; margin: 0; padding: 0; }
.acc li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 0; padding: 12px 0; }
.acc .key { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 12px 7px 9px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(20, 18, 30, .9); font-size: 13px; }
.acc .key i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #a6a3b8 0 3.5px, transparent 4px), radial-gradient(ellipse 7px 5px at 50% 100%, #a6a3b8 99%, transparent); }
.acc em { position: relative; height: 2px; font-style: normal; }
.acc small { grid-column: 2; padding-top: 6px; padding-inline-start: 10px; font-size: 11.5px; color: var(--dim); }
.acc .no em { width: 46%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 5px, transparent 5px 9px); }
.acc .no em::after { content: "×"; position: absolute; inset-inline-end: -11px; top: -10px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; line-height: 1; color: #f6b08f; background: rgba(240, 138, 93, .12); border: 1px solid rgba(240, 138, 93, .45); }
.acc .ok .key { border-color: rgba(146, 107, 247, .6); background: rgba(118, 79, 246, .2); }
.acc .ok .key i { background: radial-gradient(circle at 50% 36%, #e8e0ff 0 3.5px, transparent 4px), radial-gradient(ellipse 7px 5px at 50% 100%, #e8e0ff 99%, transparent); }
.acc .ok em { background: linear-gradient(90deg, rgba(146, 107, 247, .4), var(--trace)); box-shadow: 0 0 10px rgba(146, 107, 247, .6); }
html[dir="rtl"] .acc .ok em { background: linear-gradient(270deg, rgba(146, 107, 247, .4), var(--trace)); }
.acc .ok em::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px var(--sphere); opacity: 0; }
.lx-p.on .acc .ok em::after { animation: sxRun 2.2s .3s var(--ease) infinite; }
@keyframes sxRun { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
html[dir="rtl"] .lx-p.on .acc .ok em::after { animation-name: sxRunRtl; }
@keyframes sxRunRtl { 0% { left: calc(100% - 8px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.acc .ok small { display: inline-flex; align-items: center; gap: 8px; color: #8fe8b0; }
.acc .ok small b { font: 500 10px var(--mono); letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; color: var(--trace); background: rgba(118, 79, 246, .2); border: 1px solid rgba(146, 107, 247, .45); }
.lx-p.on .acc .no em { animation: sxReach .7s var(--ease) both; }
.lx-p.on .acc li:nth-child(3) em { animation-delay: .15s; }
@keyframes sxReach { from { width: 0; } }
.acc-node { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 16px; border-radius: 18px; text-align: center; font-size: 12.5px; font-weight: 500;
  border: 1px solid rgba(146, 107, 247, .55); background: radial-gradient(90% 80% at 50% 0%, rgba(118, 79, 246, .35), rgba(20, 18, 30, .9)); box-shadow: 0 0 40px -10px rgba(118, 79, 246, .8); }
.acc-node .ic { width: 38px; height: 38px; border-radius: 12px; color: #fff; }
.acc-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-foot span { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 11.5px; color: var(--mute); background: rgba(9, 9, 13, .4); }
.acc-foot b { font-size: 13.5px; font-weight: 500; color: var(--ink); }

/* logging: entries arrive; the admin's own entry is locked */
.lg { list-style: none; margin: 0; padding: 0; }
.lg li { display: grid; grid-template-columns: 46px 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lg time { font: 500 11px var(--mono); color: var(--dim); }
.lg b { justify-self: start; font-weight: 500; font-size: 12px; padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.lg .own b { color: var(--trace); border-color: rgba(146, 107, 247, .45); background: rgba(118, 79, 246, .14); }
.lg span { color: var(--mute); min-width: 0; }
.lg-lock { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font: 500 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #f6b08f; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(240, 138, 93, .1); border: 1px solid rgba(240, 138, 93, .35); white-space: nowrap; }
.lg-lock::before { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--lk) center / contain no-repeat; mask: var(--lk) center / contain no-repeat;
  --lk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E"); }
.lx-p.on .lg li { animation: evIn .5s var(--ease) both; }
.lx-p.on .lg li:nth-child(2) { animation-delay: .15s; } .lx-p.on .lg li:nth-child(3) { animation-delay: .3s; } .lx-p.on .lg li:nth-child(4) { animation-delay: .45s; }
.lg-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lg-foot span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-2); }
.lg-ok { color: #8fe8b0; background: rgba(111, 227, 156, .08); border-color: rgba(111, 227, 156, .3) !important; }
.lg-ok::before { content: "✓"; font-weight: 600; }
.lx-p.on .lg-ok { animation: sxStamp .5s .75s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sxStamp { from { opacity: 0; transform: scale(1.25); } }
.lg-ro { color: var(--mute); }

/* releases: four steps, each one checked in turn */
.rl { position: relative; list-style: none; margin: 0; padding: 8px 0 0; }
.rl::before { content: ""; position: absolute; inset-inline-start: 15px; top: 52px; bottom: 36px; width: 2px; border-radius: 2px; background: linear-gradient(var(--trace), rgba(111, 227, 156, .6)); box-shadow: 0 0 8px rgba(146, 107, 247, .5); transform-origin: top; }
.lx-p.on .rl::before { animation: sxDown 1.6s .2s var(--ease) both; }
@keyframes sxDown { from { transform: scaleY(0); } }
.rl li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 8px; padding: 4px 0; }
.rl li > div { min-width: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(9, 9, 13, .4); }
.rl small { display: block; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.rl b { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; }
.rl i { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: #1f1a33; border: 1px solid rgba(167, 135, 255, .7); box-shadow: 0 0 16px -2px rgba(146, 107, 247, .8); }
.rl i::after { content: ""; position: absolute; left: 11.5px; top: 7.5px; width: 6px; height: 12px; border: solid #e8e0ff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rl li:last-child i { background: rgba(111, 227, 156, .16); border-color: rgba(111, 227, 156, .6); box-shadow: 0 0 16px -2px rgba(111, 227, 156, .7); }
.rl li:last-child i::after { left: 10px; top: 10px; width: 10px; height: 10px; border: 0; border-radius: 50%; transform: none; background: #6fe39c; }
.rl li:last-child > div { border-color: rgba(111, 227, 156, .3); background: rgba(111, 227, 156, .05); }
.lx-p.on .rl li { animation: sxStep .5s var(--ease) both; }
.lx-p.on .rl li:nth-child(1) { animation-delay: .15s; } .lx-p.on .rl li:nth-child(2) { animation-delay: .55s; } .lx-p.on .rl li:nth-child(3) { animation-delay: .95s; } .lx-p.on .rl li:nth-child(4) { animation-delay: 1.35s; }
@keyframes sxStep { from { opacity: 0; transform: translateX(-10px); } }

/* ---------- the report ---------- */
.sx-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head doc" "facts plans"; gap: 44px 64px; align-items: center; padding: 56px; }
.sx-report-head { grid-area: head; }
.sx-report-k { display: flex; align-items: center; gap: 16px; }
.sx-report-k .mono { margin: 0; }
.sx-report-head h2 { margin-top: 26px; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -.04em; font-weight: 500; }
.sx-report-head p { margin-top: 16px; color: var(--mute); font-size: 17px; max-width: 460px; }
.sx-report-head .ctas { margin-top: 30px; }
/* the report, drawn: a sheet of paper over a second sheet, stamped */
.sx-doc { grid-area: doc; position: relative; height: 440px; }
.sx-doc::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(118, 79, 246, .35), transparent); pointer-events: none; }
.doc { position: absolute; left: 50%; top: 50%; width: 300px; height: 384px; margin: -192px 0 0 -150px; border-radius: 12px; }
.doc-b { transform: rotate(7deg) translate(30px, 6px); background: linear-gradient(180deg, #2b2444, #191526); border: 1px solid rgba(146, 107, 247, .35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.doc-f { display: flex; flex-direction: column; padding: 30px 28px; color: #1c1631; transform: rotate(-4deg); transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  background: linear-gradient(170deg, #f4f2fa, #e2deef); box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .95), 0 0 90px -24px rgba(118, 79, 246, .75), 0 1px 0 rgba(255, 255, 255, .6) inset; }
.sx-doc:hover .doc-f { transform: rotate(-2deg) translateY(-10px); }
.doc-k { font: 600 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #6a42f0; }
.doc-t { margin-top: 16px; font-size: 23px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.doc-s { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #5d5872; }
.doc-d { margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid #cfc9e2; font: 500 10.5px var(--mono); letter-spacing: .04em; color: #3b3554; }
.doc-h { display: block; margin-top: 18px; width: 40%; height: 7px; border-radius: 3px; background: #b7aed6; }
.doc-f i { display: block; margin-top: 9px; width: var(--w); height: 5px; border-radius: 3px; background: #d4cee6; }
.doc-stamp { position: absolute; inset-inline-end: 20px; bottom: 28px; transform: rotate(-11deg); padding: 7px 12px; border: 2px solid rgba(106, 66, 240, .8); border-radius: 8px;
  font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6a42f0; background: rgba(244, 242, 250, .7); }
.sx-doc .illus { inset-block-end: 0; inset-inline-end: 0; }
.sx-facts-w { grid-area: facts; align-self: start; }
.sx-facts-w > .mono, .sx-plans > .mono { font-size: 11px; }
.sx-facts { margin: 14px 0 0; border-top: 1px solid var(--line); }
.sx-facts div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sx-facts dt { padding-top: 3px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sx-facts dd { margin: 0; font-size: 16px; line-height: 1.5; }
.sx-facts dd a { color: var(--trace); border-bottom: 1px solid rgba(214, 199, 252, .3); white-space: nowrap; }
.sx-facts dd a:hover { border-color: var(--trace); }
.sx-facts .sx-more { display: table; margin-top: 6px; font-size: 15px; }
.sx-plans { grid-area: plans; align-self: start; }
.sx-plans ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sx-plans li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sx-plans .ic { width: 40px; height: 40px; border-radius: 12px; }
.sx-plans li b { display: block; font-weight: 500; font-size: 16px; }
.sx-plans li span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--mute); }

/* ---------- privacy ---------- */
.sx-priv .lx-ui { grid-area: auto; min-height: 0; }
.sx-priv .stk-list a { color: var(--trace); border-bottom: 1px solid rgba(214, 199, 252, .3); }
.ui-cons .pf-keys li { grid-template-columns: 104px minmax(0, 1fr) auto; }
.cons-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: var(--mute); border: 1px solid rgba(240, 138, 93, .3); background: rgba(240, 138, 93, .06); }
.cons-aud { list-style: none; margin: 8px 0 0; padding: 0; }
.cons-aud li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cons-aud li:last-child { border-bottom: 0; padding-bottom: 0; }
.cons-aud small { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cons-aud b { font-weight: 500; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; color: #f6b08f; background: rgba(240, 138, 93, .08); border: 1px solid rgba(240, 138, 93, .3); }
.cons-aud b.y { color: #8fe8b0; background: rgba(111, 227, 156, .08); border-color: rgba(111, 227, 156, .3); }
.cons-note i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f6b08f; box-shadow: 0 0 0 3px rgba(240, 138, 93, .18); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .sx-lx .lx-p { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "ui" "feats"; grid-template-rows: none; gap: 24px; }
  .sx-lx .lx-copy { padding-bottom: 0; }
  .sx-lx .lx-panels { padding: 30px; }
  .sx-vis { height: 540px; max-width: 640px; width: 100%; margin-inline: auto; }
  .sx-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-nums li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .sx-nums li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sx-report { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "doc" "facts" "plans"; padding: 40px; }
}
@media (max-width: 760px) {
  .sx-hero { padding-bottom: 24px; }
  .sx-badge { margin-top: 30px; padding-top: 20px; gap: 14px; }
  .sx-seal { width: 56px; }
  .sx-seal.lg { width: 64px; }
  .sx-vis { height: 420px; margin-inline: calc(-1 * var(--gut)); width: auto; }
  .sx-core { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 22px; }
  .sx-core svg { width: 30px; }
  .sx-chips li { font-size: 12px; padding: 6px 11px 6px 6px; gap: 8px; border-radius: 12px; }
  .sx-chips .ic { width: 24px; height: 24px; border-radius: 8px; }
  .sx-chips .c1 { top: 6%; inset-inline-start: 12px; }
  .sx-chips .c2 { top: 66%; inset-inline-end: 12px; }
  .sx-chips .c3 { bottom: 9%; inset-inline-start: 18px; }
  .sx-key { inset-inline-start: 16px; gap: 4px 12px; font-size: 9px; }
  .sx-vis .illus { inset-inline-end: 16px; font-size: 9px; }
  .sx-nums li { padding: 22px 14px 24px; }
  .sx-nums li:nth-child(2n+1) { padding-inline-start: 0; }
  .sx-nums b { font-size: 22px; white-space: normal; }
  .sx-nums span { margin-top: 8px; font-size: 13px; }
  .sx-lx .lx-panels { padding: 24px 20px; }
  .sx-lx .lx-copy h3 { font-size: 23px; }
  .sx-ic { width: 42px; height: 42px; margin-bottom: 18px; border-radius: 13px; }
  .sx-feats { grid-template-columns: minmax(0, 1fr); }
  .sx-lx .lx-ui { min-height: 0; padding: 14px 14px 16px; }
  .enc-flow { grid-template-columns: 78px minmax(0, 1fr) 78px; padding: 22px 0 20px; }
  .enc-end { font-size: 11.5px; }
  .enc-rest { grid-template-columns: minmax(0, 1fr); }
  .enc-rest li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: stretch; padding: 10px 12px; }
  .enc-rest .ic { width: 28px; height: 28px; }
  .acc-map { grid-template-columns: minmax(0, 1fr) 86px; }
  .acc li { grid-template-columns: 84px minmax(0, 1fr); }
  .acc .key { font-size: 12px; padding: 6px 9px 6px 7px; }
  .acc small { font-size: 11px; padding-inline-start: 4px; }
  .acc-node { font-size: 11.5px; padding: 14px 6px; }
  .acc-node .ic { width: 32px; height: 32px; }
  .acc-foot { grid-template-columns: minmax(0, 1fr); }
  .lg li { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 4px; }
  .lg b { grid-column: 2; }
  .lg span { grid-column: 2; grid-row: 2; font-size: 12.5px; }
  .lg time { grid-row: 1 / span 2; }
  .lg-lock { grid-column: 3; grid-row: 1 / span 2; }
  .rl b { font-size: 13.5px; }
  .sx-report { padding: 26px 20px; gap: 32px; }
  .sx-report-head h2 { margin-top: 20px; }
  .sx-doc { height: 340px; }
  .doc { width: 232px; height: 298px; margin: -149px 0 0 -116px; border-radius: 10px; }
  .doc-f { padding: 22px 20px; }
  .doc-t { margin-top: 12px; font-size: 18px; }
  .doc-s { font-size: 10.5px; }
  .doc-d { margin-top: 10px; padding-bottom: 12px; font-size: 9px; }
  .doc-h { margin-top: 13px; height: 6px; }
  .doc-f i { margin-top: 7px; height: 4px; }
  .doc-stamp { inset-inline-end: 14px; bottom: 20px; font-size: 9px; padding: 5px 9px; }
  .sx-facts div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; }
  .sx-facts dd { font-size: 15px; }
  .ui-cons .pf-keys li { grid-template-columns: 82px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sx-chips li, .lx-p.on .enc-wire i, .lx-p.on .enc-rest li, .lx-p.on .acc .ok em::after, .lx-p.on .acc .no em, .lx-p.on .lg li, .lx-p.on .lg-ok, .lx-p.on .rl::before, .lx-p.on .rl li { animation: none; }
  .doc-f { transition: none; }
}