/* =============================================================
   Area 246 — Core component library
   All styles read from tokens.css. No literal color values here
   except where explicitly brand (gradients declared in tokens).
   ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--fg-body);
  line-height: var(--lh-relaxed);
  background: var(--bg-canvas);
  transition: background var(--dur-slow) var(--ease-standard),
              color var(--dur-slow) var(--ease-standard);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

/* ---------- Selection & focus ---------- */
::selection { background: var(--product-tint); color: var(--fg-primary); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ---------- Layout ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.section { padding: var(--section-y) 0; }
.section-alt {
  background: var(--aura-alt), var(--bg-surface-2);
}
.row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg-primary); }
h1 {
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
h3 {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
h4 {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-32), 6vw, var(--fs-56));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}
/* Pricing card uses a smaller display variant so "Free for 90 days"
   fits cleanly regardless of viewport. Caps at ~28px even on wide
   screens so the card reads as a single clean statement, not a billboard. */
.card .display,
.pricing-card .display {
  font-size: clamp(var(--fs-22), 4.5vw, var(--fs-28));
  line-height: 1.15;
  text-wrap: balance;
}
.subhead {
  font-size: var(--fs-20);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}
.body { font-size: var(--fs-16); color: var(--fg-body); line-height: var(--lh-relaxed); }
.small { font-size: var(--fs-14); color: var(--fg-muted); }
.fine { font-size: var(--fs-12); color: var(--fg-subtle); }
.mono { font-family: var(--font-mono); font-size: var(--fs-14); }

.label {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--product-grad-label);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Warm amber variant — used on the mothership for a softer,
   less brand-loaded eyebrow (no pink/purple). */
.label.label-warm {
  background: var(--grad-label-warm);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ---------- Gradient text ----------
   Fills the text with the product gradient. For hero-scale
   headlines that want the wordmark feel, use .text-neon below
   instead (adds a soft glow). */
.text-gradient {
  background: var(--product-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Deprecated alias — kept so existing consumers don't break
   mid-migration. Prefer .text-gradient. Remove once Cari/BB
   migrations complete. */
.gradient-text {
  background: var(--product-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ---------- Neon text ----------
   Gradient fill + product-glow drop-shadow. Combine with
   display-weight type (h1, .display) — the glow reads flat on
   body copy. Use .text-gradient when you don't want the glow. */
.text-neon {
  background: var(--product-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  filter: drop-shadow(0 4px 20px var(--product-glow));
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px var(--sp-8);
  border-radius: var(--r-sm);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--product-grad);
  color: var(--fg-on-brand);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-outline {
  background: color-mix(in oklab, var(--product-end) 8%, transparent);
  color: var(--product-accent);
  border: 2px solid color-mix(in oklab, var(--product-accent) 40%, transparent);
}
.btn-outline:hover {
  background: color-mix(in oklab, var(--product-end) 20%, transparent);
  color: var(--fg-primary);
  border-color: var(--product-accent);
}
[data-theme="light"] .btn-outline { color: var(--product-end); }
[data-theme="light"] .btn-outline:hover { color: var(--fg-on-brand); background: var(--product-grad); border-color: transparent; }

.btn-ghost {
  background: transparent;
  color: var(--fg-body);
  border: 1px solid var(--border-default);
}
.btn-ghost:hover { background: var(--tint-06); border-color: var(--border-strong); color: var(--fg-primary); }

.btn-sm { padding: 8px var(--sp-4); font-size: var(--fs-14); }
.btn-lg { padding: var(--sp-4) var(--sp-10); font-size: var(--fs-18); }
.btn-block { display: flex; width: 100%; }

/* ---------- Nav ---------- */
nav.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  padding: var(--sp-6) 0;
  transition: border-color var(--dur-slow);
}
nav.nav.scrolled { border-bottom-color: var(--bg-nav-border); }
nav.nav > .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.nav-logo { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-22); font-weight: var(--fw-bold); }
.nav-logo img { height: 36px; width: auto; }
.nav-links { display: flex; gap: var(--sp-8); align-items: center; }
/* Underline-tab style — a 2px product-gradient underline slides in on hover
   and stays on the link that matches the current scroll section.
   Add .active to any <a> (typically via JS scroll-spy) to show the
   resting-state underline. Add to any anchor the site nav uses. */
.nav-links a {
  position: relative;
  font-size: var(--fs-16);
  color: var(--fg-muted);
  padding: var(--sp-2) 0;
  transition: color var(--dur-base);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--product-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
  border-radius: 2px;
}
.nav-links a:hover { color: var(--fg-primary); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--fg-primary); }
/* The CTA button in the nav keeps its own style — no underline. */
.nav-links a.btn { color: var(--fg-on-brand); padding: 14px var(--sp-8); }
.nav-links a.btn::after { content: none; }

.nav-logo .nav-icon { width: 36px; height: 36px; flex-shrink: 0; display: block; margin-bottom: -4px; }
.nav-logo .nav-wordmark { height: 36px; width: auto; }
.nav-logo .nav-home-logo { height: 56px; width: auto; display: block; }
.nav-logo .nav-name {
  font-family: var(--font-display);
  background: var(--product-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: var(--lh-tight);
}
.nav-logo .nav-subtitle {
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  color: var(--fg-quiet);
  transition: color var(--dur-fast);
}
.nav-logo a.nav-subtitle:hover { color: var(--product-accent); }

.nav-brand-link { display: flex; align-items: center; align-self: center; }
.nav-links .nav-brand-icon {
  height: 44px;
  width: auto;
  opacity: 0.6;
  transition: opacity var(--dur-fast);
}
.nav-links .nav-brand-icon:hover { opacity: 1; }

@media (max-width: 768px) {
  .nav-links a:not(.btn),
  .nav-links .menu-dropdown,
  .nav-links .nav-brand-link { display: none; }
  nav.nav:not(:has(.nav-links .btn)) .nav-links { display: none; }
  nav.nav:not(:has(.nav-links .btn)) > .container { justify-content: center; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
  position: relative;
}
.card:hover { border-color: var(--border-strong); }
.card.interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- Card icon ----------
   Stacked or inline icon for any card variant. Use with Lucide SVGs
   (stroke="currentColor") so the icon picks up --product-accent. */
.card-icon {
  font-size: var(--fs-28);
  margin-bottom: var(--sp-3);
  color: var(--product-accent);
}
.card-icon svg {
  width: 28px;
  height: 28px;
}
.card-showcase .card-icon,
.card-product .card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
}
.card-showcase .card-icon img,
.card-showcase .card-icon svg,
.card-product .card-icon img,
.card-product .card-icon svg { width: 100%; height: 100%; object-fit: contain; }
.card-icon-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.card-icon-inline svg {
  width: 28px;
  height: 28px;
  color: var(--product-accent);
  flex-shrink: 0;
}
.card-icon-inline h3 {
  font-size: var(--fs-20);
  margin: 0;
}

.card-glass {
  background: var(--tint-03);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-6);
}

/* Shared spacing for direct-child headings inside any card — so a
   <h3> followed by <p> breathes without every consumer hand-rolling
   margin. Uses :where() for zero specificity so component-specific
   rules (e.g. .card-product h3) always win. */
.card > :where(h1, h2, h3, h4, h5, h6),
.card-glass > :where(h1, h2, h3, h4, h5, h6),
.card-showcase > :where(h1, h2, h3, h4, h5, h6),
.card-product > :where(h1, h2, h3, h4, h5, h6) {
  margin-bottom: var(--sp-3);
}
.card > :where(p + h1, p + h2, p + h3, p + h4, p + h5, p + h6),
.card-glass > :where(p + h1, p + h2, p + h3, p + h4, p + h5, p + h6) {
  margin-top: var(--sp-4);
}

/* .card-showcase (.card-product is a deprecated alias) — modifier on .card. */
.card-showcase,
.card-product {
  padding: var(--sp-10) var(--sp-8);
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--product-start) 12%, transparent) 0%,
    color-mix(in oklab, var(--product-mid) 8%, transparent) 40%,
    var(--bg-surface-3) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
/* Conic gradient border sweep (brand signature effect) */
.card-sweep {
  position: relative;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card-sweep:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.card-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 140deg,
    transparent 0%,
    color-mix(in oklab, var(--product-mid) 55%, transparent) 15%,
    color-mix(in oklab, var(--product-start) 55%, transparent) 25%,
    transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
  pointer-events: none;
}
.card-sweep:hover::before { opacity: 1; }

/* Card-product internal typography. The icon slot, product name
   (gradient fill via --product-grad-label), tagline, and desc
   all reskin under [data-product="…"] automatically.

   Usage:
     <article class="card-product" data-product="cari">
       <div class="card-product-icon"><img src="…" alt=""></div>
       <h3 class="card-product-name">Cari</h3>
       <p class="card-product-tagline">Your WhatsApp bookkeeper</p>
       <p class="card-product-desc">One line of description, wrapping.</p>
     </article> */
.card-showcase-name,
.card-product-name {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-1);
  color: var(--fg-primary);
}
.card-showcase-tagline,
.card-product-tagline {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}
.card-showcase-desc,
.card-product-desc {
  font-size: var(--fs-15);
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
  flex-grow: 1;
  margin-bottom: var(--sp-6);
}

/* ---------- Cards grid ----------
   Generic 2-up and 3-up card grids. Container for any row of
   cards (card-product, card, card-glass, problem-card, category-card).
   Both collapse to 1 column under 768px. */
.cards-grid-2,
.cards-grid-3 {
  display: grid;
  max-width: 960px;
  margin-top: var(--sp-10);
  margin-left: auto;
  margin-right: auto;
}
.cards-grid-2 { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.cards-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 768px) {
  .cards-grid-2,
  .cards-grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Badges / Pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px var(--sp-4);
  background: var(--product-tint);
  color: var(--product-accent);
  border: 1px solid var(--product-border);
  border-radius: var(--r-xl);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
[data-theme="light"] .badge { color: var(--product-end); }

.badge-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-12);
  padding: 6px var(--sp-5);
  font-weight: var(--fw-bold);
}

