/* ============================================================
   THE AI-NATIVE AGENCY — Masterclass Deck
   Atherial design system: cream base, dark inversions,
   diagonal texture, lime accent, orange-red for constraints.
   Fixed 1920x1080 canvas, scaled to fit viewport (stage.js).
   ============================================================ */

:root {
  --cream: #FEFFFA;
  --dark: #1F1F1F;
  --lime: #85ff0a;
  --orange: #E73B0A;
  --border-dark: #1F1F1F;
  --border-light: #e0e0d8;

  /* design system v2 secondaries — all desaturated so lime keeps its monopoly on brightness */
  --pine: #143A1E;
  --moss: #1E4D2B;
  --slate: #8E97B8;
  --clay: #C4643F;
  --bone: #E8E4D6;
  --pale: #FAFFEB;
  --muted: #6F6F69;
  --dmuted: #9A9A94;
  --mono: 'Geist Mono', 'Courier New', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --slide-w: 1920px;
  --slide-h: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
  font-family: var(--sans);
}

/* ---------- viewport / scaling rig ---------- */

#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}

#stage {
  position: relative;
  width: var(--slide-w);
  height: var(--slide-h);
  flex-shrink: 0;
  transform-origin: center center;
}

/* ---------- slides ---------- */

.slide {
  position: absolute;
  inset: 0;
  width: var(--slide-w);
  height: var(--slide-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 260ms cubic-bezier(.4,0,.2,1), transform 260ms cubic-bezier(.4,0,.2,1);
  background: var(--cream);
  color: var(--dark);
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.slide.is-leaving {
  transform: translateY(-14px);
}

/* light (default) vs dark inversion */
.slide--dark {
  background: var(--dark);
  color: var(--cream);
}

/* diagonal texture — slightly more spacing between lines for section dividers / covers */
.slide--stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.05) 5px, rgba(0,0,0,0.05) 7px);
}
.slide--dark.slide--stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.06) 5px, rgba(255,255,255,0.06) 7px);
}

/* accent bar — the brand's gradient column (lime -> cream), never a full-background wash.
   Use sparingly: cover slides, section dividers, occasional light-content slides. */
.accent-bar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 144px;
  background-image: linear-gradient(to bottom, #85ff0a 0%, #faffeb 100%);
  border-left: 1px solid var(--dark);
  z-index: 3;
}
.slide--dark .accent-bar {
  border-left-color: rgba(254,255,250,0.3);
}

/* ---------- chrome: global progress bar + counter (persist across slides) ---------- */

.chrome-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(0,0,0,0.5);
  z-index: 20;
}
.chrome-progress-fill {
  height: 100%;
  background: var(--lime);
  width: 0%;
  transition: width 220ms ease;
}

.chrome-counter {
  position: absolute;
  right: 40px;
  bottom: 32px;
  z-index: 20;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  background: var(--dark);
  color: var(--cream);
  padding: 8px 14px;
  border: 1px solid rgba(254,255,250,0.15);
}

/* ---------- shared content primitives ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.55;
}
.slide--dark .eyebrow { color: var(--cream); }

.headline {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--dark);
}
.slide--dark .headline { color: var(--cream); }

.body-text {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.45;
  color: var(--dark);
  opacity: 0.85;
}
.slide--dark .body-text { color: var(--cream); }

.mono-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--border-dark);
}
.slide--dark .mono-tag { border-color: rgba(254,255,250,0.3); }
.mono-tag--lime { border-color: var(--lime); background: var(--lime); color: var(--dark); }

.card {
  border: 1px solid var(--border-dark);
  background: transparent;
}
.slide--dark .card { border-color: rgba(254,255,250,0.22); }

.accent-orange { color: var(--orange); }
.accent-lime-fill { background: var(--lime); color: var(--dark); }

/* ============================================================
   TEMPLATE 1 — TITLE
   ============================================================ */

.tpl-title .content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 188px 0 140px;
  z-index: 2;
}
.tpl-title .workshop-label {
  align-self: flex-start;
  margin-bottom: 26px;
  padding: 9px 14px;
  border: 1px solid var(--dark);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--lime);
  color: var(--dark);
}
.tpl-title .kicker {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.6;
  margin-bottom: 28px;
}
.slide--dark .tpl-title .kicker { color: var(--cream); }
.tpl-title .headline {
  font-size: 96px;
  max-width: 1400px;
}
.tpl-title .sub {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400;
  color: var(--dark);
  opacity: 0.75;
  margin-top: 30px;
  max-width: 1200px;
  line-height: 1.35;
}
.slide--dark .tpl-title .sub { color: var(--cream); }

/* ============================================================
   OPENING SEQUENCE — OUTCOME / PAINS / BIO / OFFER
   ============================================================ */

.tpl-outcome .content,
.tpl-pains .content,
.tpl-offer .content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 88px 140px 116px;
  z-index: 2;
}

.tpl-outcome .headline,
.tpl-pains .headline,
.tpl-offer .headline {
  margin-top: 22px;
  font-size: 58px;
  line-height: 1.08;
  max-width: 1320px;
}

.outcome-grid {
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: stretch;
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;
}
.outcome-card {
  position: relative;
  border: 1px solid var(--dark);
  min-height: 440px;
  padding: 34px 42px;
  display: flex;
  flex-direction: column;
  transition: background-color 180ms ease, transform 180ms ease;
}
.outcome-card:hover {
  background: rgba(133,255,10,0.08);
  transform: translateY(-5px);
}
.outcome-num,
.pain-num {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--orange);
}
.outcome-label {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.outcome-claim {
  margin-top: 38px;
  font-family: var(--sans);
  font-size: 55px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.outcome-card p {
  margin-top: 28px;
  padding-top: 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.34;
  max-width: 620px;
  opacity: 0.88;
}
.outcome-or {
  align-self: center;
  justify-self: center;
  font-family: var(--mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.45;
}

.pain-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  margin-top: 38px;
}
.pain-card {
  border: 1px solid rgba(231,59,10,0.75);
  padding: 25px 30px 27px;
  display: flex;
  flex-direction: column;
  background: rgba(231,59,10,0.045);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.pain-card:hover {
  background: rgba(231,59,10,0.12);
  border-color: var(--orange);
  transform: translateY(-5px);
}
.pain-card h3 {
  margin-top: 18px;
  font-size: 31px;
  line-height: 1.12;
}
.pain-card p {
  margin-top: 14px;
  padding-top: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--cream);
  opacity: 0.88;
}

.tpl-bio .content {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 610px 1fr;
  gap: 82px;
  padding: 76px 140px 112px;
  z-index: 2;
}
.atherial-brand {
  position: absolute;
  top: 48px;
  right: 140px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.atherial-brand img {
  width: 30px;
  height: 27px;
  display: block;
}
.bio-photo-wrap {
  position: relative;
  border: 1px solid var(--dark);
  overflow: hidden;
}
.bio-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.88) contrast(1.02);
  transition: transform 500ms cubic-bezier(.16,1,.3,1);
}
.bio-photo-wrap:hover img { transform: scale(1.025); }
.bio-photo-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 14px 18px;
  background: var(--dark);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bio-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bio-copy .headline {
  margin-top: 24px;
  font-size: 57px;
  max-width: 900px;
}
.bio-lede {
  margin-top: 25px;
  max-width: 830px;
  font-size: 24px;
  line-height: 1.42;
  opacity: .76;
}
/* three grained proof cards. Wireframe grid: a 1px gap over an ink ground
   so adjacent cards share one hairline instead of doubling to 2px. */
.bio-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 35px;
  background: var(--dark);
  border: 1px solid var(--dark);
}
.bio-proof {
  min-height: 176px;
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bio-proof .bp-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: auto;
}
.bio-proof strong {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--cream);
  text-wrap: balance;
}
.tpl-offer .content {
  justify-content: center;
}
.tpl-offer .headline { max-width: 1150px; }
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.offer-panel {
  display: grid;
  grid-template-rows: 1fr auto;
  border: 1px solid #FEFFFA;
  min-height: 320px;
}
.offer-panel--featured {
  border-color: var(--lime);
}
.offer-copy {
  padding: 32px 34px 24px;
}
.offer-label {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lime);
}
.offer-copy p {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.4;
  opacity: 0.9;
}
.offer-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 34px;
  border-top: 1px solid rgba(254,255,250,.34);
  background: var(--lime);
  color: var(--dark);
  transition: transform 180ms ease;
}
.offer-price--secondary {
  background: rgba(254, 255, 250, 0.08);
  color: var(--cream);
  border-top-color: #FEFFFA;
}
.offer-price:hover { transform: translateY(-4px); }
.price {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.045em;
}
.price-note {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: 0.75;
}
.offer-footer {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.45;
  opacity: .66;
}

/* ============================================================
   TEMPLATE 2 — STATEMENT (single big claim, centered)
   ============================================================ */

.tpl-statement .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 220px;
  z-index: 2;
}
.tpl-statement .eyebrow { margin-bottom: 30px; }
.tpl-statement .headline {
  font-size: 68px;
  line-height: 1.22;
  max-width: 1500px;
}
.tpl-statement .footnote {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.05em;
  opacity: 0.55;
  max-width: 1100px;
}

/* ============================================================
   TEMPLATE 3 — COMPARISON (2-4 column cards)
   ============================================================ */

