/* ════════════════════════════════════════════════════
   Re:nu Health — Components
═══════════════════════════════════════════════════════ */

/* GOAL CARDS */
.goals-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.goal-card { padding: var(--space-6) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: left; transition: all var(--transition); display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; }
.goal-card:hover { border-color: var(--color-copper); transform: translateY(-4px); background: linear-gradient(180deg, var(--color-surface), rgba(79,184,164,0.06)); }
.goal-icon { width: 40px; height: 40px; color: var(--color-copper); margin-bottom: var(--space-2); }
.goal-icon svg { width: 100%; height: 100%; }
.goal-name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-white); margin: 0; }
.goal-desc { font-size: 0.8125rem; color: var(--color-grey-lt); margin: 0; }
@media (max-width: 900px) { .goals-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .goals-grid { grid-template-columns: repeat(2, 1fr); } }

/* TREATMENT CARDS */
.treatments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.treatments-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .treatments-grid, .treatments-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .treatments-grid, .treatments-grid.cols-4 { grid-template-columns: 1fr; } }

.t-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); position: relative; }
.t-card:hover { border-color: var(--color-copper); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.t-card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--color-surface-2); }
.t-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.t-card:hover .t-card-img img { transform: scale(1.05); }
.t-card-meta { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; gap: var(--space-2); }
.t-card-meta span { padding: 0.25rem 0.625rem; border-radius: var(--radius-full); background: rgba(8,9,12,0.75); backdrop-filter: blur(8px); color: var(--color-white); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; }
.t-card-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; gap: var(--space-3); }
.t-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.t-card-tags span { font-size: 0.6875rem; color: var(--color-copper-lt); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; background: var(--color-copper-dim); border-radius: var(--radius-sm); }
.t-card-name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-white); margin: 0; line-height: 1.25; }
.t-card-desc { font-size: 0.875rem; color: var(--color-white-70); margin: 0; flex: 1; line-height: 1.5; }
.t-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--color-border); }
.t-card-price { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-copper); }
.t-card-price small { font-family: var(--font-body); font-size: 0.6875rem; color: var(--color-grey-lt); margin-left: 0.25rem; }
.t-card-link { font-size: 0.8125rem; color: var(--color-copper-lt); font-weight: 500; }

/* JOURNEY */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); position: relative; }
.journey::before { content: ''; position: absolute; top: 32px; left: 16.66%; right: 16.66%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-copper), transparent); z-index: 0; }
.journey-step { text-align: center; position: relative; z-index: 1; }
.journey-num { width: 64px; height: 64px; border-radius: 50%; background: var(--color-deep); border: 1.5px solid var(--color-copper); color: var(--color-copper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-xl); margin: 0 auto var(--space-4); }
.journey-step h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.journey-step p { font-size: 0.9375rem; max-width: 30ch; margin: 0 auto; }
@media (max-width: 720px) { .journey { grid-template-columns: 1fr; gap: var(--space-6); } .journey::before { display: none; } }

/* REVIEWS */
.reviews-wrap { position: relative; }
.reviews-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); transition: opacity 0.3s; }
.review-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.review-stars { display: flex; gap: 2px; color: var(--color-copper); }
.review-stars svg { width: 16px; height: 16px; fill: currentColor; }
.review-text { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--color-white); line-height: 1.55; flex: 1; margin: 0; }
.review-meta { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.review-meta strong { font-family: var(--font-body); font-weight: 500; color: var(--color-white); font-size: 0.9375rem; }
.review-meta span { font-size: 0.75rem; color: var(--color-copper-lt); letter-spacing: 0.05em; }
.reviews-dots { display: flex; gap: 8px; justify-content: center; margin-top: var(--space-6); }
.reviews-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-lt); transition: all 0.2s; }
.reviews-dots button.active { background: var(--color-copper); width: 24px; border-radius: 4px; }
@media (max-width: 900px) { .reviews-track { grid-template-columns: 1fr; } }

/* TRUST GRID */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.trust-card { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--transition); }
.trust-card:hover { border-color: var(--color-copper); }
.trust-card .icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-copper-dim); border: 1px solid rgba(79,184,164,0.3); display: flex; align-items: center; justify-content: center; color: var(--color-copper); margin-bottom: var(--space-4); }
.trust-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.trust-card p { font-size: 0.9375rem; margin: 0; }
@media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; } }

