/* ============================================================
   Pixel ML × AWS — FSI Sales Deck
   Slide-level styles, scoped to a 1920×1080 deck-stage.
   ============================================================ */

@import url("colors_and_type.css");

/* ---------- Type & layout scale (slide canvas at 1920×1080) ---------- */
:root {
  --type-display:    96px;    /* cover hero */
  --type-title:      64px;    /* slide title */
  --type-subtitle:   44px;    /* secondary heading */
  --type-h3:         32px;    /* card title */
  --type-body-lg:    28px;
  --type-body:       24px;
  --type-small:      20px;
  --type-eyebrow:    18px;    /* mono uppercase eyebrow */
  --type-stat-xl:   140px;
  --type-stat:      104px;
  --type-stat-sm:    72px;

  --pad-top:        100px;
  --pad-bottom:      80px;
  --pad-x:          112px;

  --gap-title:       48px;
  --gap-section:     56px;
  --gap-item:        24px;
  --gap-card:        32px;

  --radius-card:     16px;
  --radius-pill:    999px;

  --slide-bg:       #FAFAFA;
  --slide-fg:       #1F1F1F;
  --slide-bg-dark:  #0A1628;
}

/* ---------- Stage scaffolding ---------- */
deck-stage { background:#0A1628; }

deck-stage > section {
  font-family: var(--pml-font-sans);
  color: var(--slide-fg);
  background: var(--slide-bg);
  position: relative;
  overflow: hidden;
}

/* Default frame padding (slides override per-need) */
.frame {
  position: absolute;
  inset: 0;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ---------- Common chrome ---------- */
.eyebrow {
  font-family: var(--pml-font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pml-gray-500);
  font-weight: 500;
}

.eyebrow-on-dark { color: #7CBEFF; }

.slide-title {
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 24px 0 0;
  max-width: 1500px;
  text-wrap: balance;
}

.slide-subtitle {
  font-size: var(--type-body-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--pml-gray-500);
  margin: 24px 0 0;
  max-width: 1300px;
  text-wrap: pretty;
}

/* Footer band — appears on every body slide */
.footer-band {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--pml-font-mono);
  font-size: 16px;
  color: var(--pml-gray-500);
  letter-spacing: 0.04em;
}

.footer-band .lock {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-band .pml-mark {
  height: 22px;
}

.footer-band .pipe {
  width: 1px;
  height: 16px;
  background: var(--pml-gray-300);
}

/* On dark slides */
.dark { background: var(--slide-bg-dark); color: #fff; }
.dark .slide-title { color: #fff; }
.dark .slide-subtitle { color: #9BB1D1; }
.dark .footer-band { color: #6B7C99; }
.dark .footer-band .pipe { background: #2A3B5C; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--pml-gray-200);
  border-radius: var(--radius-card);
  padding: 36px;
  box-sizing: border-box;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pml-shadow-md);
}

.card-accent {
  border-left: 4px solid var(--pml-blue-500);
}

.card-blue {
  background: var(--pml-blue-500);
  color: #fff;
  border: none;
}

.dark .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #fff;
}

/* ---------- Pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--pml-font-sans);
  white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 999px; }
.pill-success { background: var(--pml-success-bg); color: var(--pml-success-text); }
.pill-success .dot { background: var(--pml-success); }
.pill-blue { background: var(--pml-blue-100); color: var(--pml-blue-800); }
.pill-blue .dot { background: var(--pml-blue-500); }
.pill-amber { background: var(--pml-warning-bg); color: var(--pml-warning-text); }
.pill-amber .dot { background: var(--pml-warning); }
.pill-outline {
  background: transparent;
  border: 1px solid var(--pml-gray-300);
  color: var(--pml-gray-600);
}
.pill-outline .dot { background: var(--pml-gray-400); }

/* ---------- Stat tile ---------- */
.stat-num {
  font-size: var(--type-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--pml-blue-500);
  font-feature-settings: "tnum" 1;
}
.stat-num.sm { font-size: var(--type-stat-sm); }
.stat-num.success { color: var(--pml-success); }

.stat-lbl {
  font-size: var(--type-body);
  font-weight: 500;
  color: var(--slide-fg);
  margin-top: 20px;
  line-height: 1.35;
}

.stat-cap {
  font-family: var(--pml-font-mono);
  font-size: 16px;
  color: var(--pml-gray-500);
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* ---------- AWS service chip ---------- */
.aws-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--pml-gray-200);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--pml-font-mono);
  font-size: 18px;
  color: var(--slide-fg);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aws-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 153, 0, 0.4);
  box-shadow: var(--pml-shadow-sm);
}
.aws-chip::before {
  content: "aws";
  font-weight: 700;
  color: var(--pml-aws-orange);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---------- Cover-only background grid ---------- */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  pointer-events: none;
}

.bg-grid.light {
  background-image:
    linear-gradient(rgba(41,151,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,151,255,0.05) 1px, transparent 1px);
}

/* ---------- Brand "gradient" text — export-safe ----------
   Solid color used instead of background-clip:text. PPTX/PDF/Google Slides
   exporters do not reliably honor background-clip on text, which would make
   this text disappear on export. Brand pink reads closest to the gradient's
   dominant tone. */
.grad-text {
  color: #C73A6E;
}
section.dark .grad-text,
section.ave .grad-text {
  color: #EF5767;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .grad-text {
    background: linear-gradient(90deg, #0028FF 0%, #EF5767 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }
}

/* ---------- Aws partner badge mini ---------- */
.aws-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--pml-gray-200);
  border-radius: 10px;
  padding: 14px 22px;
  gap: 4px;
  min-width: 200px;
}
.aws-badge .top {
  font-family: var(--pml-font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--pml-aws-navy);
  letter-spacing: -0.01em;
}
.aws-badge .top span { color: var(--pml-aws-orange); }
.aws-badge .bot {
  font-size: 14px;
  font-weight: 500;
  color: var(--pml-gray-600);
  text-align: center;
  line-height: 1.2;
  font-family: var(--pml-font-sans);
  letter-spacing: 0;
}

/* On dark variants */
.dark .aws-badge {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.dark .aws-badge .top { color: #fff; }
.dark .aws-badge .bot { color: #9BB1D1; }

/* ---------- Country list (target accounts) ---------- */
.country-block .country {
  font-family: var(--pml-font-mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pml-gray-500);
  margin-bottom: 14px;
  font-weight: 500;
}
.country-block .accounts {
  font-size: 22px;
  line-height: 1.5;
  color: var(--slide-fg);
  font-weight: 500;
}
.country-block .accounts .star {
  color: var(--pml-blue-500);
  font-weight: 700;
}
.country-block .accounts .existing {
  color: var(--pml-blue-700);
  font-weight: 600;
}

/* ---------- Numbered marker ---------- */
.num-marker {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--pml-blue-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pml-font-mono);
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---------- Comparison table cells ---------- */
.cmp-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: #fff;
  border: 1px solid var(--pml-gray-200);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.cmp-table > div {
  padding: 22px 28px;
  font-size: 22px;
  line-height: 1.4;
  border-top: 1px solid var(--pml-gray-200);
}
.cmp-table > div:nth-child(-n+3) { border-top: none; }

.cmp-head {
  font-family: var(--pml-font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pml-gray-500);
  font-weight: 500;
  background: var(--pml-gray-50);
}
.cmp-head.after { color: var(--pml-blue-700); background: var(--pml-blue-50); }

.cmp-row-label {
  font-weight: 500;
  color: var(--slide-fg);
}
.cmp-cell-before { color: var(--pml-gray-500); }
.cmp-cell-after { color: var(--slide-fg); }
.cmp-cell-after .num {
  color: var(--pml-success);
  font-weight: 700;
}

/* ---------- Flow diagram ---------- */
.flow-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.flow-node {
  flex: 1;
  background: #fff;
  border: 1px solid var(--pml-gray-200);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-width: 0;
}
.flow-node.gen {
  border-color: var(--pml-blue-500);
  border-width: 2px;
  background: var(--pml-blue-50);
}
.flow-node .step {
  font-family: var(--pml-font-mono);
  font-size: 14px;
  color: var(--pml-blue-600);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.flow-node .label {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--slide-fg);
}
.flow-node .tool {
  font-family: var(--pml-font-mono);
  font-size: 14px;
  color: var(--pml-gray-500);
  line-height: 1.3;
  margin-top: auto;
}
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  color: var(--pml-gray-300);
  font-size: 24px;
  flex-shrink: 0;
}

/* ---------- Map (slide 9) ---------- */
.map-svg { width: 100%; height: 100%; }

/* ---------- Section accent bar (top of body slides) ---------- */
.accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 6px;
  background: var(--pml-brand-gradient);
}

/* ---------- Product-line accents (v2) ---------- */
/* AgenticFlow: pink/coral end of brand gradient */
section.afe .accent-bar { background: linear-gradient(90deg, #C73A6E 0%, #EF5767 100%); }
section.afe .num-marker { background: #EF5767; }
section.afe .stat-num { color: #C73A6E; }
section.afe .pill-blue { background: #FCE7EC; color: #8A1F3A; }
section.afe .pill-blue .dot { background: #EF5767; }

/* Agentic Video: blue end of brand gradient, dark surface */
section.ave { background: var(--slide-bg-dark); color: #fff; }
section.ave .slide-title { color: #fff; }
section.ave .slide-subtitle { color: #9BB1D1; }
section.ave .accent-bar { background: linear-gradient(90deg, #0028FF 0%, #4A6BFF 100%); }
section.ave .footer-band { color: #6B7C99; }
section.ave .footer-band .pipe { background: #2A3B5C; }
section.ave .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: #fff;
}
section.ave .stat-num { color: #7CBEFF; }
section.ave .num-marker { background: #4A6BFF; }
section.ave .eyebrow { color: #7CBEFF; }
section.ave .aws-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* Brochure-style product-line panel */
.line-panel {
  border-radius: var(--radius-card);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.line-panel.afe {
  background: #fff;
  border: 1px solid var(--pml-gray-200);
  border-top: 6px solid #EF5767;
}
.line-panel.ave {
  background: var(--slide-bg-dark);
  border-top: 6px solid #0028FF;
  color: #fff;
}
.line-panel .lp-lockup {
  font-family: var(--pml-font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.line-panel.afe .lp-lockup { color: #C73A6E; }
.line-panel.ave .lp-lockup { color: #7CBEFF; }
.line-panel .lp-name {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.line-panel.ave .lp-name { color: #fff; }
.line-panel .lp-tagline {
  font-size: 22px;
  line-height: 1.4;
}
.line-panel.afe .lp-tagline { color: var(--pml-gray-700); }
.line-panel.ave .lp-tagline { color: #C8D6EE; }

/* Verify/claim chip */
.chip-verify {
  display: inline-block;
  font-family: var(--pml-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #FEF3C7;
  color: #92400E;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}
section.ave .chip-verify {
  background: rgba(245,158,11,0.18);
  color: #FCD34D;
}

/* Section divider full-bleed */
.section-divider {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--pad-x);
}
.section-divider .div-eyebrow {
  font-family: var(--pml-font-mono);
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 32px;
}
.section-divider .div-title {
  font-size: 132px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 1500px;
  text-wrap: balance;
}
.section-divider .div-sub {
  font-size: 32px;
  margin-top: 32px;
  line-height: 1.4;
  max-width: 1400px;
}
.section-divider .div-foot {
  position: absolute;
  bottom: 80px;
  left: var(--pad-x);
  right: var(--pad-x);
  font-family: var(--pml-font-mono);
  font-size: 18px;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
}

/* AWS badge image */
.aws-badge-img {
  height: 96px;
  width: auto;
  display: block;
}
.aws-badge-img.sm { height: 72px; }

/* Two-up product-line cards on About slide */
.line-mini {
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.line-mini:hover {
  transform: translateY(-2px);
  box-shadow: var(--pml-shadow-md);
}
.line-mini.afe {
  background: #fff;
  border: 1px solid var(--pml-gray-200);
  border-left: 4px solid #EF5767;
}
.line-mini.ave {
  background: var(--slide-bg-dark);
  border-left: 4px solid #0028FF;
  color: #fff;
}
.line-mini .lm-tag {
  font-family: var(--pml-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.line-mini.afe .lm-tag { color: #C73A6E; }
.line-mini.ave .lm-tag { color: #7CBEFF; }
.line-mini .lm-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.line-mini .lm-desc {
  font-size: 17px;
  line-height: 1.45;
}
.line-mini.afe .lm-desc { color: var(--pml-gray-600); }
.line-mini.ave .lm-desc { color: #9BB1D1; }