/* ==========================================================================
   Clariti Digital — component-level styles
   Pillars, Pricing, Interactive Audit, Confidence Score, Consultation
   Booker, Case studies, FAQ accordion, Resources grid, misc page blocks.
   ========================================================================== */

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--color-surface-lowest);
  padding: 2rem 0;
  border-top: 1px solid var(--color-surface-container);
  border-bottom: 1px solid var(--color-surface-container);
  position: sticky; top: 69px; z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.9);
}
.trust-strip-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.trust-item { display: flex; align-items: center; gap: 0.625rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-primary); }
.trust-item svg { color: var(--color-secondary); width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* ---------- Progress bars (invisible risk / traffic value chart) ---------- */
.bar-row { text-align: left; margin-bottom: 1.25rem; }
.bar-row .bar-label-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; margin-bottom: 0.375rem; }
.bar-track { width: 100%; height: 0.75rem; background: var(--color-surface-container); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--color-primary); }
.bar-fill.dim { background: rgba(20,34,29,0.2); }

/* ---------- Pillars widget ---------- */
.pillars-nav { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .pillars-nav { grid-template-columns: repeat(3, 1fr); } }
.pillar-btn {
  padding: 2rem; border: 1px solid var(--color-surface-container); border-radius: 0.75rem;
  text-align: left; background: var(--color-surface-lowest); color: var(--color-text-charcoal);
  cursor: pointer; transition: all 0.4s ease; position: relative; overflow: hidden;
}
.pillar-btn:hover { border-color: rgba(204,167,78,0.3); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(2,46,31,0.04); }
.pillar-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 16px 50px rgba(2,38,25,0.16); transform: scale(1.02); }
.pillar-btn-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pillar-icon-box { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-surface-container); background: var(--color-surface-low); }
.pillar-btn.is-active .pillar-icon-box { border-color: rgba(16,163,110,0.3); background: var(--color-primary-light); }
.pillar-icon-box svg { color: var(--color-primary); }
.pillar-btn.is-active .pillar-icon-box svg { color: var(--color-secondary-bright); }
.pillar-btn-meta { margin-top: 2rem; }
.pillar-tagline { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; display: block; color: var(--color-secondary); margin-bottom: 0.375rem; }
.pillar-btn.is-active .pillar-tagline { color: var(--color-secondary-bright); }
.pillar-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }

.pillar-showcase { background: var(--color-surface-low); border-radius: 1rem; border: 1px solid var(--color-surface-container); padding: 1.5rem; box-shadow: 0 1px 3px rgba(2,38,25,0.04); margin-top: 2rem; }
@media (min-width: 768px) { .pillar-showcase { padding: 3rem; } }
.pillar-showcase-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .pillar-showcase-grid { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.pillar-scope-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .pillar-scope-grid { grid-template-columns: 1fr 1fr; } }
.pillar-scope-item { display: flex; align-items: center; gap: 0.625rem; }
.pillar-scope-item svg { color: var(--color-secondary-bright); width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.pillar-scope-item span { font-size: 0.8125rem; color: rgba(20,34,29,0.7); }
.pillar-case-card { background: var(--color-primary); color: #fff; border-radius: 0.75rem; padding: 2rem; position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(2,38,25,0.14); border: 1px solid var(--color-primary-light); }
.pillar-case-metric { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; color: var(--color-secondary-bright); display: block; }

/* ---------- Pricing ---------- */
.pricing-toggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pricing-toggle { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--color-surface-low); border: 1px solid var(--color-surface-container); padding: 0.25rem; border-radius: 999px; }
.pricing-toggle button {
  padding: 0.5rem 1.25rem; border-radius: 999px; background: none; border: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(20,34,29,0.6); display: flex; align-items: center; gap: 0.375rem;
}
.pricing-toggle button.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 1px 3px rgba(2,38,25,0.04); }
.pricing-save-badge { background: var(--color-secondary-bright); color: var(--color-primary); font-size: 0.5625rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-weight: 800; text-transform: uppercase; }

