/* ═══════════════════════════════════════════════════════════════
   PRAANA — TAB 2 · WHAT WE BUILD
   Every colour is a token. Every custom class is prefixed `b-`.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. utility ───────────────────────────────────────────────── */
.b-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 1. pane head ─────────────────────────────────────────────── */
.b-head {
  padding: clamp(3.2rem, 8vh, 6rem) 0 clamp(2rem, 5vh, 3.4rem);
  background:
    radial-gradient(120% 100% at 12% 0%, var(--paper) 0%, var(--paper) 52%, var(--paper-2) 100%);
  border-bottom: 1px solid var(--rule);
}

.b-title {
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.042em;
  margin: 1.05rem 0 0;
  max-width: 20ch;
}
.b-title .b-title-b {
  display: block;
  color: var(--ink-3);
}

.b-lede {
  margin-top: 1.35rem;
  max-width: 58ch;
}

.b-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.7rem;
}
.b-chips .chip {
  background: var(--card-tint);
  color: var(--ink-3);
}
.b-chips .chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
  flex: none;
}

/* ── 2. the roll · pinned cross-fade ──────────────────────────────
   The engine owns .roll-pin / .roll-grid / .roll-slides. Everything
   here only tightens the tab-local fit so a single slide is always
   fully on screen at 1440×900 and at 1280×720.
   ─────────────────────────────────────────────────────────────── */
.b-rollsec {
  padding: clamp(1.5rem, 4vh, 3rem) 0 0;
  background: var(--paper);
}

#buildRoll .roll-rail i { background: var(--rule-2); }
#buildRoll .roll-rail i.on { background: var(--accent); }

/* the copy never scrolls, so it is budgeted rather than trimmed */
#buildRoll .rs { max-width: 44ch; }
#buildRoll .rs p { text-wrap: pretty; }
#buildRoll .rs em { font-style: italic; color: var(--ink); }

/* a quoted brief inside a slide */
.b-quote {
  font-family: var(--mono);
  font-size: .88em;
  color: var(--accent);
  letter-spacing: -.01em;
}

/* short viewports: the pinned unit must never need to scroll */
@media (max-height: 780px) and (min-width: 1081px) {
  #buildRoll .rs h3 { margin-bottom: .55rem; }
  #buildRoll .rs-meta { margin-top: .9rem; }
  #buildRoll .rs-stat { margin-top: .9rem; }
}

/* ── 3. why this shape ────────────────────────────────────────── */
.b-h2 {
  font-size: var(--t-h2);
  margin: .9rem 0 0;
  max-width: 22ch;
}

.b-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin-top: clamp(2rem, 4vh, 3rem);
}

.b-why-card {
  position: relative;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease-out);
}
.b-why-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.b-why-n {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  margin-bottom: .95rem;
}

.b-why-card h3 {
  font-size: 1.14rem;
  letter-spacing: -.028em;
  margin-bottom: .55rem;
}
.b-why-card p {
  font-size: .955rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ── 4. what ships today · one credibility marker ─────────────── */
.b-ship { border-top: 1px solid var(--rule); }

.b-ev {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
  padding: 1rem 1.5rem 1.05rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.b-ev b {
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.b-ev span {
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--ink-3);
  max-width: 18ch;
  text-wrap: pretty;
}

.b-ship-p {
  margin-top: 1.4rem;
  max-width: 52ch;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-2);
}

.b-fine { margin-top: .9rem; max-width: 62ch; }

.b-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}

/* ── proof + price, side by side ─────────────────────────────── */
.b-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.b-proof-col { min-width: 0; }

/* ── 5. responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .b-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-why-card:last-child { grid-column: 1 / -1; }
  #buildRoll .rs { max-width: none; }
}

@media (max-width: 860px) {
  .b-proof-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 720px) {
  .b-title { max-width: 100%; }
  .b-why-grid { grid-template-columns: 1fr; }
  .b-why-card:last-child { grid-column: auto; }
  .b-ev { display: flex; width: 100%; }
  .b-cta .btn { flex: 1 1 100%; justify-content: center; }
}