/* ============================================================
   AI in Banking — The Executive Playbook
   RapidCanvas brand · web-native single-page layout
   Extends colors_and_type.css. No print-page constructs.
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #FAFAFB;
  color: var(--rc-dark-blue);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--rc-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Layout containers ----- */
.section {
  padding: 120px 32px;
  position: relative;
}
.section--dark {
  background: var(--rc-dark-blue);
  color: var(--rc-white);
}
.section--gray {
  background: #F3F3F4;
}
.wrap {
  max-width: 880px;
  margin: 0 auto;
}
.wrap--wide {
  max-width: 1180px;
  margin: 0 auto;
}

/* ----- Typography overrides for playbook tone ----- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rc-orange);
  margin: 0 0 16px;
}
.section--dark .eyebrow { color: #FFB07A; }

h1.display {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
}

h2.chapter-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}

h3.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 64px 0 16px;
}

h4.sub-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  margin: 40px 0 8px;
}

p.lead {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
  color: #2A2D3A;
  margin: 0 0 24px;
}
.section--dark p.lead { color: #C7C9D1; }

p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 20px;
  color: #2A2D3A;
  text-wrap: pretty;
}
.section--dark p { color: #C7C9D1; }

p strong, p em { color: inherit; }
em { font-style: italic; }

/* ----- Gradient utility ----- */
.gradient {
  /* Fix Chrome headless PDF leak (thin pink stripe at left edge of every
     gradient text element): inflate the gradient image larger than the
     element and shift it up-left by 3px, so the leaky outer pixels of the
     gradient fall OUTSIDE the visible bounding box. The text mask (via
     background-clip: text) still clips correctly to glyph shapes. */
  background-image: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  background-size: calc(100% + 6px) calc(100% + 6px);
  background-position: -3px -3px;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gradient-bg {
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
}

/* ============================================================
   STICKY TOP NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(14, 19, 40, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 250ms ease;
}
.nav.is-visible { transform: translateY(0); }
.nav__logo { height: 26px; }
.nav__chapters {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: #C7C9D1;
}
.nav__chapters a {
  color: #C7C9D1;
  font-weight: 500;
  text-decoration: none;
}
.nav__chapters a:hover { color: var(--rc-pink); }
@media (max-width: 900px) {
  .nav__chapters { display: none; }
}

/* ============================================================
   HERO COVER
   ============================================================ */
.cover {
  min-height: 100vh;
  background: var(--rc-dark-blue);
  color: var(--rc-white);
  padding: 56px 32px 96px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.cover__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.cover__logo { height: 32px; }
.cover__edition {
  font-size: 13px;
  color: #7E8298;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.cover__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 0;
}

.cover__eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-orange);
  font-weight: 700;
  margin-bottom: 32px;
}

.cover__title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 10vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  color: #fff;
}

.cover__sub {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
}

.cover__deck {
  font-size: 19px;
  line-height: 1.55;
  color: #C7C9D1;
  max-width: 720px;
  margin: 0 0 56px;
  font-weight: 400;
}

.cover__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px;
}
@media (max-width: 900px) {
  .cover__stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.cover__stat-num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.cover__stat-label {
  font-size: 12px;
  line-height: 1.4;
  color: #C7C9D1;
  font-weight: 500;
}

.cover__bottombar {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #7E8298;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
}
.cover__tagline {
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

/* ============================================================
   TOC
   ============================================================ */
.toc {
  background: #F3F3F4;
}
.toc__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 48px;
}
@media (max-width: 720px) {
  .toc__list { grid-template-columns: 1fr; }
}
.toc__item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #E0E0E5;
  text-decoration: none;
  color: var(--rc-dark-blue);
  transition: background 150ms ease;
}
.toc__item:hover { background: rgba(255, 92, 0, 0.04); text-decoration: none; }
.toc__item:hover .toc__title { color: var(--rc-orange); }
.toc__num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  min-width: 48px;
  letter-spacing: -0.01em;
}
.toc__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  flex: 1;
  color: var(--rc-dark-blue);
  transition: color 150ms ease;
}

/* ============================================================
   CHAPTER HERO (full-bleed dark divider)
   ============================================================ */
