/* ============================================================
   Svara components — translated from /home/ubuntu/svara/design.md
   Plus-marks · Pillar card · Stat strip · Spec table ·
   Path card · Pastel aura · Grain overlay · Brand mark
   ============================================================ */

/* ---------- Card primitive ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  padding: 24px;
  border-radius: 6px;
}

/* ---------- Plus-marks (corner crosshairs) ---------- */
.plus {
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  background: var(--plus);
}
.plus::before { left: 5px; top: 0; width: 1px; height: 11px; }
.plus::after  { top: 5px; left: 0; width: 11px; height: 1px; }
.plus.tl { top: -6px; left: -6px; }
.plus.tr { top: -6px; right: -6px; }
.plus.bl { bottom: -6px; left: -6px; }
.plus.br { bottom: -6px; right: -6px; }

/* ---------- Pillar card ---------- */
.pillar {
  --pillar-tint: transparent;
  background:
    linear-gradient(180deg, var(--pillar-tint) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 24px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pillar:hover {
  transform: translateY(-2px);
  border-color: var(--muted);
  box-shadow: 0 12px 32px -20px rgba(10,10,30,0.18);
}
.pillar .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pillar h4 {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.pillar p {
  font-size: 14.5px;
  color: var(--copy);
  line-height: 1.55;
  flex: 1;
}
.pillar .pillar-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--accent);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum", "ss01";
  margin-top: 6px;
}

.pillar.lavender { --pillar-tint: rgba(229,222,246,0.5); }
.pillar.peach    { --pillar-tint: rgba(250,226,205,0.5); }
.pillar.mint     { --pillar-tint: rgba(213,239,224,0.5); }
.pillar.sky      { --pillar-tint: rgba(216,232,245,0.5); }
.pillar.blush    { --pillar-tint: rgba(245,222,220,0.5); }

/* ---------- Path card (CTA / wide card) ---------- */
.path-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
  position: relative;
  transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s;
}
.path-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 36px -22px rgba(42,107,181,0.32);
}

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.stat-cell {
  padding: 24px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
  position: relative;
  transition: background 0.2s ease;
}
.stat-cell:last-child { border-right: none; }
.stat-cell:hover { background: var(--accent-08); }
.stat-cell .stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat-cell .stat-value {
  font-size: 38px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1;
  font-feature-settings: "tnum", "ss01";
  margin-top: 4px;
}
.stat-cell .stat-value .suffix {
  color: var(--accent);
  font-weight: 700;
}
.stat-cell .stat-sub {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
}

/* 4-cell variant */
.stat-strip.cells-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Spec table ---------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
}
.spec-table th {
  background: var(--ink);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.spec-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.spec-table tr:last-child td { border-bottom: none; }
.spec-table tr:nth-child(2n) td { background: var(--stripe); }
.spec-table .key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.spec-table b {
  background: linear-gradient(transparent 70%, var(--accent-soft) 70%);
  padding: 0 1px;
}

/* Compact spec table (slide-friendly) */
.spec-table.compact td { padding: 10px 14px; font-size: 13.5px; }
.spec-table.compact th { padding: 10px 14px; font-size: 11px; }

/* ---------- Tag chip / inline badge ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--accent-soft);
  background: var(--accent-08);
  color: var(--accent-ink);
  letter-spacing: 0.02em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.badge.accent {
  border-color: var(--accent-soft);
  background: var(--accent-08);
  color: var(--accent-ink);
}

/* ---------- Bullets (proposal-style + prefix) ---------- */
.bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bullets li {
  font-size: 16px;
  color: var(--copy);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.bullets li::before {
  content: "+";
  position: absolute;
  left: 0; top: 0;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-weight: 600;
}
.bullets b { color: var(--ink); }

/* ---------- Pastel aura (decoration) ---------- */
.aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aura svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(80px);
  opacity: 0.85;
}

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}

/* ---------- 96px grid background (for hero/title slides) ---------- */
.grid-bg {
  background:
    linear-gradient(to right,  var(--grid) 1px, transparent 1px) 0 0 / 96px 100%,
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 100% 96px,
    var(--bg);
}

/* ---------- Hero / Title slide ---------- */
.hero-slide {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-slide .hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1100px;
}
.hero-slide h1 {
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.hero-slide .subhead {
  font-size: 22px;
  color: var(--copy);
  max-width: 720px;
  line-height: 1.45;
}
.hero-slide .hero-meta {
  display: flex;
  gap: 24px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.hero-slide .hero-meta .sep {
  width: 1px;
  height: 12px;
  background: var(--line);
}

/* ---------- Section thesis (typographic moment) ---------- */
.reveal .thesis {
  font-size: clamp(36px, 3.8vw, 60px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.14;
  max-width: 26ch;
}
.reveal .thesis em {
  color: var(--accent);
  font-style: normal;
  background: linear-gradient(transparent 65%, var(--accent-soft) 65%);
  padding: 0 4px;
}

/* ---------- Logo strip ---------- */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.logo-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
  line-height: 1.3;
}

/* ---------- Use case grid ---------- */
.use-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.use-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 4px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.use-cell:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.use-cell .use-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.use-cell h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.use-cell p {
  font-size: 13.5px;
  color: var(--copy);
  line-height: 1.5;
}

/* ---------- Timeline (4 release cycles) ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 32px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.tl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.tl-card .tl-num {
  width: 22px; height: 22px;
  background: var(--accent);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  letter-spacing: 0;
}
.tl-card .tl-months {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-feature-settings: "tnum", "ss01";
}
.tl-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.tl-card p {
  font-size: 12.5px;
  color: var(--copy);
  line-height: 1.5;
}

/* ---------- Bio card (team) ---------- */
.bio-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  box-shadow: var(--shadow-soft);
}
.bio-card .bio-mark {
  width: 44px; height: 44px;
  background: var(--accent-08);
  border: 1px solid var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bio-card h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.bio-card .bio-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bio-card p {
  font-size: 14px;
  color: var(--copy);
  line-height: 1.55;
}

/* ---------- Number callout (financials) ---------- */
.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.callout .callout-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.callout .callout-value {
  font-size: 56px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum", "ss01";
}
.callout .callout-value .unit {
  font-size: 32px;
  color: var(--accent);
  margin-left: 4px;
}
.callout .callout-sub {
  font-size: 14px;
  color: var(--muted);
}

/* Smaller callout variant */
.callout.compact { padding: 18px 22px; }
.callout.compact .callout-value { font-size: 32px; }
.callout.compact .callout-value .unit { font-size: 18px; }

/* ---------- Section title pattern ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.section-head h2 {
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.section-head .lede {
  font-size: 17px;
  color: var(--copy);
  max-width: 70ch;
  line-height: 1.5;
}

/* ---------- Quote / pull-quote ---------- */
.pull-quote {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.015em;
  border-left: 2px solid var(--accent);
  padding-left: 20px;
  max-width: 60ch;
}
.pull-quote cite {
  display: block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
}