.tpl-comparison .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 90px 100px 110px;
  z-index: 2;
}
.tpl-comparison .headline {
  font-size: 44px;
  max-width: 1500px;
  margin-bottom: 40px;
}
.tpl-comparison .columns {
  flex: 1;
  display: grid;
  gap: 24px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
}
.tpl-comparison .col {
  border: 1px solid var(--border-dark);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--cream);
  overflow: hidden;
}
.slide--dark .tpl-comparison .col { border-color: rgba(254,255,250,0.22); }
.tpl-comparison .col.is-featured {
  border: 2px solid var(--lime);
  background: #faffeb;
}
.tpl-comparison .col .tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 28px 28px 12px;
}
.tpl-comparison .col.is-featured .tag {
  color: #3b8200;
  opacity: 1;
}
.tpl-comparison .col .col-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 30px;
  margin: 0 28px 20px;
  line-height: 1.2;
}
.tpl-comparison .col .col-body {
  list-style: none;
  margin: 0 28px 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.tpl-comparison .col .col-body li {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.35;
  opacity: 0.9;
  padding-left: 20px;
  position: relative;
}
.tpl-comparison .col .col-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--dark);
  opacity: 0.45;
}
.tpl-comparison .col.is-featured .col-body li::before {
  background: var(--dark);
  opacity: 0.55;
}
.tpl-comparison .col .col-foot {
  margin-top: auto;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--cream);
  background: var(--dark);
}
.tpl-comparison .col.is-featured .col-foot {
  background: var(--lime);
  color: var(--dark);
}
.slide--dark .tpl-comparison .col .col-foot {
  color: var(--cream);
  background: rgba(254, 255, 250, 0.12);
}

/* ============================================================
   TEMPLATE 4 — FRAMEWORK / LIST
   ============================================================ */

.tpl-framework .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 72px 0 100px;
  z-index: 2;
}
.tpl-framework .headline {
  font-size: 48px;
  max-width: 1400px;
  margin-bottom: 34px;
  padding: 0 140px;
}
.tpl-framework .items {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
}
.tpl-framework .item {
  display: grid;
  grid-template-columns: 64px 490px minmax(0, 1fr);
  align-items: center;
  column-gap: 28px;
  padding: 0 140px;
  border-top: 1px solid var(--border-dark);
}
.slide--dark .tpl-framework .item { border-color: rgba(254,255,250,0.18); }
.tpl-framework .item:last-child { border-bottom: 1px solid var(--border-dark); }
.slide--dark .tpl-framework .item:last-child { border-color: rgba(254,255,250,0.18); }
.tpl-framework .item .num {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--dark);
  opacity: 0.4;
  width: 64px;
  flex-shrink: 0;
}
.slide--dark .tpl-framework .item .num { color: var(--cream); }
.tpl-framework .item .item-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 26px;
  width: auto;
  white-space: nowrap;
}
.tpl-framework .item .item-body {
  font-family: var(--sans);
  font-size: 19px;
  opacity: 0.8;
  line-height: 1.4;
}

/* ============================================================
   AGENT HARNESS + BUSINESS-FIRST STRATEGY
   ============================================================ */

.tpl-agent-harness .content {
  flex: 1;
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 56px;
  padding: 76px 72px 104px 120px;
  align-items: center;
}
.agent-copy .headline {
  margin-top: 24px;
  font-size: 51px;
  line-height: 1.1;
}
.agent-copy p {
  margin-top: 34px;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lime);
}
.agent-image {
  border: 1px solid rgba(254,255,250,.35);
  background: var(--cream);
  overflow: hidden;
}
.agent-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 450ms cubic-bezier(.16,1,.3,1);
}
.agent-image:hover img { transform: scale(1.018); }

/* content block centres in the slide rather than hanging from the top */
.tpl-strategy-choice .content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 140px 112px;
  z-index: 2;
}
.tpl-strategy-choice .headline {
  margin-top: 22px;
  font-size: 62px;
}
.strategy-grid {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  margin-top: 52px;
  align-items: stretch;
}
/* grained cards: the card itself is the textured element, sitting on the
   striped ground. Orange grain carries the wrong path, pine the right one. */
.strategy-card {
  min-height: 300px;
  padding: 38px 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.strategy-card--wrong { border: 1px solid var(--orange); }
.strategy-card--right { border: 1px solid var(--pine); }

.strategy-label {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.strategy-card--wrong .strategy-label { color: #FFD9CB; }
.strategy-card--right .strategy-label { color: var(--lime); }

.strategy-card blockquote {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 43px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.025em;
  color: var(--cream);
}
.strategy-card p {
  margin-top: 0;
  max-width: 260px;
  font-family: var(--sans);
  font-size: 23px;
  line-height: 1.4;
  opacity: 1;
  color: rgba(254,255,250,0.86);
}
/* neutral: the arrow marks the move, it does not carry problem semantics */
.strategy-arrow {
  align-self: center;
  justify-self: center;
  font-size: 42px;
  color: var(--dark);
}

/* Card density rule: content cards size to their content. Only diagram or
   comparison layouts may intentionally stretch to fill the slide. */

/* ============================================================
   OPERATING MODEL + BUSINESS MAP
   ============================================================ */

.tpl-operating-model .content,
.tpl-business-map .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 78px 100px 100px;
}
.tpl-operating-model .headline {
  margin-top: 22px;
  font-size: 52px;
  line-height: 1.08;
}
.tpl-business-map .headline {
  margin-top: 18px;
  font-size: 56px;
  line-height: 1.08;
}
.machine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border: 1px solid rgba(254,255,250,.3);
}
.machine {
  min-height: 244px;
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.machine + .machine { border-left: 1px solid rgba(254,255,250,.3); }
.machine-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--lime);
}
.machine h3 {
  margin-top: 20px;
  font-size: 43px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.machine p {
  margin-top: 16px;
  font-size: 23px;
  line-height: 1.35;
  opacity: .75;
}
.expansion-loop {
  margin-top: 24px;
  padding: 18px 24px;
  border-left: 7px solid var(--lime);
  background: rgba(133,255,10,.08);
  font-size: 23px;
  font-weight: 600;
}

/* Demand pipeline (business-map slide) */
.tpl-business-map .map-lede {
  margin-top: 14px;
  font-size: 26px;
  line-height: 1.35;
  opacity: 0.72;
  max-width: 1180px;
}
.tpl-business-map .eyebrow {
  font-size: 16px;
}
.demand-pipeline {
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;
  display: grid;
  grid-template-columns: 1.15fr auto 0.85fr auto 1.15fr auto 0.9fr;
  gap: 14px;
  align-items: stretch;
}
.demand-stage {
  border: 1px solid rgba(0, 20, 10, 0.18);
  background: var(--cream);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color 180ms ease, transform 180ms ease;
}
.demand-stage:hover {
  border-color: var(--dark);
  transform: translateY(-4px);
}
.demand-stage--close {
  border-color: var(--lime);
  background: #faffeb;
}
.stage-label {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 12px;
}
.demand-stage--close .stage-label {
  color: #3b8200;
  opacity: 1;
}
.stage-title {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 12px;
}
.stage-desc {
  font-size: 19px;
  line-height: 1.35;
  opacity: 0.72;
  margin-bottom: 18px;
}
.stage-nodes {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stage-node {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  border: 1px solid rgba(0, 20, 10, 0.16);
  background: rgba(0, 20, 10, 0.03);
}
.demand-stage--close .stage-node {
  border-color: rgba(59, 130, 0, 0.35);
  background: rgba(133, 255, 10, 0.12);
}
.demand-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 32px;
  opacity: 0.35;
  padding-bottom: 8px;
}

/* ============================================================
   SLED FRAMEWORK
   ============================================================ */

.tpl-sled .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 78px 120px 106px;
}
.tpl-sled .headline {
  margin-top: 22px;
  font-size: 57px;
  line-height: 1.08;
}
.sled-grid {
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 24px;
}
.sled-card {
  border: 1px solid rgba(254, 255, 250, 0.15);
  background: rgba(254, 255, 250, 0.02);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  transition: all 180ms ease;
}
.sled-card:hover {
  border-color: var(--lime);
  background: rgba(133, 255, 10, 0.04);
  transform: translateY(-4px);
}
.sled-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
/* a grained pine block holding the letter. One treatment for all four, so
   the glyph reads as a marker rather than colour-coding a meaning. */
.sled-letter {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border: 1px solid var(--pine);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sled-letter .sl-glyph {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: var(--cream);
}
.sled-letter.text-lime {
  color: var(--lime);
}
.sled-letter.text-orange {
  color: var(--orange);
}
.sled-card h3 {
  font-size: 26px;
  font-weight: 600;
}
.sled-desc {
  font-size: 19px;
  line-height: 1.4;
  opacity: 0.75;
  margin-bottom: 16px;
}
.sled-example {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed rgba(254, 255, 250, 0.12);
  font-size: 17px;
  line-height: 1.4;
  opacity: 0.9;
}
.sled-example strong {
  color: var(--lime);
}

/* ============================================================
   BUILD VS BUY INTRO
   ============================================================ */

.tpl-build-buy-intro .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 100px 140px 130px;
  z-index: 2;
}
.tpl-build-buy-intro .headline {
  font-size: 48px;
  max-width: 1400px;
  margin-bottom: 36px;
}
.build-buy-intro-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  margin-top: 12px;
}
.intro-statement-card {
  border: 1px solid var(--dark);
  padding: 42px 48px;
  background: rgba(0, 20, 10, 0.015);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.intro-statement-card .paradox-label {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
  margin-bottom: 18px;
}
.intro-statement-card h2 {
  font-size: 38px;
  line-height: 1.25;
  margin-bottom: 24px;
  font-weight: 600;
}
.intro-statement-card p {
  font-size: 22px;
  line-height: 1.45;
  opacity: 0.8;
}
.intro-detail-card {
  border: 1px solid rgba(0, 20, 10, 0.15);
  padding: 42px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream);
}
.intro-detail-card .detail-stat {
  font-family: var(--mono);
  font-size: 72px;
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 12px;
}
.intro-detail-card .detail-label {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
}
.intro-detail-card p {
  font-size: 20px;
  line-height: 1.4;
  opacity: 0.75;
  margin-bottom: 24px;
}
.intro-detail-card .detail-footer {
  font-family: var(--mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  border-top: 1px solid rgba(0, 20, 10, 0.1);
  padding-top: 16px;
}

/* ============================================================
   BUILD VS BUY TEST (split layout with image)
   ============================================================ */

.tpl-build-buy-test .content {
  flex: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 48px;
  padding: 70px 80px 80px;
  align-items: center;
  z-index: 2;
}
.tpl-build-buy-test .headline {
  font-size: 44px;
  margin-bottom: 24px;
}
.test-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}
.test-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.test-step .step-num {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--orange);
  background: rgba(231, 59, 10, 0.08);
  padding: 6px 12px;
  border: 1px solid rgba(231, 59, 10, 0.2);
  line-height: 1;
}
.test-step h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.test-step p {
  font-size: 18px;
  line-height: 1.35;
  opacity: 0.72;
}
.test-footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 20, 10, 0.1);
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.85;
}
.test-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.whiteboard-frame {
  border: 1px solid #1f1f1f;
  background: #ffffff;
  padding: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whiteboard-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 820px;
  object-fit: contain;
}