/* MEMBERSHIPS CTA */
.memberships-cta { background: linear-gradient(135deg, var(--color-copper), #2E8070); border-radius: var(--radius-xl); padding: var(--space-12); text-align: center; max-width: 880px; margin: 0 auto; position: relative; overflow: hidden; }
.memberships-cta::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%); pointer-events: none; }
.memberships-cta h2 { color: white; }
.memberships-cta p { color: rgba(255,255,255,0.9); max-width: 60ch; margin: 0 auto var(--space-6); font-size: var(--text-base); }
.memberships-cta .btn-primary { background: white; color: var(--color-copper); }
.memberships-cta .btn-primary:hover { background: var(--color-void); color: white; }
.benefit-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-8); }
.memberships-cta .pill { background: rgba(255,255,255,0.18); color: white; border-color: rgba(255,255,255,0.25); font-size: 0.8125rem; }

/* APP + LOCATION */
.app-loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: stretch; }
.app-card, .loc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); }
.app-card { background: linear-gradient(135deg, var(--color-surface), var(--color-deep)); }
.app-badges { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.app-badges img { height: 44px; width: auto; }
.phone-mock { width: 140px; align-self: flex-end; margin-top: var(--space-2); border-radius: var(--radius-md); }
.loc-map { aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); margin: var(--space-2) 0; }
.loc-map iframe { width: 100%; height: 100%; border: 0; filter: invert(1) hue-rotate(180deg); }
.loc-info { display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.9375rem; margin-bottom: var(--space-4); }
.loc-info strong { color: var(--color-copper-lt); display: inline-block; min-width: 80px; }
@media (max-width: 900px) { .app-loc-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-2); }
.faq { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition); }
.faq.open { border-color: var(--color-copper); }
.faq-q { width: 100%; padding: var(--space-5) var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); text-align: left; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-white); }
.faq-q::after { content: '+'; font-size: 1.5rem; color: var(--color-copper); transition: transform 0.3s; flex-shrink: 0; }
.faq.open .faq-q::after { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 var(--space-6) var(--space-5); color: var(--color-white-70); font-size: 0.9375rem; }
.faq.open .faq-a { display: block; }

/* FILTER BAR */
.filter-bar { background: var(--color-deep); border-bottom: 1px solid var(--color-border); position: sticky; top: 72px; z-index: 30; padding: var(--space-3) 0; }
.filter-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.filter-tab { padding: 0.5rem 1rem; border-radius: var(--radius-full); background: transparent; border: 1px solid var(--color-border-lt); color: var(--color-white-70); font-size: 0.8125rem; font-weight: 500; transition: all var(--transition); }
.filter-tab:hover { border-color: var(--color-copper); color: var(--color-white); }
.filter-tab.active { background: var(--color-copper); border-color: var(--color-copper); color: white; }
.filter-count { margin-left: auto; font-size: 0.8125rem; color: var(--color-grey-lt); }

/* COMPARE TABLE */
.compare-table { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; }
.compare-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare-table th, .compare-table td { padding: var(--space-4) var(--space-5); text-align: left; font-size: 0.875rem; }
.compare-table th { background: var(--color-deep); font-family: var(--font-body); font-weight: 500; color: var(--color-copper); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; border-bottom: 1px solid var(--color-border); }
.compare-table tbody tr { border-bottom: 1px solid var(--color-border); transition: background 0.2s; }
.compare-table tbody tr:hover { background: var(--color-copper-dim); }
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table .ct-name { font-family: var(--font-display); color: var(--color-white); font-size: 1rem; }
.compare-table .ct-price { font-family: var(--font-display); color: var(--color-copper); font-size: 1.125rem; }

/* TREATMENT DETAIL */
.td-hero { position: relative; padding: var(--space-12) 0; background: var(--color-deep); border-bottom: 1px solid var(--color-border); }
.td-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: start; }
.td-img { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: sticky; top: 100px; }
.td-img img { width: 100%; height: 100%; object-fit: cover; }
.td-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }
.td-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-6) 0; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.td-meta-item { text-align: center; }
.td-meta-item .label { font-size: 0.6875rem; color: var(--color-copper); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; display: block; }
.td-meta-item .value { font-family: var(--font-display); font-size: 1.125rem; color: var(--color-white); }
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-4) 0; }
.benefit-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.benefit-row .check { width: 24px; height: 24px; border-radius: 50%; background: var(--color-copper-dim); color: var(--color-copper); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; font-weight: 600; }
.benefit-row strong { display: block; color: var(--color-white); font-weight: 500; font-size: 0.9375rem; margin-bottom: 2px; }
.benefit-row span { font-size: 0.8125rem; color: var(--color-grey-lt); }
@media (max-width: 900px) { .td-grid { grid-template-columns: 1fr; } .td-img { position: static; aspect-ratio: 16/10; max-height: 360px; } .td-meta { grid-template-columns: 1fr; gap: var(--space-2); } }

