/* Package detail pages — layered on top of the main stylesheet */

.pkg-main { padding-top: 120px }

.pkg-hero { padding: 0 var(--pad) clamp(60px, 8vw, 100px); border-bottom: 1px solid var(--line) }
.pkg-back { display: inline-flex; align-items: center; gap: 10px; font: 400 11px var(--font-mono); text-transform: uppercase; letter-spacing: .13em; color: var(--muted); transition: color .3s }
.pkg-back:hover { color: var(--ink) }
.pkg-kicker { margin-top: 40px; font: 400 11px var(--font-mono); text-transform: uppercase; letter-spacing: .13em; color: var(--lime) }
.pkg-hero h1 { margin: 22px 0 24px; font: 500 clamp(42px, 7vw, 88px)/.95 var(--font-display); letter-spacing: -.055em }
.pkg-lede { max-width: 620px; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.65; color: #b3b7c3 }

.pkg-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px 28px; margin-top: 44px }
.pkg-price { font: 500 clamp(38px, 5vw, 58px) var(--font-display); letter-spacing: -.04em; color: var(--ink) }
.pkg-price-note { font: 400 11px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted) }

.pkg-body { display: grid; grid-template-columns: 1fr .82fr; gap: 6vw; padding: clamp(70px, 9vw, 120px) var(--pad) }
.pkg-block + .pkg-block { margin-top: 62px }
.pkg-block h2 { font: 500 clamp(24px, 2.8vw, 36px) var(--font-display); letter-spacing: -.04em; margin-bottom: 26px }
.pkg-block > p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 620px }

.pkg-list { list-style: none; display: grid; gap: 18px; margin-top: 8px }
.pkg-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: #b5bac7 }
.pkg-list li:before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet) }
.pkg-list b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px }

.pkg-steps { list-style: none; counter-reset: step; display: grid; gap: 2px; margin-top: 8px }
.pkg-steps li { counter-increment: step; display: grid; grid-template-columns: 46px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); align-items: start }
.pkg-steps li:last-child { border-bottom: 1px solid var(--line) }
.pkg-steps li:before { content: "0" counter(step); font: 400 11px var(--font-mono); color: var(--lime); padding-top: 3px }
.pkg-steps h3 { font: 500 17px var(--font-display); letter-spacing: -.02em; margin-bottom: 6px }
.pkg-steps p { font-size: 14px; line-height: 1.6; color: var(--muted) }

/* Purchase panel */
.pkg-buy { position: sticky; top: 100px; align-self: start; padding: 34px 30px; border: 1px solid rgba(157,140,255,.3); border-radius: 24px; background: linear-gradient(160deg, rgba(157,140,255,.07), rgba(255,255,255,.015)); backdrop-filter: blur(16px) }
.pkg-buy-label { font: 400 11px var(--font-mono); text-transform: uppercase; letter-spacing: .13em; color: var(--lime) }
.pkg-buy h2 { margin: 18px 0 6px; font: 500 26px var(--font-display); letter-spacing: -.035em }
.pkg-buy-price { font: 500 42px var(--font-display); letter-spacing: -.04em; margin: 14px 0 4px }
.pkg-buy-sub { font-size: 13px; line-height: 1.6; color: var(--muted) }
.pkg-buy .button { width: 100%; margin-top: 26px; min-width: 0 }
.pkg-buy-alt { display: block; margin-top: 16px; text-align: center; font: 400 11px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); transition: color .3s }
.pkg-buy-alt:hover { color: var(--ink) }
.pkg-fine { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.65; color: var(--muted) }

/* Cross-links to the other two packages */
.pkg-other { padding: 0 var(--pad) clamp(80px, 10vw, 130px) }
.pkg-other h2 { font: 500 clamp(22px, 2.4vw, 30px) var(--font-display); letter-spacing: -.035em; margin-bottom: 28px }
.pkg-other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.pkg-other-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.018); transition: transform .35s, border-color .35s, background .35s }
.pkg-other-card:hover { transform: translateY(-4px); border-color: rgba(102,227,255,.4); background: linear-gradient(145deg, rgba(102,227,255,.05), rgba(157,140,255,.02)) }
.pkg-other-card strong { display: block; font: 500 19px var(--font-display); letter-spacing: -.03em; margin-bottom: 6px }
.pkg-other-card span { font-size: 13px; color: var(--muted) }
.pkg-other-card b { font: 500 19px var(--font-display); letter-spacing: -.03em; white-space: nowrap }

@media (max-width: 980px) {
  .pkg-body { grid-template-columns: 1fr; gap: 54px }
  .pkg-buy { position: static }
  .pkg-other-grid { grid-template-columns: 1fr }
}
@media (max-width: 680px) {
  .pkg-main { padding-top: 96px }
  .pkg-steps li { grid-template-columns: 36px 1fr; gap: 14px }
}