/* ==========================================================================
   HOMEPAGE HERO — "Find, Enrich, Engage"
   The white-glass version of positioning deck B, plugged into the live page.

   Self-contained and scoped to `.fee` rather than reusing positioning.css:
   those files are throwaway mockups excluded from the deploy, and coupling the
   live homepage to them would mean a mockup edit could break production. Same
   layout, same material, its own stylesheet.

   The material follows the measured recipe used everywhere else on the site —
   an almost-transparent fill with the work done by the EDGE, and an opposed
   pair of insets (cool shade top-left, specular bottom-right).
   ========================================================================== */

.fee-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 52px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── copy ───────────────────────────────────────────────────────────────── */

.fee-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 16px;
}

.fee-copy h1,
.fee-copy h2 {
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 500;
  letter-spacing: -.032em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
.fee-copy h1 em,
.fee-copy h2 em { font-style: normal; color: var(--accent); }

.fee-sub {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.fee-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.fee-points li { position: relative; padding-left: 17px; display: flex; flex-direction: column; gap: 3px; }
.fee-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(37, 99, 235, .55);
}
.fee-points b { font-size: 14.5px; font-weight: 550; color: var(--ink); }
.fee-points span { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

/* ── the product shot ───────────────────────────────────────────────────── */

.fee-shot { min-width: 0; }

/* 🔴 On a WHITE ground the ring must be the SHADE side, not the specular one.
   A white ring is the same value as the page — the surface gets no edge and
   the shot floats shapelessly. The specular is kept as a top highlight only.
   Contrast the edge against the ground, never against the fill. */
.fee-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 0 0 1px rgba(11, 18, 32, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset  12px  12px 34px rgba(203, 214, 230, .38),
    inset -14px -14px 40px rgba(255, 255, 255, .90),
    0 30px 70px -30px rgba(30, 58, 110, .40);
}

.fee-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(11, 18, 32, .06);
  background: rgba(255, 255, 255, .55);
}
.fee-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11, 18, 32, .14); }
.fee-chrome span {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-4);
}

/* The frame renders at its natural 1500px and is SCALED, not resized — a
   resized iframe reflows the app into a narrow column and stops looking like
   the product. The factor is set from JS: the pure-CSS version (dividing a
   container-query length by a number) is invalid, because scale() takes a
   unitless number and that expression yields a length. It fails silently. */
.fee-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 940;
  overflow: hidden;
}
.fee-viewport iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1500px;
  height: 940px;
  border: 0;
  transform-origin: 0 0;
  transform: scale(var(--fee-scale, 0.42));
}

.fee-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  /* solid, not translucent — a glass disc over a light product shot has nothing
     to contrast against and the triangle disappears */
  background: rgba(11, 18, 32, .72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .30),
    0 18px 44px -12px rgba(11, 18, 32, .55);
  transition: transform .32s cubic-bezier(.22,1,.36,1), background .32s cubic-bezier(.22,1,.36,1);
}
.fee-play svg { width: 27px; height: 27px; margin-left: 4px; }
.fee-play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--accent); }

/* the ring that says "video, not screenshot" — negative delay so it parks
   mid-cycle in a paused tab instead of at scale(.9) opacity 0 */
.fee-play::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, .35);
  animation: feePulse 3s ease-out -1s infinite;
}
@keyframes feePulse {
  0%   { transform: scale(.9); opacity: .85; }
  70%  { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}

.fee-cap {
  margin-top: 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

@media (prefers-reduced-motion: reduce) {
  .fee-play::after { animation: none; }
}

@media (max-width: 1040px) {
  .fee-grid { grid-template-columns: 1fr; gap: 36px; }
  .fee-sub { max-width: none; }
  .fee-copy h1,
  .fee-copy h2 { font-size: clamp(30px, 7vw, 44px); }
}

/* Centred bullet lists have a ragged left edge and the eye loses the start of
   each line, so the copy column is forced left regardless of what the host
   section sets. Declared here rather than by removing a class from the markup,
   because those classes also carry the section's own layout. */
.fee-grid { text-align: left; }
.fee-copy, .fee-points li { text-align: left; }


/* the section this now lives in — give it room, since it lost the old block's
   own vertical rhythm along with the heading */
.fee-section { padding: 96px 0; }
@media (max-width: 1040px) { .fee-section { padding: 64px 0; } }