/* Your data and security: a calm, text-led page. Hero beside the app's lock screen; scenarios as vertical tabs; three
   locks as concentric rings; how records are kept as an open list. Soft palette, no loud motion. */
.sc2-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 5vw; align-items: center; padding-top: 124px; padding-bottom: clamp(40px, 7vh, 80px); min-height: min(92vh, 880px) }
.sc2-hero .h-xl { font-size: clamp(38px, 4.4vw, 64px) }
.sc2-vis { display: grid; place-items: center; position: relative }
.sc2-vis::before { content: ""; position: absolute; inset: 4% -2%; border-radius: 50%; background: radial-gradient(closest-side, #E3F1FC, rgba(227,241,252,0)); z-index: -1 }
.lockph { width: min(300px, 76vw) }
.lk { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 18px 22px; background: linear-gradient(180deg, #F2F8FF, #fff) }
.lk-logo { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 26px/1 var(--font) }
.lk-shop { margin-top: 12px; font-size: 16px } .lk-hint { font-size: 13px; color: var(--faint); margin-top: 2px }
.lk-dots { display: flex; gap: 12px; margin: 16px 0 14px } .lk-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #A3ACB7 } .lk-dots i.on { background: var(--ink); border-color: var(--ink) }
.lk-pad { display: grid; grid-template-columns: repeat(3, 52px); gap: 8px 20px; justify-content: center }
.lk-pad span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #EEF4FB; font: 600 20px/1 var(--font); color: var(--ink) } .lk-pad .blank { background: none }
.lk-fp { margin-top: auto; display: grid; justify-items: center; gap: 2px; color: var(--link); padding-top: 12px } .lk-fp small { font-size: 12px; color: var(--faint) }

/* scenarios */
.if-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4vw; margin-top: 30px; align-items: start }
.if-tabs { display: grid; gap: 4px; border-left: 2px solid var(--border) }
.if-tabs button { all: unset; box-sizing: border-box; cursor: pointer; padding: 14px 18px; margin-left: -2px; border-left: 3px solid transparent; font-size: 18px; font-weight: 600; color: var(--muted); transition: color .15s, border-color .15s, background .15s }
.if-tabs button:hover { color: var(--ink) } .if-tabs button[aria-selected="true"] { color: var(--ink); border-left-color: var(--link); background: #F0F7FE }
.if-tabs button:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: -3px }
.if-panel { padding: 22px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--border); min-height: 200px }
.if-panel:focus-visible { outline: 3px solid var(--sky-dark) }
.if-panel ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: a }
.if-panel li { counter-increment: a; position: relative; padding-left: 40px; font-size: 18px; color: #2F3640 }
.if-panel li::before { content: counter(a); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-light); color: var(--link); font-weight: 800; font-size: 14px }
.if-panel a { display: inline-block; margin-top: 16px; color: var(--link); font-weight: 700; text-decoration: none } .if-panel a:hover { text-decoration: underline }

/* three locks */
.sc2-layers { background: linear-gradient(180deg, var(--bg), #EEF4FB 25%, #EEF4FB 75%, var(--bg)) }
.ly-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6vw; align-items: center }
.ly-rings { position: relative; width: min(380px, 80vw); aspect-ratio: 1; justify-self: center }
.ring { position: absolute; border-radius: 50%; display: flex; justify-content: center; border: 2px solid; background: rgba(255,255,255,.55) }
.ring span { margin-top: 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase }
.r1 { inset: 0; border-color: #C9D6E6; color: var(--faint) } .r2 { inset: 17%; border-color: var(--sky); color: var(--link) } .r3 { inset: 34%; border-color: #C9A227; color: #8A6D00; background: #FFFBEA }
.ring-core { position: absolute; inset: 44%; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 22px/1 var(--font) }
.ly-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid #D5E1EF }
.ly-list li { padding: 16px 0; border-bottom: 1px solid #D5E1EF } .ly-list b { font-size: 19px } .ly-list p { margin: 4px 0 0; color: var(--muted) }

/* how records are kept */
.kp-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; max-width: 1100px }
.kp-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px } .kp-list .ic { color: var(--link) }
.kp-list b { font-size: 19px } .kp-list p { margin: 4px 0 0; color: var(--muted) }
.kp-link { margin: 26px 0 0 } .kp-link a { color: var(--link); font-weight: 700; text-decoration: none } .kp-link a:hover { text-decoration: underline }

@media (max-width: 980px) {
  .sc2-hero { grid-template-columns: minmax(0, 1fr); padding-top: 104px; min-height: 0; gap: 26px }
  .lockph { aspect-ratio: auto; height: 520px }
  .if-in, .ly-in { grid-template-columns: minmax(0, 1fr); gap: 20px }
  .if-tabs { gap: 0 } .if-tabs button { padding: 11px 14px; font-size: 16px }
  .if-panel { padding: 18px } .if-panel li { font-size: 16.5px }
  .kp-list { grid-template-columns: minmax(0, 1fr); gap: 22px }
}
@media (prefers-reduced-motion: reduce) { .if-tabs button { transition: none } }