/* =========================================================================
   ENGAGEMENT TOOLS — page-specific styles
   Pixel-built from the Figma "Engagement_Tools" frame
     desktop 1925:5340  ·  mobile 1937:6002
   Every colour / size / radius below traces to a value pulled from Figma.
   Dynamic content (features, talking points, videos, icons) comes from the
   Celestial Owner's Hub gamification catalog (js/engagement-features.json).
   Lives on top of the shared tokens in variables.css / layout.css.
   ========================================================================= */

.eng-arc {
  /* exact Figma palette */
  --eng-bg: #030306;
  --eng-panel: #12141e;          /* Main Frame + middle/stage column bg */
  --eng-panel-border: #212536;   /* Main Frame 1px border               */
  --eng-rail: #0d0e17;           /* category rail card / inactive pills  */
  --eng-pill: #171a26;           /* active pill + media card bg          */
  --eng-ink: #ffffff;
  --eng-ink-70: rgba(255, 255, 255, 0.70);
  --eng-muted: #a0a0a0;
  --eng-grad-from: #5aa4fc;
  --eng-grad-to: #8081fb;
}

/* flat near-black arc (theme-dark would otherwise paint a diagonal wash) */
.story-arc.eng-arc { background-image: none; background-color: var(--eng-bg); }
.eng-arc section { background: transparent; background-image: none; border-top: 0; padding: 0; }

/* gradient text label used by the headline, eyebrow and "Helps with:" */
.eng-grad,
.eng-grad-label {
  background-image: linear-gradient(90deg, var(--eng-grad-from) 0%, var(--eng-grad-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================================
   1 — HERO  (full-bleed cinematic, headline overlaid left)
   ========================================================================= */
.eng-hero {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 39.9vw, 688px);   /* Figma 1725 x 688 ratio */
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #060509;                         /* Figma frame fill */
}
.eng-hero__media { position: absolute; inset: 0; z-index: 0; }
.eng-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% center;                 /* keep the subject in frame */
}
.eng-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 5, 9, 0.94) 0%, rgba(6, 5, 9, 0.78) 30%, rgba(6, 5, 9, 0.30) 60%, rgba(6, 5, 9, 0.04) 100%),
    linear-gradient(180deg, rgba(6, 5, 9, 0.35) 0%, rgba(6, 5, 9, 0) 22%, rgba(6, 5, 9, 0) 72%, var(--eng-bg) 100%);
}
.eng-hero__inner { position: relative; z-index: 2; width: 100%; }
.eng-hero__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 900;                            /* Satoshi Black */
  font-size: clamp(2.6rem, 4.6vw, 4.5rem);     /* Figma 72px */
  line-height: 1.2;                            /* Figma 88/72 ≈ 1.22 — full so descenders aren't clipped */
  letter-spacing: -0.02em;
  /* background-clip:text only paints the padding box, so give the last line's
     descenders (g, y) room to be filled by the gradient */
  padding-bottom: 0.12em;
}
.eng-hero__line { display: block; }

/* =========================================================================
   2 — EXPLORE  (section header)
   ========================================================================= */
.eng-explore {
  padding-top: clamp(2.75rem, 5vw, 5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 7.5rem) !important;
}
.eng-section-head { max-width: 900px; margin: 0 0 clamp(1.75rem, 3vw, 2.75rem); }
.eng-section-head__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;                            /* Figma Satoshi Medium */
  font-size: clamp(1.65rem, 2.6vw, 2rem);      /* Figma 32px */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--eng-ink);
}
.eng-section-head__sub {
  margin: var(--space-md) 0 0;
  max-width: 70ch;
  font-size: 1rem;                             /* Figma 16px */
  line-height: 1.45;
  color: var(--eng-ink-70);
  font-weight: 400;
}

/* =========================================================================
   3 — FEATURE BROWSER
   ========================================================================= */
.eng-browser {
  display: flex;
  align-items: stretch;
  background: var(--eng-panel);
  border: 1px solid var(--eng-panel-border);
  border-radius: 32px;
  overflow: hidden;
}
/* content area holds all feature panels (SSR); only the active one shows */
.eng-browser__content { flex: 1 1 auto; min-width: 0; display: flex; }
.eng-feature { display: none; flex: 1 1 auto; min-width: 0; }
.eng-feature.is-active { display: flex; align-items: stretch; }