.pill {
  display: inline-block;
  padding: 2px var(--sp-2);
  background: var(--product-tint);
  color: var(--product-accent);
  border-radius: var(--r-xl);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-bottom: var(--sp-1);
}
[data-theme="light"] .pill { color: var(--product-end); }

.pill-status-success { background: var(--semantic-success-bg); color: var(--semantic-success-fg); border: 1px solid var(--semantic-success-border); }
.pill-status-warning { background: var(--semantic-warning-bg); color: var(--semantic-warning-fg); border: 1px solid var(--semantic-warning-border); }
.pill-status-danger  { background: var(--semantic-danger-bg);  color: var(--semantic-danger-fg);  border: 1px solid var(--semantic-danger-border); }
.pill-status-info    { background: var(--semantic-info-bg);    color: var(--semantic-info-fg);    border: 1px solid var(--semantic-info-border); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fg-body); font-family: var(--font-display); }
.field-help { font-size: var(--fs-13); color: var(--fg-subtle); }
.field-error { font-size: var(--fs-13); color: var(--semantic-danger-fg); display: flex; align-items: center; gap: var(--sp-1); }

.input, .textarea, .select {
  width: 100%;
  padding: 12px var(--sp-4);
  background: var(--tint-03);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg-primary);
  transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-quiet); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--product-accent);
  box-shadow: 0 0 0 3px var(--product-tint);
  background: var(--tint-06);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--semantic-danger-border); }
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-normal); }
.select { appearance: none; -webkit-appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, currentColor 50%),
  linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sp-10);
}

/* Checkbox / Radio */
.check, .radio { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; user-select: none; }
.check input, .radio input { position: absolute; opacity: 0; pointer-events: none; }
.check-box, .radio-dot {
  width: 18px; height: 18px;
  background: var(--tint-03);
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-base);
  flex-shrink: 0;
}
.radio-dot { border-radius: var(--r-full); }
.check input:checked ~ .check-box,
.radio input:checked ~ .radio-dot {
  background: var(--product-grad);
  border-color: transparent;
}
.check-box::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.check input:checked ~ .check-box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.radio-dot::after {
  content: ''; width: 8px; height: 8px; border-radius: var(--r-full); background: #fff;
  transform: scale(0); transition: transform var(--dur-base) var(--ease-out);
}
.radio input:checked ~ .radio-dot::after { transform: scale(1); }
.check input:focus-visible ~ .check-box,
.radio input:focus-visible ~ .radio-dot { box-shadow: var(--focus-ring); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 40px; height: 22px;
  background: var(--tint-10);
  border-radius: var(--r-full);
  position: relative;
  transition: background var(--dur-base);
}
.switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: #fff;
  border-radius: var(--r-full); transition: left var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.switch input:checked ~ .switch-track { background: var(--product-grad); }
