/* Braintrust sample deck — 16:9, 1280×720.
   Visual language: Eames/Kelly midcentury — big petal marks, flat color
   blocks, geometric accents, Poppins Black headlines.
   NO black backgrounds. NO opacity/transparency on decorative shapes.
   Decorative shapes are REAL child elements (not ::before/::after) so
   they capture reliably in screenshot/PPTX pipelines. */
@import url('../colors_and_type.css?v=3');

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--ink-900); background: var(--bg-2); }

deck-stage { background: var(--bg-2); }
deck-stage section {
  width: 1280px; height: 720px;
  position: relative; overflow: hidden;
  background: white;
  display: flex;
}

/* Section-level text color rules — high specificity to beat the global
   `h1 { color: var(--fg-1) }` from colors_and_type.css. */
deck-stage section.s-title,
deck-stage section.s-stat { color: #fff; }
deck-stage section.s-title h1,
deck-stage section.s-title .sub,
deck-stage section.s-stat .label,
deck-stage section.s-stat .context { color: inherit; }

deck-stage section.s-section,
deck-stage section.s-quote,
deck-stage section.s-content,
deck-stage section.s-data,
deck-stage section.s-closing { color: var(--ink-900); }
deck-stage section.s-section h1,
deck-stage section.s-quote blockquote,
deck-stage section.s-content h2,
deck-stage section.s-content .pillar-list li,
deck-stage section.s-data h2,
deck-stage section.s-closing h1 { color: var(--ink-900); }

/* Shared ------------------------------------------------------- */
/* Real wordmark lockup. Black by default; .on-dark swaps to white. */
.slide-logo {
  position: absolute; top: 36px; left: 48px;
  z-index: 10; display: block;
}
.slide-logo img { height: 28px; display: block; }

.slide-pagination {
  position: absolute; bottom: 32px; right: 48px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--fg-2); z-index: 10;
}
.slide-pagination.on-dark { color: rgba(255,255,255,0.6); }

.eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 16px;
}

/* Shared decorative-shape primitives. All SOLID, all real DOM elements. */
.shape { position: absolute; display: block; }
.shape.circle { border-radius: 50%; }
.shape.quarter-tr { border-radius: 0 0 0 100%; } /* corner in top-right */
.shape.quarter-tl { border-radius: 0 0 100% 0; }
.shape.quarter-br { border-radius: 100% 0 0 0; }
.shape.quarter-bl { border-radius: 0 100% 0 0; }
.shape.bg-pink { background: var(--bt-pink); }
.shape.bg-blue { background: var(--bt-blue); }
.shape.bg-green { background: var(--bt-green); }
.shape.bg-cyan  { background: var(--bt-cyan); }
.shape.bg-yellow{ background: var(--bt-yellow); }

/* Upward triangle made via CSS borders. Set size via --size (triangle
   height, half-width); set color via --color. */
.shape.triangle-up {
  width: 0; height: 0;
  border-left: calc(var(--size, 90px) * 0.64) solid transparent;
  border-right: calc(var(--size, 90px) * 0.64) solid transparent;
  border-bottom: var(--size, 140px) solid var(--color, var(--bt-blue));
}

/* ---------- 1. Title slide (dark blue, yellow petal mark) ---------- */
/* Composition: wordmark top-left, eyebrow+headline+sub anchored bottom-left,
   a single yellow sunburst mark anchored right as the slide's visual anchor. */
.s-title { background: var(--bt-blue); padding: 80px 96px;
  flex-direction: column; justify-content: flex-end;
}
/* Plain spark anchored to the BOTTOM-RIGHT of the slide.
   Text (h1 max-width 640px, padding-left 96px) ends at x≈736 — the spark
   sits well clear of that to x≈880. The bottom edge sits flush with the
   slide bottom, giving the slide a single grounded visual anchor. */
.s-title .cover-spark {
  position: absolute; right: 40px; bottom: 0;
  width: 360px; height: auto; z-index: 1;
  pointer-events: none;
}
/* On this slide only, lift the page counter to the top-right so it
   doesn't sit on top of the yellow spark. */
