/* Profit Vault: a safe-led page. Graphite safe with gold detailing beside the headline (keypad -> the open vault);
   two side-by-side views of the same products; the margin surprise in two big figures; four set-up steps. */
.pv-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 5vw; align-items: center; padding-top: 124px; padding-bottom: clamp(40px, 7vh, 80px); min-height: min(94vh, 900px) }
.pv-hero .h-xl { font-size: clamp(36px, 4.1vw, 62px) }

/* the safe */
.safe { --gold: #C9A227; position: relative; border-radius: 22px; padding: 22px; background: radial-gradient(120% 90% at 20% 0%, #2B323B, #15191E); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(201,162,39,.55), inset 0 0 0 9px #1B2027, inset 0 0 0 10.5px rgba(201,162,39,.25), 0 60px 110px -50px rgba(10,14,20,.7) }
.safe.shake { animation: pv-shake .4s }
@keyframes pv-shake { 20%, 60% { transform: translateX(-8px) } 40%, 80% { transform: translateX(8px) } }
.safe-lock { display: grid; justify-items: center; padding: 10px 0 6px }
.sl-top { display: flex; align-items: center; gap: 10px } .sl-top .tag { margin: 0; background: var(--gold); color: #1B1300 } .sl-top b { font-size: 18px; letter-spacing: .02em }
.sl-hint { margin: 10px 0 18px; color: #C8CED6; font-size: 15px } .sl-hint b { color: #F3D879; letter-spacing: .2em }
.dots { display: flex; gap: 16px } .dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #8B95A1; transition: background .15s, border-color .15s }
.dots i.on { background: #F3D879; border-color: #F3D879 }
.sl-err { min-height: 24px; margin: 10px 0 6px; color: #FCA5A5; font-weight: 600; font-size: 14.5px }
.pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px 18px }
.key { all: unset; box-sizing: border-box; cursor: pointer; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font: 600 26px/1 var(--font); color: #fff;
  background: radial-gradient(circle at 35% 30%, #3A424D, #23292F); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px -6px rgba(0,0,0,.6); transition: transform .08s, background .15s }
.key:hover { background: radial-gradient(circle at 35% 30%, #46505C, #2A3139) } .key:active { transform: scale(.94) }
.key:focus-visible { outline: 3px solid #F3D879; outline-offset: 3px }

/* open: the vault as the app shows it */
.safe-open { border-radius: 14px; background: #fff; color: var(--ink); padding: 18px; box-shadow: inset 0 0 0 2px var(--gold) }
.safe-open[hidden], .safe-lock[hidden] { display: none }
.safe-lock, .safe-open { min-height: 612px; box-sizing: border-box } .safe-lock { align-content: center }
.so-top { display: flex; justify-content: space-between; align-items: center; gap: 10px } .so-top b { display: block; font-size: 18px } .so-top small { color: #8A6D00; font-weight: 700; font-size: 12.5px }
.so-lock { padding: 9px 12px; font-size: 13.5px; background: #1B2027; color: #fff; border-color: #1B2027 }
.so-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px }
.so-kpis div { padding: 12px 14px; border-radius: 10px; background: #FBF6E4 } .so-kpis small { display: block; font-size: 12px; color: #6B5600; font-weight: 600 } .so-kpis b { display: block; font: 800 24px/1.2 var(--font); margin-top: 2px }
.so-costed { margin: 10px 0 0; font-size: 13.5px; color: var(--faint) }
.so-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px } .so-head b { font-size: 14.5px }
.so-sort { all: unset; cursor: pointer; padding: 5px 10px; border-radius: 8px; background: #F1F4F8; font-weight: 700; font-size: 13px; color: var(--link) } .so-sort:focus-visible { outline: 3px solid var(--sky-dark) }
.board { list-style: none; margin: 0; padding: 0; height: 318px; overflow-y: auto }
.board li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EEF2F7 }
.b-n b { display: block; font-size: 14.5px } .b-n small { font-size: 12.5px; color: var(--faint) }
.b-m { font-weight: 800; font-size: 15px; padding: 3px 8px; border-radius: 6px }
.board li.hi .b-m { background: #E6F7F1; color: #0B6B50 } .board li.mid .b-m { background: #FFF4CC; color: #6B5600 } .board li.lo .b-m { background: #FDECEC; color: var(--red) }
.board li.unset .b-n small { color: #9A5B00; font-weight: 700 }
.setcost { display: flex; align-items: center; gap: 6px; font-weight: 600 } .setcost input { all: unset; width: 58px; padding: 7px 8px; border: 1.5px solid var(--border); border-radius: 8px; font-weight: 700 }
.setcost input:focus { border-color: var(--sky-dark) } .setcost .kb { padding: 7px 10px; font-size: 13px }
.so-timer { margin: 10px 0 0; font-size: 13px; color: var(--faint); text-align: right }
.safe-eg { margin: 14px 0 0; color: #AAB3BE; text-align: center }

/* two views */
.vw-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 34px }
.vw-c { margin: 0; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--border) }
.vw-you { background: #1B2027; color: #fff; border-color: #1B2027; box-shadow: inset 0 0 0 1.5px rgba(201,162,39,.5) }
.vw-c figcaption { font-weight: 800; font-size: 17px; margin-bottom: 12px } .vw-you figcaption { color: #F3D879 }
.vw-c table { width: 100%; border-collapse: collapse; font-size: 15px }
.vw-c th { text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 6px 8px 8px 0; border-bottom: 1.5px solid currentColor }
.vw-you th { color: #AAB3BE } .vw-c td { padding: 9px 8px 9px 0; border-bottom: 1px solid rgba(127,140,155,.25) } .vw-c .num { text-align: right }
.vw-c > p { margin: 12px 0 0; font-size: 14.5px; color: var(--muted) } .vw-you > p { color: #C8CED6 }

/* margin surprise */
.pv-surprise { background: linear-gradient(180deg, var(--bg), #FBF6E4 25%, #FBF6E4 75%, var(--bg)) }
.su-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 34px; border-top: 2px solid var(--ink) }
.su-c { padding: 24px 32px 10px 0 } .su-c + .su-c { padding-left: 32px; border-left: 1px solid #EBDDB0 }
.su-c small { display: inline-block; padding: 4px 9px; border-radius: 6px; font-weight: 700; font-size: 12.5px; background: #fff; color: var(--muted) }
.su-c b { display: block; margin-top: 10px; font-size: 20px } .su-big { display: block; font: 800 clamp(48px, 6vw, 88px)/1 var(--font); letter-spacing: -0.04em; margin: 6px 0 }
.su-busy .su-big { color: var(--red) } .su-quiet .su-big { color: #0B7A5B } .su-c p { margin: 0; color: var(--muted); font-size: 17px }
.su-end { margin-top: 24px; max-width: 44em }

/* start */
.st-steps { list-style: none; counter-reset: s; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink) }
.st-steps li { counter-increment: s; padding: 20px 22px 0 0 } .st-steps li + li { padding-left: 22px; border-left: 1px solid var(--border) }
.st-steps li::before { content: counter(s); display: block; font: 800 30px/1 var(--font); color: #8A6D00; margin-bottom: 10px }
.st-steps b { font-size: 18px } .st-steps p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px }

@media (max-width: 980px) {
  .pv-hero { grid-template-columns: minmax(0, 1fr); padding-top: 104px; min-height: 0; gap: 26px }
  .safe { padding: 16px } .safe-lock, .safe-open { min-height: 0 } .safe-open { padding: 14px }
  .so-top { flex-wrap: wrap } .so-lock, .so-sort { white-space: nowrap } .so-head { gap: 8px } .so-kpis b { font-size: 21px } .board { height: auto; max-height: 300px } .pad { grid-template-columns: repeat(3, 64px); gap: 10px 16px } .key { width: 64px; height: 64px; font-size: 23px }
  .vw-two, .su-pair { grid-template-columns: minmax(0, 1fr) } .su-c + .su-c { padding-left: 0; border-left: 0; border-top: 1px solid #EBDDB0 }
  .st-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 0 } .st-steps li:nth-child(3) { padding-left: 0; border-left: 0 }
}
@media (max-width: 560px) { .st-steps { grid-template-columns: minmax(0, 1fr) } .st-steps li, .st-steps li + li { padding-left: 0; border-left: 0 } .vw-c { padding: 14px } .vw-c table { font-size: 13.5px } }
@media (prefers-reduced-motion: reduce) { .safe.shake { animation: none } .key, .dots i { transition: none } }