.offer-pricing { background: var(--color-fog); }
.offer-pricing .section-intro > h2 + p { max-width: var(--content-wide); }
.offer-pricing-rail { display: grid; grid-template-columns: var(--grid-offer-pricing-rail); gap: var(--space-6); margin-top: var(--space-16); padding: var(--space-6) var(--space-8); border-left: var(--border-strong) solid var(--color-signal); background: var(--color-ink-rich); color: var(--color-paper); list-style: none; box-shadow: var(--shadow-premium-dark); }
.offer-pricing-rail li { padding-left: var(--space-5); border-left: var(--border-thin) solid var(--color-line-premium-dark); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-body); }
.offer-pricing-focus { display: grid; grid-template-columns: var(--grid-offer-pricing-focus); gap: var(--space-16); align-items: start; margin-top: var(--space-16); }
.offer-pricing-media { overflow: hidden; border: var(--border-thin) solid var(--color-line-premium); border-radius: var(--radius-premium); background: var(--color-paper); box-shadow: var(--shadow-premium); }
.offer-pricing-media picture, .offer-pricing-media img { display: block; width: var(--size-full); }
.offer-pricing-media img { aspect-ratio: var(--offer-pricing-aspect); object-fit: cover; object-position: center; }
.offer-pricing-media figcaption { padding: var(--space-3) var(--space-4); border-top: var(--border-thin) solid var(--color-line); color: var(--color-steel); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--media-caption-tracking); line-height: var(--media-caption-leading); }
.offer-pricing-steps { display: grid; gap: var(--space-5); list-style: none; }
.offer-pricing-step { display: grid; grid-template-columns: var(--grid-step-mobile); gap: var(--space-4); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-line); }
.offer-pricing-step > span, .offer-pricing-copy > span { color: var(--color-signal-deep); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.offer-pricing-step h3 { color: var(--color-ink); font-size: var(--text-md); }
.offer-pricing-step p { margin-top: var(--space-2); color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }
.offer-pricing-suggestions { display: grid; grid-template-columns: var(--grid-offer-pricing-suggestions); gap: var(--space-16); align-items: center; margin-top: var(--space-16); padding-top: var(--space-10); border-top: var(--border-thin) solid var(--color-line); }
.offer-pricing-copy { display: grid; gap: var(--space-5); }
.offer-pricing-copy h3 { color: var(--color-ink); font-size: var(--text-xl); }
.offer-pricing-copy > p { color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }
.offer-pricing-copy ul { display: grid; gap: var(--space-3); list-style: none; }
.offer-pricing-copy li { position: relative; padding-left: var(--space-6); color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }
.offer-pricing-copy li::before { position: absolute; top: var(--check-offset); left: var(--zero); width: var(--space-3); height: var(--space-3); border-radius: var(--radius-round); background: var(--color-signal); content: ""; }
.offer-pricing-foot { display: grid; grid-template-columns: var(--grid-offer-pricing-foot); gap: var(--space-10); margin-top: var(--space-16); padding-top: var(--space-8); border-top: var(--border-thin) solid var(--color-line); }
.offer-pricing-foot p { color: var(--color-steel); font-size: var(--text-sm); line-height: var(--leading-body); }
.offer-pricing-foot p:last-child { padding-left: var(--space-6); border-left: var(--border-strong) solid var(--color-signal); }
.offer-pricing-foot strong { color: var(--color-ink); }
@media (max-width: 68rem) { .offer-pricing-focus, .offer-pricing-suggestions, .offer-pricing-foot { grid-template-columns: var(--grid-single); gap: var(--layout-gap-collapsed); } }
@media (max-width: 48rem) { .offer-pricing-rail { grid-template-columns: var(--grid-single); padding: var(--space-6); } .offer-pricing-rail li { padding-block: var(--space-2); } }