.s-title .slide-pagination { bottom: auto; top: 44px; }
.s-title .slide-logo { z-index: 3; }
.s-title .eyebrow { color: var(--bt-yellow); position: relative; z-index: 3; }
.s-title h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 84px; line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 24px; max-width: 640px; text-wrap: balance;
  position: relative; z-index: 3;
}
.s-title .sub {
  font-size: 22px; max-width: 560px; line-height: 1.4;
  position: relative; z-index: 3;
}

/* ---------- 2. Section divider (light, typographic) ---------- */
/* Switched from bold yellow to a light plate — the oversized section
   numeral is the visual anchor; a single blue circle sits behind the
   numeral and a small green square+cyan accent sit in the bottom-right
   to provide composition weight without overwhelming the type. */
.s-section { background: var(--bg-2); padding: 80px 96px;
  flex-direction: column; justify-content: center;
}
/* Oversized numeral, top-right, in brand blue.
   A single yellow disc sits behind the numeral as visual weight.
   No floating shapes elsewhere. */
/* Yellow disc anchored top-right; the numeral is absolutely centered
   on the disc (same top/right/size/translate as disc center) so "01"
   sits visually in the middle of the circle. Disc top:60 right:60
   size 320 → disc center = (right 60 + 160, top 60 + 160) = 220px in
   from right, 220px from top. */
.s-section .sec-halo {
  width: 320px; height: 320px;
  top: 60px; right: 60px; z-index: 1;
}
.s-section .sec-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 200px; line-height: 1; letter-spacing: -0.04em;
  color: var(--bt-blue); position: absolute;
  top: 220px; right: 220px;
  /* Perfectly geometric-centered on the disc. */
  transform: translate(50%, -50%);
  z-index: 2;
}
.s-section .eyebrow { color: var(--fg-2); }
.s-section h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 88px; line-height: 0.95; letter-spacing: -0.03em;
  margin: 0; max-width: 820px; text-wrap: balance;
  position: relative; z-index: 2;
}
/* baseline accent bar — full bleed, brand blue, 12px tall */
.s-section .baseline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: var(--bt-blue); z-index: 2;
}
/* legacy shape hooks — hidden on section slide now */
.s-section .pink-circle,
.s-section .blue-triangle,
.s-section .green-corner { display: none; }

/* ---------- 3. Big stat (blue bg, huge number + student portrait) ---------- */
.s-stat { background: var(--bt-blue); padding: 80px 96px;
  flex-direction: column; justify-content: center; align-items: flex-start;
}
.s-stat .eyebrow { color: var(--bt-yellow); }
.s-stat .big {
  font-family: var(--font-display); font-weight: 900;
  font-size: 320px; line-height: 0.85; letter-spacing: -0.06em;
  color: var(--bt-yellow); margin: 0;
  position: relative; z-index: 3;
}
.s-stat .label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1.2; margin-top: 16px; max-width: 640px;
  position: relative; z-index: 3;
}
.s-stat .context {
  font-size: 16px; margin-top: 16px; max-width: 500px; line-height: 1.5;
  position: relative; z-index: 3;
  color: rgba(255,255,255,0.85);
}
/* Student portrait with baked-in spark halo, anchored right. */
.s-stat .stat-student {
  position: absolute; right: 40px; top: 50%;
  transform: translateY(-50%);
  height: 620px; width: auto;
  z-index: 2;
}
/* legacy shape hooks — hidden on big-stat now */
.s-stat .halo,
.s-stat .petal-mark { display: none; }

