/* ==========================================================================
   Prism' — Component base styles (ds-* classes)
   Backing CSS for components/ JSX primitives. Values copied 1:1 from
   production .btn/.feature-card/etc classes, renamed to a ds- namespace.
   ========================================================================== */

/* ---- Button ---- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:var(--weight-medium);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:var(--transition-smooth);font-size:var(--text-small);line-height:1.25rem}
.ds-btn--prism{background:var(--gradient-hero);color:#fff}
.ds-btn--prism:hover{transform:translateY(-1px);box-shadow:var(--shadow-hero)}
.ds-btn--outline{background:hsl(var(--color-surface));border:1px solid hsl(var(--color-border));color:hsl(var(--color-text));font-size:1rem;padding:.875rem 1.75rem}
.ds-btn--outline:hover{background:hsl(var(--mist-100));transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.hero .ds-btn--outline,.ds-btn--outline.on-dark{background:var(--glass-bg-on-dark);backdrop-filter:blur(var(--blur-header));border:1px solid var(--glass-border-on-dark);color:#fff}
.ds-btn--ghost{background:transparent;color:hsl(var(--color-text))}
.ds-btn--ghost:hover{background:hsl(var(--mist-100))}
.ds-btn--accent{background:hsl(var(--color-accent));color:#fff}
.ds-btn--accent:hover{background:hsl(var(--color-accent-hover));transform:translateY(-1px)}
.ds-btn--sm{padding:.375rem .75rem;font-size:var(--text-micro)}
.ds-btn--full{width:100%}
.ds-btn__icon{margin-left:.25rem}

/* ---- Badge ---- */
.ds-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;font-size:var(--text-micro);font-weight:var(--weight-medium)}
.ds-badge--pill{border-radius:var(--radius-pill)}
.ds-badge--accent{background:hsl(var(--color-accent)/.1);color:hsl(var(--color-accent))}
.ds-badge--neutral{background:hsl(var(--color-text)/.06);color:hsl(var(--color-text))}
.ds-badge--dark-glass{background:var(--glass-bg-on-dark);backdrop-filter:blur(var(--blur-header));border:1px solid var(--glass-border-on-dark);color:#fff}
.ds-badge--dark-glass::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#e11d48,#06b6d4)}

/* ---- Card ---- */
.ds-card{border-radius:var(--radius-xl);padding:2rem}
.ds-card--feature{background:var(--gradient-feature);border:1px solid hsl(var(--color-border));box-shadow:var(--shadow-card);transition:var(--transition-smooth)}
.ds-card--feature:hover{border-color:hsl(var(--color-primary)/.3);box-shadow:var(--shadow-hero);transform:scale(1.02)}
.ds-card--tile{background:hsl(var(--color-surface));border:1px solid hsl(var(--color-border));box-shadow:var(--shadow-card);padding:1.5rem;transition:var(--transition-smooth)}
.ds-card--tile:hover{border-color:hsl(var(--color-primary)/.35);transform:translateY(-2px);box-shadow:var(--shadow-hero)}
.ds-card--elevated{background:hsl(var(--color-surface));border:1px solid hsl(var(--color-primary)/.2);box-shadow:var(--shadow-hero)}
.ds-card--proof{background:hsl(var(--color-surface));border:1px solid hsl(var(--color-accent)/.2);border-left:4px solid hsl(var(--color-accent));box-shadow:var(--shadow-card)}
.ds-card__icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;background:hsl(var(--color-primary)/.1);border-radius:.75rem;font-size:1.5rem;margin-bottom:1rem}
.ds-card__title{font-family:var(--font-serif-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:hsl(var(--color-text));margin:.5rem 0 .75rem}
.ds-card__description{color:hsl(var(--color-text-muted));line-height:var(--leading-body)}

/* ---- Input ---- */
.ds-field{display:flex;flex-direction:column;gap:.25rem}
.ds-field__label{font-size:var(--text-small);font-weight:var(--weight-medium);color:hsl(var(--color-text-muted))}
.ds-field__input{padding:.625rem .875rem;border:1px solid hsl(var(--color-input-border));border-radius:var(--radius-sm);font-size:1rem;font-family:var(--font-sans);width:100%;transition:var(--transition-smooth);background:hsl(var(--color-surface));color:hsl(var(--color-text))}
.ds-field__input:focus{outline:none;border-color:hsl(var(--color-focus-ring));box-shadow:var(--shadow-focus-ring)}
.ds-field__help{font-size:var(--text-micro);color:hsl(var(--color-text-muted))}
.ds-select-wrap{position:relative;display:block}

/* ---- Accordion (FAQ) ---- */
.ds-accordion{display:grid;gap:1rem;max-width:800px}
.ds-accordion__item{background:hsl(var(--color-surface));border:1px solid hsl(var(--color-border));border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition-smooth)}
.ds-accordion__item:hover{box-shadow:var(--shadow-hover)}
.ds-accordion__question{font-family:var(--font-serif-display);font-size:var(--text-h4);font-weight:var(--weight-semibold);color:hsl(var(--color-text));padding:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;list-style:none}
.ds-accordion__question::after{content:'+';font-size:1.5rem;font-weight:300;transition:transform .3s ease}
.ds-accordion__item[open] .ds-accordion__question::after{transform:rotate(45deg)}
.ds-accordion__answer{padding:0 1.5rem 1.5rem;color:hsl(var(--color-text-muted));line-height:var(--leading-body)}

