/* KadaAI: page styles for /security (Security & your data). Linked after site.css.
   Blocks: pg-subnav (on-this-page links, the same component as /features) · sec-flow (till ⇄ cloud ⇄ admin diagram) · sec-strip (status-bar crops)
   · sec-crop (close-up crops of wide screenshots) · sec-lights (status legend) · sec-backoff · sec-layers (encryption)
   · sec-fact · sec-walls (isolation) · sec-keep (backup retention) · sec-price. */

/* On this page: the same sticky, single-row chip nav as /features (pages/features.css .pg-subnav; it belongs in
   site.css as a shared component once the shared files can change). Chips scroll sideways on small screens. */
html{scroll-padding-top:calc(var(--header-h) + 4rem)}
.pg-subnav{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-block:1px solid var(--border)}
.pg-subnav__list{display:flex;align-items:center;gap:.25rem;margin:0;padding:.5rem 0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.pg-subnav__list::-webkit-scrollbar{display:none}
.pg-subnav a{display:inline-flex;align-items:center;gap:.45rem;flex:none;min-height:40px;padding:0 .95rem;border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;line-height:1;white-space:nowrap;color:var(--ink-2);text-decoration:none;transition:color .15s, background-color .15s, box-shadow .15s}
.pg-subnav a .icon{width:1.05rem;height:1.05rem;color:var(--muted)}
.pg-subnav a:hover{color:var(--ink);background:var(--surface-2)}
.pg-subnav a:focus-visible{outline-offset:-2px}
@media (pointer: coarse) {.pg-subnav a {min-height:44px} }
@media (max-width: 899.98px) {
  .pg-subnav > .container {padding-inline:0}
  .pg-subnav__list {padding-inline:var(--gutter) 0;scroll-padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);mask-image:linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent)}
  .pg-subnav__list::after {content:"";flex:0 0 2rem} /* lets the last chip scroll clear of the fade */
}
@media (min-width: 900px) {.pg-subnav__list {justify-content:center} }
body:has(#local-first:target) .pg-subnav a[href="#local-first"], body:has(#sync:target) .pg-subnav a[href="#sync"],
body:has(#encryption:target) .pg-subnav a[href="#encryption"], body:has(#access:target) .pg-subnav a[href="#access"],
body:has(#isolation:target) .pg-subnav a[href="#isolation"], body:has(#backups:target) .pg-subnav a[href="#backups"],
body:has(#promises:target) .pg-subnav a[href="#promises"]{color:var(--ink);background:var(--surface-3)}

/* Diagram: tills ⇄ cloud ⇄ web admin */
.sec-flow{margin:0;padding:clamp(1.25rem, .75rem + 2.5vw, 2.75rem);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-2xl)}
.sec-flow__grid{display:grid;align-items:center;gap:.25rem}
.sec-node{display:grid;gap:.65rem;align-content:start;padding:1.35rem 1.35rem 1.5rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
.sec-node__head{display:flex;align-items:center;gap:.75rem}
.sec-node h3{font-size:1.125rem;line-height:1.25}
.sec-node p{font-size:.9375rem;line-height:1.55}
.sec-node--hub{color:rgba(255,255,255,.8);background:var(--navy);border-color:var(--navy);box-shadow:0 18px 40px -22px rgba(11,31,68,.6)}
.sec-node--hub h3{color:#fff}
.sec-node--hub .icon-tile{color:var(--navy);background:#fff}
.sec-counters{display:grid;gap:.4rem;list-style:none;padding:0;margin-top:.15rem}
.sec-counters li{display:flex;align-items:center;gap:.55rem;padding:.45rem .7rem;font-size:.875rem;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.sec-counters li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--green)}
.sec-counters .icon{width:1rem;height:1rem;margin-left:auto;color:var(--text-muted)}
.sec-chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin-top:.15rem}
.sec-chips li{display:inline-flex;align-items:center;min-height:1.75rem;padding:0 .65rem;font-size:.75rem;font-weight:700;letter-spacing:.01em;color:var(--ink-2);background:var(--surface-3);border-radius:var(--r-pill)}
.sec-node--hub .sec-chips li{color:#fff;background:rgba(255,255,255,.12)}
.sec-link{display:grid;justify-items:center;align-items:center;gap:.5rem;padding:.75rem .25rem}
.sec-link__label{font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--ink-2);text-align:center}
.sec-link__pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;font-size:.8125rem;font-weight:800;white-space:nowrap;color:var(--blue-ink);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--shadow-xs)}
.sec-link__pill .icon{width:1rem;height:1rem;color:var(--blue)}
.sec-arrow{position:relative;display:block;color:var(--blue)}
.sec-arrow::after{content:"";position:absolute;width:9px;height:9px;border:solid var(--blue);border-width:2px 2px 0 0}
.sec-flow__caption{margin-top:1.5rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2);text-align:center}
.sec-flow__caption strong{color:var(--ink)}
@media (min-width: 900px) {
  .sec-flow__grid {grid-template-columns:minmax(0, 1fr) minmax(128px, .6fr) minmax(0, 1fr) minmax(128px, .6fr) minmax(0, 1fr);gap:0}
  .sec-arrow {width:100%;height:2px;background:linear-gradient(90deg, rgba(30,107,240,.15), var(--blue))}
  .sec-arrow::after {right:0;top:50%;transform:translateY(-50%) rotate(45deg)}
  .sec-arrow--back {transform:scaleX(-1)}
  .sec-link {padding:0 .75rem}
}
@media (max-width: 899.98px) {
  .sec-flow__grid {max-width:520px;margin-inline:auto}
  .sec-link {grid-template-columns:minmax(0, 1fr) auto auto auto minmax(0, 1fr);column-gap:.6rem;padding:.6rem 0}
  .sec-link > :first-child {text-align:right}
  .sec-link > :last-child {text-align:left}
  .sec-arrow {width:2px;height:44px;background:linear-gradient(180deg, rgba(30,107,240,.15), var(--blue))}
  .sec-arrow::after {left:50%;bottom:0;transform:translateX(-50%) rotate(135deg)}
  .sec-arrow--back {transform:scaleY(-1)}
}
@media (prefers-reduced-motion: no-preference) {
  .sec-arrow::before {content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(30,107,240,.18)}
  .sec-arrow--back::before {animation-delay:1.5s !important}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {.sec-arrow::before {top:-2px;animation:sec-run-x 3s var(--ease) infinite} }
@media (prefers-reduced-motion: no-preference) and (max-width: 899.98px) {.sec-arrow::before {left:-2px;animation:sec-run-y 3s var(--ease) infinite} }
@keyframes sec-run-x {0% {left:0;opacity:0} 15% {opacity:1} 80% {opacity:1} 100% {left:calc(100% - 8px);opacity:0} }
@keyframes sec-run-y {0% {top:0;opacity:0} 15% {opacity:1} 80% {opacity:1} 100% {top:calc(100% - 8px);opacity:0} }
.capture .sec-arrow::before{display:none}

/* Status-bar crops (offline -> synced) */
.sec-strips{display:grid;gap:1.25rem;list-style:none;padding:0;margin-top:.75rem;width:100%}
.sec-strip{margin:0}
.sec-strip figcaption{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem;font-size:.875rem;font-weight:700;color:var(--ink)}
.sec-strip figcaption span{font-weight:500;color:var(--text-muted)}
.sec-step{display:inline-grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.75rem;font-weight:800;color:var(--ink);background:var(--surface-3)}
.sec-strip .frame{border-radius:var(--r)}
.sec-strip .frame__body{border-radius:var(--r);background:#fff}

/* Close-up crops of wide screenshots (the lightbox still opens the whole image) */
/* object-fit keeps the img box inside the frame; the source is chosen by sizes for the zoomed width */
.sec-crop .frame__body img{width:100%;height:auto;object-fit:cover;object-position:0 50%}
.sec-crop--bar .frame__body img{aspect-ratio:470 / 52}
/* Users card only: x 0–878, y 9–384 of the 1440 × 394 shot (drops the edges of the cards above and below) */
.sec-crop--users .frame__body{aspect-ratio:878 / 375}
.sec-crop--users .frame__body img{width:164.01%;max-width:none;aspect-ratio:auto;margin-top:-1.025%}
/* Till offline: the top 1440 × 810, above the status line under the payment panel */
.sec-ar-till{aspect-ratio:16 / 9}
.frame__body.sec-ar-till img{height:100%;object-fit:cover;object-position:top}
.sec-ar-till picture{height:100%}

/* Status light legend */
.sec-lights-wrap{display:grid;gap:clamp(1.5rem, 1rem + 2vw, 3rem);margin-top:clamp(2.5rem, 2rem + 2vw, 4rem);padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-xs)}
.sec-lights-wrap__text{display:grid;gap:.75rem;align-content:start}
.sec-lights-wrap__text h3{font-size:clamp(1.375rem, 1.2rem + .7vw, 1.75rem);letter-spacing:-.025em}
@media (min-width: 900px) {.sec-lights-wrap {grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);align-items:center} }
.sec-lights{display:grid;gap:.75rem;list-style:none;padding:0}
.sec-light{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:.2rem .9rem;align-items:start;padding:1rem 1.15rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg)}
.sec-light__dot{grid-row:span 2;width:.875rem;height:.875rem;margin-top:.3rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(46,158,91,.16)}
.sec-light--warn .sec-light__dot{background:#C98A0B;box-shadow:0 0 0 4px rgba(201,138,11,.18)}
.sec-light--err .sec-light__dot{background:var(--danger);box-shadow:0 0 0 4px rgba(200,55,45,.15)}
.sec-light__label{font-family:var(--mono);font-size:.8125rem;font-weight:600;color:var(--ink)}
.sec-light__label span{font-family:var(--font);font-weight:500;color:var(--text-muted)}
.sec-light p:last-child{font-size:.9375rem;line-height:1.5}

/* Retry back-off steps */
.sec-backoff{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;list-style:none;padding:0;margin-top:.25rem}
.sec-backoff li{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:700;color:var(--ink)}
.sec-backoff li span{display:inline-flex;align-items:center;min-height:1.75rem;padding:0 .6rem;background:var(--surface-3);border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.sec-backoff li + li::before{content:"";width:.75rem;height:1.5px;background:var(--border-strong)}
.sec-backoff li:last-child span{color:#fff;background:var(--navy)}

/* Encryption layers */
.sec-layers{margin:0}
.sec-layer{display:grid;gap:.85rem;padding:clamp(1rem, .75rem + 1vw, 1.5rem);border-radius:var(--r-xl)}
.sec-layer__label{display:flex;align-items:center;gap:.55rem;font-size:.9375rem;font-weight:700;line-height:1.35;color:var(--ink)}
.sec-layer__label .icon{width:1.2rem;height:1.2rem;color:var(--blue-ink)}
.sec-layer--os{background:var(--surface-3);border:1.5px dashed var(--border-strong)}
.sec-layer--key{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.sec-layer--db{color:rgba(255,255,255,.82);background:var(--navy);box-shadow:0 18px 36px -20px rgba(11,31,68,.6)}
.sec-layer--db .sec-layer__label{color:#fff}
.sec-layer--db .sec-layer__label .icon{color:#8FD3FF}
.sec-layer__items{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:.5rem;list-style:none;padding:0}
.sec-layer__items li{padding:.55rem .7rem;font-size:.8125rem;font-weight:600;line-height:1.35;color:#fff;background:rgba(255,255,255,.1);border-radius:10px}
.sec-layer__tag{display:inline-flex;align-items:center;justify-self:start;gap:.4rem;min-height:1.75rem;padding:0 .7rem;font-size:.75rem;font-weight:800;letter-spacing:.02em;color:var(--navy);background:#fff;border-radius:var(--r-pill)}
.sec-layer__tag .icon{width:.9rem;height:.9rem;stroke-width:2.25}
.sec-layers figcaption{margin-top:1rem;font-size:.875rem;line-height:1.5;color:var(--text-muted);text-align:center}
.sec-enc{display:grid;gap:1.75rem;align-content:start}
.sec-enc__block{display:grid;gap:.6rem}
.sec-enc__block h3{display:flex;align-items:center;gap:.65rem;font-size:1.25rem}
.sec-fact{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .75rem;margin-top:.35rem;padding:.9rem 1.1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg)}
.sec-fact__value{font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.sec-fact__value small{margin-left:.1em;font-size:.55em;font-weight:700;letter-spacing:-.01em;color:var(--ink-2)}
.sec-fact__label{flex:1 1 12rem;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}

/* Isolation walls */
.sec-walls{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(.5rem, .25rem + 1vw, 1rem);max-width:640px;margin:0 auto clamp(2rem, 1.5rem + 2vw, 3rem);padding:clamp(.75rem, .5rem + 1vw, 1.25rem);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xl)}
.sec-wall{display:grid;justify-items:center;gap:.5rem;padding:clamp(.9rem, .6rem + 1.2vw, 1.5rem) .5rem;font-size:.8125rem;font-weight:700;line-height:1.3;text-align:center;color:var(--text-muted);background:#fff;border:1px dashed var(--border-strong);border-radius:var(--r-lg)}
.sec-wall .icon{width:1.5rem;height:1.5rem;color:var(--muted)}
.sec-wall--you{color:var(--ink);border:1.5px solid var(--blue);box-shadow:0 0 0 4px rgba(30,107,240,.1), var(--shadow-sm)}
.sec-wall--you .icon{color:var(--blue-ink)}
.sec-walls__base{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:.45rem;padding-top:.25rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.sec-walls__base .icon{width:1rem;height:1rem}

/* Backup retention */
.sec-keep{display:grid;gap:1.25rem;padding:clamp(1.5rem, 1rem + 2vw, 2.25rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--shadow-md)}
.sec-keep__head{display:flex;align-items:center;gap:.75rem}
.sec-keep__head h3{font-size:1.25rem}
.sec-keep__rows{display:grid;gap:.75rem;list-style:none;padding:0}
.sec-keep__row{display:grid;grid-template-columns:5.5rem minmax(0, 1fr);gap:.4rem 1rem;align-items:center;padding:1rem 1.1rem;background:var(--surface-2);border-radius:var(--r-lg)}
.sec-keep__name{font-weight:800;color:var(--ink)}
.sec-keep__dots{display:flex;flex-wrap:wrap;gap:.35rem}
.sec-keep__dots i{width:1.25rem;height:1.25rem;border-radius:6px;background:var(--blue-ink);opacity:.9}
.sec-keep__row:nth-child(2) .sec-keep__dots i{background:var(--cyan)}
.sec-keep__row:nth-child(3) .sec-keep__dots i{background:var(--navy)}
.sec-keep__what{grid-column:2;font-size:.875rem;color:var(--text-muted)}
@media (max-width: 479.98px) {.sec-keep__row {grid-template-columns:4.5rem minmax(0, 1fr);gap:.35rem .75rem} .sec-keep__dots {gap:.3rem} .sec-keep__dots i {width:1rem;height:1rem;border-radius:5px} }
.sec-keep__foot{display:flex;align-items:flex-start;gap:.6rem;padding-top:1rem;font-size:.9375rem;line-height:1.5;border-top:1px solid var(--border)}
.sec-keep__foot .icon{flex:none;margin-top:.1em;color:var(--text-muted)}
.sec-keep__foot strong{color:var(--ink)}
.sec-price{display:grid;gap:.35rem;padding:1.1rem 1.25rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.sec-price p:first-child{font-weight:700;color:var(--ink)}
.sec-price .price__amount{font-size:1.5rem;letter-spacing:-.03em}

/* Promises */
.sec-promise h3{display:flex;align-items:center;gap:.65rem;font-size:1.3125rem}
.sec-promise .check-list, .sec-promise .x-list{margin-top:.5rem}
.sec-promise--not{background:var(--surface-2);border-color:transparent;box-shadow:none}
.sec-ai-note{margin-top:clamp(1.5rem, 1rem + 1.5vw, 2rem)}