/* ============================================================
   WHY AGENCIES BUILD
   ============================================================ */

.tpl-agencies-build .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 140px 120px;
  z-index: 2;
}
.tpl-agencies-build .headline {
  font-size: 48px;
  max-width: 1400px;
  margin-bottom: 40px;
}
.agencies-build-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.build-reason-card {
  border: 1px solid rgba(254, 255, 250, 0.28);
  padding: 28px 28px 32px;
  background: #282826;
  display: flex;
  flex-direction: column;
  transition: border-color 180ms ease, transform 180ms ease;
}
.build-reason-card:hover {
  border-color: var(--lime);
  transform: translateY(-5px);
}
.build-reason-card .reason-num {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--lime);
  margin-bottom: 14px;
}
.build-reason-card h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.build-reason-card p {
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.8;
}

/* ============================================================
   MAINTENANCE & CORE COMPETENCY
   ============================================================ */

.tpl-maintenance .content {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 70px;
  padding: 90px 120px 110px;
  align-items: center;
  z-index: 2;
}
.tpl-maintenance .headline {
  font-size: 44px;
}
.tpl-maintenance .lede {
  font-size: 22px;
  line-height: 1.4;
  opacity: 0.8;
  margin-top: 20px;
}
.equation-box {
  margin: 32px 0;
  padding: 24px 32px;
  border: 1px solid rgba(0, 20, 10, 0.15);
  background: rgba(0, 20, 10, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.eq-row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.eq-term {
  font-size: 22px;
  font-weight: 600;
}
.eq-term.text-lime {
  color: var(--orange);
}
.eq-operator {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--orange);
  line-height: 1;
}
.eq-result {
  font-size: 28px;
  font-weight: 700;
  background: var(--dark);
  padding: 6px 18px;
  color: var(--lime);
}
.competency-note {
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.75;
}
.maintenance-paths {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.path-card {
  border: 1px solid rgba(0, 20, 10, 0.15);
  padding: 32px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transition: all 180ms ease;
}
.path-card:hover {
  transform: translateY(-3px);
}
.path-card--featured {
  border: 2px solid var(--lime);
  background: rgba(133, 255, 10, 0.03);
}
.path-card--featured:hover {
  border-color: var(--lime);
  background: rgba(133, 255, 10, 0.06);
}
.path-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}
.path-card p {
  font-size: 18px;
  line-height: 1.38;
  opacity: 0.8;
}

/* ============================================================
   ORGANIZATIONAL STRUCTURE / AI ROSTER
   ============================================================ */

.tpl-org-chart .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 52px 100px 56px;
  z-index: 2;
}
.tpl-org-chart .headline {
  font-size: 40px;
  margin-bottom: 20px;
}
.org-chart-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  min-height: 0;
}
.org-root {
  border: 2px solid var(--lime);
  background: rgba(133, 255, 10, 0.05);
  padding: 14px 32px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  position: relative;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(133, 255, 10, 0.1);
}
.org-root::after {
  content: '';
  position: absolute;
  bottom: -34px;
  left: 50%;
  width: 2px;
  height: 32px;
  background: rgba(254, 255, 250, 0.2);
}
.org-teams {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.7fr;
  gap: 28px;
  width: 100%;
  position: relative;
}
.org-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(254, 255, 250, 0.1);
  background: rgba(254, 255, 250, 0.01);
  padding: 20px 18px;
  position: relative;
}
.org-team-col::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  width: 2px;
  height: 18px;
  background: rgba(254, 255, 250, 0.2);
}
.org-team-col.col--demand {
  border-top: 3px solid var(--lime);
}
.org-team-col.col--supply {
  border-top: 3px solid var(--orange);
}
.org-team-col.col--backoffice {
  border-top: 3px solid #888888;
}
.org-team-header {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  padding: 4px 12px;
}
.col--demand .org-team-header { color: var(--lime); background: rgba(133, 255, 10, 0.08); }
.col--supply .org-team-header { color: var(--orange); background: rgba(231, 59, 10, 0.08); }
.col--backoffice .org-team-header { color: #aaaaaa; background: rgba(255, 255, 255, 0.08); }

.org-nodes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.col--demand .org-nodes,
.col--supply .org-nodes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}
.org-node {
  border: 1px solid rgba(254, 255, 250, 0.15);
  background: rgba(254, 255, 250, 0.02);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  transition: all 150ms ease;
  position: relative;
}
.org-node:hover {
  border-color: var(--lime);
  background: rgba(133, 255, 10, 0.04);
  transform: translateY(-2px);
}
.col--supply .org-node:hover {
  border-color: var(--orange);
  background: rgba(231, 59, 10, 0.04);
}
.org-node-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.org-node-desc {
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.6;
}
.org-node-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(254, 255, 250, 0.08);
  opacity: 0.7;
}
.org-chart-note {
  margin-top: 22px;
  max-width: 1400px;
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.72;
  border-left: 4px solid var(--lime);
  padding: 12px 0 12px 18px;
}

/* ============================================================
   AUTO LOOM DEMO SLIDE
   ============================================================ */

.tpl-autoloom-demo .content {
  flex: 1;
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-autoloom-demo .headline {
  font-size: 44px;
  margin-bottom: 24px;
}
.autoloom-bullets {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.autoloom-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.autoloom-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.autoloom-bullet h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.autoloom-bullet p {
  font-size: 16px;
  line-height: 1.35;
  opacity: 0.72;
}
.autoloom-footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 17px;
  line-height: 1.4;
  opacity: 0.85;
}
.autoloom-footer strong {
  color: var(--lime);
}
.autoloom-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.video-frame {
  border: 2px solid rgba(254, 255, 250, 0.15);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  background: var(--dark);
  padding: 0;
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   SECTION DIVIDER / COVER SLIDE
   ============================================================ */

.tpl-divider .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 188px 0 140px;
  z-index: 2;
}
.tpl-divider .eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 24px;
}
.tpl-divider .headline {
  font-size: 80px;
  line-height: 1.05;
  font-weight: 700;
  max-width: 1400px;
}
/* Dividers use the brand accent-bar gradient column (same as cover) — never a solid lime underline */

/* ============================================================
   PROPOSAL & DECK GENERATOR
   ============================================================ */

.tpl-proposal-generator .content {
  flex: 1;
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-proposal-generator .headline {
  font-size: 42px;
  margin-bottom: 8px;
}
.tpl-proposal-generator .subhead {
  font-size: 22px;
  line-height: 1.35;
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 24px;
}
.proposal-generator-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.proposal-generator-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.proposal-generator-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.proposal-generator-bullet h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.proposal-generator-bullet p {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.72;
}
.proposal-generator-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.85;
}
.proposal-generator-footer strong {
  color: var(--lime);
}
.proposal-generator-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.proposal-generator-frame {
  border: 1px solid rgba(254, 255, 250, 0.18);
  background: #151515;
  padding: 0;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.proposal-generator-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}

/* ============================================================
   MEETING PREP AGENT
   ============================================================ */

.tpl-meeting-prep .content {
  flex: 1;
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-meeting-prep .headline {
  font-size: 42px;
  margin-bottom: 8px;
}
.tpl-meeting-prep .subhead {
  font-size: 22px;
  line-height: 1.35;
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 24px;
}
.meeting-prep-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.meeting-prep-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.meeting-prep-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.meeting-prep-bullet h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.meeting-prep-bullet p {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.72;
}
.meeting-prep-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.85;
}
.meeting-prep-footer strong {
  color: var(--lime);
}
.meeting-prep-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.meeting-prep-frame {
  border: 1px solid rgba(160, 160, 155, 0.5);
  background: #FEFFFA;
  padding: 0;
  max-width: 100%;
}
.meeting-prep-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   POST-CALL FOLLOW-UP AGENT
   ============================================================ */

.tpl-post-call .content {
  flex: 1;
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-post-call .headline {
  font-size: 42px;
  margin-bottom: 8px;
}
.tpl-post-call .subhead {
  font-size: 22px;
  line-height: 1.35;
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 24px;
}
.post-call-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.post-call-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.post-call-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.post-call-bullet h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.post-call-bullet p {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.72;
}
.post-call-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.85;
}
.post-call-footer strong {
  color: var(--lime);
}
.post-call-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.post-call-flow {
  width: 100%;
  border: 1px solid rgba(254, 255, 250, 0.18);
  background: rgba(0, 0, 0, 0.25);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.post-call-flow-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 28px;
  text-align: center;
}
.pc-step {
  border: 1px solid rgba(254, 255, 250, 0.22);
  padding: 18px 20px;
  background: rgba(254, 255, 250, 0.03);
}
.pc-step .pc-label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 6px;
}
.pc-step .pc-body {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.75;
}
.pc-arrow {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  opacity: 0.4;
}

/* ============================================================
   ROSTER EMPLOYEE (Relationship / Playbook / Finance)
   ============================================================ */

.tpl-roster-employee .content {
  flex: 1;
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-roster-employee .headline {
  font-size: 42px;
  margin-bottom: 8px;
}
.tpl-roster-employee .subhead {
  font-size: 22px;
  line-height: 1.35;
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 24px;
}
.roster-employee-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.roster-employee-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.roster-employee-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.roster-employee-bullet h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.roster-employee-bullet p {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.72;
}
.roster-employee-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.85;
}
.roster-employee-footer strong {
  color: var(--lime);
}
.roster-employee-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.roster-employee-frame {
  border: 1px solid rgba(254, 255, 250, 0.18);
  background: #151515;
  padding: 0;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.roster-employee-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}
