/*
 * Clever Prep — Homepage sections (3 → 7) + footer + shared utility patterns.
 * Bricks defaults section/container/block to display:flex; flex-direction:column;
 * align-items:flex-start; width:100%. Override explicitly anywhere we want
 * horizontal layout or content-sized children.
 */

/* ────────────── Hero scroll-grow target ──────────────
   `.fill-element` (a.k.a. [data-flip-target]) starts at the strip-card slot
   and is lerped to full-viewport size by reforma-gsap-init.js on scroll.
   It starts at opacity:0; the JS sets opacity:1 after positioning it. */
[data-flip-target],
.section_hero-home-a .fill-element {
  opacity: 0;
}

/* Reforma's original IX2 timelines manage the strip — slide, rest→animated
   swap, etc. We don't fight any of it; just let it run. */
.section_hero-home-a.cp-hero-ready .sticky-scroll { opacity: 1; }

/* Hide the leftover post-flip video inside `.wrap_main-animation` — we use
   the sticky-scroll video that grows on scroll, not Reforma's inline one. */
.section_hero-home-a .wrap_main-animation .video-main-animarion:not(.second) {
  display: none !important;
}

/* ────────────── HERO HEADLINE (replaces Reforma's "Reforma is not about…") ────────────── */

/* Push the headline (not the whole section) down so the badge clears the
   fixed nav. Pushing the section itself would change ScrollTrigger's
   measurement of section height and stretch the scroll-flip animation. */
.section_hero-home-a .master_hero-home-a {
  padding-top: clamp(80px, 10vh, 140px);
}

/* Override Reforma's narrow headline container so our text doesn't wrap */
.section_hero-home-a .headline_hero-home-a {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}

/* Research-preview badge above the H1 */
.section_hero-home-a .cp-hero-badge {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  margin: 0 auto 22px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(40, 53, 74, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(20, 30, 50, 0.06);
  font-family: var(--cp-font-mono, var(--cp-font-body));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cp-text-headline, #28354A);
  text-decoration: none;
  align-self: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* (Badge is a block-with-auto-margin so headline_hero-home-a stays as
   Reforma intended — no flex override that would break IX2 target rects.) */
.section_hero-home-a .cp-hero-badge:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 6px 14px rgba(20, 30, 50, 0.10);
}
.section_hero-home-a .cp-hero-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cp-orange, #ED863C);
  box-shadow: 0 0 0 4px rgba(237, 134, 60, 0.18);
  flex: 0 0 8px;
  animation: cp-hero-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes cp-hero-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(237, 134, 60, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(237, 134, 60, 0.04); }
}
.section_hero-home-a .cp-hero-badge__arrow {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.section_hero-home-a .cp-hero-badge:hover .cp-hero-badge__arrow {
  transform: translateX(2px);
}
.section_hero-home-a .cp-hero-badge[data-cp-pending] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
}

.cp-hero-headline {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  letter-spacing: var(--cp-tracking-display);
  line-height: var(--cp-leading-display);
  font-size: var(--cp-text-display);
  color: var(--cp-text-headline);
  text-align: center;
  margin: 0;
  width: 100%;
  max-width: 100%;
}
.cp-hero-headline__line1 {
  display: block;
  white-space: nowrap;       /* keep on one line */
}

/* Pre-animation hidden state — removed by JS once it takes control.
   Prevents a flash of the heading before entry animation starts. */
.cp-hero-headline[data-cp-pending] .cp-hero-headline__line1,
.cp-hero-headline[data-cp-pending] .cp-rotate-words__item.is-active,
.cp-hero-headline__body[data-cp-pending],
.cp-hero-headline__ctas[data-cp-pending] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
}

/* Body copy under the heading */
.cp-hero-headline__body {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-light);
  text-align: center;
  margin: 24px auto 0;
  max-width: 520px;
}

