.pl-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: calc(env(safe-area-inset-top) + 18px) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left));
}
.pl-nav { display: flex; gap: 22px; }
.pl-nav [aria-current] { color: var(--ink); }

.pl { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.pl-intro { max-width: 640px; padding: 88px 0 56px; }
.pl-intro h1 { font-weight: 300; font-size: clamp(2.3rem, 8vw, 3.6rem); line-height: 1.04; margin: 14px 0 22px; letter-spacing: -.02em; }
.pl-lede { font-family: var(--serif); font-weight: 300; font-size: 1.18rem; line-height: 1.5; color: rgba(243,238,227,.8); margin: 0; }

.pl-classes { border-top: 1px solid var(--faint); }
.pl-class { display: grid; gap: 22px; padding: 48px 0; border-bottom: 1px solid var(--faint); scroll-margin-top: 24px; }
.pl-class:target .rig .stone { fill: rgba(198,160,100,.34); }
.pl-class h2 { font-weight: 300; font-size: 1.9rem; line-height: 1.1; margin: 8px 0 12px; }
.pl-class .pl-text > p:not(.label) { color: rgba(243,238,227,.78); margin: 0 0 20px; }
.pl-stones { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--muted) !important; margin: 18px 0 0 !important; }

.rig { width: 100%; max-width: 460px; height: auto; overflow: visible; }
.rig * { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rig .thin { stroke: rgba(243,238,227,.5); stroke-width: 1; }
.rig .ground { stroke: rgba(243,238,227,.22); stroke-width: 1; }
.rig .stone { stroke: var(--gold); fill: rgba(198,160,100,.16); transition: fill .6s ease; }

.pl-limit { color: var(--muted); font-size: .92rem; max-width: 560px; margin: 28px 0 0; }

.pl-site { padding: 96px 0 24px; }
.pl-site h2, .pl-price h2 { font-weight: 300; font-size: 1.9rem; margin: 12px 0 36px; }
.pl-checks { list-style: none; counter-reset: c; margin: 0; padding: 0; display: grid; gap: 34px; }
.pl-checks li { counter-increment: c; position: relative; padding-left: 44px; }
.pl-checks li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-size: .7rem; letter-spacing: .14em; color: var(--gold); }
.pl-checks h3, .pl-cols h3 { font-weight: 400; font-size: 1.2rem; margin: 0 0 6px; }
.pl-checks p, .pl-cols p { margin: 0; color: rgba(243,238,227,.72); }

.pl-price { padding: 88px 0 96px; }
.pl-cols { display: grid; gap: 30px; margin-top: 22px; }
.pl-trade { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--faint); color: var(--muted); max-width: 640px; }
.pl-trade a, .pl-foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(198,160,100,.5); }

.pl-foot { display: flex; flex-direction: column; gap: 6px; padding: 30px 24px calc(30px + env(safe-area-inset-bottom)); border-top: 1px solid var(--faint); color: var(--muted); font-size: .8rem; }

@media (min-width: 900px) {
  .pl { padding: 0 var(--gutter); }
  .pl-class { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 64px 0; }
  .pl-checks { grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 40px; }
  .pl-cols { grid-template-columns: 1fr 1fr; gap: 64px; }
  .pl-foot { flex-direction: row; justify-content: space-between; padding-left: var(--gutter); padding-right: var(--gutter); }
}