/* Page-specific features only: pricing-tables.html */
@layer pages{
:root{--pricing-primary: #1F73E8;--pricing-light: #4EA6FF;--pricing-soft: #eef6ff;--pricing-border: #d9e8fb;--pricing-text: #172033;--pricing-muted: #5f6b7a;--pricing-white: #fff;--pricing-black: #000;}
*{box-sizing: border-box;}
body{margin: 0;color: var(--pricing-text);background: #f7faff;font-family: "Inter", sans-serif;}
h1,h2,h3{font-family: "Poppins", sans-serif;}
.container{width: min(1180px, calc(100% - 36px));margin: 0 auto;}
#pricing-table-hero{padding: 105px 0 90px;color: #fff;text-align: center;background:
        radial-gradient(circle at 85% 18%, rgba(255,255,255,.20), transparent 24%),
        radial-gradient(circle at 12% 85%, rgba(123,196,255,.30), transparent 30%),
        linear-gradient(135deg, var(--pricing-primary), var(--pricing-light));}
#pricing-table-hero h1{margin: 0 0 18px;font-size: clamp(2.45rem, 5vw, 4.3rem);}
#pricing-table-hero p{max-width: 900px;margin: 0 auto;color: #fff;font-size: 1.08rem;line-height: 1.75;}
.hero-actions{display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;margin-top: 28px;}
.pricing-main{padding: 64px 0 100px;}
.pricing-intro{max-width: 920px;margin: 0 auto 34px;padding: 24px;border: 1px solid var(--pricing-border);border-radius: 18px;background: #fff;box-shadow: 0 14px 34px rgba(31,115,232,.08);text-align: center;}
.pricing-intro h2{margin: 0 0 8px;color: var(--pricing-primary);}
.pricing-intro p{margin: 0;color: var(--pricing-muted);line-height: 1.7;}
.pricing-section{margin-top: 34px;padding: clamp(24px, 4vw, 38px);border: 1px solid var(--pricing-border);border-radius: 22px;background: #fff;box-shadow: 0 18px 45px rgba(0,0,0,.07);}
.pricing-section-header{display: flex;align-items: flex-start;justify-content: space-between;gap: 20px;margin-bottom: 20px;}
.pricing-section-header h2{margin: 0 0 6px;color: var(--pricing-primary);font-size: clamp(1.55rem, 3vw, 2.1rem);}
.pricing-section-header p{max-width: 760px;margin: 0;color: var(--pricing-muted);line-height: 1.65;}
.pricing-pill{flex: 0 0 auto;padding: 8px 14px;border-radius: 999px;background: var(--pricing-soft);color: var(--pricing-primary);font-weight: 800;white-space: nowrap;}
.table-wrap{width: 100%;overflow-x: auto;border: 1px solid var(--pricing-border);border-radius: 16px;-webkit-overflow-scrolling: touch;}
.pricing-table{width: 100%;min-width: 820px;border-collapse: collapse;background: #fff;}
.pricing-table th,.pricing-table td{padding: 15px 16px;border-bottom: 1px solid #e7eef8;vertical-align: top;text-align: left;}
.pricing-table th{background: #eff6ff;color: var(--pricing-primary);font-family: "Poppins", sans-serif;font-size: .88rem;letter-spacing: .02em;}
.pricing-table tbody tr:last-child td{border-bottom: 0;}
.pricing-table tbody tr:hover td{background: #fbfdff;}
.service-name{color: var(--pricing-text);font-weight: 800;}
.price-type{display: inline-block;padding: 6px 10px;border-radius: 999px;background: var(--pricing-soft);color: var(--pricing-primary);font-weight: 800;white-space: nowrap;}
.price-type.recurring{background: #edf9f1;color: #2d8b42;}
.price-type.production{background: #fff6df;color: #946400;}
.price-type.variable{background: #f4efff;color: #6f42c1;}
.section-note{margin: 18px 0 0;padding: 16px 18px;border-left: 5px solid var(--pricing-primary);border-radius: 12px;background: #f4f9ff;color: #41506a;line-height: 1.65;}
.pricing-summary-grid{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;margin-top: 34px;}
.summary-card{padding: 24px;border: 1px solid var(--pricing-border);border-radius: 18px;background: #fff;box-shadow: 0 14px 34px rgba(0,0,0,.06);}
.summary-card h3{margin: 0 0 10px;color: var(--pricing-primary);}
.summary-card p{margin: 0;color: var(--pricing-muted);line-height: 1.65;}
.final-cta{margin-top: 36px;padding: 42px 28px;border-radius: 24px;background:
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(135deg, var(--pricing-primary), var(--pricing-light));color: #fff;text-align: center;}
.final-cta h2{margin: 0 0 10px;color: #fff;}
.final-cta p{max-width: 760px;margin: 0 auto;color: #fff;line-height: 1.7;}
.final-cta .hero-actions{margin-top: 24px;}
@media (max-width: 900px) {.pricing-summary-grid{grid-template-columns: 1fr;}}
@media (max-width: 760px) {#pricing-table-hero{padding: 78px 0 70px;}
.pricing-main{padding: 46px 0 76px;}
.pricing-section-header{flex-direction: column;}}
}