.chapter-hero {
  background: var(--rc-dark-blue);
  color: var(--rc-white);
  padding: 140px 32px 140px;
  position: relative;
  overflow: hidden;
}
.chapter-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.chapter-hero__num {
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rc-orange);
  font-weight: 700;
  margin-bottom: 24px;
  display: inline-block;
}
.chapter-hero__title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 6.5vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 24px;
  max-width: 16ch;
}
.chapter-hero__sub {
  font-size: 22px;
  line-height: 1.45;
  color: #C7C9D1;
  font-weight: 400;
  max-width: 60ch;
  margin: 0;
}
/* Decorative cog peek — gradient cog anchored at bottom-right corner,
   positioned so only the upper-left quadrant of the cog is visible inside the section */
.chapter-hero__deco {
  position: absolute;
  right: -260px;        /* = -width/2  → horizontal center of cog sits ON the right edge */
  bottom: -260px;       /* = -height/2 → vertical center of cog sits ON the bottom edge */
  width: 520px;
  height: 520px;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  -webkit-mask: url('assets/logos/rc-cog-mask.svg') center / contain no-repeat;
  mask: url('assets/logos/rc-cog-mask.svg') center / contain no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.quote {
  margin: 56px 0;
  padding: 0 0 0 32px;
  border-left: 4px solid;
  border-image: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%) 1;
}
.quote__body {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--rc-dark-blue);
  margin: 0 0 16px;
}
.section--dark .quote__body { color: #fff; }
.quote__attr {
  font-size: 14px;
  color: #6A6A72;
  font-weight: 500;
}
.section--dark .quote__attr { color: #9A9DAB; }

/* ============================================================
   CALLOUT (light info box)
   ============================================================ */
.callout {
  background: #FFF6EE;
  border-left: 4px solid var(--rc-orange);
  padding: 32px 36px;
  margin: 48px 0;
  border-radius: 0 12px 12px 0;
}
.callout__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-orange);
  margin: 0 0 12px;
}
.callout__body { font-size: 17px; line-height: 1.6; margin: 0; color: var(--rc-dark-blue); }

.callout--dark {
  background: #1A2040;
  border-left-color: var(--rc-orange);
  color: #fff;
  border-radius: 0 12px 12px 0;
}
.callout--dark .callout__body { color: #C7C9D1; }

.callout--gradient {
  background: #fff;
  border: none;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14,19,40,.06), 0 8px 24px rgba(14,19,40,.06);
  overflow: hidden;
}
.callout--gradient::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
}

/* ============================================================
   STAT GRID (used inside chapters)
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0;
}
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
  background: #fff;
  border: 1px solid #E6E6E9;
  border-radius: 14px;
  padding: 28px 24px;
}
.section--dark .stat-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.stat-card__num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.stat-card__label {
  font-size: 13px;
  line-height: 1.45;
  color: #4A4A4F;
  font-weight: 500;
}
.section--dark .stat-card__label { color: #C7C9D1; }

/* ============================================================
   NUMBERED LIST (the "Five facts" pattern)
   ============================================================ */