/* BOOKING */
.booking-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-8); align-items: start; }
.booking-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.bp-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0; opacity: 0.4; transition: opacity 0.3s; }
.bp-step.current, .bp-step.done { opacity: 1; }
.bp-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); border: 1.5px solid var(--color-border-lt); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.9375rem; color: var(--color-white-70); transition: all 0.3s; }
.bp-step.current .bp-circle { background: var(--color-copper); border-color: var(--color-copper); color: white; }
.bp-step.done .bp-circle { background: var(--color-copper-dim); border-color: var(--color-copper); color: var(--color-copper); }
.bp-label { font-size: 0.75rem; color: var(--color-grey-lt); letter-spacing: 0.05em; text-transform: uppercase; }
.bp-line { flex: 1; height: 1px; background: var(--color-border); margin: 0 var(--space-2); margin-bottom: 24px; }

.booking-step { display: none; }
.booking-step.active { display: block; animation: fadeIn 0.3s var(--ease-out); }
.booking-step h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.booking-step .lead { font-size: 0.9375rem; color: var(--color-white-70); margin-bottom: var(--space-6); }

.t-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 600px) { .t-select-grid { grid-template-columns: 1fr; } }
.t-select { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); text-align: left; width: 100%; }
.t-select:hover { border-color: var(--color-copper-lt); }
.t-select.selected { border-color: var(--color-copper); background: var(--color-copper-dim); }
.t-select-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--color-surface-2); }
.t-select-thumb img { width: 100%; height: 100%; object-fit: cover; }
.t-select-info { flex: 1; min-width: 0; }
.t-select-info strong { display: block; font-family: var(--font-display); font-size: 0.9375rem; color: var(--color-white); font-weight: 500; }
.t-select-info span { display: block; font-size: 0.75rem; color: var(--color-grey-lt); }
.t-select-price { font-family: var(--font-display); font-size: 1.0625rem; color: var(--color-copper); flex-shrink: 0; }
.t-select-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border-lt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.t-select.selected .t-select-check { background: var(--color-copper); border-color: var(--color-copper); }
.t-select.selected .t-select-check::after { content: '✓'; color: white; font-size: 0.75rem; }

.calendar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.cal-head h3 { font-size: var(--text-lg); margin: 0; }
.cal-nav { display: flex; gap: var(--space-2); }
.cal-nav button { width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-white); font-size: 1.125rem; }
.cal-nav button:hover { background: var(--color-copper); border-color: var(--color-copper); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 0.6875rem; color: var(--color-copper); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-2) 0; font-weight: 500; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--color-white-70); cursor: pointer; transition: all 0.2s; background: transparent; border: 1px solid transparent; }
.cal-day:hover:not(.disabled):not(.empty) { background: var(--color-surface-2); color: var(--color-white); }
.cal-day.disabled, .cal-day.empty { opacity: 0.25; cursor: not-allowed; }
.cal-day.today { border-color: var(--color-border-lt); }
.cal-day.selected { background: var(--color-copper); color: white; border-color: var(--color-copper); }

.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.time-slot { padding: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-white-90); font-size: 0.875rem; text-align: center; transition: all 0.2s; }
.time-slot:hover:not(.disabled) { border-color: var(--color-copper-lt); color: var(--color-white); }
.time-slot.selected { background: var(--color-copper); border-color: var(--color-copper); color: white; }
.time-slot.disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

.step-actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); flex-wrap: wrap; }

.form-grid { display: grid; gap: var(--space-4); }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 0.8125rem; color: var(--color-white-90); font-weight: 500; }
.field .req { color: var(--color-copper); }
.field input, .field textarea, .field select { background: var(--color-surface); border: 1px solid var(--color-border-lt); border-radius: var(--radius-md); padding: 0.875rem 1rem; color: var(--color-white); font-size: 0.9375rem; transition: border-color 0.2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-copper); }
.field textarea { min-height: 120px; resize: vertical; }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.8125rem; color: var(--color-white-70); cursor: pointer; line-height: 1.4; padding: 0.25rem 0; font-weight: 400; }
.checkbox-row input { margin-top: 2px; accent-color: var(--color-copper); }