.switch input:checked ~ .switch-track::after { left: 20px; }
.switch input:focus-visible ~ .switch-track { box-shadow: var(--focus-ring); }

/* ---------- Alert / Banner ---------- */
.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--tint-03);
  border: 1px solid var(--border-default);
  align-items: flex-start;
}
.alert-icon { flex-shrink: 0; width: 20px; height: 20px; }
.alert-body { flex: 1; }
.alert-title { font-weight: var(--fw-semibold); color: var(--fg-primary); margin-bottom: var(--sp-1); font-family: var(--font-display); }
.alert-text { color: var(--fg-muted); font-size: var(--fs-14); line-height: var(--lh-normal); }
.alert-success { background: var(--semantic-success-bg); border-color: var(--semantic-success-border); }
.alert-success .alert-title { color: var(--semantic-success-fg); }
.alert-warning { background: var(--semantic-warning-bg); border-color: var(--semantic-warning-border); }
.alert-warning .alert-title { color: var(--semantic-warning-fg); }
.alert-danger  { background: var(--semantic-danger-bg);  border-color: var(--semantic-danger-border); }
.alert-danger  .alert-title { color: var(--semantic-danger-fg); }
.alert-info    { background: var(--semantic-info-bg);    border-color: var(--semantic-info-border); }
.alert-info    .alert-title { color: var(--semantic-info-fg); }

/* ---------- Divider ---------- */
.divider { height: 1px; background: var(--border-default); border: none; margin: var(--sp-8) 0; }
.divider-soft { background: var(--border-subtle); }
.divider-labeled {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--fg-subtle); font-size: var(--fs-13);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  margin: var(--sp-8) 0;
}
.divider-labeled::before, .divider-labeled::after {
  content: ''; flex: 1; height: 1px; background: var(--border-default);
}

/* ---------- Avatar ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--product-grad);
  color: var(--fg-on-brand);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-full);
  font-size: var(--fs-14);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-12); }
.avatar-lg { width: 56px; height: 56px; font-size: var(--fs-18); }
.avatar-xl { width: 80px; height: 80px; font-size: var(--fs-24); }

/* ---------- Tooltip (pure CSS, data-tooltip attr) ---------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--fg-primary);
  color: var(--bg-canvas);
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base), transform var(--dur-base);
  z-index: var(--z-dropdown);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
}
.tab {
  padding: var(--sp-3) var(--sp-5);
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-base);
  white-space: nowrap;
}
.tab:hover { color: var(--fg-primary); }
.tab[aria-selected="true"] { color: var(--fg-primary); }
.tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: var(--sp-5); right: var(--sp-5);
  bottom: -1px;
  height: 2px;
  background: var(--product-grad);
  border-radius: 2px;
}

/* ---------- Accordion / FAQ ---------- */
.faq-item {
  background: var(--tint-03);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.faq-item[open] { border-color: var(--product-border); background: color-mix(in oklab, var(--product-mid) 4%, transparent); }
.faq-item > summary {
  cursor: pointer;
  padding: var(--sp-5) 56px var(--sp-5) var(--sp-6);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  color: var(--fg-primary);
  position: relative;
  list-style: none;
  user-select: none;
  font-family: var(--font-display);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '';
  position: absolute;
  right: var(--sp-6);
  top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--product-accent);
  border-bottom: 2px solid var(--product-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-base);
}
.faq-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item > .faq-answer {
  padding: 0 var(--sp-6) var(--sp-5);
  color: var(--fg-muted);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
}
.faq-item > .faq-answer a { color: var(--product-accent); text-decoration: underline; }

.faq-list {
  max-width: 720px;
  margin: var(--sp-10) auto 0;
  text-align: left;
}

/* ---------- Progress ---------- */
.progress {
  height: 6px;
  background: var(--tint-06);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--product-grad);
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease-standard);
}

/* ---------- Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--tint-03) 0%,
    var(--tint-10) 50%,
    var(--tint-03) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skeleton-shimmer 1.4s infinite linear;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 14, 42, 0.7);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  animation: fadeIn var(--dur-base) var(--ease-out);
}
.modal {
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  animation: modalIn var(--dur-slow) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- Toast ---------- */
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  color: var(--fg-primary);
  font-size: var(--fs-15);
}
.toast-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--product-grad); flex-shrink: 0; }

/* ---------- Chat bubble ---------- */
.bubble {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  background: var(--product-tint);
  border: 1px solid var(--product-border);
  border-radius: var(--r-speech-tail);
  color: var(--product-accent);
  font-size: var(--fs-15);
  max-width: 260px;
  line-height: var(--lh-normal);
}
[data-theme="light"] .bubble { color: var(--product-end); }
.bubble-inbound {
  border-radius: 12px 12px 2px 12px;
}