.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; margin-top: 2.5rem; }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card { border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; background: var(--color-surface-lowest); color: var(--color-text-charcoal); border: 1px solid var(--color-surface-container); }
@media (min-width: 768px) { .pricing-card { padding: 2.5rem; } }
.pricing-card.is-popular { background: var(--color-primary); color: #fff; border: 2px solid var(--color-secondary); box-shadow: 0 32px 80px rgba(2,38,25,0.2); }
@media (min-width: 1024px) { .pricing-card.is-popular { transform: scale(1.03); z-index: 10; } }
.pricing-ribbon { position: absolute; top: 0; right: 0; background: var(--color-secondary); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.375rem 1.5rem; border-bottom-left-radius: 0.5rem; }
.pricing-tier-name { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-secondary); }
.pricing-card.is-popular .pricing-tier-name { color: var(--color-secondary-bright); }
.pricing-desc { font-size: 0.75rem; font-weight: 300; color: rgba(20,34,29,0.6); margin-top: 0.375rem; }
.pricing-card.is-popular .pricing-desc { color: rgba(255,255,255,0.6); }
.pricing-price-block { padding: 1rem 0; border-top: 1px solid rgba(20,34,29,0.1); border-bottom: 1px solid rgba(20,34,29,0.1); margin: 1.5rem 0; }
.pricing-card.is-popular .pricing-price-block { border-color: rgba(255,255,255,0.1); }
.pricing-price { font-family: var(--font-display); font-size: 3rem; font-weight: 700; }
.pricing-price-sub { font-size: 0.75rem; font-weight: 300; opacity: 0.6; }
.pricing-annual-note { font-size: 0.6875rem; font-weight: 600; margin-top: 0.25rem; display: block; color: var(--color-secondary); }
.pricing-card.is-popular .pricing-annual-note { color: var(--color-secondary-bright); }
.pricing-features-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; display: block; margin-bottom: 0.875rem; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.75rem; font-weight: 300; line-height: 1.5; margin-bottom: 0.875rem; }
.pricing-features svg { color: var(--color-primary); flex-shrink: 0; margin-top: 0.125rem; width: 1rem; height: 1rem; }
.pricing-card.is-popular .pricing-features svg { color: var(--color-secondary-bright); }
.pricing-cta { margin-top: 2.5rem; }

.pricing-trust { max-width: 48rem; margin: 3rem auto 0; background: var(--color-surface-low); border: 1px solid var(--color-surface-container); border-radius: 0.75rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: center; }
@media (min-width: 640px) { .pricing-trust { flex-direction: row; text-align: left; } }
.pricing-faq-wrap { max-width: 48rem; margin: 2.5rem auto 0; }
.pricing-faq-item { background: var(--color-surface-lowest); border: 1px solid var(--color-surface-container); border-radius: 0.5rem; overflow: hidden; margin-bottom: 0.625rem; }
.pricing-faq-q { width: 100%; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; text-align: left; background: none; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }
.pricing-faq-a { padding: 0.25rem 1.5rem 1.25rem; border-top: 1px solid var(--color-surface-container); font-size: 0.75rem; color: rgba(20,34,29,0.6); line-height: 1.6; font-weight: 300; display: none; }
.pricing-faq-item.is-open .pricing-faq-a { display: block; }
.pricing-faq-item.is-open .pricing-faq-q svg { transform: rotate(180deg); color: var(--color-secondary); }