/* ---- StatRow ---- */
.ds-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;text-align:center}
.ds-stat-row strong{display:block;font-size:1.375rem;font-weight:var(--weight-bold);color:hsl(var(--color-primary));line-height:1.15}
.ds-stat-row span{display:block;margin-top:.2rem;font-size:.6875rem;line-height:1.35;color:hsl(var(--color-text-muted))}
.ds-stat-row--dark strong{color:#fff}
.ds-stat-row--dark span{color:hsl(0 0% 100% / .75)}

/* ---- CompareTable ---- */
.ds-compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ds-compare-table{display:grid;border:1px solid hsl(var(--color-border));border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);min-width:600px}
.ds-compare-row{display:contents}
.ds-compare-td{padding:1.5rem;border-right:1px solid hsl(var(--color-border));border-bottom:1px solid hsl(var(--color-border));background:hsl(var(--color-surface));display:flex;align-items:center}
.ds-compare-row:last-child .ds-compare-td{border-bottom:none}
.ds-compare-th{padding:1.5rem;border-right:1px solid hsl(var(--color-border));border-bottom:1px solid hsl(var(--color-border));display:flex;align-items:center;background:hsl(var(--color-primary));color:#fff;font-weight:var(--weight-semibold);font-family:var(--font-serif-display)}

/* ---- StepTimeline ---- */
.ds-step-timeline{display:grid;gap:1rem}
.ds-step{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;padding:1.5rem;background:hsl(var(--color-surface));border:1px solid hsl(var(--color-border));border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}
.ds-step__num{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:.75rem;font-weight:var(--weight-bold);font-size:1.125rem;background:var(--gradient-hero);color:#fff}
.ds-step h3{margin:0 0 .5rem;font-size:var(--text-h4);font-weight:var(--weight-semibold);color:hsl(var(--color-text))}
.ds-step p{margin:0;font-size:.9375rem;line-height:var(--leading-body);color:hsl(var(--color-text-muted))}
.ds-step__outcome{margin-top:.75rem;padding:.75rem 1rem;border-radius:.5rem;background:hsl(var(--color-accent)/.06);font-size:.875rem;color:hsl(var(--color-text))}
.ds-step__outcome strong{color:hsl(var(--color-accent))}

/* ---- PricingHighlight ---- */
.ds-pricing-box{text-align:center;max-width:42rem;margin:0 auto;padding:2.5rem 2rem;background:hsl(var(--color-surface));border:1px solid hsl(var(--color-border));border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.ds-pricing-box__icon{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;background:hsl(var(--color-primary)/.1);border-radius:50%;margin-bottom:1rem;font-size:2rem;color:hsl(var(--color-primary));font-weight:var(--weight-bold)}
.ds-pricing-box__amount{font-size:var(--text-price);font-weight:var(--weight-bold);color:hsl(var(--color-primary));line-height:1.1}
.ds-pricing-box__unit{display:block;margin-top:.25rem;font-size:1.0625rem;color:hsl(var(--color-text-muted))}
.ds-pricing-box__includes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 1rem;margin:1.5rem 0 0;padding:0;list-style:none;text-align:left;font-size:.875rem;color:hsl(var(--color-text-muted))}
.ds-pricing-box__includes li{display:flex;align-items:flex-start;gap:.5rem}
.ds-pricing-box__includes li::before{content:"✓";flex-shrink:0;color:hsl(var(--color-primary));font-weight:var(--weight-bold)}

/* ---- Header/Nav ---- */
.ds-header{position:sticky;top:0;z-index:50;background:var(--glass-bg);backdrop-filter:blur(var(--blur-header));border-bottom:1px solid hsl(var(--color-border))}
.ds-header__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding);display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--header-height)}
.ds-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0}
.ds-logo img{width:2rem;height:2rem;object-fit:contain;border-radius:.375rem}
.ds-logo__text{font-family:var(--font-serif-display);font-size:1.25rem;font-weight:var(--weight-bold);color:hsl(var(--color-text))}
.ds-nav-desktop{display:flex;align-items:center;justify-content:center;flex:1;gap:1.5rem}
.ds-nav-link{color:hsl(var(--color-text-muted));text-decoration:none;font-size:var(--text-small);white-space:nowrap;transition:var(--transition-smooth)}
.ds-nav-link:hover{color:hsl(var(--color-primary))}
.ds-nav-link--active{color:hsl(var(--color-primary));font-weight:var(--weight-semibold)}
.ds-header__actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.ds-mobile-menu-btn{display:none;flex-direction:column;gap:.25rem;background:none;border:none;cursor:pointer;padding:.5rem}
.ds-mobile-menu-btn span{width:1.5rem;height:2px;background:hsl(var(--color-text))}
.ds-nav-mobile{display:flex;flex-direction:column;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid hsl(var(--color-border));background:hsl(var(--color-surface))}
@media (max-width:900px){.ds-nav-desktop{display:none}.ds-mobile-menu-btn{display:flex}}