/* ---------- Table ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-15);
}
.tbl th {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
}
.tbl tbody tr:hover { background: var(--tint-03); }

/* ---------- Comparison table ----------
   Two- or three-column comparison (e.g. "Old way" vs "With Cari").
   Header row picks up product accent; body rows use subtle striping.
   Use .compare--highlight on a column to emphasize "our" side. */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: var(--fs-15);
  background: var(--bg-surface-1);
}
.compare thead th {
  padding: var(--sp-5) var(--sp-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.compare thead th:first-child {
  color: var(--fg-quiet);
  width: 28%;
}
/* Highlighted column gets extra width so the product-of-focus
   reads bigger than the comparator(s). Applies to both 2-col
   and 3-col layouts. */
.compare thead th.compare-col-highlight { width: 44%; }
.compare tbody td.compare-col-highlight { width: 44%; }
.compare thead th.compare-col-highlight {
  color: var(--fg-primary);
  background: var(--product-tint);
  position: relative;
}
.compare thead th.compare-col-highlight::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--product-grad);
}
.compare thead th .compare-col-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  text-transform: none; letter-spacing: 0;
}
.compare thead th .compare-col-title img { width: 20px; height: 20px; }
.compare thead th:not(.compare-col-highlight) .compare-col-title {
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}
.compare-centered { max-width: 720px; margin: var(--sp-10) auto 0; text-align: left; }
.compare tbody td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--fg-body);
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare tbody td:first-child {
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  font-family: var(--font-display);
  background: var(--bg-surface-2);
  width: 32%;
}
.compare tbody td.compare-col-highlight {
  background: var(--product-tint);
}
.compare-mark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-medium);
}
.compare-mark::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: var(--r-full);
  display: inline-block;
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.compare-mark--yes { color: var(--fg-body); }
.compare-mark--yes::before {
  background-color: var(--status-success-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,8.5 7,12 13,4'/></svg>");
}
.compare-mark--no { color: var(--fg-muted); }
.compare-mark--no::before {
  background-color: var(--status-danger-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f87171' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='4' x2='12' y2='12'/><line x1='12' y1='4' x2='4' y2='12'/></svg>");
}
.compare-mark--partial { color: var(--fg-body); }
.compare-mark--partial::before {
  background-color: var(--status-warning-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fbbf24' stroke-width='2.5' stroke-linecap='round'><line x1='4' y1='8' x2='12' y2='8'/></svg>");
}
@media (max-width: 640px) {
  .compare thead th:first-child, .compare tbody td:first-child { width: 34%; }
  .compare thead th.compare-col-highlight,
  .compare tbody td.compare-col-highlight { width: 40%; }
  .compare thead th, .compare tbody td { padding: var(--sp-3); font-size: var(--fs-14); }
}

/* Collapsible variant — add .compare--collapsible to the table.
   On ≤640px: the leading "label" column is hidden and its text
   inlines as a mini-eyebrow above each cell's content, so you get
   a clean side-by-side "Old way / With Cari" view on phones.
   Requires data-label="…" on each <td> that isn't the first column.

   Also activates inside a [data-force-narrow] ancestor — the design-system
   docs use this to show the mobile layout without resizing the window. */
.compare--collapsible tbody td[data-label]::before { content: none; }

/* Shared collapsed styles, reused by both the media-query and the force-narrow ancestor. */
[data-force-narrow] .compare--collapsible thead th:first-child,
[data-force-narrow] .compare--collapsible tbody td:first-child {
  display: none;
}
[data-force-narrow] .compare--collapsible thead th.compare-col-highlight,
[data-force-narrow] .compare--collapsible tbody td.compare-col-highlight,
[data-force-narrow] .compare--collapsible thead th:not(:first-child):not(.compare-col-highlight),
[data-force-narrow] .compare--collapsible tbody td:not(:first-child):not(.compare-col-highlight) {
  width: 50%;
}
[data-force-narrow] .compare--collapsible tbody td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-quiet);
  margin-bottom: 4px;
}
[data-force-narrow] .compare--collapsible thead th,
[data-force-narrow] .compare--collapsible tbody td {
  padding: var(--sp-3);
  font-size: var(--fs-14);
}

@media (max-width: 640px) {
  .compare--collapsible thead th:first-child,
  .compare--collapsible tbody td:first-child {
    display: none;
  }
  .compare--collapsible thead th.compare-col-highlight,
  .compare--collapsible tbody td.compare-col-highlight,
  .compare--collapsible thead th:not(:first-child):not(.compare-col-highlight),
  .compare--collapsible tbody td:not(:first-child):not(.compare-col-highlight) {
    width: 50%;
  }
  .compare--collapsible tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-quiet);
    margin-bottom: 4px;
  }
}

/* ---------- Prose (long-form / legal) ----------
   Container for privacy, terms, and any article-length text.
   Constrains measure to 68ch for comfortable reading, restores
   vertical rhythm between block elements, and styles nested
   lists/links/headings without class-per-element. */
.prose {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--fg-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
}
.prose > * + * { margin-top: var(--sp-4); }
.prose h1 { font-size: var(--fs-40); line-height: var(--lh-tight); margin-top: 0; margin-bottom: var(--sp-6); color: var(--fg-primary); }
.prose h2 { font-size: var(--fs-24); line-height: var(--lh-snug); margin-top: var(--sp-12); margin-bottom: var(--sp-3); color: var(--fg-primary); }
.prose h3 { font-size: var(--fs-20); line-height: var(--lh-snug); margin-top: var(--sp-8); margin-bottom: var(--sp-2); color: var(--fg-primary); }
.prose h2 + p, .prose h3 + p { margin-top: var(--sp-2); }
.prose p { margin-top: var(--sp-4); }
.prose a {
  color: var(--product-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-base);
}
[data-theme="light"] .prose a { color: var(--product-end); }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: var(--sp-6); margin-top: var(--sp-4); }
.prose li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--fg-quiet); }
.prose strong { color: var(--fg-primary); font-weight: var(--fw-semibold); }
.prose em { color: var(--fg-body); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.925em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--tint-06);
  color: var(--fg-primary);
}
.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-2) var(--sp-5);
  border-left: 2px solid var(--product-accent);
  color: var(--fg-muted);
  font-style: italic;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--sp-10) 0;
}
.prose table { margin-top: var(--sp-6); }
.prose .prose-meta {
  display: block;
  font-size: var(--fs-14);
  color: var(--fg-subtle);
  margin-top: calc(-1 * var(--sp-4));
  margin-bottom: var(--sp-8);
}

/* ---------- Feature list (inside cards) ----------
   Plain checkmark-style list used inside pricing cards and
   anywhere a card needs "what's included." The ✓ glyph is
   authored inline in the HTML (not pseudo-generated) so it
   stays copyable and screen-reader friendly. */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: inline-block;
  color: var(--fg-body);
}
.feature-list li {
  padding: var(--sp-1) 0;
  color: var(--fg-body);
}
.feature-list li::before {
  content: "\2713  ";
  color: var(--product-accent);
  font-weight: var(--fw-bold);
}
.feature-list li + li { border-top: 0; }