/* ---- column 1: category rail (a darker inset card) ---- */
.eng-browser__rail {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 12px 64px;
  background: var(--eng-rail);
  border: 4px solid var(--eng-panel);          /* panel-coloured → reads as a 4px inset */
  border-radius: 32px;
  min-width: 0;
}

/* rail wrapper — holds the scroll arrows that appear when the rail scrolls horizontally */
.eng-browser__railwrap {
  position: relative;
  flex: 0 0 311px;
  box-sizing: border-box;
  display: flex;
  min-width: 0;
}

/* scroll arrows (only shown when the rail overflows horizontally — see JS) */
.eng-rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px; height: 40px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 18, 27, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: background var(--transition-base), transform var(--transition-fast), opacity var(--transition-base);
}
.eng-rail-arrow svg { width: 20px; height: 20px; display: block; }
.eng-rail-arrow:hover { background: rgba(30, 33, 46, 0.95); }
.eng-rail-arrow:active { transform: translateY(-50%) scale(0.92); }
.eng-rail-arrow--prev { left: 10px; }
.eng-rail-arrow--next { right: 10px; }
.eng-browser__railwrap.can-prev .eng-rail-arrow--prev { display: flex; }
.eng-browser__railwrap.can-next .eng-rail-arrow--next { display: flex; }