.roster-flow {
  width: 100%;
  border: 1px solid rgba(254, 255, 250, 0.18);
  background: rgba(0, 0, 0, 0.25);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.roster-flow-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 28px;
  text-align: center;
}
.roster-step {
  border: 1px solid rgba(254, 255, 250, 0.22);
  padding: 18px 20px;
  background: rgba(254, 255, 250, 0.03);
}
.roster-step .roster-label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 6px;
}
.roster-step .roster-body {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.75;
}
.roster-arrow {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  opacity: 0.4;
}

/* ============================================================
   AEO AGENT
   ============================================================ */

.tpl-aeo .content {
  flex: 1;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 48px;
  padding: 70px 80px 90px;
  align-items: center;
  z-index: 2;
}
.tpl-aeo .headline {
  font-size: 42px;
  margin-bottom: 8px;
}
.tpl-aeo .subhead {
  font-size: 22px;
  line-height: 1.35;
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 24px;
}
.aeo-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.aeo-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.aeo-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.aeo-bullet h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.aeo-bullet p {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.72;
}
.aeo-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.85;
}
.aeo-footer strong {
  color: var(--lime);
}
.aeo-image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.aeo-zoom-container {
  position: relative;
  width: 100%;
  height: 780px;
  border: 1px solid rgba(160, 160, 155, 0.5);
  background: #FEFFFA;
  overflow: hidden;
  cursor: none;
}
.aeo-zoom-container .zoom-base-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
}
.aeo-zoom-container .zoom-lens {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 2px solid var(--lime);
  background-color: #FEFFFA;
  box-shadow: 0 12px 48px rgba(0, 20, 10, 0.25);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease, visibility 150ms ease;
  background-repeat: no-repeat;
  z-index: 10;
}
.aeo-zoom-container:hover .zoom-lens {
  visibility: visible;
  opacity: 1;
}
.aeo-zoom-hint {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.45;
  text-align: center;
}

/* ============================================================
   DATA MOAT — context, memory, self-improvement
   ============================================================ */

.tpl-data-moat .content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-data-moat .headline {
  font-size: 42px;
  margin-bottom: 12px;
}
.tpl-data-moat .subhead {
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.72;
  margin-bottom: 28px;
  max-width: 640px;
}
.data-moat-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.data-moat-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.data-moat-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.data-moat-bullet h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.data-moat-bullet p {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.72;
}
.data-moat-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.85;
}
.data-moat-footer strong {
  color: var(--lime);
}
.data-moat-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.moat-flywheel {
  width: 100%;
  border: 1px solid rgba(254, 255, 250, 0.18);
  background: rgba(0, 0, 0, 0.25);
  padding: 32px 28px 28px;
}
.moat-flywheel-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  text-align: center;
  margin-bottom: 24px;
}
.moat-ring {
  position: relative;
  width: 520px;
  height: 520px;
  margin: 0 auto;
}
.moat-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border: 1px solid var(--lime);
  background: rgba(133, 255, 10, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--lime);
}
.moat-node {
  position: absolute;
  width: 168px;
  padding: 12px 14px;
  border: 1px solid rgba(254, 255, 250, 0.22);
  background: rgba(254, 255, 250, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 180ms ease, background 180ms ease;
}
.moat-node:hover {
  border-color: var(--lime);
  background: rgba(133, 255, 10, 0.06);
}
.moat-node .moat-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.08em;
}
.moat-node .moat-label {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.moat-node .moat-desc {
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.65;
}
.moat-node--1 { top: 0; left: 50%; transform: translateX(-50%); }
.moat-node--2 { top: 95px; right: 0; }
.moat-node--3 { bottom: 95px; right: 0; }
.moat-node--4 { bottom: 0; left: 50%; transform: translateX(-50%); }
.moat-node--5 { top: 95px; left: 0; }
.moat-flywheel-note {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.45;
  text-align: center;
}

/* ============================================================
   CONTEXT KITCHEN
   ============================================================ */

.tpl-kitchen .content {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-kitchen .headline {
  font-size: 44px;
  margin-bottom: 24px;
}
.kitchen-bullets {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.kitchen-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.kitchen-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.kitchen-bullet h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.kitchen-bullet p {
  font-size: 16px;
  line-height: 1.35;
  opacity: 0.72;
}
.kitchen-footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 17px;
  line-height: 1.4;
  opacity: 0.85;
}
.kitchen-footer strong {
  color: var(--lime);
}
.kitchen-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.kitchen-frame {
  border: 1px solid rgba(254, 255, 250, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  background: #151515;
  padding: 0;
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
}
.kitchen-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   HOW AI EMPLOYEES LEARN JUDGMENT
   ============================================================ */

.tpl-judgment-methods .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 90px 72px;
  z-index: 2;
}
.tpl-judgment-methods .headline {
  font-size: 40px;
  max-width: 1450px;
  margin-bottom: 12px;
}
.tpl-judgment-methods .lede {
  font-size: 19px;
  line-height: 1.35;
  opacity: 0.75;
  max-width: 1300px;
  margin-bottom: 28px;
}
.judgment-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.judgment-card {
  border: 1px solid rgba(0, 20, 10, 0.15);
  padding: 22px 22px 24px;
  background: var(--cream);
  transition: all 180ms ease;
}
.judgment-card:nth-child(1) { grid-column: 1 / 3; }
.judgment-card:nth-child(2) { grid-column: 3 / 5; }
.judgment-card:nth-child(3) { grid-column: 5 / 7; }
.judgment-card:nth-child(4) { grid-column: 2 / 4; }
.judgment-card:nth-child(5) { grid-column: 4 / 6; }
.judgment-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 20, 10, 0.35);
}
.judgment-card .judgment-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 20, 10, 0.05);
}
.judgment-card h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
.judgment-card p {
  font-size: 16px;
  line-height: 1.35;
  opacity: 0.8;
}
.judgment-footer {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.35;
  opacity: 0.7;
  max-width: 1200px;
}

/* ============================================================
   EVALS LOOP
   ============================================================ */

.tpl-evals .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 100px 140px 130px;
  z-index: 2;
}
.tpl-evals .headline {
  font-size: 48px;
  max-width: 1400px;
  margin-bottom: 48px;
}
.evals-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.eval-card {
  border: 1px solid rgba(0, 20, 10, 0.15);
  padding: 36px 32px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transition: all 180ms ease;
}
.eval-card:hover {
  transform: translateY(-5px);
}
.eval-card .eval-step {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0, 20, 10, 0.05);
}
.eval-card h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 18px;
}
.eval-card p {
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.8;
}
.eval-card .eval-footer-note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 20, 10, 0.1);
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.6;
}

/* ============================================================
   SOFTWARE FACTORY
   ============================================================ */

.tpl-factory .content {
  flex: 1;
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-factory .headline {
  font-size: 44px;
  margin-bottom: 20px;
}
.factory-lede {
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.8;
  margin-bottom: 24px;
}
.factory-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 10px;
}
/* Custom scrollbar for factory bullets */
.factory-bullets::-webkit-scrollbar {
  width: 6px;
}
.factory-bullets::-webkit-scrollbar-track {
  background: rgba(254, 255, 250, 0.05);
}
.factory-bullets::-webkit-scrollbar-thumb {
  background: rgba(254, 255, 250, 0.15);
  border-radius: 3px;
}
.factory-bullet {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.factory-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 3px 8px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.factory-bullet h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 2px;
}
.factory-bullet p {
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.72;
}
.factory-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 15px;
  line-height: 1.4;
  opacity: 0.85;
}
.factory-footer strong {
  color: var(--lime);
}
.factory-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.factory-frame {
  border: 1px solid rgba(254, 255, 250, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  background: #151515;
  padding: 0;
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
}
.factory-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   DEPLOYMENT PATHS (BUY, CONFIGURE, BUILD)
   ============================================================ */

.tpl-deploy-paths .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 120px 110px;
  z-index: 2;
}
.tpl-deploy-paths .headline {
  font-size: 46px;
  max-width: 1400px;
  margin-bottom: 36px;
}
.deploy-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.deploy-path-card {
  border: 1px solid rgba(0, 20, 10, 0.15);
  padding: 28px 28px 30px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.deploy-path-card:hover {
  transform: translateY(-5px);
  border-color: var(--lime);
  background: rgba(133, 255, 10, 0.06);
}
.deploy-path-card .path-badge {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0, 20, 10, 0.05);
}
.deploy-path-card:hover .path-badge {
  background: rgba(133, 255, 10, 0.18);
  color: #3b8200;
  font-weight: 600;
}
.deploy-path-card h3 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 14px;
}
.deploy-path-card p {
  font-size: 20px;
  line-height: 1.4;
  opacity: 0.85;
  margin-bottom: 14px;
}
.deploy-path-card .path-superpower {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 20, 10, 0.1);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
}
.deploy-path-card .path-superpower strong {
  color: var(--orange);
}

/* ============================================================
   CONTENT ENGINE SLIDE
   ============================================================ */

.tpl-content-engine .content {
  flex: 1;
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 60px;
  padding: 80px 100px 100px;
  align-items: center;
  z-index: 2;
}
.tpl-content-engine .headline {
  font-size: 42px;
  margin-bottom: 8px;
}
.tpl-content-engine .subhead {
  font-size: 22px;
  line-height: 1.35;
  opacity: 0.7;
  font-weight: 400;
  margin-bottom: 24px;
}
.content-engine-bullets {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.content-engine-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.content-engine-bullet .bullet-icon {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(133, 255, 10, 0.08);
  padding: 4px 10px;
  border: 1px solid rgba(133, 255, 10, 0.2);
  line-height: 1;
  margin-top: 2px;
}
.content-engine-bullet h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.content-engine-bullet p {
  font-size: 15px;
  line-height: 1.35;
  opacity: 0.72;
}
.content-engine-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 255, 250, 0.12);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.85;
}
.content-engine-footer strong {
  color: var(--lime);
}
.content-engine-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.content-engine-frame {
  border: 1px solid rgba(254, 255, 250, 0.18);
  background: #151515;
  padding: 0;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.content-engine-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0a0a;
}