/* ---------- Site footer ----------
   Used at the bottom of every marketing page. 4-column grid
   on desktop (brand column 2fr, then three link columns 1fr
   each), stacks to 2-col then 1-col on narrow screens. */
.site-footer {
  width: 100%;
  padding: var(--sp-12) var(--sp-10) var(--sp-6);
  border-top: 1px solid var(--border-default);
  color: var(--fg-subtle);
  font-size: var(--fs-14);
  background: var(--bg-canvas);
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.site-footer-brand img { height: 40px; margin-bottom: var(--sp-3); }
.site-footer-brand p { color: var(--fg-quiet); font-size: var(--fs-13); }
.site-footer-heading {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}
.site-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer-links li + li { margin-top: var(--sp-2); }
.site-footer-links a {
  color: var(--fg-subtle);
  transition: color var(--dur-base);
}
.site-footer-links a:hover { color: var(--fg-primary); }
.site-footer-copyright {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-13);
  color: var(--fg-quiet);
}
.site-footer-copyright p + p { margin-top: var(--sp-2); }
@media (max-width: 768px) {
  .site-footer { padding: var(--sp-10) var(--sp-6) var(--sp-5); }
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer-grid { grid-template-columns: 1fr; }
  .site-footer-brand { grid-column: auto; }
}

/* ---------- Hero ----------
   Three variants, sharing the same `.hero` base:
   - `.hero.hero-centered` — mothership / product landing. Badge +
     gradient headline + subhead + CTA row, centered over aurora.
   - `.hero.hero-split` — two-column: copy left, visual right (phone
     mockup, screenshot, whatever). Add `.reverse` to flip sides.
     Collapses to one column (copy first, visual second) under 768px.
   - `.hero` on its own — bare container; caller composes inside. */
.hero {
  padding: var(--sp-20) var(--sp-10);
  background: var(--aura-core), var(--bg-canvas);
  position: relative;
  overflow: hidden;
}
.hero-centered {
  text-align: center;
}
/* Force text-align on children too — otherwise a <p> or sub-copy
   inside .hero-inner can end up flex-stretched and read as
   left-aligned on narrow screens even though the block is centered. */
.hero-centered .hero-inner,
.hero-centered .hero-inner > * {
  text-align: center;
}
.hero-centered .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 620px;
  margin: 0 auto;
}
.hero h1 {
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
}
.hero-lg h1 { font-size: var(--fs-56); }
/* Centered-only overrides for subhead/CTA row. Scope matters —
   .hero-split has its own left-aligned layout and must not inherit
   these auto-margins or justify:center rules. */
.hero-centered .subhead { max-width: 52ch; margin-left: auto; margin-right: auto; }
.hero-centered .row { justify-content: center; }

/* ---------- Home hero ----------
   Mothership landing variant with multi-aurora background.
   Use on the homepage or any top-level landing page. */
.home-hero {
  padding: 120px 0 80px;
  text-align: center;
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(130,58,188,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(247,127,0,0.06) 0%, transparent 70%),
    var(--bg-canvas);
}
.home-hero h1 { margin-bottom: var(--sp-4); }
.home-hero .small { margin-bottom: var(--sp-10); }
.home-page .nav-home-logo { height: 64px; }

/* ---------- Hero split ----------
   Two-column hero: copy left, visual right. Copy column is
   narrower so the visual leads. Reverse the order with
   `.hero-split.reverse` (copy right, visual left). Both
   columns stack on mobile (copy on top) with the visual
   centered in its column.

   Usage:
     <section class="hero hero-split">
       <div class="hero-inner">
         <div class="hero-copy">
           <span class="badge">Badge</span>
           <h1>Headline with <span class="text-gradient">accent</span></h1>
           <p class="subhead">Supporting line.</p>
           <div class="row">
             <a class="btn btn-primary">Primary</a>
             <a class="btn btn-outline">Secondary</a>
           </div>
         </div>
         <div class="hero-visual">
           <img src="phone.png" alt="" class="mockup-frame">
         </div>
       </div>
     </section> */
.hero-split { padding-left: 0; padding-right: 0; }
.hero-split .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--sp-15);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.hero-split.reverse .hero-inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.hero-split.reverse .hero-copy { order: 2; }
.hero-split.reverse .hero-visual { order: 1; }

.hero-split .hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 560px;
}
.hero-split .hero-copy .badge { align-self: flex-start; }
.hero-split .hero-copy .row { margin-top: var(--sp-2); }

.hero-split .hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Give bare <img> inside hero-visual a sensible default — if
   you want the full mockup-frame treatment, add that class. */
.hero-split .hero-visual > img {
  width: 300px;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-2xl);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
}

@media (max-width: 768px) {
  .hero-split .hero-inner,
  .hero-split.reverse .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .hero-split.reverse .hero-copy { order: 1; }
  .hero-split.reverse .hero-visual { order: 2; }
  .hero-split .hero-copy { max-width: 100%; }
}

@media (max-width: 640px) {
  .hero { padding: var(--sp-12) var(--sp-5); }
  .hero h1 { font-size: var(--fs-32); }
  .hero-lg h1 { font-size: var(--fs-40); }
}

/* ---------- Feature row ----------
   Workhorse of product pages. Two-column grid (copy + visual),
   alternates direction via `.feature-row.reverse`. On narrow
   screens collapses to stacked with copy on top. */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
  padding: var(--sp-12) 0;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-row .feature-copy h2 {
  margin: var(--sp-2) 0 var(--sp-3);
}
.feature-row .feature-copy p {
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}
.feature-row .feature-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-row .feature-visual > img {
  width: 280px;
  max-width: 100%;
  border-radius: var(--r-2xl);
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.3));
}
@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding: var(--sp-8) 0;
  }
  .feature-row.reverse { direction: ltr; }
}

/* ---------- Section header ----------
   Centered intro block: label + heading + optional subhead/button.
   Add .section-header-spaced when the following content needs
   breathing room (e.g. before a category-grid). */
.section-header { text-align: center; }
.section-header-spaced { margin-bottom: var(--sp-12); }
.section-header .subhead { max-width: 52ch; margin: var(--sp-3) auto 0; }
.section-header .btn { margin-top: var(--sp-6); }