.summary-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: 100px; }
.summary-card h3 { font-size: var(--text-lg); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.summary-section { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.summary-section:last-child { border-bottom: none; padding-bottom: 0; }
.summary-label { display: block; font-size: 0.6875rem; color: var(--color-copper); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-2); }
.summary-empty { font-size: 0.8125rem; color: var(--color-grey-lt); margin: 0; font-style: italic; }
.summary-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); font-size: 0.875rem; }
.summary-row .item { flex: 1; min-width: 0; }
.summary-row .item-name { color: var(--color-white); font-weight: 500; display: block; }
.summary-row .item-meta { font-size: 0.75rem; color: var(--color-grey-lt); }
.summary-row .price { color: var(--color-copper); font-family: var(--font-display); }
.summary-row .remove { color: var(--color-grey-lt); font-size: 1rem; padding: 4px; }

.success { text-align: center; padding: var(--space-12) var(--space-4); }
.success-tick { width: 80px; height: 80px; border-radius: 50%; background: var(--color-copper-dim); border: 2px solid var(--color-copper); color: var(--color-copper); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); }
.success-tick svg { width: 36px; height: 36px; }

@media (max-width: 920px) {
  .booking-grid { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .booking-progress { overflow-x: auto; padding-bottom: var(--space-4); }
  .bp-label { display: none; }
}

/* QUOTE BLOCK */
.quote-block { max-width: 880px; margin: 0 auto; text-align: center; padding: var(--space-12) var(--space-6); position: relative; }
.q-mark { font-family: var(--font-display); font-size: 8rem; color: var(--color-copper); line-height: 0.8; opacity: 0.3; display: block; margin-bottom: -2rem; }
.quote-block p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--color-white); line-height: 1.3; margin-bottom: var(--space-6); }

/* VALUES */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.value-card { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.value-card .icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-copper-dim); color: var(--color-copper); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.value-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.value-card p { font-size: 0.9375rem; margin: 0; }
@media (max-width: 800px) { .values-grid { grid-template-columns: 1fr; } }

/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.team-card { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; transition: all var(--trans-fast); }
.team-card:hover { border-color: var(--color-copper); transform: translateY(-2px); }
.team-photo { width: 140px; height: 140px; margin: 0 auto var(--space-4); border-radius: 50%; overflow: hidden; border: 3px solid var(--color-copper-dim); position: relative; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-white); margin: 0 0 0.25rem; }
.team-role { color: var(--color-copper); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--space-3); font-weight: 500; }
.team-bio { font-size: 0.875rem; color: var(--color-white-70); line-height: 1.55; margin: 0; text-align: left; }
.team-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--color-copper), #2E8070); color: white; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; margin: 0 auto var(--space-4); }
@media (max-width: 800px) { .team-grid { grid-template-columns: 1fr; } }

/* ADVISOR CARD (Pat Viroux) */
.advisor-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-copper-dim);
  border-radius: var(--radius-xl);
  align-items: start;
  position: relative;
  overflow: hidden;
}
.advisor-card::before {
  content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px;
  background: radial-gradient(circle, var(--color-copper-dim), transparent 70%);
  pointer-events: none;
}
.advisor-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--color-surface-2);
}
.advisor-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.advisor-badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--color-copper); color: var(--color-void);
  padding: 0.3rem 0.75rem; border-radius: var(--radius-full);
  font-weight: 600;
}
.advisor-body { position: relative; z-index: 1; }
.advisor-body p { font-size: 0.9375rem; color: var(--color-white-70); line-height: 1.65; margin: 0 0 var(--space-3); }
.advisor-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-white);
  margin: var(--space-2) 0 0.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.advisor-tagline {
  font-family: var(--font-display); font-style: italic;
  color: var(--color-copper-lt);
  font-size: var(--text-base);
  margin: 0 0 var(--space-5);
}
.advisor-credentials {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-4);
}
.advisor-cred {
  font-size: 0.75rem; letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-white-70);
}
.advisor-link {
  display: inline-block;
  color: var(--color-copper);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  border-bottom: 1px solid var(--color-copper-dim);
  padding-bottom: 2px;
  transition: all var(--trans-fast);
}
.advisor-link:hover { color: var(--color-copper-lt); border-color: var(--color-copper); }
@media (max-width: 800px) {
  .advisor-card { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-5); }
  .advisor-photo { max-width: 280px; margin: 0 auto; aspect-ratio: 1/1; }
}
@media (max-width: 800px) { .team-grid { grid-template-columns: 1fr; } }

/* CONTACT */
.contact-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-12); }
.contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color var(--transition); text-decoration: none; color: inherit; }
.contact-card:hover { border-color: var(--color-copper); }
.contact-card .icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-copper-dim); color: var(--color-copper); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); font-size: 1.25rem; }
.contact-card h3 { font-size: var(--text-lg); margin: 0; }
.contact-card .big { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-copper); }
.contact-card .meta { font-size: 0.8125rem; color: var(--color-grey-lt); }
.contact-card p { margin: 0; font-size: 0.9375rem; }
@media (max-width: 800px) { .contact-options { grid-template-columns: 1fr; } }