/* CTA row */
.cp-hero-headline__ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 32px auto 0;
}
.cp-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: var(--cp-radius-sm);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  font-weight: 400;
  letter-spacing: -0.18px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--cp-border-soft);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.cp-hero-btn--primary {
  background: var(--cp-navy);
  border-color: var(--cp-navy);
  color: #ffffff;
}
.cp-hero-btn--primary:hover {
  background: #1f2a3b;
  transform: translateY(-1px);
}
.cp-hero-btn--secondary {
  background: #ffffff;
  color: var(--cp-text-primary);
}
.cp-hero-btn--secondary:hover {
  border-color: var(--cp-text-primary);
  transform: translateY(-1px);
}

/* Rotating word container — its own line; sized to longest variant; no jump */
.cp-rotate-words {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;        /* center under "Supercharge your" */
  text-align: center;
}
.cp-rotate-words__sizer {
  /* Invisible spacer — defines the wrapper's natural width/height */
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
/* Each rotation item paints its OWN gradient (parent text-clip doesn't reach
   absolute-positioned children reliably across browsers). */
.cp-rotate-words__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: linear-gradient(to right, #ea8b3f 0%, rgba(234,139,63,0.47) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.cp-rotate-words__item.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.cp-rotate-words__item.is-leaving {
  opacity: 0;
  transform: translateY(-24px);
  filter: blur(8px);
  transition-duration: .45s;
}

/* ────────────── Icon List (custom Bricks element) ────────────── */
.brxe-cp-icon-list,
.cp-icon-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  gap: 14px;
}
.cp-icon-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cp-icon-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
/* Whether the icon is a font icon (<i>) or an SVG, size it consistently */
.cp-icon-list__icon > i,
.cp-icon-list__icon > svg {
  display: block;
  width: 1em;
  height: 1em;
  font-size: inherit;
}
.cp-icon-list__icon > svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

.cp-icon-list__icon--filled {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cp-text-primary);
  color: #fff;
  font-size: 14px;
}
.cp-icon-list__icon--outline {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--cp-text-primary);
  font-size: 18px;
}
.cp-icon-list__text {
  font-family: var(--cp-font-body);
  font-weight: 500;
  font-size: var(--cp-text-body);
  color: var(--cp-text-secondary);
  line-height: var(--cp-leading-body);
}

/* ────────────── shared utilities ────────────── */

.cp-mono-label {
  display: inline-block;
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-small);
  font-weight: 200;
  letter-spacing: var(--cp-tracking-mono-sm);
  color: var(--cp-text-mono);
  line-height: var(--cp-leading-mono);
  text-transform: uppercase;
}

.cp-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  width: auto !important;
  align-items: center !important;
  gap: 8px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--cp-border-card);
  border-radius: var(--cp-radius-lg);
  color: var(--cp-text-primary);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.18px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s, transform .15s, border-color .15s, background-color .15s, color .15s;
  position: relative;
  isolation: isolate;
}
.cp-btn:hover { transform: translateY(-1px); border-color: var(--cp-text-primary); }

/* ── Text-swap hover effect (Evermind-style) ──
   JS wraps each button's label in a `.cp-btn__label-stack` containing two
   stacked copies of the label — `--top` is visible at rest, `--btm` sits one
   line below the visible area. On hover both translate up one line. */
