.page-pricing { background: #fff; color: #203747; }
.pricing-wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.pricing-hero { overflow: hidden; padding: 4.5rem 0; color: #fff; background: radial-gradient(circle at 88% 18%, rgba(45,196,181,.24), transparent 26rem), var(--navy); }
.pricing-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.pricing-eyebrow { margin-bottom: .8rem; color: #1b8178; font: 600 .78rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pricing-hero .pricing-eyebrow, .pricing-cta .pricing-eyebrow { color: #78dfd1; }
.pricing-hero h1 { max-width: 10ch; margin: 0 0 1.4rem; font-size: clamp(3rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.055em; }
.pricing-hero h1 span { color: #78dfd1; }
.pricing-lede { max-width: 650px; color: rgba(255,255,255,.82); font-size: clamp(1.08rem, 2vw, 1.28rem); }
.pricing-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.pricing-button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; padding: .75rem 1.3rem; border: 1px solid transparent; border-radius: 2px; font-weight: 700; text-decoration: none; }
.pricing-button--primary { background: var(--accent-text); color: #fff; }
.pricing-button--primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.pricing-button--secondary { border-color: rgba(255,255,255,.45); color: #fff; }
.pricing-button--secondary:hover { border-color: #fff; color: #fff; }
.price-signal { padding: 1.8rem; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); box-shadow: 0 28px 70px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.price-signal > p { color: #78dfd1; font: 600 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.price-signal__rate { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; padding: 1.1rem 0 1.4rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.price-signal__rate strong { font-size: clamp(3.4rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -.06em; }
.price-signal__rate span { color: rgba(255,255,255,.7); }
.price-signal ul { display: grid; gap: .65rem; margin-top: 1.25rem; list-style: none; color: rgba(255,255,255,.82); }
.price-signal li::before { content: "✓"; margin-right: .65rem; color: #78dfd1; font-weight: 700; }
.pricing-section { padding: 4.5rem 0; }
.pricing-section--soft { background: #eef7f6; }
.pricing-heading { max-width: 760px; margin-bottom: 2rem; }
.pricing-heading h2, .pricing-cta h2 { margin: 0 0 .8rem; color: var(--navy); font-size: clamp(2.15rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -.04em; }
.pricing-heading > p:last-child { color: #5c6f7d; font-size: 1.08rem; }
.pricing-fineprint { max-width: 850px; margin-top: 1.3rem; color: #687985; font-size: .82rem; }
.pricing-math { display: grid; gap: .8rem; align-items: center; }
.pricing-math > div { display: grid; gap: .25rem; padding: 1.3rem; border: 1px solid #d4e2e7; background: #fff; }
.pricing-math > b { color: #178b82; font: 600 1.5rem var(--mono); text-align: center; }
.pricing-math span { color: #687985; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.pricing-math strong { color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; }
.pricing-math__result { border-color: var(--teal) !important; background: #eef7f6 !important; }
.included-grid { display: grid; gap: 1px; background: #dce7eb; border: 1px solid #dce7eb; }
.included-grid article { padding: 1.6rem; background: #fff; }
.included-grid span { color: #16867c; font: 600 .78rem var(--mono); }
.included-grid h3 { margin: 1.2rem 0 .5rem; color: var(--navy); font-size: 1.25rem; }
.included-grid p { color: #687985; }
.pricing-cta { padding: 4rem 0; background: linear-gradient(135deg, #0a4a6b, #13786f); color: #fff; }
.pricing-cta .pricing-wrap { display: grid; gap: 1.5rem; align-items: center; }
.pricing-cta h2 { color: #fff; }
.pricing-cta p:not(.pricing-eyebrow) { max-width: 720px; color: rgba(255,255,255,.76); }
@media (min-width:760px) { .included-grid { grid-template-columns: repeat(2,1fr); } .pricing-math { grid-template-columns:1fr auto 1fr auto 1fr; } }
@media (min-width:1000px) { .pricing-hero { padding:6.5rem 0; } .pricing-hero-grid { grid-template-columns:1.15fr .85fr; gap:5rem; } .included-grid { grid-template-columns:repeat(4,1fr); } .pricing-cta .pricing-wrap { grid-template-columns:1fr auto; } }