/* HTML self-improving voice loop (inspired by diagram; not the source PNG) */
.voice-loop {
  width: 100%;
  border: 1px solid rgba(254, 255, 250, 0.18);
  background: rgba(0, 0, 0, 0.25);
  padding: 36px 40px 40px;
  position: relative;
}
.voice-loop-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 28px;
  text-align: center;
}
.voice-loop-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-right: 56px;
}
.voice-step {
  border: 1px solid rgba(254, 255, 250, 0.22);
  padding: 14px 18px;
  background: rgba(254, 255, 250, 0.03);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.voice-step .step-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--lime);
  flex-shrink: 0;
}
.voice-step .step-label {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.voice-step .step-desc {
  font-size: 14px;
  opacity: 0.65;
  margin-left: auto;
  text-align: right;
  max-width: 220px;
}
.voice-arrow {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.4;
  letter-spacing: 0.08em;
}
.voice-loop-return {
  position: absolute;
  right: 18px;
  top: 90px;
  bottom: 50px;
  width: 28px;
  border-right: 1px solid var(--lime);
  border-top: 1px solid var(--lime);
  border-bottom: 1px solid var(--lime);
  opacity: 0.55;
}
.voice-loop-return::before {
  content: '↑';
  position: absolute;
  top: -14px;
  right: -7px;
  color: var(--lime);
  font-size: 14px;
}
.voice-loop-return::after {
  content: 'loop';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  white-space: nowrap;
}
.voice-loop-note {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.45;
  text-align: center;
}

/* ============================================================
   TEMPLATE 5 — FULL-BLEED IMAGE
   ============================================================ */

.tpl-image .content {
  position: relative;
  flex: 1;
  min-height: 0;
  z-index: 2;
}
.tpl-image .image-frame {
  width: 100%;
  height: 100%;
}
.tpl-image .image-frame img,
.tpl-image .image-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tpl-image .image-frame--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px;
}
.tpl-image .image-frame--contain img {
  object-fit: contain;
}

/* ============================================================
   TEMPLATE 6 — DEMO (embedded video, device-frame style)
   ============================================================ */

.tpl-demo .content {
  flex: 1;
  display: grid;
  grid-template-columns: 620px 1fr;
  gap: 0;
  padding: 90px 64px 130px 140px;
  z-index: 2;
  align-items: center;
}
.tpl-demo .demo-copy .eyebrow { margin-bottom: 24px; }
.tpl-demo .demo-copy .headline { font-size: 44px; margin-bottom: 24px; }
.tpl-demo .demo-copy .body-text { font-size: 20px; max-width: 520px; }
.tpl-demo .demo-screen {
  border: 2px solid var(--dark);
  background: var(--dark);
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.slide--dark .tpl-demo .demo-screen { border-color: rgba(254,255,250,0.3); }
.tpl-demo .demo-screen video,
.tpl-demo .demo-screen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tpl-demo .demo-screen .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(254,255,250,0.35);
  text-align: center; padding: 40px;
}

/* ============================================================
   MOTION — entrance reveals (fire on .is-active) + on-brand hover.
   No hover-shimmer / hover-shadow: lime is fill-only per the design
   system, and hover isn't a reliable trigger during a recorded,
   narrated presentation. Instead: automatic staggered reveals every
   time a slide becomes active (works live, in Descript, everywhere),
   plus restrained border/tint hover feedback for rehearsal browsing.
   ============================================================ */