/* ---------- Section CTA ----------
   Centered button wrapper after a content block (e.g. steps grid). */
.section-cta { text-align: center; margin-top: var(--sp-10); }
.section-cta .badge { margin-bottom: var(--sp-2); }

/* ---------- Trial notice ----------
   Promotional fine print below a CTA (trial terms, pricing note). */
.trial-notice { margin-top: var(--sp-4); font-size: var(--fs-15); color: var(--fg-muted); }
.cta-inner .trial-notice { opacity: 0.85; }

/* ---------- CTA block ----------
   Closing call-to-action. Centered, aurora background,
   one primary action. Use at the bottom of marketing pages. */
.cta {
  padding: var(--sp-20) var(--sp-10);
  text-align: center;
  background: var(--aura-alt), var(--bg-surface-1);
}
.cta-inner {
  max-width: 560px;
  margin: 0 auto;
}
.cta-inner h2 { margin-bottom: var(--sp-3); }
.cta-inner .subhead { margin: var(--sp-3) 0 var(--sp-6); }
.cta-inner .badge { margin-bottom: var(--sp-4); }
@media (max-width: 640px) {
  .cta { padding: var(--sp-12) var(--sp-5); }
}

/* ---------- Stacked mockups ----------
   Two overlapping screenshots used in feature rows to imply
   depth without a full device frame. Back image is rotated,
   front image sits flat and slightly inset. On hover the two
   split apart slightly. Size is fixed so the aspect stays
   predictable across breakpoints.

   Usage:
     <div class="mockup-stack">
       <img class="mockup-back"  src="..." alt="">
       <img class="mockup-front" src="..." alt="">
     </div>

   Pair with .reveal on the parent .feature-row for the
   split-entrance animation. */
.mockup-stack {
  position: relative;
  width: 420px;
  height: 560px;
  margin: 0 auto;
  perspective: 900px;
}
.mockup-stack img {
  position: absolute;
  width: 240px;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out);
}
.mockup-stack .mockup-back {
  top: 30px; right: 0;
  transform: rotate(6deg);
  z-index: 1;
}
.mockup-stack .mockup-front {
  top: 0; left: 0;
  z-index: 2;
}
.mockup-stack:hover .mockup-front {
  transform: translate(-10px, -6px) scale(1.02);
}
.mockup-stack:hover .mockup-back {
  transform: rotate(4deg) translate(10px, 6px) scale(0.98);
}

/* Single screenshot variant — same slot as .mockup-stack but
   flat. Use when one image is enough. */
.mockup-single {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mockup-single img {
  width: 280px;
  max-width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

/* ---------- Mockup frame ----------
   Generic "this is a product screenshot" treatment: rounded
   corners + soft shadow, sized to its container. Use anywhere
   you'd drop a raw <img> of the product into a feature row or
   hero and want it to look intentional.

   Apply to either the <img> itself, or a wrapper — rules nest
   so both work.

   Usage:
     <img src="phone.png" alt="" class="mockup-frame">
     — or —
     <div class="mockup-frame"><img src="phone.png" alt=""></div>
*/
.mockup-frame,
.mockup-frame > img {
  max-width: 100%;
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  display: block;
}
.mockup-frame > img { width: 100%; height: auto; }

@media (max-width: 640px) {
  .mockup-stack { width: 280px; height: 440px; }
  .mockup-stack img { width: 220px; }
}

/* ---------- Scroll reveal ----------
   Progressive-enhancement entrance for sections, feature rows,
   product cards, etc. Add `.reveal` to any element; JS toggles
   `.is-visible` when it enters the viewport.

   Required JS (drop once per page, before </body>):

     document.documentElement.classList.add('js');
     const io = new IntersectionObserver((entries) => {
       entries.forEach(e => {
         if (e.isIntersecting) {
           e.target.classList.add('is-visible');
           io.unobserve(e.target);
         }
       });
     }, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
     document.querySelectorAll('.reveal').forEach(el => io.observe(el));

   Reduced-motion users get the final state immediately (no
   opacity/transform in the @media no-preference block below). */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
    will-change: opacity, transform;
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Mockup stack gets a split entrance — front slides in from
     the left, back from the right with a slight delay. */
  html.js .mockup-stack .mockup-front {
    opacity: 0;
    transform: translateX(-40px) rotate(-4deg);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  html.js .mockup-stack .mockup-back {
    opacity: 0;
    transform: translateX(40px) rotate(6deg);
    transition: opacity var(--dur-slow) var(--ease-out) 0.2s,
                transform var(--dur-slow) var(--ease-out) 0.2s;
  }
  html.js .mockup-stack.is-visible .mockup-front,
  html.js .reveal.is-visible .mockup-stack .mockup-front {
    opacity: 1;
    transform: none;
  }
  html.js .mockup-stack.is-visible .mockup-back,
  html.js .reveal.is-visible .mockup-stack .mockup-back {
    opacity: 1;
    transform: rotate(2deg);
  }

  /* Single images inside a revealing feature row */
  html.js .feature-row.reveal .feature-visual > img,
  html.js .feature-row.reveal .mockup-single > img {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    transition: opacity var(--dur-slow) var(--ease-out) 0.15s,
                transform var(--dur-slow) var(--ease-out) 0.15s;
  }
  html.js .feature-row.reveal.is-visible .feature-visual > img,
  html.js .feature-row.reveal.is-visible .mockup-single > img {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); color: var(--fg-subtle); }
.crumbs a { color: var(--fg-muted); transition: color var(--dur-base); }
.crumbs a:hover { color: var(--product-accent); }
.crumbs .sep { color: var(--fg-quiet); }

/* ---------- Empty state ---------- */
.empty {
  text-align: center;
  padding: var(--sp-15) var(--sp-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--tint-03);
}
.empty h3 { margin-bottom: var(--sp-2); }
.empty p { color: var(--fg-muted); margin-bottom: var(--sp-6); max-width: 36ch; margin-left: auto; margin-right: auto; }

/* ---------- Steps (numbered) ----------
   Numbered process steps — section wrapper, grid, and step.
   The number badge reskins per product via --product-grad.

   Usage:
     <section class="steps-section">
       <h2>How it works</h2>
       <div class="steps-grid">
         <div class="step">
           <div class="step-number">1</div>
           <h3>Step name</h3>
           <p>Short description.</p>
         </div>
       </div>
     </section> */
.steps-section { text-align: center; }
.steps-section > h2 { margin-bottom: var(--sp-12); }

.steps-grid {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-10);
}
.step { text-align: center; }
.step h3 { margin-bottom: var(--sp-2); }
.step p { color: var(--fg-muted); font-size: var(--fs-15); }
.step .step-number { margin-bottom: var(--sp-4); }

.step-number {
  width: 48px; height: 48px;
  background: var(--product-grad);
  color: var(--fg-on-brand);
  border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
}
[data-product="bajanbuddy"] .step-number {
  background: var(--product-accent);
}

/* 4-column variant. Collapses to 2 columns on tablet, 1 on mobile.
   Use when you have 4 parallel steps (not a progression). */
.steps-grid.steps-4 { grid-template-columns: repeat(4, 1fr); }

/* Connecting line variant — dashed line stitches the .step-number
   bubbles together horizontally. Adds sequence reading to a
   stepped flow. Hidden below 768px where the grid stacks. */
.steps-grid.steps-connected { position: relative; }
.steps-grid.steps-connected::before {
  content: "";
  position: absolute;
  top: 24px; /* half of step-number height */
  left: calc(100% / 8);  /* center of first column */
  right: calc(100% / 8); /* center of last column */
  border-top: 2px dashed var(--border-subtle);
  z-index: 0;
  pointer-events: none;
}
.steps-grid.steps-connected .step { position: relative; z-index: 1; }
.steps-grid.steps-connected .step-number { position: relative; }

@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .steps-grid.steps-4 { grid-template-columns: repeat(2, 1fr); }
  .steps-grid.steps-connected::before { display: none; }
}
@media (max-width: 540px) {
  .steps-grid.steps-4 { grid-template-columns: 1fr; }
}