.loc-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 800px) { .loc-trio { grid-template-columns: 1fr; } }

/* BLOG */
.blog-feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-12); cursor: pointer; transition: border-color var(--transition); color: inherit; text-decoration: none; }
.blog-feat:hover { border-color: var(--color-copper); }
.blog-feat-img { aspect-ratio: 4/3; background: linear-gradient(135deg, #0A2E28, var(--color-copper)); position: relative; overflow: hidden; }
.blog-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-feat-img:has(img)::after { display: none; }
.blog-feat-img::after { content: 'R'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 8rem; color: rgba(255,255,255,0.15); }
.blog-feat-body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.blog-feat-body h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0; }
@media (max-width: 800px) { .blog-feat { grid-template-columns: 1fr; } .blog-feat-img { aspect-ratio: 16/10; } .blog-feat-body { padding: var(--space-6); } }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.blog-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); display: flex; flex-direction: column; cursor: pointer; }
.blog-card:hover { border-color: var(--color-copper); transform: translateY(-4px); }
.blog-card-img { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--color-surface-2), var(--color-deep)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--color-copper); font-size: 3rem; position: relative; overflow: hidden; }
.blog-card-img::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, var(--color-copper-glow), transparent 60%); }
.blog-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.blog-card-img:has(img)::before { display: none; }
.blog-card-img span { position: relative; z-index: 1; }
.blog-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.blog-card-body h3 { font-size: 1.125rem; line-height: 1.3; margin: 0; }
.blog-card-meta { display: flex; gap: var(--space-2); font-size: 0.75rem; color: var(--color-grey-lt); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.dot { color: var(--color-border-lt); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* BLOG POST DETAIL */
.blog-post-hero { min-height: auto; padding: var(--space-16) 0 var(--space-8); position: relative; }
.blog-post-hero .page-hero-overlay { background: var(--color-void); }
.blog-post-title { margin-top: var(--space-4); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.blog-post-excerpt { font-size: 1.25rem; line-height: 1.5; color: var(--color-white-70); margin: var(--space-5) 0 var(--space-6); max-width: 60ch; text-wrap: pretty; }
.blog-post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 0.875rem; color: var(--color-grey-lt); }

.blog-post-article { padding-top: var(--space-8); }
.blog-post-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-10); }

.blog-post-body { font-size: 1.0625rem; line-height: 1.7; color: var(--color-white-85, var(--color-white-70)); }
.blog-post-body > * + * { margin-top: var(--space-5); }
.blog-post-body p { margin: 0; text-wrap: pretty; }
.blog-post-body h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-white); margin-top: var(--space-10); margin-bottom: var(--space-1); }
.blog-post-body h2 + p { margin-top: var(--space-3); }
.blog-post-body h3 { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.3; color: var(--color-white); margin-top: var(--space-8); }
.blog-post-body ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.blog-post-body ul li { position: relative; padding-left: var(--space-6); }
.blog-post-body ul li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--color-copper); border-radius: 50%; }
.blog-post-body strong { color: var(--color-white); font-weight: 600; }
.blog-post-body a { color: var(--color-copper); text-decoration: underline; text-underline-offset: 3px; }

.blog-post-cta { margin-top: var(--space-12); padding: var(--space-8); background: linear-gradient(135deg, var(--color-copper-dim), var(--color-surface)); border: 1px solid var(--color-copper); border-radius: var(--radius-lg); text-align: center; }
.blog-post-cta h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: var(--space-3); }
.blog-post-cta p { color: var(--color-white-70); margin-bottom: var(--space-5); max-width: 50ch; margin-left: auto; margin-right: auto; }
.blog-post-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

.blog-related { background: var(--color-void); }

@media (max-width: 700px) {
  .blog-post-body { font-size: 1rem; line-height: 1.65; }
  .blog-post-cover { aspect-ratio: 4/3; margin-bottom: var(--space-6); }
  .blog-post-cta { padding: var(--space-6); }
}

/* FOOTER */
.footer { background: var(--color-deep); border-top: 1px solid var(--color-border); padding-top: var(--space-16); }
.newsletter { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-12) 0; margin-bottom: var(--space-16); }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.newsletter h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.newsletter p { margin: 0; }
.newsletter-form { display: flex; gap: var(--space-2); }
.newsletter-form input { flex: 1; background: var(--color-deep); border: 1px solid var(--color-border-lt); border-radius: var(--radius-full); padding: 0.875rem 1.25rem; color: var(--color-white); font-size: 0.9375rem; }
.newsletter-form input:focus { outline: none; border-color: var(--color-copper); }
.newsletter-priv { font-size: 0.75rem; color: var(--color-grey-lt); margin-top: var(--space-2); }
@media (max-width: 800px) { .newsletter-inner { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; } }

.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--space-8); padding-bottom: var(--space-12); }
.footer-col h4 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-copper); margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col ul a { color: var(--color-white-70); font-size: 0.875rem; }
.footer-col ul a:hover { color: var(--color-copper-lt); }
.footer-tagline { font-family: var(--font-display); font-style: italic; color: var(--color-copper-lt); margin: var(--space-3) 0 var(--space-3); font-size: 1.125rem; }
.footer-desc { font-size: 0.875rem; max-width: 32ch; }
.social-row { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.social-row a { width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-white-70); transition: all var(--transition); }
.social-row a svg { width: 16px; height: 16px; }
.social-row a:hover { background: var(--color-copper); border-color: var(--color-copper); color: white; }
.contact-list { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.875rem; color: var(--color-white-70); list-style: none; }
.contact-list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-copper); }
.contact-list a { color: var(--color-white-70); }
.footer-bottom { padding: var(--space-6) 0; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); font-size: 0.75rem; color: var(--color-grey-lt); }
.footer-bottom-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer-bottom-links a { color: var(--color-grey-lt); }
.footer-bottom-links a:hover { color: var(--color-copper-lt); }
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 600px) { .footer-main { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } }

/* MISC FLOATING */
.back-to-top { position: fixed; bottom: var(--space-6); right: var(--space-6); width: 44px; height: 44px; border-radius: 50%; background: var(--color-copper); color: white; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 40; opacity: 0; pointer-events: none; transition: all var(--transition); }
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }

.cookie { position: fixed; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); max-width: 480px; background: var(--color-surface); border: 1px solid var(--color-border-lt); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-lg); z-index: 41; }
.cookie p { font-size: 0.8125rem; margin: 0 0 var(--space-3); }
.cookie-actions { display: flex; gap: var(--space-2); }
.cookie.hidden { display: none; }

.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(8,9,12,0.95); backdrop-filter: blur(10px); border-top: 1px solid var(--color-border); padding: var(--space-3); z-index: 38; }
@media (max-width: 700px) { .mobile-cta { display: block; } .back-to-top { bottom: 80px; } .cookie { bottom: 80px; } }

.toast-stack { position: fixed; top: 100px; right: var(--space-4); z-index: 80; display: flex; flex-direction: column; gap: var(--space-2); }
.toast { background: var(--color-surface); border: 1px solid var(--color-copper); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-white); font-size: 0.875rem; box-shadow: var(--shadow-md); animation: slideInR 0.3s var(--ease-out); max-width: 320px; }
@keyframes slideInR { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(8,9,12,0.85); backdrop-filter: blur(8px); z-index: 90; display: none; align-items: center; justify-content: center; padding: var(--space-4); }
.modal-backdrop.show { display: flex; }
.modal { background: var(--color-surface); border: 1px solid var(--color-border-lt); border-radius: var(--radius-lg); max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: var(--space-3); right: var(--space-3); width: 32px; height: 32px; border-radius: 50%; background: var(--color-deep); color: var(--color-white); font-size: 1.125rem; z-index: 1; }
.modal-body { padding: var(--space-8) var(--space-6); }

.contact-form-wrap { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }

.health-assessment-strip { grid-template-columns: 1fr; }
@media (min-width: 800px) { .health-assessment-strip { grid-template-columns: 1.4fr 1fr; } }


/* ════════════════════════════════════════════════════
   PRICING — treatment detail card grid
═══════════════════════════════════════════════════════ */
.pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
@media (max-width: 900px) { .pricing-cards { grid-template-columns: 1fr; } }