@keyframes revealUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealScale {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmerSweep {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* title */
.tpl-title .workshop-label, .tpl-title .kicker, .tpl-title .headline, .tpl-title .sub { opacity: 0; }
.slide.tpl-title.is-active .workshop-label { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-title.is-active .kicker   { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 60ms both; }
.slide.tpl-title.is-active .headline { animation: revealUp 520ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-title.is-active .sub      { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }

/* title headline gets one light sweep on entrance — the deck's single "shimmer"
   moment, reserved for the biggest hero text. Overlay only: text color/fill is
   never touched, so there's no risk of the headline going illegible or invisible. */
.tpl-title .headline { position: relative; overflow: hidden; }
.tpl-title .headline::after {
  content: '';
  position: absolute;
  top: -20%; left: -60%;
  width: 40%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(133,255,10,0.35), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.slide.tpl-title.is-active .headline::after {
  animation: shimmerSweep 1300ms ease-out 700ms 1;
}

/* opening content sequence */
.tpl-outcome .eyebrow,
.tpl-outcome .headline,
.tpl-pains .eyebrow,
.tpl-pains .headline,
.tpl-bio .bio-photo-wrap,
.tpl-bio .eyebrow,
.tpl-bio .headline,
.tpl-bio .bio-lede,
.tpl-bio .atherial-brand,
.tpl-offer .eyebrow,
.tpl-offer .headline,
.tpl-offer .offer-footer { opacity: 0; }
.slide.tpl-outcome.is-active .eyebrow,
.slide.tpl-pains.is-active .eyebrow,
.slide.tpl-bio.is-active .eyebrow,
.slide.tpl-offer.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 30ms both; }
.slide.tpl-outcome.is-active .headline,
.slide.tpl-pains.is-active .headline,
.slide.tpl-bio.is-active .headline,
.slide.tpl-offer.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.outcome-card,
.outcome-or,
.pain-card,
.bio-proof,
.offer-panel { opacity: 0; }
.slide.tpl-outcome.is-active .outcome-card,
.slide.tpl-outcome.is-active .outcome-or,
.slide.tpl-pains.is-active .pain-card,
.slide.tpl-bio.is-active .bio-proof,
.slide.tpl-offer.is-active .offer-panel { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-outcome.is-active .outcome-card:nth-child(1) { animation-delay: 230ms; }
.slide.tpl-outcome.is-active .outcome-or { animation-delay: 310ms; }
.slide.tpl-outcome.is-active .outcome-card:nth-child(3) { animation-delay: 390ms; }
.slide.tpl-pains.is-active .pain-card:nth-child(1) { animation-delay: 230ms; }
.slide.tpl-pains.is-active .pain-card:nth-child(2) { animation-delay: 340ms; }
.slide.tpl-pains.is-active .pain-card:nth-child(3) { animation-delay: 450ms; }
.slide.tpl-pains.is-active .pain-card:nth-child(4) { animation-delay: 560ms; }
.slide.tpl-bio.is-active .bio-photo-wrap { animation: revealScale 650ms cubic-bezier(.16,1,.3,1) 40ms both; }
.slide.tpl-bio.is-active .bio-lede { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 220ms both; }
.slide.tpl-bio.is-active .atherial-brand { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-bio.is-active .bio-proof:nth-child(1) { animation-delay: 310ms; }
.slide.tpl-bio.is-active .bio-proof:nth-child(2) { animation-delay: 390ms; }
.slide.tpl-bio.is-active .bio-proof:nth-child(3) { animation-delay: 470ms; }
.slide.tpl-offer.is-active .offer-panel { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-offer.is-active .offer-panel:nth-child(1) { animation-delay: 220ms; }
.slide.tpl-offer.is-active .offer-panel:nth-child(2) { animation-delay: 320ms; }
.slide.tpl-offer.is-active .offer-footer { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 440ms both; }

.tpl-agent-harness .agent-copy,
.tpl-agent-harness .agent-image,
.tpl-strategy-choice .eyebrow,
.tpl-strategy-choice .headline,
.tpl-strategy-choice .strategy-card,
.tpl-strategy-choice .strategy-arrow { opacity: 0; }
.slide.tpl-agent-harness.is-active .agent-copy { animation: revealUp 480ms cubic-bezier(.16,1,.3,1) 40ms both; }
.slide.tpl-agent-harness.is-active .agent-image { animation: revealScale 700ms cubic-bezier(.16,1,.3,1) 180ms both; }
.slide.tpl-strategy-choice.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 30ms both; }
.slide.tpl-strategy-choice.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-strategy-choice.is-active .strategy-card--wrong { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-strategy-choice.is-active .strategy-arrow { animation: revealUp 380ms cubic-bezier(.16,1,.3,1) 360ms both; }
.slide.tpl-strategy-choice.is-active .strategy-card--right { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) 450ms both; }

.tpl-operating-model .eyebrow,
.tpl-operating-model .headline,
.tpl-operating-model .machine,
.tpl-operating-model .expansion-loop,
.tpl-business-map .eyebrow,
.tpl-business-map .headline,
.tpl-business-map .map-lede,
.tpl-business-map .demand-stage,
.tpl-business-map .demand-arrow { opacity: 0; }
.slide.tpl-operating-model.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 30ms both; }
.slide.tpl-operating-model.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 110ms both; }
.slide.tpl-operating-model.is-active .machine { animation: revealUp 430ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-operating-model.is-active .machine:nth-child(1) { animation-delay: 220ms; }
.slide.tpl-operating-model.is-active .machine:nth-child(2) { animation-delay: 320ms; }
.slide.tpl-operating-model.is-active .machine:nth-child(3) { animation-delay: 420ms; }
.slide.tpl-operating-model.is-active .expansion-loop { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 540ms both; }
.slide.tpl-business-map.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-business-map.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-business-map.is-active .map-lede { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 140ms both; }
.slide.tpl-business-map.is-active .demand-stage { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-business-map.is-active .demand-pipeline > .demand-stage:nth-child(1) { animation-delay: 180ms; }
.slide.tpl-business-map.is-active .demand-pipeline > .demand-stage:nth-child(3) { animation-delay: 260ms; }
.slide.tpl-business-map.is-active .demand-pipeline > .demand-stage:nth-child(5) { animation-delay: 340ms; }
.slide.tpl-business-map.is-active .demand-pipeline > .demand-stage:nth-child(7) { animation-delay: 420ms; }
.slide.tpl-business-map.is-active .demand-arrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 300ms both; }

/* statement — each line of the headline is its own reveal beat (a 1-line
   headline is just one beat; a multi-line list cascades line by line,
   like content revealing on scroll, instead of popping in as one block). */
.tpl-statement .eyebrow, .tpl-statement .footnote { opacity: 0; }
.tpl-statement .headline .line { display: block; opacity: 0; }
.slide.tpl-statement.is-active .eyebrow   { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 40ms both; }
.slide.tpl-statement.is-active .footnote  { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 460ms both; }
.slide.tpl-statement.is-active .headline .line { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-statement.is-active .headline .line:nth-child(1) { animation-delay: 140ms; }
.slide.tpl-statement.is-active .headline .line:nth-child(2) { animation-delay: 210ms; }
.slide.tpl-statement.is-active .headline .line:nth-child(3) { animation-delay: 280ms; }
.slide.tpl-statement.is-active .headline .line:nth-child(4) { animation-delay: 350ms; }
.slide.tpl-statement.is-active .headline .line:nth-child(5) { animation-delay: 420ms; }

/* comparison */
.tpl-comparison .headline { opacity: 0; }
.slide.tpl-comparison.is-active .headline { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) 20ms both; }
.tpl-comparison .col {
  opacity: 0;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.slide.tpl-comparison.is-active .col { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-comparison.is-active .col:nth-child(1) { animation-delay: 140ms; }
.slide.tpl-comparison.is-active .col:nth-child(2) { animation-delay: 220ms; }
.slide.tpl-comparison.is-active .col:nth-child(3) { animation-delay: 300ms; }
.slide.tpl-comparison.is-active .col:nth-child(4) { animation-delay: 380ms; }
.tpl-comparison .col:hover { border-color: var(--lime); background-color: rgba(133,255,10,0.05); }
.tpl-comparison .col.is-featured:hover { background-color: rgba(133,255,10,0.08); }
.slide--dark .tpl-comparison .col:hover { background-color: rgba(133,255,10,0.10); }

/* framework */
.tpl-framework .headline { opacity: 0; }
.slide.tpl-framework.is-active .headline { animation: revealUp 440ms cubic-bezier(.16,1,.3,1) 20ms both; }
.tpl-framework .item {
  opacity: 0;
  transition: background-color 160ms ease;
}
.slide.tpl-framework.is-active .item { animation: revealUp 380ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-framework.is-active .item:nth-child(1) { animation-delay: 120ms; }
.slide.tpl-framework.is-active .item:nth-child(2) { animation-delay: 170ms; }
.slide.tpl-framework.is-active .item:nth-child(3) { animation-delay: 220ms; }
.slide.tpl-framework.is-active .item:nth-child(4) { animation-delay: 270ms; }
.slide.tpl-framework.is-active .item:nth-child(5) { animation-delay: 320ms; }
.slide.tpl-framework.is-active .item:nth-child(6) { animation-delay: 370ms; }
.slide.tpl-framework.is-active .item:nth-child(7) { animation-delay: 420ms; }
.slide.tpl-framework.is-active .item:nth-child(8) { animation-delay: 470ms; }
.slide.tpl-framework.is-active .item:nth-child(9) { animation-delay: 520ms; }
.tpl-framework .item:hover { background-color: rgba(133,255,10,0.06); }
.slide--dark .tpl-framework .item:hover { background-color: rgba(133,255,10,0.10); }

/* full-bleed image — slow settle, like a hero shot landing */
.tpl-image .image-frame img,
.tpl-image .image-frame video { opacity: 0; }
.slide.tpl-image.is-active .image-frame img,
.slide.tpl-image.is-active .image-frame video {
  animation: revealScale 900ms cubic-bezier(.16,1,.3,1) both;
}

/* sled */
.tpl-sled .eyebrow, .tpl-sled .headline, .tpl-sled .sled-card { opacity: 0; }
.slide.tpl-sled.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-sled.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-sled.is-active .sled-card:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-sled.is-active .sled-card:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-sled.is-active .sled-card:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-sled.is-active .sled-card:nth-child(4) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }

/* build-buy-intro */
.tpl-build-buy-intro .eyebrow, .tpl-build-buy-intro .headline, .tpl-build-buy-intro .intro-statement-card, .tpl-build-buy-intro .intro-detail-card { opacity: 0; }
.slide.tpl-build-buy-intro.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-build-buy-intro.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-build-buy-intro.is-active .intro-statement-card { animation: revealUp 500ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-build-buy-intro.is-active .intro-detail-card { animation: revealUp 500ms cubic-bezier(.16,1,.3,1) 260ms both; }

/* build-buy-test */
.tpl-build-buy-test .eyebrow, .tpl-build-buy-test .headline, .tpl-build-buy-test .test-step, .tpl-build-buy-test .test-footer, .tpl-build-buy-test .test-image { opacity: 0; }
.slide.tpl-build-buy-test.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-build-buy-test.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-build-buy-test.is-active .test-step:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-build-buy-test.is-active .test-step:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-build-buy-test.is-active .test-step:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-build-buy-test.is-active .test-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-build-buy-test.is-active .test-image { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* agencies-build */
.tpl-agencies-build .eyebrow, .tpl-agencies-build .headline, .tpl-agencies-build .build-reason-card { opacity: 0; }
.slide.tpl-agencies-build.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-agencies-build.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-agencies-build.is-active .build-reason-card:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-agencies-build.is-active .build-reason-card:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-agencies-build.is-active .build-reason-card:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }

/* maintenance */
.tpl-maintenance .eyebrow, .tpl-maintenance .headline, .tpl-maintenance .lede, .tpl-maintenance .equation-box, .tpl-maintenance .competency-note, .tpl-maintenance .path-card { opacity: 0; }
.slide.tpl-maintenance.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-maintenance.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-maintenance.is-active .lede { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 140ms both; }
.slide.tpl-maintenance.is-active .equation-box { animation: revealScale 500ms cubic-bezier(.16,1,.3,1) 200ms both; }
.slide.tpl-maintenance.is-active .competency-note { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 300ms both; }
.slide.tpl-maintenance.is-active .path-card:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-maintenance.is-active .path-card:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }

/* org-chart */
.tpl-org-chart .eyebrow, .tpl-org-chart .headline, .tpl-org-chart .org-root, .tpl-org-chart .org-team-col, .tpl-org-chart .org-chart-note { opacity: 0; }
.slide.tpl-org-chart.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-org-chart.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-org-chart.is-active .org-root { animation: revealScale 500ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-org-chart.is-active .org-team-col:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-org-chart.is-active .org-team-col:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-org-chart.is-active .org-team-col:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-org-chart.is-active .org-chart-note { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 480ms both; }

/* autoloom-demo */
.tpl-autoloom-demo .eyebrow, .tpl-autoloom-demo .headline, .tpl-autoloom-demo .autoloom-bullet, .tpl-autoloom-demo .autoloom-footer, .tpl-autoloom-demo .video-frame { opacity: 0; }
.slide.tpl-autoloom-demo.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-autoloom-demo.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-autoloom-demo.is-active .autoloom-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-autoloom-demo.is-active .autoloom-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-autoloom-demo.is-active .autoloom-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-autoloom-demo.is-active .autoloom-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-autoloom-demo.is-active .video-frame { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* deploy-paths */
.tpl-deploy-paths .eyebrow, .tpl-deploy-paths .headline, .tpl-deploy-paths .deploy-path-card { opacity: 0; }
.slide.tpl-deploy-paths.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-deploy-paths.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-deploy-paths.is-active .deploy-path-card:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-deploy-paths.is-active .deploy-path-card:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-deploy-paths.is-active .deploy-path-card:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }

/* content-engine */
.tpl-content-engine .eyebrow, .tpl-content-engine .headline, .tpl-content-engine .subhead, .tpl-content-engine .content-engine-bullet, .tpl-content-engine .content-engine-footer, .tpl-content-engine .content-engine-frame { opacity: 0; }
.slide.tpl-content-engine.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-content-engine.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-content-engine.is-active .subhead { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-content-engine.is-active .content-engine-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-content-engine.is-active .content-engine-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-content-engine.is-active .content-engine-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-content-engine.is-active .content-engine-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-content-engine.is-active .content-engine-frame { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* proposal-generator */
.tpl-proposal-generator .eyebrow, .tpl-proposal-generator .headline, .tpl-proposal-generator .subhead, .tpl-proposal-generator .proposal-generator-bullet, .tpl-proposal-generator .proposal-generator-footer, .tpl-proposal-generator .proposal-generator-frame { opacity: 0; }
.slide.tpl-proposal-generator.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-proposal-generator.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-proposal-generator.is-active .subhead { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-proposal-generator.is-active .proposal-generator-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-proposal-generator.is-active .proposal-generator-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-proposal-generator.is-active .proposal-generator-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-proposal-generator.is-active .proposal-generator-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-proposal-generator.is-active .proposal-generator-frame { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* post-call */
.tpl-post-call .eyebrow, .tpl-post-call .headline, .tpl-post-call .subhead, .tpl-post-call .post-call-bullet, .tpl-post-call .post-call-footer, .tpl-post-call .post-call-flow { opacity: 0; }
.slide.tpl-post-call.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-post-call.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-post-call.is-active .subhead { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-post-call.is-active .post-call-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-post-call.is-active .post-call-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-post-call.is-active .post-call-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-post-call.is-active .post-call-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-post-call.is-active .post-call-flow { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* meeting-prep */
.tpl-meeting-prep .eyebrow, .tpl-meeting-prep .headline, .tpl-meeting-prep .subhead, .tpl-meeting-prep .meeting-prep-bullet, .tpl-meeting-prep .meeting-prep-footer, .tpl-meeting-prep .meeting-prep-frame { opacity: 0; }
.slide.tpl-meeting-prep.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-meeting-prep.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-meeting-prep.is-active .subhead { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-meeting-prep.is-active .meeting-prep-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-meeting-prep.is-active .meeting-prep-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-meeting-prep.is-active .meeting-prep-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-meeting-prep.is-active .meeting-prep-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-meeting-prep.is-active .meeting-prep-frame { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* aeo */
.tpl-aeo .eyebrow, .tpl-aeo .headline, .tpl-aeo .subhead, .tpl-aeo .aeo-bullet, .tpl-aeo .aeo-footer, .tpl-aeo .aeo-zoom-container { opacity: 0; }
.slide.tpl-aeo.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-aeo.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-aeo.is-active .subhead { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-aeo.is-active .aeo-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-aeo.is-active .aeo-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-aeo.is-active .aeo-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-aeo.is-active .aeo-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-aeo.is-active .aeo-zoom-container { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* roster-employee */
.tpl-roster-employee .eyebrow, .tpl-roster-employee .headline, .tpl-roster-employee .subhead, .tpl-roster-employee .roster-employee-bullet, .tpl-roster-employee .roster-employee-footer, .tpl-roster-employee .roster-flow, .tpl-roster-employee .roster-employee-frame { opacity: 0; }
.slide.tpl-roster-employee.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-roster-employee.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-roster-employee.is-active .subhead { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-roster-employee.is-active .roster-employee-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-roster-employee.is-active .roster-employee-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-roster-employee.is-active .roster-employee-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-roster-employee.is-active .roster-employee-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-roster-employee.is-active .roster-flow,
.slide.tpl-roster-employee.is-active .roster-employee-frame { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* divider */
.tpl-divider .eyebrow, .tpl-divider .headline, .tpl-divider .accent-bar { opacity: 0; }
.slide.tpl-divider.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 30ms both; }
.slide.tpl-divider.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-divider.is-active .accent-bar { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 240ms both; }

/* kitchen */
.tpl-kitchen .eyebrow, .tpl-kitchen .headline, .tpl-kitchen .kitchen-bullet, .tpl-kitchen .kitchen-footer, .tpl-kitchen .kitchen-frame { opacity: 0; }
.slide.tpl-kitchen.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-kitchen.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-kitchen.is-active .kitchen-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-kitchen.is-active .kitchen-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-kitchen.is-active .kitchen-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 320ms both; }
.slide.tpl-kitchen.is-active .kitchen-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 400ms both; }
.slide.tpl-kitchen.is-active .kitchen-frame { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* judgment-methods */
.tpl-judgment-methods .eyebrow, .tpl-judgment-methods .headline, .tpl-judgment-methods .lede, .tpl-judgment-methods .judgment-card, .tpl-judgment-methods .judgment-footer { opacity: 0; }
.slide.tpl-judgment-methods.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-judgment-methods.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-judgment-methods.is-active .lede { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-judgment-methods.is-active .judgment-card:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 160ms both; }
.slide.tpl-judgment-methods.is-active .judgment-card:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 210ms both; }
.slide.tpl-judgment-methods.is-active .judgment-card:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 260ms both; }
.slide.tpl-judgment-methods.is-active .judgment-card:nth-child(4) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 310ms both; }
.slide.tpl-judgment-methods.is-active .judgment-card:nth-child(5) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 360ms both; }
.slide.tpl-judgment-methods.is-active .judgment-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 420ms both; }

/* data-moat */
.tpl-data-moat .eyebrow, .tpl-data-moat .headline, .tpl-data-moat .subhead, .tpl-data-moat .data-moat-bullet, .tpl-data-moat .data-moat-footer, .tpl-data-moat .moat-flywheel { opacity: 0; }
.slide.tpl-data-moat.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-data-moat.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-data-moat.is-active .subhead { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-data-moat.is-active .data-moat-bullet:nth-child(1) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 180ms both; }
.slide.tpl-data-moat.is-active .data-moat-bullet:nth-child(2) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 240ms both; }
.slide.tpl-data-moat.is-active .data-moat-bullet:nth-child(3) { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 300ms both; }
.slide.tpl-data-moat.is-active .data-moat-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 360ms both; }
.slide.tpl-data-moat.is-active .moat-flywheel { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* factory */
.tpl-factory .eyebrow, .tpl-factory .headline, .tpl-factory .factory-lede, .tpl-factory .factory-bullet, .tpl-factory .factory-footer, .tpl-factory .factory-frame { opacity: 0; }
.slide.tpl-factory.is-active .eyebrow { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) 20ms both; }
.slide.tpl-factory.is-active .headline { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 80ms both; }
.slide.tpl-factory.is-active .factory-lede { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 140ms both; }
.slide.tpl-factory.is-active .factory-bullet { animation: revealUp 400ms cubic-bezier(.16,1,.3,1) both; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(1) { animation-delay: 180ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(2) { animation-delay: 220ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(3) { animation-delay: 260ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(4) { animation-delay: 300ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(5) { animation-delay: 340ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(6) { animation-delay: 380ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(7) { animation-delay: 420ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(8) { animation-delay: 460ms; }
.slide.tpl-factory.is-active .factory-bullet:nth-child(9) { animation-delay: 500ms; }
.slide.tpl-factory.is-active .factory-footer { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 560ms both; }
.slide.tpl-factory.is-active .factory-frame { animation: revealScale 600ms cubic-bezier(.16,1,.3,1) 200ms both; }

/* demo */
.tpl-demo .demo-copy .eyebrow, .tpl-demo .demo-copy .headline, .tpl-demo .demo-copy .body-text { opacity: 0; }
.slide.tpl-demo.is-active .demo-copy .eyebrow   { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 40ms both; }
.slide.tpl-demo.is-active .demo-copy .headline  { animation: revealUp 460ms cubic-bezier(.16,1,.3,1) 120ms both; }
.slide.tpl-demo.is-active .demo-copy .body-text { animation: revealUp 420ms cubic-bezier(.16,1,.3,1) 220ms both; }
.tpl-demo .demo-screen { opacity: 0; transition: border-color 180ms ease; }
.slide.tpl-demo.is-active .demo-screen { animation: revealScale 620ms cubic-bezier(.16,1,.3,1) 200ms both; }
.tpl-demo .demo-screen:hover { border-color: var(--lime); }

/* ---------- speaker note badge (visible only in edit mode) ---------- */

.speaker-note {
  display: none;
  position: absolute;
  left: 64px;
  bottom: 90px;
  right: 64px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(31,31,31,0.5);
  max-width: 1100px;
  z-index: 6;
}
.slide--dark .speaker-note { color: rgba(254,255,250,0.5); }
body.show-notes .speaker-note { display: block; }


/* ============================================================
   v2 TEXTURE HOSTS — a .holds element carries a grain/dither canvas
   behind its own content. Ported from proposal/app/intro-v2.
   ============================================================ */

.holds { position: relative; overflow: hidden; }
.holds > canvas.tx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.holds > *:not(canvas) { position: relative; z-index: 2; }
canvas.tx--px { image-rendering: pixelated; }

/* ============================================================
   SLIDE 02 — OUTCOME CARDS
   Modelled directly on intro-v2 #10 (.cs-card--band): a tight grained
   pine band carrying a lime mono category and the outcome name, cream
   body beneath, then metrics under a hairline pushed to the card foot.
   ============================================================ */

.outcome-card--band {
  padding: 0;
  overflow: hidden;
  background: var(--cream);
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.outcome-card--band:hover {
  background: var(--cream);
  transform: translateY(-5px);
}

/* the grained band — reference is 30px 36px; scaled for a 2-up */
.outcome-card--band .outcome-band {
  padding: 32px 40px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
}
.outcome-card--band .cat {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.outcome-card--band .outcome-band h3 {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.18;
  color: var(--cream);
}
.outcome-card--band > p {
  margin: 0;
  padding: 28px 40px 30px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: #1F1F1F;
  opacity: 1;
  max-width: none;
}

/* metrics pushed to the foot so the rules align across both cards */
.outcome-metrics {
  margin-top: auto;
  padding: 22px 40px 28px;
  border-top: 1px solid var(--border-light);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.om-val {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--dark);
}
.om-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
  margin-top: 8px;
}

/* ============================================================
   v2 PROBLEM TREATMENT — ported from intro-v2 #8 ("Problem A3")
   Ink #1F1F1F ground, a darkened dither field masked into the right edge,
   a hairline rectangle, and orange-grain plates. Reusable across the
   problem sequence (slides 3-5).
   ============================================================ */

.slide--v2tex { background-image: none !important; }

.tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tex canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tex--smooth canvas { image-rendering: auto; }

.problem-a { background: #1F1F1F; }

.problem-a .problem-a-field {
  inset: 0 0 0 auto;
  width: 48%;
  opacity: 0.72;
  border-left: 1px solid rgba(254,255,250,0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.38) 22%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.38) 22%, #000 62%);
}

/* the hairline rectangle pinned to the right edge */
.problem-a::after {
  content: '';
  position: absolute;
  inset: 54px 54px 54px auto;
  width: 390px;
  border: 1px solid rgba(254,255,250,0.13);
  border-left: 0;
  z-index: 1;
  pointer-events: none;
}

/* the blacker variant — desaturates the field so ink dominates over green */
.problem-a--black .problem-a-field {
  width: 44%;
  opacity: 0.48;
  filter: saturate(0.16) brightness(0.62) contrast(1.18);
}
.problem-a--black::after { border-color: rgba(231,59,10,0.16); }

/* ---------- theme label: coloured square + mono caps ---------- */

.theme-label {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark);
}
.theme-label .sq { width: 15px; height: 15px; background: var(--lime); flex: 0 0 auto; }
.slide--dark .theme-label { color: var(--cream); }
.theme-label--problem .sq { background: var(--orange); }

/* ---------- problem plates ---------- */

.problem-a .content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 88px 140px 116px;
  z-index: 2;
}
.problem-a .headline {
  margin-top: 22px;
  font-size: 54px;
  line-height: 1.08;
  max-width: 1180px;
  text-wrap: balance;
}

.problem-grid {
  position: absolute;
  left: 140px;
  right: 140px;
  top: 60%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  z-index: 2;
}
.problem-grid > .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 286px;
  padding: 30px 34px;
  border: 1px solid var(--orange);
}
.problem-grid .pnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  background: var(--cream);
  color: var(--orange);
  padding: 9px 15px;
  margin-bottom: 18px;
}
.problem-grid .pk {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFD9CB;
  margin-bottom: 12px;
}
.problem-grid h3 {
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--cream);
}
.problem-grid p {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.42;
  color: rgba(254,255,250,0.86);
}

/* ============================================================
   SLIDE 04 — THE CAUSE. Ink ground, no plates. The payload is a
   measured comparison: editing the AI's draft costs more time than
   writing it yourself. Dark green vs orange grain carries the contrast.
   ============================================================ */

.tpl-cause .content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 88px 140px 104px;
  z-index: 2;
}
.tpl-cause .headline {
  margin-top: 22px;
  font-size: 54px;
  line-height: 1.08;
  max-width: 1240px;
  text-wrap: balance;
}
.tpl-cause .cause-sub {
  margin-top: 26px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(254,255,250,0.72);
  max-width: 1080px;
}

/* ---------- the measured comparison ---------- */

.timewaste {
  margin-top: auto;
  margin-bottom: 34px;
  border-top: 1px solid rgba(254,255,250,0.22);
}
.tw-row {
  display: grid;
  grid-template-columns: 430px 1fr 130px;
  align-items: center;
  gap: 34px;
  padding: 46px 0;
  border-bottom: 1px solid rgba(254,255,250,0.14);
}
.tw-label {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(254,255,250,0.82);
}
.tw-track { position: relative; height: 58px; }
.tw-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border: 1px solid var(--bar-edge, rgba(254,255,250,0.3));
  transform-origin: left center;
}
.tw-val {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cream);
}
.tw-row--worse .tw-val { color: var(--orange); }

/* bars grow on slide entry; static fallback is the final width */
.tpl-cause.is-active .tw-bar {
  animation: twGrow 900ms cubic-bezier(.16,.84,.44,1) both;
}
.tpl-cause.is-active .tw-row:nth-child(2) .tw-bar { animation-delay: 110ms; }
@keyframes twGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .tpl-cause.is-active .tw-bar { animation: none; }
}

.tw-kicker {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--cream);
  max-width: 1180px;
}
.tw-kicker .em { color: var(--orange); }

/* ============================================================
   SLIDE 05 — WHAT YOU'VE TRIED. Same ink + dither family as slide 03,
   but crisp cream plates instead of orange grain, so three problem
   slides in a row do not read as one repeated slide.
   ============================================================ */

.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.tool-chip {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(254,255,250,0.9);
  border: 1px solid rgba(254,255,250,0.32);
  padding: 10px 16px;
}
.tried-sub {
  margin-top: 30px;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cream);
  max-width: 1080px;
}
.tried-sub .em { color: var(--orange); }

/* crisp cream plates — the tension move against the noisy ground */
.problem-grid--plates { top: 66%; }
.problem-grid--plates > .card {
  background: var(--cream);
  border: 1px solid var(--cream);
}
.problem-grid--plates .pnum { background: var(--orange); color: var(--cream); }
.problem-grid--plates .pk { color: var(--orange); }
.problem-grid--plates h3 { color: var(--dark); }
.problem-grid--plates p { color: #3d3d38; }

/* ============================================================
   PIXEL BANDS — a dithered field bled in from the top and bottom
   edges, masked so it decays into the ink ground. Dither is the
   "degraded / sensed" register, so it stays a band rather than a
   full-bleed surface (DESIGN.md §4 placement rule).
   ============================================================ */

.pixel-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 196px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.9;
}
.pixel-band canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.pixel-band--top {
  top: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 100%);
}
.pixel-band--bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 100%);
}
/* mirror the illumination so the light reads as coming from each edge */
.pixel-band--bottom canvas { transform: scaleY(-1); }

/* the restrained register: shorter, fainter, faster decay */
.pixel-band--subtle {
  height: 148px;
  opacity: 0.42;
}
.pixel-band--subtle.pixel-band--top {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.28) 38%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.28) 38%, transparent 88%);
}
.pixel-band--subtle.pixel-band--bottom {
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.28) 38%, transparent 88%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.28) 38%, transparent 88%);
}

