/**
 * Site pricing (row5) + feature matrix — uses ContentManager theme tokens
 * from layouts/colors.blade.php: --primary-color, --secondary-color, --tertiary-color
 */

 .site-pricing,
 .site-feature-matrix-section,
 .site-pricing-summary {
     --sp-primary: var(--primary-color, #0070f2);
     --sp-secondary: var(--secondary-color, #005bb8);
     --sp-tertiary: var(--tertiary-color, #f0f4f8);
     --sp-primary-dark: color-mix(in srgb, var(--sp-primary) 82%, #000000);
     --sp-primary-soft: color-mix(in srgb, var(--sp-primary) 10%, #ffffff);
     --sp-primary-glow: color-mix(in srgb, var(--sp-primary) 28%, transparent);
     --sp-primary-ring: color-mix(in srgb, var(--sp-primary) 12%, transparent);
     --sp-text: #0f172a;
     --sp-text-muted: #64748b;
     --sp-border: #e2e8f0;
     --sp-surface: #ffffff;
 }
 
 /* ===== Section intro (matches theme section-* classes) ===== */
 .pricing-section.site-pricing {
     padding: 80px 0;
     background-color: var(--sp-surface);
 }
 
 .site-pricing .section-subtitle {
     color: var(--sp-primary);
     font-weight: 600;
 }
 
 .site-pricing .section-title {
     color: var(--sp-secondary);
     font-weight: 700;
 }
 
 .site-pricing .section-description {
     color: var(--sp-text-muted);
 }
 
 @media (max-width: 767.98px) {
     .pricing-section.site-pricing {
         padding: 40px 0;
     }
 }
 
 /* ===== Cycle toggle ===== */
 .site-pricing-toggle-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: 28px 0 36px;
 }
 
 .site-pricing-toggle-wrap--compact {
     margin-top: 12px;
 }
 
 .site-pricing-vat-note {
     display: block;
     font-size: 13px;
     margin-bottom: 14px;
     color: var(--sp-text-muted);
 }
 
 .site-pricing-seg {
     position: relative;
     display: inline-grid;
     grid-template-columns: 1fr 1fr;
     align-items: stretch;
     min-width: 280px;
     padding: 4px;
     border: 1px solid var(--sp-border);
     border-radius: 999px;
     background: var(--sp-surface);
     box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
     direction: ltr;
 }
 
 .site-pricing-seg-input {
     position: absolute;
     opacity: 0;
     pointer-events: none;
     width: 0;
     height: 0;
 }
 
 .site-pricing-seg-thumb {
     position: absolute;
     top: 4px;
     bottom: 4px;
     left: 4px;
     width: calc(50% - 4px);
     border-radius: 999px;
     background: var(--sp-primary);
     box-shadow: 0 4px 12px var(--sp-primary-glow);
     transition: transform .28s cubic-bezier(.2, .8, .2, 1);
     z-index: 0;
 }
 
 .site-pricing-seg.is-months .site-pricing-seg-thumb {
     transform: translateX(100%);
 }
 
 .site-pricing-seg-btn {
     position: relative;
     z-index: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin: 0;
     border: 0;
     background: transparent;
     color: var(--sp-text);
     font-size: 15px;
     font-weight: 800;
     line-height: 1.2;
     padding: 10px 18px;
     cursor: pointer;
     border-radius: 999px;
     transition: color .2s ease;
     white-space: nowrap;
     min-height: 44px;
 }
 
 .site-pricing-seg-btn.is-active {
     color: #fff;
 }
 
 .site-pricing-save {
     background: rgba(255, 255, 255, 0.22);
     color: inherit;
     border-radius: 999px;
     padding: 3px 8px;
     font-size: 11px;
     font-weight: 700;
     line-height: 1.2;
 }
 
 .site-pricing-seg-btn:not(.is-active) .site-pricing-save {
     background: color-mix(in srgb, var(--sp-primary) 12%, #ffffff);
     color: var(--sp-primary);
 }
 
 @media (max-width: 480px) {
     .site-pricing-seg {
         min-width: 0;
         width: 100%;
         max-width: 340px;
     }
 
     .site-pricing-seg-btn {
         font-size: 14px;
         padding: 10px 12px;
         gap: 6px;
     }
 
     .site-pricing-save {
         font-size: 10px;
         padding: 2px 6px;
     }
 }
 
 /* ===== Plan cards ===== */
 .site-pricing .js-pricing-col {
     display: flex;
 }
 
 .site-pricing .js-pricing-col.is-pricing-hidden {
     display: none !important;
 }
 
 .site-plan-card {
     position: relative;
     width: 100%;
     border: 2px solid var(--sp-border);
     border-radius: 20px;
     overflow: hidden;
     background: var(--sp-surface);
     height: 100%;
     min-height: 420px;
     display: flex;
     flex-direction: column;
     transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.04);
 }
 
 .site-plan-card:hover {
     transform: translateY(-4px);
     border-color: var(--sp-primary);
     box-shadow: 0 20px 25px -5px var(--sp-primary-ring);
 }
 
 .site-plan-card.is-recommended {
     border-color: var(--sp-primary);
     box-shadow: 0 0 0 3px var(--sp-primary-ring), 0 16px 32px -8px rgb(0 0 0 / 0.1);
 }
 
 .site-plan-card.is-selected {
     border-color: var(--sp-secondary);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-secondary) 18%, transparent), 0 16px 32px -8px rgb(0 0 0 / 0.1);
 }
 
 .site-plan-card.is-selected .site-plan-btn {
     background: var(--sp-secondary);
 }
 
 .site-plan-card.is-selected .site-plan-btn:hover {
     background: var(--sp-primary-dark);
 }
 
 button.site-plan-btn {
     width: 100%;
     border: 0;
     cursor: pointer;
 }
 
 .site-plan-ribbon {
     position: absolute;
     top: 12px;
     inset-inline-end: 12px;
     border-radius: 999px;
     background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark));
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     padding: 5px 12px;
     z-index: 2;
     box-shadow: 0 2px 8px var(--sp-primary-glow);
     line-height: 1.2;
     max-width: calc(100% - 24px);
     white-space: nowrap;
 }
 
 .site-plan-card.is-recommended .site-plan-header {
     padding-top: 40px;
 }
 
 .site-plan-header {
     padding: 28px 22px 12px;
     background: linear-gradient(180deg, var(--sp-primary-soft) 0%, var(--sp-surface) 100%);
     border-bottom: 1px solid color-mix(in srgb, var(--sp-border) 80%, var(--sp-tertiary));
 }
 
 .site-plan-name {
     margin: 0;
     font-size: 1.35rem;
     font-weight: 800;
     color: var(--sp-secondary);
 }
 
 .site-plan-desc {
     margin: 8px 0 0;
     font-size: 12px;
     color: var(--sp-text-muted);
     line-height: 1.5;
 }
 
 .site-plan-price-block {
     padding: 16px 22px;
     text-align: center;
     border-bottom: 1px dashed var(--sp-border);
 }
 
 .site-plan-period-price {
     line-height: 1.2;
 }
 
 .site-plan-amount-row {
     direction: ltr;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     unicode-bidi: isolate;
 }
 
 .site-plan-amount {
     font-size: 2.25rem;
     font-weight: 900;
     color: var(--sp-primary);
     line-height: 1;
 }
 
 .site-plan-currency {
     width: 22px;
     height: 22px;
     object-fit: contain;
     display: inline-block;
     vertical-align: middle;
     flex-shrink: 0;
 }
 
 .site-plan-period {
     display: block;
     font-size: 13px;
     color: var(--sp-text-muted);
     margin-top: 8px;
     font-weight: 600;
 }
 
 .site-plan-free {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--sp-primary);
 }
 
 /* Custom plan card — uses secondary as dark accent */
 .site-plan-card.is-custom {
     border-color: var(--sp-secondary);
     background: linear-gradient(180deg, var(--sp-secondary) 0%, var(--sp-primary-dark) 100%);
     box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--sp-secondary) 35%, transparent);
 }
 
 .site-plan-card.is-custom:hover {
     border-color: color-mix(in srgb, var(--sp-secondary) 70%, #ffffff);
     box-shadow: 0 24px 40px -10px color-mix(in srgb, var(--sp-secondary) 45%, transparent);
 }
 
 .site-plan-card.is-custom .site-plan-header {
     background: transparent;
     border-bottom-color: rgba(255, 255, 255, 0.12);
 }
 
 .site-plan-card.is-custom .site-plan-name {
     color: #fff;
 }
 
 .site-plan-card.is-custom .site-plan-desc {
     color: rgba(255, 255, 255, 0.78);
 }
 
 .site-plan-card.is-custom .site-plan-price-block {
     border-bottom-color: rgba(255, 255, 255, 0.14);
 }
 
 .site-plan-card.is-custom .site-plan-features li {
     color: #e2e8f0;
     border-bottom-color: rgba(255, 255, 255, 0.07);
 }
 
 .site-plan-card.is-custom .site-plan-features li i {
     color: color-mix(in srgb, var(--sp-primary) 55%, #ffffff);
 }
 
 .site-plan-quote {
     font-size: 1.35rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.3;
 }
 
 a.site-plan-btn--contact {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     background: #fff !important;
     color: #25d068 !important;
 }
 
 a.site-plan-btn--contact:hover {
     background: #1eb857;
     color: #0b3d20 !important;
 }
 
 a.site-plan-btn--contact i {
     font-size: 18px;
 }
 
 .site-plan-features {
     list-style: none;
     margin: 0;
     padding: 16px 22px;
     flex: 1 1 auto;
     min-height: 168px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
 }
 
 .site-plan-card.is-custom .site-plan-features {
     min-height: 200px;
 }
 
 .site-plan-features li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 7px 0;
     font-size: 13px;
     color: #334155;
     border-bottom: 1px solid #f8fafc;
 }
 
 .site-plan-features li:last-child {
     border-bottom: none;
 }
 
 .site-plan-features li i {
     color: var(--sp-primary);
     margin-top: 2px;
     width: 16px;
     text-align: center;
 }
 
 .site-plan-footer {
     padding: 0 22px 22px;
     margin-top: auto;
 }
 
 .site-plan-btn {
     display: block;
     text-align: center;
     text-decoration: none;
     background: var(--sp-primary);
     color: #fff !important;
     border-radius: 12px;
     padding: 12px 16px;
     font-weight: 700;
     transition: background .2s ease;
 }
 
 .site-plan-btn:hover {
     background: var(--sp-primary-dark);
     color: #fff !important;
 }
 
 /* ===== Feature comparison matrix ===== */
 .site-feature-matrix-section {
     margin: 8px 0 48px;
 }
 
 .site-feature-matrix-head {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
     text-align: center;
 }
 
 .site-feature-matrix-title {
     margin: 0;
     font-size: 22px;
     font-weight: 800;
     color: var(--sp-secondary);
 }
 
 .site-feature-matrix-toggle {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--sp-surface);
     border: 1px solid var(--sp-border);
     border-radius: 999px;
     padding: 11px 26px;
     font-size: 15px;
     font-weight: 700;
     color: var(--sp-text);
     cursor: pointer;
     transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
 }
 
 .site-feature-matrix-toggle:hover,
 .site-feature-matrix-toggle:focus-visible {
     background: var(--sp-tertiary);
     border-color: color-mix(in srgb, var(--sp-primary) 35%, var(--sp-border));
     box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
 }
 
 .site-feature-matrix-caret {
     transition: transform .25s ease;
 }
 
 .site-feature-matrix-toggle[aria-expanded="true"] .site-feature-matrix-caret {
     transform: rotate(180deg);
 }
 
 .site-feature-matrix-hint {
     font-size: 13px;
     color: var(--sp-text-muted);
 }
 
 .site-feature-matrix-wrap {
     background: var(--sp-surface);
     border: 1px solid var(--sp-border);
     border-radius: 16px;
     overflow: hidden;
 }
 
 .site-feature-matrix-wrap.is-collapsed {
     display: none;
 }
 
 .site-feature-matrix {
     width: 100%;
     margin: 0;
     border-collapse: collapse;
 }
 
 .site-feature-matrix th,
 .site-feature-matrix td {
     padding: 14px 16px;
     border-bottom: 1px solid #eef2f7;
     vertical-align: middle;
     font-size: 14px;
     color: var(--sp-text);
 }
 
 .site-feature-matrix thead th {
     background: var(--sp-tertiary);
     font-weight: 700;
     white-space: nowrap;
     color: var(--sp-secondary);
 }
 
 .site-feature-matrix-feature-col {
     text-align: start;
     min-width: 220px;
 }
 
 .site-feature-matrix-cat td {
     background: color-mix(in srgb, var(--sp-tertiary) 85%, var(--sp-primary-soft));
     font-weight: 800;
     color: var(--sp-secondary);
     font-size: 15px;
 }
 
 .site-feature-matrix-name {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
 }
 
 .site-feature-matrix-new {
     display: inline-block;
     background: color-mix(in srgb, var(--sp-primary) 12%, #dcfce7);
     color: var(--sp-primary-dark);
     font-size: 11px;
     font-weight: 700;
     padding: 2px 8px;
     border-radius: 999px;
 }
 
 .site-feature-matrix-info {
     color: var(--sp-text-muted);
     cursor: help;
 }
 
 .site-feature-matrix-yes {
     color: var(--sp-primary);
     font-size: 18px;
 }
 
 .site-feature-matrix-no {
     color: #cbd5e1;
     font-size: 16px;
 }
 
 .site-feature-matrix-text {
     display: inline-block;
     color: #334155;
     font-weight: 600;
     font-size: 13px;
     line-height: 1.4;
     max-width: 160px;
 }
 
 @media (max-width: 767px) {
     .site-feature-matrix th,
     .site-feature-matrix td {
         padding: 10px 12px;
         font-size: 13px;
     }
 
     .site-feature-matrix-feature-col {
         min-width: 160px;
     }
 }