/* ---------- 4. Quote (off-white bg w/ SOLID color shapes) ---------- */
.s-quote { background: var(--bg-2); padding: 96px;
  flex-direction: column; justify-content: center;
  color: var(--ink-900);
}
.s-quote .pink-arc {
  left: -220px; top: -220px;
  width: 420px; height: 420px;
  z-index: 1;
}
.s-quote .cyan-arc {
  right: -140px; bottom: -140px;
  width: 340px; height: 340px;
  z-index: 1;
}
.s-quote .quote-mark {
  font-family: var(--font-display); font-weight: 900; font-size: 140px;
  color: var(--bt-blue); line-height: 0.8; margin-bottom: -20px;
  position: relative; z-index: 2;
}
.s-quote blockquote {
  font-family: var(--font-display); font-weight: 900;
  font-size: 56px; line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 32px; max-width: 1000px; text-wrap: balance;
  position: relative; z-index: 2;
}
.s-quote blockquote em { font-style: normal; color: var(--bt-blue); }
.s-quote .attrib {
  display: flex; align-items: center; gap: 16px;
  position: relative; z-index: 2;
}
.s-quote .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.s-quote .who { font-weight: 700; font-size: 16px; }
.s-quote .role { font-size: 14px; color: var(--fg-2); }

/* ---------- 5. Content: 2-col with image ---------- */
.s-content { background: white; padding: 96px;
  flex-direction: row; gap: 48px; align-items: center;
  color: var(--ink-900);
}
.s-content .left { flex: 1; position: relative; z-index: 2; }
.s-content .right { flex: 1; position: relative; z-index: 2; }
.s-content h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 56px; line-height: 1.0; letter-spacing: -0.025em;
  margin: 0 0 20px; text-wrap: balance;
}
.s-content h2 em { font-style: normal; color: var(--bt-blue); }
.s-content .pillar-list { list-style: none; padding: 0; margin: 24px 0 0; }
.s-content .pillar-list li {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--border-1);
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--ink-900);
}
.s-content .pillar-list li:last-child { border-bottom: none; }
.s-content .pillar-list .dot {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 14px;
  color: white;
}
.s-content .img-frame {
  width: 100%; aspect-ratio: 1; border-radius: 32px;
  overflow: hidden; position: relative; background: var(--bt-yellow);
  display: flex; align-items: flex-end; justify-content: center;
}
.s-content .img-frame img { width: 90%; display: block; position: relative; z-index: 2; }
.s-content .img-frame .pink-dot {
  top: 10%; right: 10%; width: 80px; height: 80px;
  z-index: 1;
}

/* ---------- 6. Data split (3 stats) ---------- */
.s-data { background: white; padding: 80px 96px; flex-direction: column; color: var(--ink-900); }
.s-data h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 48px; line-height: 1; letter-spacing: -0.025em;
  margin: 0 0 48px; max-width: 900px; text-wrap: balance;
}
.s-data .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: end; flex: 1; }
.s-data .stat .prepost {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--fg-2); margin-bottom: 8px;
}
.s-data .stat .prepost span { color: var(--bt-blue); font-weight: 900; margin: 0 4px; }
.s-data .stat .n {
  font-family: var(--font-display); font-weight: 900;
  font-size: 120px; line-height: 1; letter-spacing: -0.04em;
}
.s-data .stat.c-blue .n { color: var(--bt-blue); }
.s-data .stat.c-pink .n { color: var(--bt-pink); }
.s-data .stat.c-green .n { color: var(--bt-green); }
.s-data .stat .descr {
  font-size: 14px; color: var(--fg-2); line-height: 1.4;
  margin-top: 12px;
}
.s-data .stat .descr strong { color: var(--ink-900); display: block; font-size: 15px; }

/* ---------- 7. Closing (LIGHT bg, symmetric shapes) ---------- */
.s-closing { background: var(--bg-2); padding: 96px;
  flex-direction: column; justify-content: center;
}
.s-closing .blue-corner {
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  z-index: 1;
}
.s-closing .green-corner {
  bottom: -100px; left: -100px;
  width: 280px; height: 280px;
  z-index: 1;
}
.s-closing h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 80px; line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 32px; max-width: 900px; position: relative; z-index: 3;
}
.s-closing h1 em { font-style: normal; color: var(--bt-blue); }
.s-closing .email {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--bt-blue); position: relative; z-index: 3;
}
.s-closing .url {
  font-size: 16px; color: var(--fg-2); margin-top: 8px;
  position: relative; z-index: 3;
}