/* ---------- Problem section ----------
   Centered section intro + 3-up card grid. Each card gets the
   conic border sweep on hover via .card-sweep.

   Usage:
     <section class="problem-section">
       <h2>The gap we're closing</h2>
       <p class="subhead">One line of context.</p>
       <div class="problem-grid">
         <article class="problem-card card-sweep">
           <div class="problem-icon">…</div>
           <h3>Title</h3>
           <p>One sentence.</p>
         </article>
       </div>
     </section> */
.problem-section { text-align: center; }
.problem-section > h2 { margin-bottom: var(--sp-3); }
.problem-section > .subhead {
  max-width: 52ch;
  margin: 0 auto;
}
.problem-grid {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  text-align: left;
}
/* .card-compact (.card-problem is a deprecated alias) — modifier on .card. */
.card-compact,
.card-problem {
  padding: var(--sp-8) var(--sp-6);
  border-color: var(--border-subtle);
  border-radius: var(--r-md);
}
.card-compact h3,
.card-problem h3 { margin-bottom: var(--sp-2); }
.card-compact p,
.card-problem p { color: var(--fg-muted); font-size: var(--fs-15); }

.section-alt .card-compact,
.section-alt .card-problem {
  background: var(--bg-surface-1);
  border-color: var(--border-default);
}

@media (max-width: 768px) {
  .problem-grid { grid-template-columns: 1fr; }
}

/* ---------- Quote block ----------
   Pull-quote / testimonial. Centered, constrained width. The optional
   .insight-note follows for a reflection/callback after the quote.

   Usage:
     <section class="quote-block">
       <blockquote class="quote">"…"</blockquote>
       <cite class="quote-attr">— Name, Role</cite>
       <p class="insight-note">Optional follow-up line.</p>
     </section> */
.quote-block { text-align: center; padding-left: var(--container-pad); padding-right: var(--container-pad); }
.quote-block .quote {
  max-width: 52ch;
  margin: 0 auto;
  font-size: var(--fs-22);
  font-style: italic;
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
  quotes: "\201C" "\201D";
}
.quote-block .quote-attr {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-15);
  font-style: normal;
  color: var(--fg-subtle);
}
.quote-block .insight-note {
  max-width: 48ch;
  margin: var(--sp-8) auto 0;
  font-size: var(--fs-18);
  color: var(--fg-body);
  line-height: var(--lh-relaxed);
}

/* ---------- Dropdown menu ----------
   Hover-reveal nav menu. Trigger is .menu-trigger; panel is
   .menu-panel with an 8px "hover bridge" gap so the cursor can
   travel from trigger to panel without the menu closing.

   Usage:
     <div class="menu-dropdown">
       <button class="menu-trigger" aria-haspopup="true">
         EN <span aria-hidden="true">▾</span>
       </button>
       <div class="menu-panel" role="menu">
         <a href="/en/" role="menuitem">English</a>
         <a href="/es/" role="menuitem">Español</a>
       </div>
     </div> */
.menu-dropdown { position: relative; display: inline-block; }
.menu-dropdown .menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-14);
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.menu-dropdown:hover .menu-trigger,
.menu-dropdown:focus-within .menu-trigger { color: var(--product-accent); }

.menu-dropdown .menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  padding-top: var(--sp-2); /* hover bridge */
  z-index: var(--z-sticky, 100);
}
.menu-dropdown:hover .menu-panel,
.menu-dropdown:focus-within .menu-panel { display: block; }

.menu-dropdown .menu-panel > a,
.menu-dropdown .menu-panel > [role="menuitem"] {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-14);
  color: var(--fg-muted);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.menu-dropdown .menu-panel > a:hover,
.menu-dropdown .menu-panel > [role="menuitem"]:hover {
  background: var(--product-tint);
  color: var(--product-accent);
}

/* ---------- Category cards ----------
   2-up grid of topical cards, each with an icon, heading, short
   copy, and a list of feature sub-links. Topical background tints
   are page-local decoration — pages add their own .cat-<name> class.

   Usage:
     <section class="category-section">
       <div class="category-grid">
         <article class="category-card cat-finance card-sweep">
           <div class="cat-icon">…</div>
           <h3>Finance</h3>
           <p>One line of pitch.</p>
           <ul>
             <li>Feature A</li>
             <li>Feature B <span class="pill-coming-soon">Coming soon</span></li>
           </ul>
         </article>
       </div>
     </section> */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}