/* edge fades under the arrows — match the rail card colour fading to transparent */
.eng-browser__railwrap::before,
.eng-browser__railwrap::after {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px;
  width: 72px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.eng-browser__railwrap::before { left: 4px; border-radius: 28px 0 0 28px; background: linear-gradient(90deg, var(--eng-rail) 30%, rgba(13, 14, 23, 0) 100%); }
.eng-browser__railwrap::after { right: 4px; border-radius: 0 28px 28px 0; background: linear-gradient(270deg, var(--eng-rail) 30%, rgba(13, 14, 23, 0) 100%); }
.eng-browser__railwrap.can-prev::before { opacity: 1; }
.eng-browser__railwrap.can-next::after { opacity: 1; }

.eng-cat {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 12px 24px;
  border: 0;
  border-radius: 100px;                          /* inactive = pill */
  background: transparent;                        /* sits on the rail card */
  color: var(--eng-muted);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  transition: background var(--transition-base), color var(--transition-base), border-radius var(--transition-base);
}
.eng-cat:hover { background: rgba(255, 255, 255, 0.04); color: #cfcfd8; }
.eng-cat:focus-visible { outline: 2px solid var(--eng-grad-from); outline-offset: 2px; }
.eng-cat.is-active {
  background: var(--eng-pill);
  border-radius: 24px;                            /* active = softer corner */
  color: var(--eng-ink);
}
.eng-cat__icon {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  overflow: hidden;
}
.eng-cat__icon img { width: 34px; height: 34px; object-fit: contain; display: block; }
.eng-cat__label {
  flex: 1 1 auto; min-width: 0;
  font-size: 1.375rem;                            /* Figma 22px */
  line-height: 32px;
  font-weight: 500;                               /* inactive Medium */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eng-cat.is-active .eng-cat__label { font-weight: 700; }   /* active Bold */
.eng-cat__chev { display: none; }                  /* not present in the Figma rail */

/* ---- column 2: overview + talking points ---- */
.eng-browser__detail {
  flex: 0 0 362px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 24px 32px;
  min-width: 0;
}
.eng-overview { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.eng-overview__eyebrow {
  font-size: 1.125rem;                            /* Figma 18px */
  font-weight: 700;
  line-height: 1.2;
}
.eng-overview__body { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.eng-overview__title {
  margin: 0;
  font-size: 2rem;                               /* Figma 32px */
  font-weight: 900;                              /* Satoshi Black */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--eng-ink);
}
.eng-overview__desc {
  margin: 0;
  font-size: 1.125rem;                           /* Figma 18px */
  line-height: 24px;
  font-weight: 500;
  color: var(--eng-ink-70);
  transition: opacity var(--transition-base);
}
.eng-overview__desc.is-fading { opacity: 0; }
.eng-overview__desc a { color: var(--eng-grad-from); text-decoration: underline; text-underline-offset: 2px; }
.eng-overview__desc a:hover { text-decoration: none; }

.eng-points { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; width: 100%; }
.eng-points__title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.eng-points__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; width: 100%; }
.eng-point-item { margin: 0; width: 100%; }

.eng-point {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--eng-ink-70);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  border-radius: 10px;
  transition: color var(--transition-base);
}
.eng-point:hover { color: #e7e7ef; }
.eng-point:focus-visible { outline: 2px solid var(--eng-grad-from); outline-offset: 4px; }
.eng-point-item.is-active .eng-point { color: var(--eng-ink); }
.eng-point__icon { flex: none; width: 24px; height: 24px; color: var(--eng-muted); transition: color var(--transition-base); }
.eng-point-item.is-active .eng-point__icon { color: var(--eng-grad-from); }
/* Per-highlight plan-tier pill. Baked into the markup for every panel but only
   meaningful in the pricing feature modal, so it's hidden by default here and
   revealed (+ styled) by feature-modal.css inside .feat-modal__body. */
.eng-point__tier { display: none; }
.eng-point__text {
  flex: 1 1 auto; min-width: 0;
  font-size: 1.125rem;                           /* Figma 18px */
  line-height: 24px;
  font-weight: 500;
}

/* ---- column 3: media stage ---- */
.eng-browser__stage { flex: 1 1 auto; box-sizing: border-box; padding: 32px; min-width: 0; display: flex; }
.eng-stage { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.eng-stage__inner {
  position: relative;
  /* Fill the stage width, with ONE fixed height for every feature (the height
     also pins the row so the box is identical across features). The square clip
     is centred inside by the video's `object-fit: contain`; the surrounding fill
     is the box itself (same for the poster / ows-media fallback, which letterbox). */
  width: 100%;
  height: clamp(340px, 40vw, 540px);
  min-height: 0;
  margin: 0 auto;
  border-radius: 32px;
  overflow: hidden;
  background: var(--eng-pill);
  isolation: isolate;
}
.eng-stage__inner { transition: opacity 380ms ease, transform 380ms ease; }
.eng-stage__inner.is-enter { opacity: 0; transform: scale(0.99); }

/* The video is sized to its own painted square (centred in the box) rather than
   stretched over it, so the feather mask below tracks the REAL content edges at
   any box shape. A subtle alpha feather on all four edges lets glows, particles
   and characters that run to the frame edge fade into the box instead of hard-
   cutting. aspect-ratio keeps the box square before metadata loads (all masters
   are 1:1); object-fit contains the odd non-square fallback without distortion. */
.eng-stage__video {
  position: absolute;
  inset: 0;
  margin: auto;                         /* centre the painted square in the box */
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  background: #000;
  --eng-feather: clamp(16px, 4.5%, 30px);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--eng-feather), #000 calc(100% - var(--eng-feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--eng-feather), #000 calc(100% - var(--eng-feather)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--eng-feather), #000 calc(100% - var(--eng-feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--eng-feather), #000 calc(100% - var(--eng-feather)), transparent);
  mask-composite: intersect;
}
.eng-stage__inner:has(.eng-stage__video) { background: #000; }

/* branded poster fallback when a feature has no talking-point video */
.eng-stage__poster {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(82% 82% at 50% 40%, color-mix(in srgb, var(--eng-accent, #5a72ff) 26%, transparent) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #14172180 0%, var(--eng-pill) 100%);
}
.eng-stage__glow {
  position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--eng-accent, #5a72ff) 42%, transparent) 0%, transparent 70%);
  filter: blur(46px);
  animation: eng-breathe 6s ease-in-out infinite;
}
@keyframes eng-breathe { 0%, 100% { transform: scale(0.9); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
.eng-stage__posterIcon {
  position: relative;
  width: clamp(110px, 13vw, 176px); height: clamp(110px, 13vw, 176px);
  object-fit: contain;
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.55));
}
.eng-stage__posterCap {
  position: absolute; bottom: 36px; left: 0; right: 0;
  text-align: center; font-size: 1.25rem; font-weight: 700; color: var(--eng-ink);
  letter-spacing: -0.01em;
}

.eng-stage__badge {
  position: absolute; z-index: 3; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  background: rgba(8, 9, 14, 0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem; font-weight: 600; color: #fff;
  max-width: calc(100% - 40px);
}
.eng-stage__badge .eng-stage__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2bd17e; flex: none;
  animation: eng-pulse 2s infinite;
}
@keyframes eng-pulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 209, 126, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(43, 209, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 209, 126, 0); }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* laptop — proportionally tighten the rail + detail columns */
@media (max-width: 1300px) {
  .eng-browser__rail { flex-basis: 280px; }
  .eng-feature .eng-browser__detail { flex-basis: 330px; }
  .eng-cat__label { font-size: 1.2rem; }
  .eng-overview__title { font-size: 1.75rem; }
  .eng-overview__eyebrow, .eng-overview__desc, .eng-points__title, .eng-point__text { font-size: 1.0625rem; }
}
@media (max-width: 1100px) {
  .eng-browser__rail { flex-basis: 248px; }
  .eng-feature .eng-browser__detail { flex-basis: 300px; gap: 36px; padding: 20px 22px; }
  .eng-cat { gap: 16px; padding: 10px 16px; }
  .eng-cat__label { font-size: 1.1rem; }
  .eng-overview__desc, .eng-point__text { font-size: 1rem; line-height: 1.5; }
}

/* tablet — rail becomes a horizontal scroller above a two-up detail/stage */
@media (max-width: 940px) {
  .eng-browser { flex-direction: column; }
  .eng-browser__railwrap { flex: 0 0 auto; width: 100%; }
  .eng-browser__rail {
    flex: 1 1 auto;
    flex-direction: row;
    gap: 12px;
    padding: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .eng-browser__rail::-webkit-scrollbar { display: none; }
  .eng-cat { width: auto; flex: 0 0 auto; padding: 8px 18px 8px 12px; gap: 12px; border-radius: 100px; }
  .eng-cat.is-active { border-radius: 24px; }
  .eng-cat__icon { width: 42px; height: 42px; }
  .eng-cat__label { font-size: 1rem; line-height: 20px; }
  .eng-feature .eng-browser__detail { flex-basis: 300px; }
  .eng-browser__stage { padding: 24px; }
  /* the base rule's fixed square box governs the media here too */
}

/* mobile — single column: rail · overview-text · media · talking points
   (matches mobile frame 1937:6002) */
@media (max-width: 720px) {
  .eng-browser { border-radius: 24px; }
  .eng-browser__rail { padding: 12px; }
  .eng-cat__icon img { width: 30px; height: 30px; }

  .eng-feature.is-active { flex-direction: column; }
  /* promote overview + points out of the detail wrapper so flex order works */
  .eng-feature .eng-browser__detail { display: contents; }
  .eng-overview { order: 1; padding: 16px 16px 4px; gap: 12px; }
  .eng-overview__eyebrow { font-size: 1rem; }
  .eng-overview__title { font-size: 1.5rem; }       /* Figma mobile 24px */
  .eng-overview__desc { font-size: 0.95rem; line-height: 1.5; }
  .eng-browser__stage { order: 2; padding: 0 16px; flex: 0 0 auto; }
  .eng-points { order: 3; padding: 16px 16px 24px; gap: 12px; }
  .eng-points__title { font-size: 1rem; }
  .eng-points__list { gap: 12px; }
  .eng-point__text { font-size: 0.875rem; line-height: 1.5; }

  /* single column has no stretched row height to fill, so give the box a shape:
     a full-width square (the square clip fills it edge-to-edge). */
  .eng-stage__inner { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 22px; }
  .eng-stage__badge { left: 14px; bottom: 14px; padding: 7px 12px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .eng-hero__inner { text-align: center; }
  .eng-hero__title { font-size: clamp(2rem, 9.2vw, 2.7rem); text-align: center; }   /* Figma mobile 42px */
  .eng-hero__scrim {
    background: linear-gradient(180deg, rgba(6, 5, 9, 0.5) 0%, rgba(6, 5, 9, 0.25) 38%, rgba(6, 5, 9, 0.62) 76%, var(--eng-bg) 100%);
  }
  .eng-hero__media img { object-position: 62% center; }
}

@media (prefers-reduced-motion: reduce) {
  .eng-stage__glow, .eng-stage__badge .eng-stage__dot { animation: none; }
  .eng-stage__inner, .eng-overview__desc { transition: none; }
}