/* ---------- Interactive Audit widget ---------- */
.audit-widget { width: 100%; background: var(--color-surface-lowest); border-radius: 0.75rem; border: 1px solid var(--color-surface-container); box-shadow: 0 32px 80px rgba(2,38,25,0.2); overflow: hidden; }
.audit-header { background: var(--color-primary); padding: 1.25rem 2rem; color: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-surface-container); }
.audit-header-title { display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.audit-header-step { font-size: 0.75rem; color: rgba(16,163,110,0.8); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.audit-body { padding: 2rem; min-height: 460px; display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 768px) { .audit-body { padding: 3rem; } }
.audit-step { display: none; flex-grow: 1; }
.audit-step.is-active { display: block; }
.audit-step h3 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; color: var(--color-primary); }
.audit-industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .audit-industry-grid { grid-template-columns: repeat(3, 1fr); } }
.audit-industry-btn { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--color-surface-container); border-radius: 0.75rem; text-align: center; background: var(--color-bg-cream); color: rgba(20,34,29,0.7); cursor: pointer; }
.audit-industry-btn.is-active { border-color: var(--color-primary); background: rgba(2,46,31,0.05); color: var(--color-primary); font-weight: 500; box-shadow: 0 4px 12px rgba(2,38,25,0.04); }
.audit-industry-btn svg { width: 1.25rem; height: 1.25rem; color: rgba(20,34,29,0.4); }
.audit-industry-btn.is-active svg { color: var(--color-secondary-bright); }
.audit-industry-btn span { font-size: 0.75rem; }
.audit-toggle-row { padding: 1rem; background: var(--color-bg-cream); border-radius: 0.75rem; border: 1px solid var(--color-surface-container); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.audit-toggle-group { display: flex; gap: 0.25rem; background: var(--color-surface-container); padding: 0.25rem; border-radius: 0.5rem; }
.audit-toggle-group button { padding: 0.375rem 1rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; background: none; border: none; color: rgba(20,34,29,0.6); }
.audit-toggle-group button.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 1px 3px rgba(2,38,25,0.04); }
.audit-radio-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 0.75rem; }
@media (min-width: 768px) { .audit-radio-grid { grid-template-columns: repeat(3, 1fr); } }
.audit-radio-card { padding: 1rem; border: 1px solid var(--color-surface-container); border-radius: 0.75rem; text-align: left; background: var(--color-bg-cream); cursor: pointer; }
.audit-radio-card.is-active { border-color: var(--color-primary); background: rgba(2,46,31,0.05); box-shadow: 0 1px 3px rgba(2,38,25,0.04); }
.audit-radio-card p.title { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); }
.audit-radio-card p.desc { font-size: 0.6875rem; color: rgba(20,34,29,0.4); margin-top: 0.25rem; }
.audit-slider-row { margin-top: 1rem; }
.audit-slider-label-row { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(20,34,29,0.7); margin-bottom: 0.5rem; }
.audit-slider-legend { display: flex; justify-content: space-between; font-size: 0.6875rem; color: rgba(20,34,29,0.4); margin-top: 0.375rem; }
.audit-footer { padding-top: 2rem; border-top: 1px solid var(--color-surface-container); display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.audit-back-btn { background: none; border: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(20,34,29,0.6); }
.audit-back-btn:hover { color: var(--color-primary); }
.audit-calculating { padding: 3rem 0; display: none; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.audit-calculating.is-active { display: flex; }
.spinner-ring { width: 4rem; height: 4rem; position: relative; }
.spinner-ring::before, .spinner-ring::after { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 4px solid var(--color-surface-container); }
.spinner-ring::after { border-color: var(--color-primary) transparent transparent transparent; animation: spin 1s linear infinite; }

/* ---------- Confidence Score panel ---------- */
.confidence-card { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 32px 80px rgba(2,38,25,0.2); }
.confidence-card.is-dark { color: #fff; }
.confidence-card.is-dark .royal-glass { border-radius: 0; }
.confidence-card.is-light { background: #fff; border: 1px solid var(--color-surface-container); }
.confidence-top { padding: 2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .confidence-top { flex-direction: row; padding: 2.5rem; } }
.confidence-dial { position: relative; width: 11rem; height: 11rem; flex-shrink: 0; }
.confidence-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.confidence-dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.confidence-dial-score { font-family: var(--font-display); font-size: 3rem; font-weight: 800; }
.confidence-card.is-dark .confidence-dial-score { color: #fff; }
.confidence-card.is-light .confidence-dial-score { color: var(--color-primary); }
.confidence-dial-label { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.confidence-verdict-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 999px; }
.confidence-card.is-dark .confidence-verdict-badge { background: rgba(255,255,255,0.05); border: 1px solid rgba(204,167,78,0.3); }
.confidence-card.is-light .confidence-verdict-badge { background: rgba(2,46,31,0.05); border: 1px solid rgba(2,46,31,0.1); }
.confidence-verdict-badge span { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; }
.tone-win, .tone-borderline { color: var(--color-secondary); }
.tone-decline { color: #fda4af; }
.confidence-biz-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-top: 0.75rem; }
.confidence-headline { font-size: 0.875rem; line-height: 1.6; font-weight: 300; margin-top: 0.375rem; }
.confidence-card.is-dark .confidence-headline { color: rgba(255,255,255,0.7); }
.confidence-card.is-light .confidence-headline { color: rgba(20,34,29,0.7); }

.confidence-dims { padding: 2rem; border-top: 1px solid; }
.confidence-card.is-dark .confidence-dims { border-color: rgba(204,167,78,0.15); }
.confidence-card.is-light .confidence-dims { border-color: var(--color-surface-container); }
.confidence-dims-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.5rem; }
.confidence-dims-head .label-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; }
.confidence-legend { display: flex; align-items: center; gap: 0.375rem; font-size: 0.625rem; }
.confidence-legend .swatch { width: 0.75rem; height: 0.125rem; background: #fda4af; display: inline-block; }
.confidence-dim-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; }
@media (min-width: 640px) { .confidence-dim-grid { grid-template-columns: 1fr 1fr; } }
.dim-bar-row .dim-bar-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.375rem; }
.dim-bar-row .dim-bar-label-row .dim-label { font-size: 0.8125rem; font-weight: 600; }
.confidence-card.is-dark .dim-label { color: #fff; }
.confidence-card.is-light .dim-label { color: var(--color-primary); }
.dim-bar-row .dim-bar-label-row .dim-short { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.confidence-card.is-dark .dim-short { color: rgba(255,255,255,0.4); }
.confidence-card.is-light .dim-short { color: rgba(20,34,29,0.4); }
.dim-track { position: relative; width: 100%; height: 0.625rem; border-radius: 999px; overflow: hidden; }
.confidence-card.is-dark .dim-track { background: rgba(255,255,255,0.1); }
.confidence-card.is-light .dim-track { background: var(--color-surface-container); }
.dim-fill { height: 100%; border-radius: 999px; }
.confidence-card.is-dark .dim-fill { background: var(--color-secondary); }
.confidence-card.is-light .dim-fill { background: var(--color-primary); }
.dim-competitor-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(253,164,175,0.8); z-index: 2; }
.dim-footer-row { display: flex; justify-content: space-between; font-size: 0.625rem; margin-top: 0.25rem; }
.confidence-card.is-dark .dim-footer-row .you { color: rgba(255,255,255,0.45); }
.confidence-card.is-light .dim-footer-row .you { color: rgba(20,34,29,0.45); }
.dim-footer-row .rival { color: rgba(253,164,175,0.8); }

.confidence-footer { padding: 1.75rem 2rem; border-top: 1px solid; }
.confidence-card.is-dark .confidence-footer { background: rgba(0,0,0,0.2); border-color: rgba(204,167,78,0.15); }
.confidence-card.is-light .confidence-footer { background: var(--color-surface-low); border-color: var(--color-surface-container); }
.confidence-footer-row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; text-align: center; }
@media (min-width: 640px) { .confidence-footer-row { flex-direction: row; text-align: left; } }
.confidence-footer-row p { font-size: 0.75rem; line-height: 1.6; font-weight: 300; max-width: 28rem; }
.confidence-card.is-dark .confidence-footer-row p { color: rgba(255,255,255,0.7); }
.confidence-card.is-light .confidence-footer-row p { color: rgba(20,34,29,0.7); }
.confidence-book-btn { white-space: nowrap; flex-shrink: 0; }
.confidence-decline-row { display: flex; flex-direction: column; gap: 1.25rem; }
.confidence-decline-row-top { display: flex; align-items: flex-start; gap: 0.75rem; }
.confidence-decline-row-top p { font-size: 0.75rem; line-height: 1.6; font-weight: 300; }
.confidence-card.is-dark .confidence-decline-row-top p { color: rgba(255,255,255,0.7); }
.confidence-card.is-light .confidence-decline-row-top p { color: rgba(20,34,29,0.7); }
.confidence-diagnostic-btn { align-self: flex-start; width: 100%; text-align: center; justify-content: center; }
@media (min-width: 480px) {
  .confidence-diagnostic-btn { width: auto; }
}

/* ---------- Consultation Booker widget ---------- */
.booker-widget { width: 100%; max-width: 64rem; margin: 0 auto; background: var(--color-surface-lowest); border: 1px solid var(--color-surface-container); border-radius: 1rem; box-shadow: 0 32px 80px rgba(2,38,25,0.2); overflow: hidden; }
.booker-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .booker-grid { grid-template-columns: 5fr 7fr; } }
.booker-side { background: var(--color-primary); color: #fff; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--color-surface-container); }
@media (min-width: 768px) { .booker-side { padding: 3rem; } }
@media (min-width: 1024px) { .booker-side { border-bottom: none; border-right: 1px solid var(--color-surface-container); } }
.booker-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; background: rgba(255,255,255,0.1); border-radius: 999px; color: var(--color-secondary-bright); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; }
.booker-side h3 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 1.5rem; }
.booker-side .lede-sm { font-size: 0.75rem; color: rgba(255,255,255,0.6); font-weight: 300; line-height: 1.6; margin-top: 0.5rem; }
.booker-perks { padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.booker-perk { display: flex; gap: 1rem; align-items: flex-start; font-size: 0.75rem; }
.booker-perk svg { color: var(--color-secondary-bright); flex-shrink: 0; margin-top: 0.125rem; }
.booker-perk .perk-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; display: block; }
.booker-perk .perk-body { color: rgba(255,255,255,0.5); }
.booker-main { padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; }
@media (min-width: 768px) { .booker-main { padding: 3rem; } }
.booker-step { display: none; flex-grow: 1; }
.booker-step.is-active { display: block; }
.booker-step h4 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.booker-step-head { padding-bottom: 1rem; border-bottom: 1px solid var(--color-surface-container); margin-bottom: 1.5rem; }
.booker-day-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .booker-day-grid { grid-template-columns: repeat(3, 1fr); } }
.booker-day-btn { padding: 0.75rem; border: 1px solid var(--color-surface-container); text-align: center; border-radius: 0.5rem; background: var(--color-bg-cream); color: rgba(20,34,29,0.7); cursor: pointer; }
.booker-day-btn.is-active { border-color: var(--color-primary); background: rgba(2,46,31,0.05); color: var(--color-primary); font-weight: 600; box-shadow: 0 4px 12px rgba(2,38,25,0.02); }
.booker-day-btn span { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; }
.booker-time-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.booker-time-btn { padding: 0.625rem 1rem; border: 1px solid var(--color-surface-container); border-radius: 0.375rem; background: var(--color-bg-cream); color: rgba(20,34,29,0.7); font-size: 0.75rem; cursor: pointer; }
.booker-time-btn.is-active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); font-weight: 600; box-shadow: 0 1px 3px rgba(2,38,25,0.04); }
.booker-booked-note { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--color-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.booker-preselect-note { padding: 0.75rem; background: rgba(2,46,31,0.05); border: 1px solid rgba(2,46,31,0.1); border-radius: 0.375rem; display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.booker-preselect-note span { font-size: 0.6875rem; color: rgba(20,34,29,0.8); }
.booker-loading { padding: 3rem 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; flex-grow: 1; }
.booker-loading.is-active { display: flex; }
.booker-loading .spinner-ring-sm { width: 3rem; height: 3rem; border-radius: 999px; border: 2px solid var(--color-surface-container); border-top-color: var(--color-primary); animation: spin 1s linear infinite; }
.booker-success { padding: 1.5rem 0; text-align: center; }
.booker-success-icon { width: 4rem; height: 4rem; background: rgba(2,46,31,0.05); border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--color-primary); border: 1px solid rgba(2,46,31,0.1); }
.booker-success h4 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; color: var(--color-primary); margin-top: 1.5rem; }
.booker-success p.confirm-msg { font-size: 0.75rem; color: rgba(20,34,29,0.6); font-weight: 300; max-width: 28rem; margin: 0.5rem auto 0; line-height: 1.6; }
.booker-detail-card { background: var(--color-surface-low); border: 1px solid var(--color-surface-container); border-radius: 0.75rem; padding: 1.25rem; max-width: 24rem; margin: 1.5rem auto 0; text-align: left; box-shadow: 0 1px 3px rgba(2,38,25,0.04); }
.booker-detail-card .detail-head { display: flex; justify-content: space-between; font-size: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-surface-container); margin-bottom: 0.5rem; }
.booker-detail-card p { font-size: 0.75rem; margin: 0.25rem 0; }
.booker-footer { padding-top: 1.5rem; border-top: 1px solid var(--color-surface-container); display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.booker-back { background: none; border: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(20,34,29,0.6); }
.booker-next {
  display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; white-space: nowrap; background: var(--color-primary); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1rem 2rem; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(2,38,25,0.08); border: none; cursor: pointer;
}
.booker-next:hover { background: var(--color-primary-light); }

/* ---------- Case studies ---------- */
.case-article { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 32px 80px rgba(2,38,25,0.2); }
.case-article.is-dark { }
.case-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .case-grid { grid-template-columns: 7fr 5fr; } }
.case-narrative { padding: 2rem; }
@media (min-width: 768px) { .case-narrative { padding: 3rem; } }
.case-pillar-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 999px; }
.case-quote { display: flex; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid; margin-top: 1.5rem; }
.case-results-panel { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .case-results-panel { padding: 3rem; } }
.case-result-row { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgba(204,167,78,0.15); padding-bottom: 0.75rem; }
.case-result-value { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; color: var(--color-secondary); }

