/* ============================================================
   Horizon growth-model accuracy figure (animated)
   Embedded in the Horizon Growth Model product block.
   ============================================================ */
.pblock__figwrap { grid-column: 1 / -1; margin-top: 30px; }

.gfig {
  margin: 0; padding: 26px 26px 20px;
  background: var(--hz-ink); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg); position: relative;
  cursor: pointer;
}
.gfig__cap { display: block; margin-bottom: 22px; max-width: 70ch; }
.gfig__cap-t { display: block; font-family: var(--hz-font-display); font-weight: 600; font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); }
.gfig__cap-s { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--hz-fg-on-dark-3); font-weight: 300; }

.gfig__panel { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: stretch; }
.gfig__panel--top { margin-bottom: 4px; }
.gfig__axis {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; gap: 14px; align-items: center; justify-content: center;
  font-family: var(--hz-font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hz-fg-on-dark-3); white-space: nowrap;
}
.gfig__axis .gf-day { color: #9aa7b2; }
.gfig__axis .gf-temp { color: #5fa0dd; }

.gfig__plot { position: relative; }
.gfig__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* curves */
.gf-line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.gf-line--day { stroke: #9aa7b2; stroke-width: 4; }
.gf-line--temp { stroke: #5fa0dd; stroke-width: 4.5; }
.gf-line--conv { stroke: #ffffff; stroke-width: 3; opacity: 0.92; }
.gf-line--horizon { stroke: var(--hz-hero); stroke-width: 4.5; }
.gf-area { fill: rgba(90,124,180,0.55); stroke: none; }
.gf-edge { fill: none; stroke: #9cc0ec; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0.85; stroke-linejoin: round; }
.gf-dot { fill: var(--hz-hero); stroke: var(--hz-ink); stroke-width: 2; opacity: 0; }
.gf-dot.live { filter: drop-shadow(0 0 7px rgba(206,239,67,0.6)); }
.gf-scan { stroke: rgba(206,239,67,0.5); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; }

/* max-difference marker */
.gf-gapline { stroke: var(--hz-hero); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .45s var(--hz-ease-out); }
.gf-gapcap { stroke: var(--hz-hero); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .45s var(--hz-ease-out); }
.gf-gaplead { display: none; stroke: var(--hz-hero); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .45s var(--hz-ease-out); }
.gfig.gap-in .gf-gapline, .gfig.gap-in .gf-gapcap { opacity: 0.9; }

.gfig__gap { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .45s var(--hz-ease-out), transform .45s var(--hz-ease-out); }
.gfig.gap-in .gfig__gap { opacity: 1; }
.gfig__gap-label {
  display: block; white-space: nowrap; text-align: center;
  font-family: var(--hz-font-display); font-weight: 600; font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: -0.005em; color: var(--hz-hero);
  background: rgba(12,16,20,0.72); border: 1px solid rgba(206,239,67,0.35);
  border-radius: var(--hz-r-pill); padding: 6px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* legend */
.gfig__legend {
  position: absolute; top: 6%; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  pointer-events: none;
}
.gfig__leg { font-family: var(--hz-font-display); font-weight: 600; font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 0.01em; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--hz-ease-out), transform .4s var(--hz-ease-out); }
.gfig.in .gfig__leg { opacity: 1; transform: none; }
.gfig.in .gfig__leg--horizon { transition-delay: .12s; }
.gfig.in .gfig__leg--conv { transition-delay: .24s; }
.gfig__leg--actual { color: #9cc0ec; }
.gfig__leg--horizon { color: var(--hz-hero); }
.gfig__leg--conv { color: #ffffff; }

.gfig__replay {
  position: absolute; right: 18px; bottom: 16px;
  font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--hz-fg-on-dark-3); background: transparent;
  border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-pill);
  padding: 6px 13px; cursor: pointer; opacity: 0;
  transition: opacity .3s, color var(--hz-dur-base), border-color var(--hz-dur-base);
}
.gfig.in .gfig__replay { opacity: 1; }
.gfig__replay:hover { color: var(--hz-hero); border-color: rgba(206,239,67,0.4); }

@media (max-width: 560px) {
  .gfig { padding: 18px 16px 16px; }
  .gfig__panel { grid-template-columns: 20px 1fr; gap: 8px; }
}

/* ============================================================
   Growth Model — embedded Vimeo video (same ink surface as gfig)
   ============================================================ */
.pvideo__cap { display: block; margin-bottom: 18px; max-width: 70ch; }
.pvideo__cap-t { display: block; font-family: var(--hz-font-display); font-weight: 600; font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); }
.pvideo__cap-s { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--hz-fg-on-dark-3); font-weight: 300; }
.pvideo__frame { position: relative; padding-top: 56.25%; background: var(--hz-ink); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-lg); overflow: hidden; }
.pvideo__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }