/* ============================================================
   COMPONENTS — Obsidian UI
   NO shadows. Borders only. Radius 14 / 10 / pill.
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 20px;
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid transparent;
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  min-height: 44px;
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn .icon { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background-color: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn--primary:hover { opacity: 0.9; }
.btn--primary:active { opacity: 0.85; }

.btn--secondary {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--text-primary);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: transparent;
}
.btn--ghost:hover {
  background-color: var(--surface-hover);
}

.btn--link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--blue);
  min-height: 0;
}
.btn--link:hover { text-decoration: underline; }

.btn--sm { padding: 8px 14px; font-size: var(--fs-small); min-height: 36px; }
.btn--lg { padding: 16px 28px; font-size: 1.0625rem; min-height: 52px; }
.btn--block { width: 100%; }

.btn--icon {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
  border-color: var(--border);
}
.btn--icon:hover { background-color: var(--surface-hover); }
.btn--icon .icon { width: 20px; height: 20px; }

/* ============================================================
   LABEL (uppercase tag)
   ============================================================ */
/* defined in base.css */

/* ============================================================
   BADGES & PILLS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--border);
  background-color: var(--card);
  color: var(--text-primary);
  line-height: 1.4;
}
.badge .icon { width: 14px; height: 14px; }

.badge--success { color: var(--green); border-color: var(--green); background-color: var(--green-tint); }
.badge--info    { color: var(--blue);  border-color: var(--blue);  background-color: var(--blue-tint); }
.badge--warning { color: var(--amber); border-color: var(--amber); background-color: var(--amber-tint); }
.badge--danger  { color: var(--red);   border-color: var(--red);   background-color: var(--red-tint); }

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: var(--blue);
  flex: none;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background-color: var(--card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); }

.card--flat { background-color: var(--card-2); }
.card--inset { padding: var(--sp-4); }
.card--lg { padding: var(--sp-8); }

.card-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.card-text {
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* Hoverable link cards */
a.card { display: block; color: inherit; }
a.card:hover { border-color: var(--text-primary); }

/* ============================================================
   FEATURE CARDS (icon + title + text)
   ============================================================ */

.feature {
  background-color: var(--card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--border);
  background-color: var(--card-2);
  margin-bottom: var(--sp-4);
  color: var(--blue);
}
.feature-icon .icon { width: 22px; height: 22px; }

/* ============================================================
   STEP CARDS (numbered)
   ============================================================ */

.step {
  background-color: var(--card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  position: relative;
}
.step-num {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}

/* ============================================================
   CATEGORY CARD (service)
   ============================================================ */

.cat-card {
  display: flex;
  flex-direction: column;
  background-color: var(--card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-align: left;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.cat-card:hover {
  border-color: var(--text-primary);
  background-color: var(--card-2);
}
.cat-card .feature-icon { margin-bottom: var(--sp-4); }
.cat-card-name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
}
.cat-card-meta {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

/* ============================================================
   AVATARS
   ============================================================ */

.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  border: var(--border-w) solid var(--border);
  background-color: var(--card-2);
  flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 96px; height: 96px; }

/* Photo placeholder (used when no real photo) */
.photo-ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card-2);
  border: var(--border-w) solid var(--border);
  border-radius: 50%;
  color: var(--text-tertiary);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

/* ============================================================
   RATING (stars)
   ============================================================ */

.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--amber);
}
.rating .icon { width: 16px; height: 16px; }
.rating-value {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-left: var(--sp-1);
  font-size: var(--fs-small);
}

/* ============================================================
   FORMS
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.field-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.field-helper {
  font-size: var(--fs-tiny);
  color: var(--text-tertiary);
}
.field-error {
  font-size: var(--fs-tiny);
  color: var(--red);
}
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  background-color: var(--card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue); outline: none; box-shadow: var(--focus-ring); }
.textarea { min-height: 120px; padding: 12px 14px; line-height: var(--lh-normal); }

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea { border-color: var(--red); }

.checkbox, .radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-small);
}
.checkbox input, .radio input { accent-color: var(--blue); width: 18px; height: 18px; }

/* Search bar */
.search {
  position: relative;
}
.search .input { padding-left: 44px; }
.search .icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--bg);
  border-bottom: var(--border-w) solid var(--border);
  transition: background-color var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--navbar-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-extra);
  letter-spacing: -0.01em;
  font-size: 1.0625rem;
  color: var(--text-primary);
}
.brand-logo { width: 28px; height: 28px; flex: none; }