/* ---------- Resources / FAQ ---------- */
.faq-item { border-radius: 0.75rem; overflow: hidden; margin-bottom: 0.5rem; }
.faq-q { width: 100%; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; background: none; border: none; cursor: pointer; }
.faq-q span { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.faq-plus { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); color: var(--color-secondary); transition: transform 0.3s; }
.faq-item.is-open .faq-plus { background: var(--color-secondary); color: var(--color-primary); transform: rotate(45deg); }
.faq-a { display: none; padding: 0 1.5rem 1.25rem; font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.6; font-weight: 300; border-top: 1px solid rgba(204,167,78,0.15); }
.faq-a p { padding-top: 1rem; }
.faq-item.is-open .faq-a { display: block; }

.category-filter { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; }
.category-btn { padding: 0.5rem 1.25rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: var(--color-surface-low); border: 1px solid var(--color-surface-container); color: rgba(20,34,29,0.6); cursor: pointer; }
.category-btn.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 1px 3px rgba(2,38,25,0.04); border-color: var(--color-primary); }

.article-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }
.article-card { background: var(--color-surface-low); border: 1px solid var(--color-surface-container); border-radius: 1rem; padding: 1.75rem; }
.article-card:hover { box-shadow: 0 24px 50px rgba(2,46,31,0.07); border-color: rgba(204,167,78,0.3); }
.article-featured { display: grid; grid-template-columns: 1fr; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 32px 80px rgba(2,38,25,0.2); margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .article-featured { grid-template-columns: 7fr 5fr; } }
.article-featured-text { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; position: relative; }
@media (min-width: 768px) { .article-featured-text { padding: 3rem; } }
.article-featured-badge { background: var(--color-secondary); color: var(--color-primary); font-size: 0.625rem; font-weight: 800; padding: 0.25rem 0.75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.15em; }
.article-featured-visual { min-height: 220px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 70% 30%, rgba(204,167,78,0.3), transparent 60%); }
.article-featured-visual span { font-family: var(--font-display); font-size: 140px; font-weight: 700; color: rgba(204,167,78,0.15); user-select: none; }