.category-card {
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(145deg, var(--product-tint) 0%, transparent 50%, var(--bg-surface-3) 100%);
}
.category-card h3 {
  font-size: var(--fs-20);
  margin-bottom: var(--sp-2);
}
.category-card > p {
  color: var(--fg-muted);
  font-size: var(--fs-15);
  margin-bottom: var(--sp-4);
}
.category-card ul { list-style: none; padding: 0; margin: 0; }
.category-card ul li {
  padding: var(--sp-1) 0;
  color: var(--fg-body);
  font-size: var(--fs-14);
}
.category-card ul li::before {
  content: "→  ";
  color: var(--product-accent);
  font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
  .category-grid { grid-template-columns: 1fr; }
}

/* ---------- Marquee ----------
   Infinite horizontal-scroll strip. Ambient pattern for logo
   rows, press quotes, product tags. The content is DUPLICATED
   inside `.marquee-track` so the loop joins seamlessly; a
   single copy will snap when it resets.

   Pause-on-hover is on by default. Under prefers-reduced-motion,
   the animation is disabled entirely (the strip sits static,
   showing only the first copy).

   Usage:
     <div class="marquee">
       <div class="marquee-track">
         <div class="marquee-item">Logo 1</div>
         <div class="marquee-item">Logo 2</div>
         <div class="marquee-item">Logo 3</div>
         <!-- duplicate the items so the loop is seamless -->
         <div class="marquee-item" aria-hidden="true">Logo 1</div>
         <div class="marquee-item" aria-hidden="true">Logo 2</div>
         <div class="marquee-item" aria-hidden="true">Logo 3</div>
       </div>
     </div>

   Set speed via the --marquee-duration custom property on the
   .marquee element. Default is 40s — longer = slower. */
.marquee {
  --marquee-duration: 40s;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--sp-12),
    #000 calc(100% - var(--sp-12)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--sp-12),
    #000 calc(100% - var(--sp-12)),
    transparent 100%
  );
}
.marquee-track {
  display: flex;
  gap: var(--sp-10);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg-muted);
  font-size: var(--fs-15);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  /* -50% because we duplicate the content inside .marquee-track,
     so one full pass scrolls us to the start of the second copy. */
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Pricing cards ----------
   Multi-tier pricing layout. Two to four cards side-by-side. When
   more than one card exists, add `.featured` to the preferred tier
   to highlight it with a gradient border + elevation.

   A single card doesn't need the grid — use a plain .card.
   This pattern is for comparison.

   Structure:
     <div class="pricing-cards">
       <article class="pricing-card">
         <div class="pricing-tier">Starter</div>
         <div class="pricing-price">
           <span class="pricing-amount">$0</span>
           <span class="pricing-period">/mo</span>
         </div>
         <p class="pricing-tagline">For trying things out</p>
         <ul class="feature-list"> … </ul>
         <a class="btn btn-outline">Get started</a>
       </article>
       <article class="pricing-card featured">…</article>
       <article class="pricing-card">…</article>
     </div>

   The `.pricing-toggle` below is a visual monthly/yearly switch —
   page owns the state binding. */
.pricing-grid,
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
  margin-top: var(--sp-10);
}
.pricing-grid:has(:only-child),
.pricing-cards:has(:only-child) {
  max-width: 440px;
  margin-inline: auto;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.pricing-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

/* Featured tier — gradient border via conic sweep + sits 8px
   higher than its neighbors so it reads as "this one." The
   .featured-badge is an optional floating label at the top. */
.pricing-card.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-surface-3), var(--bg-surface-3)) padding-box,
    var(--product-grad) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-glow);
  transform: translateY(-8px);
}
.pricing-card.featured:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}
.pricing-card .featured-badge {
  position: absolute;
  top: calc(var(--sp-3) * -1);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-1) var(--sp-3);
  background: var(--product-grad);
  color: var(--fg-on-brand);
  border-radius: var(--r-full);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pricing-tier {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}
.pricing-period {
  font-size: var(--fs-15);
  color: var(--fg-muted);
}
.pricing-tagline {
  color: var(--fg-muted);
  font-size: var(--fs-15);
  margin: 0;
}
.pricing-card .feature-list { flex-grow: 1; }
.pricing-card .badge { align-self: center; }
.pricing-card .btn { width: 100%; justify-content: center; }

/* ---------- Pricing toggle ----------
   Visual monthly/yearly switch. Page owns the state — you toggle
   [data-active="monthly"] / [data-active="yearly"] on this element
   and the pill slides. Both labels stay clickable.

   Structure:
     <div class="pricing-toggle" data-active="monthly">
       <button type="button" data-value="monthly">Monthly</button>
       <button type="button" data-value="yearly">Yearly <span class="pill-coming-soon">-20%</span></button>
     </div> */
.pricing-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  position: relative;
}
.pricing-toggle button {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: var(--sp-2) var(--sp-5);
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-family: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border-radius: var(--r-full);
  transition: color var(--dur-base) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.pricing-toggle button:hover { color: var(--fg-primary); }
.pricing-toggle[data-active="monthly"] button[data-value="monthly"],
.pricing-toggle[data-active="yearly"] button[data-value="yearly"] {
  color: var(--fg-on-brand);
}
/* Sliding highlight — the pill that sits behind the active label. */
.pricing-toggle::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--product-grad);
  border-radius: var(--r-full);
  transition: transform var(--dur-base) var(--ease-standard);
  z-index: 0;
}
.pricing-toggle[data-active="yearly"]::before {
  transform: translateX(100%);
}

@media (max-width: 768px) {
  .pricing-grid,
  .pricing-cards { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
  .pricing-card.featured:hover { transform: translateY(-2px); }
}

/* ---------- Coming-soon pill ----------
   Small status pill for "not yet" features. Uses the product accent
   tint so it reskins per product. */
.pill-coming-soon {
  display: inline-block;
  padding: 1px var(--sp-2);
  background: var(--product-tint);
  color: var(--product-accent);
  border-radius: var(--r-full);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: var(--sp-1);
}