.cp-btn .cp-btn__label-stack {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
  /* Slight horizontal padding so descenders/ascenders don't clip */
  padding: 0;
}
.cp-btn .cp-btn__label {
  display: block;
  height: 1em;
  line-height: 1em;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.cp-btn:hover .cp-btn__label--top,
.cp-btn:hover .cp-btn__label--btm {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .cp-btn .cp-btn__label { transition: none !important; }
  .cp-btn:hover .cp-btn__label--top,
  .cp-btn:hover .cp-btn__label--btm { transform: none !important; }
}

.cp-btn--ghost { background: #fff; }

/* Primary — orange filled CTA. `.cp-btn--orange` kept as legacy alias. */
.cp-btn--primary,
.cp-btn--orange {
  background: var(--cp-orange);
  border-color: var(--cp-orange-border);
  color: #fff;
}
.cp-btn--primary:hover,
.cp-btn--orange:hover { filter: brightness(1.05); border-color: var(--cp-orange-border); }

/* Secondary — navy filled CTA */
.cp-btn--secondary {
  background: var(--cp-text-headline);
  border-color: var(--cp-text-headline);
  color: #fff;
}
.cp-btn--secondary:hover { filter: brightness(1.10); border-color: var(--cp-text-headline); }

/* ── Tertiary "text" button — text + arrow, no fill / no border ── */
.cp-btn--text {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  color: var(--cp-text-headline) !important;
  font-weight: 500;
  gap: 8px !important;
}
.cp-btn--text:hover {
  transform: none;
  border-color: transparent !important;
  color: var(--cp-orange) !important;
}
.cp-btn--text .cp-btn__arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.cp-btn--text:hover .cp-btn__arrow { transform: translateX(4px); }

/* ── Chip — small, faint-filled, rounded pill ──
   Use for: secondary in-panel actions (back, close, breadcrumb), tag-style
   tertiary CTAs. NOT for primary CTAs and NOT for navigation buttons. */
.cp-btn--chip {
  padding: 8px 14px !important;
  background: rgba(15, 18, 23, 0.06) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--cp-text-headline) !important;
  font-family: var(--cp-font-mono, ui-monospace) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.cp-btn--chip:hover {
  background: rgba(15, 18, 23, 0.14) !important;
  transform: none;
  border-color: transparent !important;
}


/* Generic section reset to escape Bricks default centering */
[class^="cp-section-"].brxe-section,
[class*=" cp-section-"].brxe-section {
  align-items: stretch !important;
  width: 100%;
  padding: 0;
  background: var(--cp-cream-bg);
}
[class$="__inner"].brxe-container {
  width: 100%;
  max-width: 1440px;
  padding: 0 80px;
  margin: 0 auto;
}


/* ────────────── 3) SCHOOL LOGOS BAND ────────────── */

.brxe-section.cp-section-schools {
  padding: 80px 0 40px;
}
.brxe-container.cp-section-schools__inner {
  align-items: center !important;
  text-align: center;
}
.cp-section-schools__label {
  font-size: var(--cp-text-body);
  letter-spacing: var(--cp-tracking-mono);
  margin-bottom: 28px;
  text-align: center;
}
/* ─── Marquee (used by school-logo strip) ─── */
.brxe-block.cp-marquee {
  position: relative;
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  overflow: hidden;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.brxe-block.cp-marquee__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: max-content !important;
  gap: 64px;
  padding: 10px 0;                 /* breathing room so overflow:hidden doesn't clip glyph tops */
  animation: cp-marquee-scroll 60s linear infinite;
  will-change: transform;
}
.brxe-block.cp-marquee:hover .cp-marquee__track {
  animation-play-state: paused;
}

/* Item: shared style for both image and text variants */
.cp-marquee__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity .25s ease;
}
.cp-marquee__item:hover { opacity: 1; }

.cp-marquee__item--text {
  font-family: var(--cp-font-heading);
  font-size: 22px;
  line-height: 1.35;               /* full line box so ascenders/caps aren't clipped */
  letter-spacing: -0.5px;
  color: var(--cp-text-primary);
}
/* Image (SVG wordmark) variant */
.brxe-image.cp-marquee__item--logo {
  height: 28px;
  width: auto !important;
}
.brxe-image.cp-marquee__item--logo img {
  display: block;
  height: 28px;
  width: auto;
  max-width: none;
}

@keyframes cp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* exactly one set length — second set is a duplicate */
}

@media (prefers-reduced-motion: reduce) {
  .brxe-block.cp-marquee__track { animation: none; }
}


/* ────────────── 4) PLATFORMS ────────────── */