.numlist {
  list-style: none;
  padding: 0;
  margin: 32px 0 48px;
  counter-reset: numlist;
}
.numlist__item {
  position: relative;
  padding: 28px 0 28px 88px;
  border-top: 1px solid #E6E6E9;
  counter-increment: numlist;
}
.section--dark .numlist__item { border-top-color: rgba(255,255,255,.08); }
.numlist__item:last-child { border-bottom: 1px solid #E6E6E9; }
.section--dark .numlist__item:last-child { border-bottom-color: rgba(255,255,255,.08); }
.numlist__item::before {
  content: counter(numlist, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 28px;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.numlist__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--rc-dark-blue);
}
.section--dark .numlist__title { color: #fff; }
.numlist__body {
  font-size: 16.5px;
  line-height: 1.6;
  color: #4A4A4F;
  margin: 0;
}
.section--dark .numlist__body { color: #C7C9D1; }

/* ============================================================
   FIGURE / CHART
   ============================================================ */
.figure {
  margin: 56px 0;
  padding: 32px;
  background: #fff;
  border: 1px solid #E6E6E9;
  border-radius: 16px;
}
.section--dark .figure {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.figure__caption {
  font-size: 13px;
  color: #6A6A72;
  margin-top: 16px;
  font-weight: 500;
  font-style: italic;
}
.section--dark .figure__caption { color: #9A9DAB; }
.figure svg { max-width: 100%; height: auto; }

/* ============================================================
   COMPARISON TABLE (Chapter 4)
   ============================================================ */
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 14.5px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E6E6E9;
}
.cmp-table th {
  background: #F3F3F4;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rc-dark-blue);
  padding: 16px 14px;
  border-bottom: 2px solid var(--rc-dark-blue);
  vertical-align: top;
}
.cmp-table th.cmp-table__highlight {
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  color: #fff;
  border-bottom-color: transparent;
}
.cmp-table td {
  padding: 14px;
  border-bottom: 1px solid #ECECEF;
  vertical-align: top;
  color: #2A2D3A;
  line-height: 1.45;
}
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table tr:nth-child(even) td { background: #FAFAFB; }
.cmp-table .cmp-table__row-label {
  font-weight: 700;
  color: var(--rc-dark-blue);
  width: 18%;
}

/* ============================================================
   MATURITY MODEL TABLE (Chapter 9)
   ============================================================ */
.maturity {
  display: grid;
  grid-template-columns: 64px 1fr 1fr 1fr;
  gap: 0;
  margin: 32px 0;
  border: 1px solid #E6E6E9;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 900px) { .maturity { grid-template-columns: 56px 1fr; gap: 0; } .maturity__header.is-mobile-hide, .maturity__cell.is-mobile-hide { display: none; } }

.maturity__header {
  background: #F3F3F4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px;
  border-bottom: 2px solid var(--rc-dark-blue);
  color: var(--rc-dark-blue);
}
.maturity__stage {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding: 24px 8px;
  border-bottom: 1px solid #ECECEF;
}
.maturity__cell {
  padding: 24px 16px;
  border-bottom: 1px solid #ECECEF;
  font-size: 14.5px;
  line-height: 1.5;
  color: #2A2D3A;
}
.maturity__cell strong { color: var(--rc-dark-blue); display: block; margin-bottom: 4px; font-size: 16px; }
.maturity__row:last-child > * { border-bottom: none; }

/* ============================================================
   VOICES GRID
   ============================================================ */
.voices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin: 48px 0;
}
@media (max-width: 720px) { .voices { grid-template-columns: 1fr; } }
.voice {
  padding: 32px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E6E6E9;
  position: relative;
}
.voice::before {
  content: "“";
  position: absolute;
  top: 8px;
  left: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 80px;
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.voice__body {
  font-size: 17px;
  line-height: 1.55;
  color: #2A2D3A;
  margin: 32px 0 16px;
  font-style: italic;
}
.voice__attr { font-size: 13px; color: #6A6A72; font-weight: 500; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background: var(--rc-dark-blue);
  color: #fff;
  padding: 120px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}
.final-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.final-cta__title {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 auto 32px;
  max-width: 14ch;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.final-cta__title .gradient {
  -webkit-text-fill-color: transparent;
}
.final-cta__body {
  font-size: 19px;
  line-height: 1.55;
  color: #C7C9D1;
  margin: 0 auto 40px;
  max-width: 60ch;
}
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.final-cta .btn-row { justify-content: center; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  background: var(--rc-orange);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 10px;
  text-decoration: none;
  transition: filter 120ms ease, transform 120ms ease;
}
.cta-btn:hover { filter: brightness(1.06); text-decoration: none; }
.cta-btn:active { transform: translateY(1px); }
.cta-btn__arrow { font-size: 22px; line-height: 1; }
.cta-link {
  font-size: 14px;
  color: #C7C9D1;
  font-weight: 500;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: #050818;
  color: #7E8298;
  padding: 56px 32px 48px;
  font-size: 13px;
}
.foot__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.foot__logo { height: 22px; opacity: .85; }
.foot__tagline { font-style: italic; color: #C7C9D1; }
.foot__tagline em { font-weight: 700; font-style: italic; }

/* ============================================================
   MISC
   ============================================================ */
hr.rule {
  border: 0;
  height: 4px;
  width: 56px;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  margin: 0 0 32px;
  border-radius: 2px;
}

ul.bulleted {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
ul.bulleted li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  line-height: 1.55;
  color: #2A2D3A;
}
ul.bulleted li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #FD9DFF 0%, #FF6D00 100%);
  border-radius: 50%;
}
.section--dark ul.bulleted li { color: #C7C9D1; }

/* Inline trademark */
sup.tm { font-size: 0.55em; vertical-align: super; }

/* ============================================================
   PRINT-FRIENDLY (so it can still be saved as PDF if needed)
   ============================================================ */
@media print {
  .nav { display: none; }
  .section { padding: 60px 24px; break-inside: avoid; }
  .chapter-hero { padding: 80px 24px; }
}