/* ---------- 404 ---------- */
.notfound-wrap { min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 8rem 1.5rem; text-align: center; }
.notfound-code { font-family: var(--font-display); font-size: 6rem; font-weight: 700; color: var(--color-secondary); display: block; }
@media (min-width: 640px) { .notfound-code { font-size: 8rem; } }

/* ---------- Thank you page ---------- */
.thankyou-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 8rem 1.5rem 6rem; text-align: center; }
.thankyou-icon { width: 4.5rem; height: 4.5rem; border-radius: 999px; background: rgba(2,46,31,0.05); border: 1px solid rgba(2,46,31,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--color-primary); }

/* ---------- Login / dashboard preview ---------- */
.login-card { max-width: 28rem; margin: 0 auto; }
.kpi-card { display: flex; align-items: baseline; gap: 0.5rem; }
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Misc small components reused across pages ---------- */
.stat-chip { display: flex; gap: 0.5rem; }
.stat-num { width: 2.5rem; height: 2.5rem; background: rgba(2,46,31,0.05); border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-weight: 700; }
.icon-box { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background: rgba(2,46,31,0.05); border: 1px solid rgba(2,46,31,0.1); color: var(--color-primary); }
.icon-box.dark { background: rgba(255,255,255,0.04); border-color: rgba(204,167,78,0.22); }
.badge-pill { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(2,46,31,0.2); background: rgba(2,46,31,0.05); padding: 0.375rem 1rem; border-radius: 999px; color: var(--color-primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-pill .dot { width: 0.5rem; height: 0.5rem; background: var(--color-secondary-bright); border-radius: 999px; }

/* Responsive helper — never allow horizontal scroll on narrow widths */
@media (max-width: 480px) {
  .page-hero { padding-top: 140px; }
  .pricing-card.is-popular { transform: none; }
}