.brxe-section.cp-section-platforms {
  padding: 100px 0 80px;
}
.brxe-block.cp-section-platforms__head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end !important;
  width: 100% !important;
  gap: 40px;
  margin-bottom: 48px;
}
.cp-section-platforms__head .cp-mono-label {
  grid-column: 1 / -1;
  margin-bottom: 12px;
}
.cp-section-platforms__title {
  font-family: var(--cp-font-heading);
  font-size: var(--cp-text-h2);
  font-weight: 400;
  line-height: var(--cp-leading-h2);
  letter-spacing: var(--cp-tracking-h2);
  color: var(--cp-text-headline);
  margin: 0;
  max-width: 576px;
}
.cp-section-platforms__blurb {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
  margin: 0;
  max-width: 466px;
  align-self: end;
}

.brxe-block.cp-section-platforms__cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;        /* equal-height columns so CTAs bottom-align */
  gap: 32px;
  width: 100% !important;
}

/* Platform CARD = column wrapper (no bg); contains media block + details block */
.brxe-block.cp-platform-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  background: transparent;
  gap: 32px;
}

/* MEDIA block — the only part with pastel background */
.brxe-block.cp-platform-card__media {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 32px 32px 0;
  border-radius: var(--cp-radius-md);
  min-height: 501px;
  position: relative;
  overflow: hidden;
}
.cp-platform-card__media--nbeo { background: var(--cp-bg-pastel-blue); }
.cp-platform-card__media--mcat { background: var(--cp-bg-pastel-cream); }

/* Brand row (top of media) */
.brxe-block.cp-platform-card__brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 18px;
}
.brxe-block.cp-platform-card__brand-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  width: auto !important;
}
.cp-platform-card__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--cp-text-primary);
  line-height: 1;
}
/* Arrow link — uses an inline SVG masked to inherit currentColor */
.cp-platform-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 0;
  line-height: 0;
  color: var(--cp-text-primary);
  text-decoration: none;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 50%;
  transition: transform .15s, background-color .15s;
}
.cp-platform-card__arrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: currentColor;
  -webkit-mask-image: url('/wp-content/themes/bricks-child/assets/arrow-up-right.svg');
          mask-image: url('/wp-content/themes/bricks-child/assets/arrow-up-right.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.cp-platform-card__arrow:hover {
  transform: translate(2px, -2px);
  background-color: rgba(0,0,0,0.04);
}

/* Title — inside media block */
.cp-platform-card__title {
  font-family: var(--cp-font-heading);
  font-size: var(--cp-text-h4);
  font-weight: 400;
  line-height: var(--cp-leading-h4);
  letter-spacing: var(--cp-tracking-h4);
  color: var(--cp-text-headline);
  margin: 0 0 28px;
}

/* Screenshot — fills remaining height of media block. When the platform
   card emits a `data-cp-gif-hover` attribute, this frame contains a
   <canvas> (first-frame still) + an <img> (animation), driven by the
   gif-on-hover module in clever-prep-recipes.js. */