.nav-links {
  display: none;
  align-items: center;
  gap: var(--sp-1);
}
@media (min-width: 1024px) {
  .nav-links { display: flex; }
}
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-link[aria-current="page"] {
  color: var(--text-primary);
  background-color: var(--surface-hover);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background-color: var(--card);
}
.lang-toggle button {
  padding: 6px 10px;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  cursor: pointer;
  min-height: 32px;
  min-width: 36px;
}
.lang-toggle button[aria-pressed="true"] {
  color: var(--text-primary);
  background-color: var(--surface-hover);
}

/* Burger */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  min-height: 40px;
}
.burger .icon { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .burger { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(86vw, 360px);
  height: 100vh; height: 100dvh;
  background-color: var(--bg-elevated);
  border-left: var(--border-w) solid var(--border);
  z-index: var(--z-modal);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.drawer .nav-link {
  display: flex;
  padding: 12px 14px;
  font-size: 1rem;
  min-height: 44px;
}
.drawer-foot {
  margin-top: auto;
  padding-top: var(--sp-6);
  border-top: var(--border-w) solid var(--border);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--overlay);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.drawer-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: var(--border-w) solid var(--border);
  background-color: var(--card-2);
  padding-block: var(--sp-16) var(--sp-8);
  margin-top: var(--sp-20);
}
.footer-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-col h4 {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--text-primary); }
.footer-tagline {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  max-width: 32ch;
  margin-top: var(--sp-3);
}
.footer-socials {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.footer-socials a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--card);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer-socials a:hover { color: var(--text-primary); border-color: var(--text-primary); }
.footer-socials .icon { width: 16px; height: 16px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-top: var(--border-w) solid var(--border);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  font-size: var(--fs-tiny);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

/* ============================================================
   TABS
   ============================================================ */

.tabs {
  display: inline-flex;
  align-items: center;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--card);
  padding: 4px;
  gap: 2px;
}
.tab {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  min-height: 36px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tab[aria-selected="true"] {
  background-color: var(--text-primary);
  color: var(--text-inverse);
}
.tab:hover:not([aria-selected="true"]) {
  color: var(--text-primary);
}

.tabpanel { display: none; }
.tabpanel[data-active="true"] { display: block; }

/* ============================================================
   ACCORDION
   ============================================================ */

.acc {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card);
  overflow: hidden;
}
.acc + .acc { margin-top: var(--sp-3); }
.acc-trigger {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: transparent;
  border: 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  cursor: pointer;
  min-height: 56px;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.acc-trigger:hover { background-color: var(--surface-hover); }
.acc-trigger .icon {
  width: 20px; height: 20px;
  transition: transform var(--dur-base) var(--ease-out);
  flex: none;
  color: var(--text-secondary);
}
.acc[data-open="true"] .acc-trigger .icon { transform: rotate(45deg); color: var(--text-primary); }

.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.acc-body {
  padding: 0 var(--sp-6) var(--sp-6);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   STAT BLOCK
   ============================================================ */

.stat {
  text-align: center;
}
.stat-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-extra);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.stat-label {
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-top: var(--sp-2);
}

/* ============================================================
   APP STORE BADGES
   ============================================================ */

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 18px;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  color: var(--text-primary);
  text-decoration: none;
  min-height: 56px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.store-badge:hover { border-color: var(--text-primary); }
.store-badge .icon { width: 28px; height: 28px; flex: none; }
.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.store-badge-text small {
  font-size: var(--fs-tiny);
  color: var(--text-tertiary);
  font-weight: var(--fw-regular);
}
.store-badge-text strong {
  font-size: 1rem;
  font-weight: var(--fw-bold);
}

/* ============================================================
   TRUST BAR
   ============================================================ */

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.trust-item .icon { width: 18px; height: 18px; color: var(--green); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-6);
}
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--text-primary); }
.crumbs .sep { color: var(--text-tertiary); }

/* ============================================================
   HERO LAYOUTS
   ============================================================ */

.hero {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}
@media (min-width: 768px) {
  .hero { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
}

.hero-grid {
  display: grid;
  gap: var(--sp-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-16); }
}

.hero-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}
.hero-text {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-8);
  max-width: 56ch;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* Phone mockup frame */
.mockup {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  aspect-ratio: 9 / 19;
  border: var(--border-w) solid var(--border);
  border-radius: 36px;
  background-color: var(--card);
  overflow: hidden;
  padding: 8px;
}
.mockup-inner {
  width: 100%; height: 100%;
  border: var(--border-w) solid var(--border);
  border-radius: 28px;
  background-color: var(--card-2);
  overflow: hidden;
  position: relative;
}
.mockup-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.mockup::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background-color: var(--text-primary);
  border-radius: 12px;
  z-index: 2;
}

