/**
 * EyeQ® Demo — /eyeq-demo
 *
 * Single-purpose landing page for the product demo video.
 * Structure: hero → video → three points → CTA card.
 *
 * NOTE: the --cp-* tokens are not defined anywhere in this theme (they are
 * used with fallbacks throughout). Every var() below carries a fallback for
 * that reason — do not strip them.
 */

/* ---------------------------------------------------------------- Hero -- */
/* Brand-blue band (--cp-navy, per /style-guide) carrying the dot-grid
   utility from the recipe library. Dot tuning mirrors .cp-about-hero, which
   solves the same problem — pale dots on a dark ground.
   The video lives INSIDE the hero and overhangs its bottom edge, so it
   straddles the blue band and the white points section below. */

.brxe-section.cp-demo-hero {
  background: var(--cp-navy, #28354A);
  color: var(--cp-about-on-dark, #F4F1EB);
  padding: clamp(96px, 14vw, 150px) clamp(20px, 5vw, 64px) 0;
  text-align: center;
  overflow: visible;          /* the video must be free to hang out */
}
/* Pale dots on the dark ground — same treatment as .cp-about-hero. */
.brxe-section.cp-demo-hero {
  --cp-r-dot-color:   rgba(244, 241, 235, 0.55);
  --cp-r-dot-size:    24px;
  --cp-r-dot-opacity: 0.5;
}
.brxe-container.cp-demo-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px;
}
.cp-demo-hero__eyebrow {
  color: var(--cp-about-on-dark-muted, rgba(244, 241, 235, .6)) !important;
  letter-spacing: .14em;
}
.cp-demo-hero__title {
  font-family: var(--cp-font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cp-about-on-dark, #F4F1EB);
  margin: 0;
}
.cp-demo-hero__body {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--cp-about-on-dark-muted, rgba(244, 241, 235, .6));
  margin: 0;
  max-width: 620px;
}
/* Runtime under the intro copy — sets the expectation before they press play. */
.cp-demo-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cp-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cp-about-on-dark-muted, rgba(244, 241, 235, .6));
}
.cp-demo-hero__meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cp-orange, #EA8B3F);
}

/* --------------------------------------------------------------- Video -- */
/* Overhang is shared with .cp-demo-points padding-top via --cp-demo-overhang
   so the two can never drift apart. */

.brxe-container.cp-demo-hero__video {
  --cp-demo-overhang: clamp(100px, 14vw, 200px);
  /* Explicit stacking so the overhang always paints over the section below,
     even if .cp-demo-points later gains position/background of its own. */
  position: relative;
  z-index: 2;
  max-width: 1040px;
  width: 100%;
  margin: clamp(40px, 6vw, 64px) auto calc(-1 * var(--cp-demo-overhang));
}
/* 16:9 shell. padding-top rather than aspect-ratio so older Safari holds the
   box before the iframe paints. */
.cp-demo-hero__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--cp-radius-2xl, 20px);
  overflow: hidden;
  background: #000;
  /* Light ring reads against the navy; the drop shadow does the lifting
     over the white band underneath. */
  border: 1px solid rgba(244, 241, 235, .14);
  box-shadow:
    0 2px 6px rgba(15, 18, 23, .18),
    0 32px 64px -20px rgba(15, 18, 23, .55);
}
.cp-demo-hero__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -------------------------------------------------------------- Points -- */
/* Section head follows the .cp-eyeq-features__head pattern (left-aligned,
   orange eyebrow, serif title, blurb). The grid itself is the shared
   `cp-r-bento` recipe from clever-prep-recipes.css — cells, hover lift and
   staggered reveal all come from the library, so nothing is restyled here
   beyond neutralising the recipe's own padding (the section supplies it). */

.brxe-section.cp-demo-points {
  background: #fff;
  /* Top padding clears the video overhanging from the hero above. */
  padding: calc(clamp(80px, 10vh, 140px) + clamp(100px, 14vw, 200px)) clamp(20px, 5vw, 64px) clamp(80px, 10vh, 140px);
}
.brxe-container.cp-demo-points__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 48px;
}
.brxe-block.cp-demo-points__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px;
  width: 100% !important;
  max-width: 720px;
}
.cp-demo-points__eyebrow {
  color: var(--cp-orange, #EA8B3F);
  letter-spacing: .14em;
}
.cp-demo-points__title {
  font-family: var(--cp-font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--cp-text-headline, #28354A);
  margin: 0;
  max-width: 18ch;
}
.cp-demo-points__blurb {
  font-family: var(--cp-font-body, system-ui, sans-serif);
  font-weight: 300;
  font-size: var(--cp-text-body-lg, 18px);
  line-height: var(--cp-leading-body, 1.6);
  color: var(--cp-text-secondary, #555);
  margin: 0;
}
/* The section already pads; the recipe would otherwise double it. */
.cp-demo-points .cp-r-bento { padding: 0; }

/* ----------------------------------------------------------------- CTA -- */

.brxe-section.cp-demo-cta {
  padding: clamp(60px, 8vh, 100px) clamp(20px, 5vw, 64px) clamp(80px, 12vh, 140px);
  background: var(--cp-cream-bg, #F7F4ED);
}
.brxe-container.cp-demo-cta__inner {
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
}
.brxe-block.cp-demo-cta__card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 18px;
  width: 100% !important;
  padding: clamp(60px, 9vh, 96px) 32px !important;
  border-radius: var(--cp-radius-2xl, 20px);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(237, 134, 60, .15) 0%, rgba(237, 134, 60, 0) 60%),
    var(--cp-text-headline, #28354A);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cp-demo-cta__eyebrow { color: rgba(255, 255, 255, .6) !important; }
.cp-demo-cta__title {
  font-family: var(--cp-font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  max-width: 640px;
}
.cp-demo-cta__body {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .75);
  margin: 0;
  max-width: 520px;
}
.brxe-block.cp-demo-cta__ctas {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  gap: 12px;
  margin-top: 8px;
}
/* Inverted pair against the navy card. */
.cp-demo-cta__ctas .cp-btn--primary {
  background: var(--cp-orange, #EA8B3F) !important;
  border-color: var(--cp-orange, #EA8B3F) !important;
  color: #fff !important;
}
.cp-demo-cta__ctas .cp-btn--ghost {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .3) !important;
  color: #fff !important;
}
.cp-demo-cta__ctas .cp-btn--ghost:hover {
  border-color: rgba(255, 255, 255, .6) !important;
}