.pricing-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--trans-fast);
}
.pricing-card:hover { border-color: var(--color-copper); transform: translateY(-2px); }
.pricing-card-featured {
  background: linear-gradient(180deg, var(--color-copper-dim) 0%, var(--color-surface) 60%);
  border-color: var(--color-copper);
  box-shadow: 0 0 0 1px var(--color-copper-dim), var(--shadow-md);
}
.pricing-card-badge {
  position: absolute; top: -10px; right: var(--space-5);
  font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--color-copper); color: var(--color-void);
  padding: 0.3rem 0.75rem; border-radius: var(--radius-full);
  font-weight: 600;
}
.pricing-card-tag {
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-copper-lt); margin-bottom: var(--space-3);
  font-weight: 500;
}
.pricing-card-price {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--font-display);
  margin-bottom: var(--space-2);
}
.pricing-card-price .amt { font-size: 2.75rem; color: var(--color-white); line-height: 1; letter-spacing: -0.02em; }
.pricing-card-price .per { font-size: 0.875rem; color: var(--color-grey-lt); font-family: var(--font-body); }
.pricing-card-save {
  font-size: 0.75rem; color: var(--color-copper);
  background: var(--color-copper-dim);
  padding: 0.25rem 0.625rem; border-radius: var(--radius-full);
  display: inline-block; align-self: flex-start;
  margin-bottom: var(--space-4); font-weight: 500;
}
.pricing-card-list {
  list-style: none; padding: 0; margin: 0 0 var(--space-5);
  display: flex; flex-direction: column; gap: 0.625rem;
  flex: 1;
}
.pricing-card-list li {
  font-size: 0.875rem; color: var(--color-white-70);
  padding-left: 1.25rem; position: relative;
}
.pricing-card-list li::before {
  content: ''; position: absolute; left: 0; top: 0.55rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-copper);
}

.pricing-membership-tease {
  display: flex; gap: var(--space-6); align-items: center; justify-content: space-between;
  padding: var(--space-10) var(--space-12);
  background: linear-gradient(135deg, var(--color-copper-dim), var(--color-surface));
  border: 1px solid var(--color-copper);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.pricing-membership-tease > div { padding: var(--space-2) 0; }
@media (max-width: 700px) {
  .pricing-membership-tease { padding: var(--space-7); }
}

/* PRICING PAGE — Membership hero */
.membership-hero {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 900px) { .membership-hero { grid-template-columns: 1fr; gap: var(--space-8); } }
.membership-perks {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
@media (max-width: 600px) { .membership-perks { grid-template-columns: 1fr; } }
.membership-perks li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.9375rem; color: var(--color-white-70); line-height: 1.45; }
.membership-perk-check {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: var(--color-copper-dim); color: var(--color-copper);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.membership-hero-card {
  position: relative;
  aspect-ratio: 1.586/1;
  background: linear-gradient(135deg, var(--color-copper) 0%, #B9603A 50%, var(--color-deep) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.membership-hero-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 50%);
  pointer-events: none;
}
.membership-credit-ring {
  position: relative; z-index: 1;
  align-self: flex-start;
  display: flex; flex-direction: column; gap: 0.25rem;
  font-family: var(--font-display);
  color: var(--color-white);
}
.membership-credit-num { font-size: 5rem; line-height: 0.9; letter-spacing: -0.04em; }
.membership-credit-lbl { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; font-family: var(--font-body); font-weight: 500; }
.membership-card-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--color-white);
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.95;
}
.membership-card-mark { font-family: var(--font-display); font-size: 1.5rem; text-transform: none; letter-spacing: -0.01em; }

/* PRICING PAGE — Treatment Packages grid */
.pkg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1100px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: all var(--trans-fast);
}
.pkg-card:hover { border-color: var(--color-copper); transform: translateY(-2px); }
.pkg-card-head h3 { font-family: var(--font-display); font-size: 1.125rem; margin: var(--space-2) 0 0.25rem; color: var(--color-white); line-height: 1.2; }
.pkg-card-save {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-copper); font-weight: 600;
}
.pkg-card-payg { font-size: 0.75rem; color: var(--color-grey-lt); }
.pkg-card-tiers {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1;
}
.pkg-card-tiers li {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-3); background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.pkg-card-tiers li > div:first-child {
  display: flex; flex-direction: column; line-height: 1;
}
.pkg-card-tiers li > div:first-child strong {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--color-white); font-weight: 500;
}
.pkg-card-tiers li > div:first-child span {
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-grey-lt); margin-top: 2px;
}
.pkg-card-amt {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--color-copper); justify-self: end;
}
.pkg-card-each { font-size: 0.6875rem; color: var(--color-grey-lt); justify-self: end; grid-column: 3; grid-row: 1; align-self: end; }
.pkg-card-tiers li { grid-template-rows: auto auto; }
.pkg-card-tiers li > div:first-child { grid-row: 1 / span 2; }
.pkg-card-amt { grid-row: 1; }
.pkg-card-each { grid-row: 2; margin-top: -2px; }
.pkg-card-foot { display: flex; justify-content: space-between; gap: var(--space-2); }