/* ============================================================
   PRICING CARDS
   ============================================================ */

.plan {
  background-color: var(--card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.plan--featured {
  border-color: var(--text-primary);
  background-color: var(--card-2);
}
.plan-name {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.plan-price {
  font-size: 2.5rem;
  font-weight: var(--fw-extra);
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-price small {
  font-size: 1rem;
  font-weight: var(--fw-regular);
  color: var(--text-tertiary);
  margin-left: var(--sp-2);
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.plan-features .icon {
  width: 18px; height: 18px;
  flex: none;
  color: var(--green);
  margin-top: 1px;
}

/* ============================================================
   TIMELINE (vertical)
   ============================================================ */

.timeline {
  position: relative;
  padding-left: var(--sp-8);
  border-left: var(--border-w) solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-8) * -1 - 1px);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--bg);
  border: 2px solid var(--text-primary);
  transform: translateX(-50%);
}
.timeline-date {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}
.timeline-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.timeline-text {
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   CHIP / FILTER
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--border);
  background-color: var(--card);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  min-height: 36px;
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip[aria-pressed="true"], .chip.is-active {
  background-color: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}

.chip-row {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.chip-row .chip { scroll-snap-align: start; }

/* ============================================================
   BANNER CTA (full width)
   ============================================================ */

.banner {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card-2);
  padding: var(--sp-12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.banner h2 {
  max-width: 22ch;
  margin-inline: auto;
}
.banner p {
  color: var(--text-secondary);
  max-width: 52ch;
  margin-inline: auto;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */

.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-small);
}
.compare th, .compare td {
  padding: var(--sp-4);
  border-bottom: var(--border-w) solid var(--border);
  text-align: left;
  vertical-align: top;
}
.compare th {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  background-color: var(--card-2);
}
.compare th:first-child, .compare td:first-child {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.compare tr:last-child td { border-bottom: 0; }
.compare .icon { width: 18px; height: 18px; color: var(--green); }
.compare .icon--no { color: var(--text-tertiary); }

.compare-wrap {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ============================================================
   TESTIMONIAL CARD
   ============================================================ */

.testi {
  background-color: var(--card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  height: 100%;
}
.testi-quote {
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}
.testi-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.testi-meta { display: flex; flex-direction: column; gap: 2px; }
.testi-name { font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.testi-role { font-size: var(--fs-tiny); color: var(--text-tertiary); }

/* ============================================================
   SLIDER controls
   ============================================================ */

.slider {
  position: relative;
}
.slider-track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
}
.slider-track > * {
  flex: 0 0 calc(100% - var(--sp-3));
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .slider-track > * { flex: 0 0 calc(50% - var(--sp-5) / 2); }
}
@media (min-width: 1024px) {
  .slider-track > * { flex: 0 0 calc(33.333% - var(--sp-5) * 2 / 3); }
}
.slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ============================================================
   IMG FRAMES — images must always have borders
   ============================================================ */

.framed {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--card-2);
}
.framed img { display: block; width: 100%; height: auto; border-radius: 0; }

.framed-square { aspect-ratio: 1/1; }
.framed-wide { aspect-ratio: 16/9; }
.framed-portrait { aspect-ratio: 3/4; }

.aspect-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: var(--card-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.aspect-16x9 iframe, .aspect-16x9 img, .aspect-16x9 video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ============================================================
   TOC sidebar (legal pages)
   ============================================================ */

.legal-layout {
  display: grid;
  gap: var(--sp-10);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .legal-layout { grid-template-columns: 240px 1fr; }
}
.toc {
  position: sticky;
  top: calc(var(--navbar-h) + var(--sp-6));
  align-self: start;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background-color: var(--card);
}
.toc h4 {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}
.toc ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.toc a {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.4;
}
.toc a:hover { color: var(--text-primary); }

.prose h2 {
  font-size: 1.5rem;
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
}
.prose h3 {
  font-size: 1.125rem;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.prose p { margin-bottom: var(--sp-4); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.prose ul, .prose ol {
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-6);
  color: var(--text-secondary);
}
.prose ul li, .prose ol li { line-height: var(--lh-relaxed); margin-bottom: var(--sp-2); list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a { color: var(--blue); }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--text-primary); }

/* ============================================================
   ANIMATIONS (reveal on scroll)
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }

/* ============================================================
   TOAST (used by forms)
   ============================================================ */

.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background-color: var(--card);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.toast[data-show="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.toast .icon { width: 18px; height: 18px; color: var(--green); }