.brxe-block.cp-platform-card__screenshot {
  width: 100% !important;
  flex: 1 1 auto;
  min-height: 280px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0;
  margin-top: auto;
  position: relative;
  overflow: hidden;
}
.brxe-block.cp-platform-card__screenshot[data-cp-gif-hover] {
  cursor: pointer;
  /* Touch users get a tap-to-play affordance; desktop keyboard users see
     a focus ring when they tab to the mockup. */
}
.brxe-block.cp-platform-card__screenshot[data-cp-gif-hover]:focus-visible {
  outline: 3px solid var(--cp-orange, #ED863C);
  outline-offset: 2px;
}
/* Canvas + img slots — both fill the frame, stacked. Only one is visible
   at a time (visibility is toggled by JS via `.is-playing` on the parent). */
.brxe-block.cp-platform-card__shot-still,
.brxe-block.cp-platform-card__shot-anim {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Autoplay preview video (NBEO card) — fills the frame, top-anchored. The
   Bricks `html` element renders the <video> inside a .brxe-html wrapper. */
.cp-platform-card__screenshot .brxe-html,
.cp-platform-card__shot-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cp-platform-card__shot-video {
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* Static screenshot image (NBEO card) — fills the frame, top-anchored. */
.brxe-image.cp-platform-card__shot-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.brxe-image.cp-platform-card__shot-img,
.cp-platform-card__shot-img img {
  display: block;
  object-fit: cover;
  object-position: center top;
}

.brxe-block.cp-platform-card__shot-still { z-index: 2; transition: opacity 0.2s ease; }
.brxe-block.cp-platform-card__shot-anim  { z-index: 1; opacity: 0; transition: opacity 0.2s ease; }
.cp-platform-card__screenshot.is-playing .cp-platform-card__shot-still { opacity: 0; }
.cp-platform-card__screenshot.is-playing .cp-platform-card__shot-anim  { opacity: 1; z-index: 2; }
/* JS injects a <canvas> into the still slot and an <img> into the anim
   slot — keep them sized to cover the frame. */
.cp-platform-card__shot-still canvas,
.cp-platform-card__shot-anim img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Subtle "tap to play" hint on touch devices only — desktop hover does
   the same thing without needing a label. */
.brxe-block.cp-platform-card__screenshot[data-cp-gif-hover]::after {
  content: 'Tap to play';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(15, 18, 23, 0.7);
  color: #fff;
  font-family: var(--cp-font-body, system-ui);
  font-size: 12px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}
@media (hover: none) {
  .brxe-block.cp-platform-card__screenshot[data-cp-gif-hover]:not(.is-playing)::after {
    opacity: 1;
  }
}

/* DETAILS block — below media, on page bg (no card bg) */
.brxe-block.cp-platform-card__details {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  background: transparent;
  flex: 1 1 auto;            /* fill the column so the CTA can bottom-anchor */
}
.cp-platform-card__blurb {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
  margin: 0 0 26px;
  max-width: 468px;
}

/* Feature list */
.brxe-block.cp-platform-card__features {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px;
  margin-bottom: 30px;
}
.brxe-block.cp-platform-card__feature {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  width: auto !important;
}
.cp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-family: var(--cp-font-body);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 50%;
  background: var(--cp-text-primary);
  line-height: 1;
}
.cp-feature-icon--list,
.cp-feature-icon--sparkle {
  background: transparent;
  color: var(--cp-text-primary);
  font-size: 18px;
}
/* Glass-icon variant — no circle background, slightly larger, full-colour SVG. */
.brxe-image.cp-feature-icon--glass {
  width: 30px !important;
  height: 30px;
  flex-shrink: 0;
  background: none !important;
  border-radius: 0 !important;
}
.brxe-image.cp-feature-icon--glass img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cp-platform-card__feature-text {
  font-family: var(--cp-font-body);
  font-weight: 500;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
}

/* Dashed divider */
.brxe-block.cp-platform-card__divider {
  width: 100% !important;
  height: 1px;
  border-top: 1px dashed var(--cp-border-card);
  background: transparent;
  margin-top: auto;          /* push divider + CTA to the card bottom so both buttons align */
  margin-bottom: 28px;
  flex: 0 0 auto;
}

.cp-platform-card__details .cp-btn { align-self: flex-start; }


/* ────────────── 5) TESTIMONIAL — PEEK CAROUSEL ────────────── */

.brxe-section.cp-section-testimonial {
  padding: 60px 0;
  width: 100%;
  overflow: hidden;          /* clip slides at the page edges */
}
.brxe-container.cp-section-testimonial__inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0;
  margin: 0;
  overflow: visible;
}

/* Slider wrapper — full viewport width */
.brxe-block.cp-testimonial-slider {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
}

/* Track holds all slides in a horizontal row that translates left/right */
.brxe-block.cp-testimonial-slider__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: max-content !important;   /* track is wider than the viewport */
  gap: 32px;
  position: relative;
  will-change: transform;
  padding: 8px 0;                  /* room for hover lift */
}