/* copy must sit above the bands */
.tpl-agent-harness .content,
.tpl-operating-model .content { position: relative; z-index: 2; }

/* ============================================================
   FORWARD DEPLOYED ENGINEERING PLAYBOOK
   Ported from proposal/app/introduction #3. Three rows, each a
   grained pine square (number, stage, owner chip) beside its copy,
   chevrons between, and an outcome line under a hairline.
   ============================================================ */

.tpl-playbook .content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 76px 140px 92px;
  z-index: 2;
}
.tpl-playbook .headline {
  margin-top: 22px;
  font-size: 54px;
  line-height: 1.08;
  max-width: 1400px;
  text-wrap: balance;
}

.playbook {
  --play-sq: 268px;
  flex: 1;
  min-height: 0;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
}
/* contents so the cards and chevrons are direct flex children of .playbook */
.play-step { display: contents; }

.play-card {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--play-sq) 1fr;
  border: 1px solid var(--pine);
}

.play-sq {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--pine);
  color: var(--cream);
  border-right: 1px solid var(--pine);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 26px;
  min-width: 0;
}
.play-sq > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.play-sq > *:not(canvas) { position: relative; z-index: 2; }

.play-num {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--cream);
}
.play-name {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
  color: var(--cream);
  white-space: nowrap;
}
/* ownership chip: cream for theirs, lime for ours, a gradient for shared */
.play-own {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 16px;
  padding: 7px 12px;
  color: var(--dark);
  white-space: nowrap;
}
.play-own--you { background: var(--cream); color: var(--dark); }
.play-own--us  { background: var(--lime);  color: var(--dark); }
.playbook--owner-gradient .play-own--both {
  background: linear-gradient(90deg, var(--cream) 0%, var(--lime) 100%);
  color: var(--dark);
}

