/* Profit page (/features/profit-vault): the headline beside a worked example (selling price - cost = profit per unit);
   the three numbers on the app's Profit page with an example table; the margin surprise; three set-up steps. Light only. */
.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) }

/* worked example */
.pv-calc { margin: 0; padding: 26px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -50px rgba(0,49,91,.35) }
.pv-calc figcaption { font-weight: 800; font-size: 17px; margin-bottom: 14px }
.pv-calc dl { margin: 0 } .pv-calc dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border) }
.pv-calc dt { color: var(--muted) } .pv-calc dd { margin: 0; font-weight: 700; font-size: 22px }
.pv-calc .pv-res { border-bottom: 0; padding-top: 18px } .pv-calc .pv-res dt { color: var(--ink); font-weight: 700 } .pv-calc .pv-res dd { font-size: clamp(30px, 3vw, 40px); color: #0B7A5B }
.pv-calc .pv-res small { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 6px }
.pv-calc .eg { margin: 8px 0 0 }

/* the three numbers + example table */
.pv-three { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.pv-three li { padding-top: 14px; border-top: 2px solid #0B7A5B } .pv-three b { font-size: 18px } .pv-three p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px }
.vw-c { margin: 34px 0 0; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--border) }
.vw-c figcaption { font-weight: 800; font-size: 17px; margin-bottom: 12px }
.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-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) }

/* 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 }
  .pv-three, .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 } }