/* Slide width: fixed at breakpoints so peek geometry is predictable */
.brxe-block.cp-testimonial-slide {
  flex: 0 0 720px !important;
  width: 720px !important;
  min-width: 720px !important;
  max-width: 720px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #fff;
  border: 1px solid var(--cp-border-testimonial);
  border-radius: var(--cp-radius-lg);
  padding: 60px 40px;
  text-align: center;
  /* default state for far / non-visible slides */
  opacity: 0.10;
  filter: blur(8px);
  transform: scale(0.92);
  transition: opacity .5s ease, filter .5s ease, transform .5s ease;
  pointer-events: none;
  user-select: none;
}
.brxe-block.cp-testimonial-slide.is-near {
  opacity: 0.55;
  filter: blur(4px);
  transform: scale(0.95);
  pointer-events: auto;
  cursor: pointer;
}
.brxe-block.cp-testimonial-slide.is-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

@media (min-width: 1200px) {
  .brxe-block.cp-testimonial-slide {
    flex: 0 0 880px !important;
    width: 880px !important;
    min-width: 880px !important;
  }
}
@media (min-width: 1600px) {
  .brxe-block.cp-testimonial-slide {
    flex: 0 0 1000px !important;
    width: 1000px !important;
    min-width: 1000px !important;
  }
}
@media (max-width: 767px) {
  .brxe-block.cp-testimonial-slide {
    flex: 0 0 86vw !important;
    width: 86vw !important;
    min-width: 86vw !important;
    padding: 40px 24px;
  }
  .brxe-block.cp-testimonial-slider__track { gap: 16px; }
}

.brxe-block.cp-testimonial-card__stars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  width: auto !important;
  margin-bottom: 32px;
}
.cp-testimonial-card__star {
  color: var(--cp-orange);
  font-size: 22px;
  line-height: 1;
}
.cp-testimonial-card__quote {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h3);
  line-height: var(--cp-leading-h3);
  letter-spacing: -0.43px;
  color: var(--cp-text-headline);
  margin: 0 auto 32px;
  max-width: 862px;
}
.brxe-block.cp-testimonial-card__meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px;
  width: auto !important;
}
.cp-testimonial-card__org {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h5);
  letter-spacing: 0.6px;
  color: var(--cp-text-headline);
}
/* Divider — lock to 1px wide so flex doesn't expand it */
.brxe-block.cp-testimonial-card__divider {
  flex: 0 0 1px !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 46px !important;
  background: var(--cp-text-headline) !important;
  opacity: 0.25;
  align-self: center !important;
}
.brxe-block.cp-testimonial-card__person {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: auto !important;
  gap: 2px;
}
.cp-testimonial-card__name {
  font-family: var(--cp-font-heading);
  font-size: var(--cp-text-h5);
  letter-spacing: var(--cp-tracking-h5);
  color: var(--cp-text-headline);
}
.cp-testimonial-card__role {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-primary);
}

/* Controls bar */
.brxe-block.cp-testimonial-slider__controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px;
  width: 100% !important;
  margin-top: 32px;
}
.cp-testimonial-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--cp-border-testimonial);
  border-radius: 50%;
  color: var(--cp-text-headline);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
  font-family: var(--cp-font-body);
}
.cp-testimonial-slider__btn:hover {
  border-color: var(--cp-text-headline);
  transform: translateY(-1px);
}
.cp-testimonial-slider__btn:focus-visible {
  outline: 2px solid var(--cp-orange);
  outline-offset: 2px;
}
.cp-testimonial-slider__btn[disabled] { opacity: .35; cursor: default; }

/* Dots */
.brxe-block.cp-testimonial-slider__dots {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  width: auto !important;
}
.cp-testimonial-slider__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(42,33,25,0.18);
  cursor: pointer;
  transition: background-color .2s, width .2s;
}
.cp-testimonial-slider__dot.is-active {
  background: var(--cp-orange);
  width: 24px;
  border-radius: 4px;
}


/* ────────────── 6) SERVICES TRIO ────────────── */