.play-copy {
  margin: 0;
  padding: 24px 36px;
  font-size: 24px;
  line-height: 1.45;
  color: #3d3d38;
  display: flex;
  align-items: center;
  min-height: 0;
}

.play-arrow {
  flex: 0 0 22px;
  width: var(--play-sq);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-arrow svg path { stroke: var(--pine); }

.play-outcome {
  flex: 0 0 auto;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--dark);
}
.play-outcome .sq {
  width: 15px;
  height: 15px;
  background: var(--lime);
  flex: 0 0 auto;
}

/* ============================================================
   VIBE CODE OR HIRE THE ENGINEERING
   Header rhythm and absolute card band copied from slide 05, so the
   two slides read as one family. Grained pine block for the work an
   operator can ship, crisp cream plate for the work that is engineering.
   ============================================================ */

.tpl-vibe-check .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 88px 140px 116px;
}
.tpl-vibe-check .headline {
  margin-top: 22px;
  font-size: 54px;
  line-height: 1.08;
  max-width: 1120px;
  text-wrap: balance;
}
.tpl-vibe-check .vibe-lede {
  margin-top: 26px;
  font-size: 24px;
  line-height: 1.45;
  color: rgba(254,255,250,0.72);
  max-width: 1020px;
}

/* the card band sits in the lower two thirds, matching .problem-grid */
.vibe-grid {
  position: absolute;
  left: 140px;
  right: 140px;
  top: 66%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 22px;
  align-items: stretch;
  z-index: 2;
}

.vibe-card {
  min-height: 316px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vibe-card--diy { border: 1px solid var(--pine); }
.vibe-card--eng { border: 1px solid var(--cream); background: var(--cream); }

.vibe-label {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.vibe-card--diy .vibe-label { color: var(--lime); }
.vibe-card--eng .vibe-label { color: var(--orange); }

.vibe-card h3 {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.16;
  text-wrap: balance;
}
.vibe-card--diy h3 { color: var(--cream); }
.vibe-card--eng h3 { color: var(--dark); }

.vibe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.vibe-chip {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 9px 13px;
  border: 1px solid rgba(254,255,250,0.42);
  color: var(--cream);
}

.vibe-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(254,255,250,0.22);
  font-size: 18px;
  line-height: 1.42;
  color: rgba(254,255,250,0.84);
}

.vibe-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.vibe-list li {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.vibe-list .vn {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--orange);
}
.vibe-list .vt {
  font-size: 19px;
  line-height: 1.4;
  color: #3d3d38;
}
.vibe-list .vt strong { font-weight: 600; color: var(--dark); }

/* ============================================================
   FIELD GROUND — the treatment from slides 03/04/05, generalised.
   Ink ground with a dithered field masked in from one edge, plus the
   hairline rectangle. Uses the `cover` field (intro-v2 #2) for its
   lime bloom, desaturated so it stays a ground and not a subject.
   ============================================================ */

.field-slide { background: #1F1F1F; }

.slide-field {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.slide-field canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* right edge — for slides whose copy lives on the left */
.slide-field--right {
  inset: 0 0 0 auto;
  width: 46%;
  opacity: 0.66;
  border-left: 1px solid rgba(254,255,250,0.12);
  filter: saturate(0.58) brightness(0.94) contrast(1.06);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.34) 24%, #000 64%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.34) 24%, #000 64%);
}

/* bottom edge — for slides whose content spans the full width */
.slide-field--bottom {
  inset: auto 0 0 0;
  height: 34%;
  opacity: 0.6;
  filter: saturate(0.58) brightness(0.9) contrast(1.06);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.3) 46%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.3) 46%, transparent 100%);
}
.slide-field--bottom canvas { transform: scaleY(-1); }

/* the hairline rectangle pinned to the right edge */
.field-slide::after {
  content: '';
  position: absolute;
  inset: 54px 54px 54px auto;
  width: 390px;
  border: 1px solid rgba(254,255,250,0.13);
  border-left: 0;
  z-index: 1;
  pointer-events: none;
}
.field-slide--no-rule::after { display: none; }

/* copy always clears the field */
.field-slide .content { position: relative; z-index: 2; }

/* ============================================================
   AGENDA — light minimal (intro-v2 Questions B)
   Cream ground, hairline rows that stretch to distribute evenly,
   lime square marker. Deliberately quiet: it is on screen while
   Mike is talking over it.
   ============================================================ */

.tpl-agenda .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 84px 140px 92px;
  z-index: 2;
}
.tpl-agenda .headline {
  margin-top: 22px;
  font-size: 62px;
  line-height: 1.06;
}

.agenda-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.agenda-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 34px;
  align-items: center;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--border-light);
}
.agenda-item:last-child { border-bottom: 1px solid var(--border-light); }

.agenda-item .n {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.agenda-item h3 {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: var(--dark);
}

.agenda-note {
  flex: 0 0 auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.agenda-note .sq {
  width: 11px;
  height: 11px;
  background: var(--lime);
  flex: 0 0 auto;
}