/* PRICING PAGE — PAYG grid */
.payg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1100px) { .payg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .payg-grid { grid-template-columns: 1fr; } }
.payg-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: all var(--trans-fast);
  position: relative;
}
.payg-card:hover { border-color: var(--color-copper); transform: translateY(-2px); }
.payg-card-amt {
  font-family: var(--font-display); font-size: 2.25rem; color: var(--color-copper);
  letter-spacing: -0.02em; line-height: 1;
}
.payg-card h4 { font-family: var(--font-display); font-size: 1.0625rem; color: var(--color-white); margin: 0; line-height: 1.25; }
.payg-card-meta { font-size: 0.75rem; color: var(--color-grey-lt); letter-spacing: 0.04em; }
.payg-card-benefits {
  list-style: none; padding: 0; margin: 0 0 auto;
  display: flex; flex-direction: column; gap: 0.375rem;
}
.payg-card-benefits li {
  font-size: 0.8125rem; color: var(--color-white-70);
  padding-left: 1rem; position: relative;
}
.payg-card-benefits li::before {
  content: '✓'; position: absolute; left: 0; color: var(--color-copper); font-size: 0.75rem; top: 1px;
}
.payg-card-link { font-size: 0.8125rem; color: var(--color-copper-lt); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* PRICING PAGE — Bundles */
.bundle-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1000px) { .bundle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bundle-grid { grid-template-columns: 1fr; } }
.bundle-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--trans-fast);
}
.bundle-card:hover { border-color: var(--color-copper); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bundle-card-featured {
  background: linear-gradient(180deg, var(--color-copper-dim), var(--color-surface) 50%);
  border-color: var(--color-copper);
}
.bundle-card-badge {
  position: absolute; top: -10px; left: var(--space-6);
  font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--color-copper); color: var(--color-void);
  padding: 0.3rem 0.75rem; border-radius: var(--radius-full); font-weight: 600;
}
.bundle-card-save {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-copper); font-weight: 600; align-self: flex-start;
}
.bundle-card h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; color: var(--color-white); line-height: 1.15; }
.bundle-card-desc { font-size: 0.875rem; color: var(--color-white-70); margin: 0; line-height: 1.5; }
.bundle-card-price {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.bundle-card-price .lbl { font-size: 0.75rem; color: var(--color-grey-lt); text-transform: uppercase; letter-spacing: 0.08em; }
.bundle-card-price .amt { font-family: var(--font-display); font-size: 2.25rem; color: var(--color-copper); letter-spacing: -0.02em; line-height: 1; }
.bundle-card-items {
  list-style: none; padding: 0; margin: 0 0 var(--space-2);
  display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1;
}
.bundle-card-items li {
  display: flex; gap: var(--space-3); align-items: center;
  font-size: 0.875rem; color: var(--color-white-70);
}
.bundle-qty {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 24px; padding: 0 0.5rem;
  background: var(--color-copper-dim); color: var(--color-copper);
  border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 600;
  font-family: var(--font-display);
}

/* PRICING PAGE — Assessments */
.assessment-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  max-width: 980px; margin: 0 auto;
}
@media (max-width: 800px) { .assessment-grid { grid-template-columns: 1fr; } }
.assessment-card {
  padding: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: all var(--trans-fast);
}
.assessment-card:hover { border-color: var(--color-copper); }
.assessment-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.assessment-head h3 { font-family: var(--font-display); font-size: 2rem; margin: 0; color: var(--color-white); letter-spacing: -0.02em; }
.assessment-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-copper); }
.assessment-tagline { font-family: var(--font-display); font-style: italic; color: var(--color-copper-lt); font-size: var(--text-base); margin: 0; }
.assessment-desc { font-size: 0.9375rem; color: var(--color-white-70); margin: 0 0 var(--space-2); flex: 1; line-height: 1.55; }

/* PRICING PAGE — Testing kits */
.kit-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 800px) { .kit-grid { grid-template-columns: 1fr; } }
.kit-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: all var(--trans-fast);
}
.kit-card:hover { border-color: var(--color-copper); transform: translateY(-2px); }
.kit-card-amt { font-family: var(--font-display); font-size: 2.5rem; color: var(--color-copper); letter-spacing: -0.02em; line-height: 1; }
.kit-card h4 { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-white); margin: 0; }
.kit-card p { font-size: 0.875rem; color: var(--color-white-70); margin: 0; flex: 1; line-height: 1.55; }
.kit-card-link { font-size: 0.8125rem; color: var(--color-copper); text-decoration: none; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.kit-card-link:hover { color: var(--color-copper-lt); }

.btn-block { width: 100%; justify-content: center; }