.brxe-section.cp-section-services {
  padding: 80px 0;
}
.brxe-block.cp-section-services__head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end !important;
  width: 100% !important;
  gap: 40px;
  margin-bottom: 48px;
}
.cp-section-services__title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h2);
  line-height: var(--cp-leading-h2);
  letter-spacing: var(--cp-tracking-h2);
  color: var(--cp-text-headline);
  margin: 0;
  max-width: 576px;
}
.cp-section-services__blurb {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
  margin: 0;
  max-width: 504px;
  align-self: end;
}

.brxe-block.cp-section-services__cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100% !important;
}
.brxe-block.cp-service-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 501px;
  padding: 36px;
  border-radius: var(--cp-radius-md);
  position: relative;
}
.cp-service-card--sage  { background: var(--cp-bg-pastel-sage); }
.cp-service-card--warm  { background: var(--cp-bg-pastel-warm); }
.cp-service-card--green { background: var(--cp-bg-pastel-green); }

.brxe-block.cp-service-card__decoration {
  width: 100% !important;
  height: 220px;
  margin-bottom: 32px;
  position: relative;
}
/* simple chip decorations to suggest the figma circles */
.cp-service-card--sage  .cp-service-card__decoration::before,
.cp-service-card--sage  .cp-service-card__decoration::after,
.cp-service-card--warm  .cp-service-card__decoration::before,
.cp-service-card--warm  .cp-service-card__decoration::after,
.cp-service-card--green .cp-service-card__decoration::before,
.cp-service-card--green .cp-service-card__decoration::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  width: 110px; height: 110px;
}
.cp-service-card__decoration::before { left: 20px;  top: 30px; }
.cp-service-card__decoration::after  { left: 110px; top: 60px; background: rgba(0,0,0,0.06); }

.cp-service-card .cp-mono-label { margin-bottom: 12px; }
.cp-service-card__title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h4);
  line-height: var(--cp-leading-h4);
  letter-spacing: var(--cp-tracking-h4);
  color: var(--cp-text-headline);
  margin: 0 0 12px;
}
.cp-service-card__body {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
  margin: 0 0 28px;
  max-width: 443px;
  flex: 1;
  padding-top: 22px;
  border-top: 1px solid var(--cp-border-card);
}
.cp-service-card .cp-btn { align-self: flex-start; }


/* ────────────── 7) STATS ────────────── */

.brxe-section.cp-section-stats {
  padding: 100px 0 120px;
}
.brxe-block.cp-section-stats__head {
  align-items: center !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 56px;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px;
}
.cp-section-stats__title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h2);
  line-height: var(--cp-leading-h2);
  letter-spacing: var(--cp-tracking-h2);
  color: var(--cp-text-headline);
  margin: 0;
  max-width: 545px;
}
.cp-section-stats__blurb {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
  margin: 0;
  max-width: 518px;
}

.brxe-block.cp-section-stats__cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end !important;
  gap: 24px;
  width: 100% !important;
}
.brxe-block.cp-stat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  background: linear-gradient(180deg, var(--cp-stat-grad-from) 0%, var(--cp-stat-grad-to) 100%);
  border-radius: var(--cp-radius-2xl);
  padding: 38px;
}
/* staircase heights from figma: 348 / 407 / 472 */
.cp-section-stats__cards .cp-stat-card:nth-child(1) { min-height: 348px; }
.cp-section-stats__cards .cp-stat-card:nth-child(2) { min-height: 407px; }
.cp-section-stats__cards .cp-stat-card:nth-child(3) { min-height: 472px; }

.brxe-block.cp-stat-card .cp-mono-label.cp-stat-card__label { letter-spacing: 2.16px; align-self: flex-start; }
.cp-stat-card__big {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h3);
  line-height: var(--cp-leading-h2);
  letter-spacing: var(--cp-tracking-h3);
  color: var(--cp-text-headline);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.cp-stat-card__body {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: 28px;
  color: var(--cp-text-mono);
  margin: auto 0 0;
  max-width: 333px;
}


/* ────────────── 8) FOOTER ────────────── */

.brxe-section.cp-section-footer {
  padding: 60px 0 40px;
  background: var(--cp-card-overlay);
  border-top: 1px solid var(--cp-border-soft);
}
.brxe-container.cp-section-footer__inner {
  max-width: 1280px;
}
.brxe-block.cp-section-footer__top {
  display: grid !important;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  width: 100% !important;
  align-items: start !important;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--cp-border-soft);
}
.brxe-block.cp-section-footer__brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px;
  width: 100% !important;
}
.brxe-image.cp-section-footer__logo img {
  height: 28px;
  width: auto;
}
.cp-section-footer__sub-label {
  font-size: var(--cp-text-small);
  letter-spacing: 1.35px;
  color: var(--cp-text-meta);
  margin-top: 12px;
}
.brxe-block.cp-section-footer__email {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--cp-border-input);
  border-radius: var(--cp-radius-sm);
  background: #fff;
}
.cp-section-footer__email-placeholder {
  color: var(--cp-input-placeholder);
  font-size: var(--cp-text-body);
  font-family: var(--cp-font-body);
}
.cp-section-footer__email-arrow {
  color: var(--cp-text-primary);
  font-size: 18px;
}
/* Real subscribe form (Brevo newsletter) */
.cp-footer-subscribe {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 48px; padding: 0 6px 0 18px; margin-top: 12px;
  border: 1px solid var(--cp-border-input);
  border-radius: var(--cp-radius-sm);
  background: #fff;
}
.cp-footer-subscribe__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--cp-font-body); font-size: var(--cp-text-body);
  color: var(--cp-text-primary);
}
.cp-footer-subscribe__input::placeholder { color: var(--cp-input-placeholder); }
.cp-footer-subscribe__btn {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0;
  border-radius: calc(var(--cp-radius-sm) - 2px);
  background: var(--cp-orange); color: #fff; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: filter .15s;
}
.cp-footer-subscribe__btn:hover { filter: brightness(1.06); }
.cp-footer-subscribe.is-success { border-color: var(--cp-orange); }
.cp-section-footer__privacy {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  margin: 0;
  line-height: 28px;
}

.brxe-block.cp-section-footer__cols {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: 100% !important;
}
.brxe-block.cp-section-footer__col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px;
  width: 100% !important;
}
.cp-section-footer__col-label {
  font-size: var(--cp-text-small);
  letter-spacing: var(--cp-tracking-mono-sm);
  color: var(--cp-text-mono);
  margin-bottom: 8px;
}
.cp-section-footer__col-link {
  font-family: var(--cp-font-heading);
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--cp-text-headline);
  text-decoration: none;
  line-height: 26px;
  transition: color .15s;
}
.cp-section-footer__col-link:hover { color: var(--cp-orange); }

.brxe-block.cp-section-footer__bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-top: 32px;
}
.cp-section-footer__copyright {
  font-family: var(--cp-font-mono);
  font-weight: 300;
  font-size: var(--cp-text-xs);
  letter-spacing: 0.48px;
  color: var(--cp-text-mono);
}


/* ────────────── responsive (basic) ────────────── */

@media (max-width: 991px) {
  [class$="__inner"].brxe-container { padding: 0 24px; }

  .brxe-block.cp-section-platforms__head,
  .brxe-block.cp-section-services__head { grid-template-columns: 1fr; }

  .brxe-block.cp-section-platforms__cards { grid-template-columns: 1fr; }
  .brxe-block.cp-section-services__cards   { grid-template-columns: 1fr; }
  .brxe-block.cp-section-stats__cards      { grid-template-columns: 1fr; }
  .cp-section-stats__cards .cp-stat-card   { min-height: 280px !important; }

  .brxe-block.cp-section-footer__top  { grid-template-columns: 1fr; gap: 40px; }
  .brxe-block.cp-section-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .brxe-block.cp-section-footer__cols { grid-template-columns: 1fr; }
  .brxe-block.cp-section-footer__bottom { flex-direction: column !important; align-items: flex-start !important; gap: 16px; }
}