/* FaxDirect Video Hero — all selectors are prefixed (fdh-) and tokens are scoped to the section,
   so nothing here leaks into the theme and theme styles cannot easily leak in. */

.fdh-hero {
  --fdh-navy: #011C54; --fdh-ink: #08172B; --fdh-accent: #005FFC; --fdh-accent-ink: #0047C7; --fdh-accent-hi: #4D8FFF;
  --fdh-success: #00A97F; --fdh-success-ink: #00795A; --fdh-amber: #F59E0B; --fdh-maple: #D52B1E;
  --fdh-night: #071A33; --fdh-on-night: #EAF2FC; --fdh-on-night-muted: #B7C9DF;
  --fdh-receipt: #FFFBF2; --fdh-receipt-ink: #3B3A32; --fdh-receipt-line: #E8E0CC; --fdh-receipt-muted: #8A8677;
  --fdh-display: 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fdh-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fdh-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fdh-gutter: clamp(1.125rem, 4vw, 2.5rem); --fdh-container: 1200px;
  --fdh-fast: 160ms; --fdh-dur: 320ms; --fdh-slow: 700ms; --fdh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fdh-offset: 0px;   /* header height above the hero; set from Settings or measured by hero.js */
  --fdh-vw: 100vw;     /* viewport width without scrollbar; set by hero.js */

  position: relative; isolation: isolate; overflow: clip; box-sizing: border-box;
  display: grid; margin: 0; padding: 0;
  min-height: calc(100vh - var(--fdh-offset));
  min-height: calc(100svh - var(--fdh-offset));
  background: var(--fdh-night); color: var(--fdh-on-night);
  font-family: var(--fdh-sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Break out of a centred content column to the full viewport width. */
.fdh-hero--bleed { width: var(--fdh-vw); margin-left: calc(50% - var(--fdh-vw) / 2); margin-right: calc(50% - var(--fdh-vw) / 2); }
.fdh-hero *, .fdh-hero *::before, .fdh-hero *::after { box-sizing: border-box; }
.fdh-hero img, .fdh-hero svg, .fdh-hero video { display: block; max-width: 100%; border: 0; }
.fdh-hero a { color: inherit; text-decoration: none; box-shadow: none; }
.fdh-hero p, .fdh-hero dl, .fdh-hero dd, .fdh-hero ul { margin: 0; padding: 0; }
.fdh-hero ul { list-style: none; }
.fdh-hero button { font: inherit; color: inherit; margin: 0; }
.fdh-hero :focus-visible { outline: 3px solid var(--fdh-accent-hi); outline-offset: 3px; border-radius: 4px; }
.fdh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fdh-after { display: block; height: 0; }

/* ---------- Media ---------- */
.fdh-media { position: absolute; inset: 0; z-index: -1; background: var(--fdh-night); }
.fdh-poster, .fdh-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 42%; margin: 0; }
.fdh-video { opacity: 0; transition: opacity var(--fdh-slow) ease; }
.fdh-video.is-live { opacity: 1; }
/* Scrim: heavy on the copy side, clear over the monitor; soft bands top and bottom. */
.fdh-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1,28,84,0.90) 0%, rgba(1,28,84,0.84) 26%, rgba(1,28,84,0.52) 44%, rgba(1,28,84,0.14) 58%, rgba(1,28,84,0) 70%),
    linear-gradient(180deg, rgba(1,28,84,0.28) 0%, rgba(1,28,84,0) 20%, rgba(1,28,84,0) 72%, rgba(1,28,84,0.62) 100%); }

/* ---------- Copy ---------- */
.fdh-inner { position: relative; display: grid; align-content: center; min-height: inherit; width: min(var(--fdh-container), 100% - 2 * var(--fdh-gutter)); margin-inline: auto; padding: 3rem 0 6.5rem; }
.fdh-copy { max-width: 600px; }
.fdh-badge { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.4rem; padding: 0.35rem 0.9rem 0.35rem 0.4rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; }
.fdh-badge__flag { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.fdh-badge__flag svg { width: 14px; height: 14px; color: var(--fdh-maple); }
.fdh-hero .fdh-title { margin: 0; padding: 0; font-family: var(--fdh-display); font-size: clamp(2.5rem, 3.8vw + 0.6rem, 3.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.028em; color: #fff; text-wrap: balance; text-shadow: 0 2px 24px rgba(1,28,84,0.35); text-transform: none; }
.fdh-hero .fdh-title em { font-style: normal; color: var(--fdh-accent-hi); }
.fdh-hero .fdh-lead { margin-top: 1.25rem; font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem); line-height: 1.55; color: var(--fdh-on-night-muted); max-width: 52ch; text-wrap: pretty; }
.fdh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 2rem; }
.fdh-hero .fdh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 56px; padding: 0.9rem 1.75rem; border: 1.5px solid transparent; border-radius: 999px; font-family: var(--fdh-sans); font-weight: 600; font-size: 1.05rem; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; text-transform: none; letter-spacing: 0;
  transition: transform var(--fdh-fast) var(--fdh-ease), box-shadow var(--fdh-dur) var(--fdh-ease), background var(--fdh-fast), border-color var(--fdh-fast), color var(--fdh-fast); -webkit-tap-highlight-color: transparent; }
.fdh-hero .fdh-btn:hover { transform: translateY(-1px); text-decoration: none; }
.fdh-hero .fdh-btn:active { transform: translateY(0) scale(0.985); transition-duration: 60ms; }
.fdh-hero .fdh-btn--primary { background: var(--fdh-accent); border-color: var(--fdh-accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 71, 199, 0.35); }
.fdh-hero .fdh-btn--primary:hover { background: var(--fdh-accent-hi); border-color: var(--fdh-accent-hi); color: #fff; box-shadow: 0 8px 24px rgba(0, 95, 252, 0.32); }
.fdh-hero .fdh-btn--ghost { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.42); color: var(--fdh-on-night); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fdh-hero .fdh-btn--ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.8); color: #fff; }
.fdh-fine { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--fdh-on-night-muted); font-size: 0.875rem; }
.fdh-fine li { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0; }
.fdh-fine svg { width: 16px; height: 16px; color: var(--fdh-success); }

/* Entrance: rests fully visible; only the first 700 ms lift in. */
@keyframes fdh-rise { from { opacity: 0; transform: translateY(14px); } }
.fdh-copy > * { animation: fdh-rise 640ms var(--fdh-ease) backwards; }
.fdh-copy > :nth-child(2) { animation-delay: 80ms; }
.fdh-copy > :nth-child(3) { animation-delay: 160ms; }
.fdh-copy > :nth-child(4) { animation-delay: 240ms; }
.fdh-copy > :nth-child(5) { animation-delay: 320ms; }

/* ---------- Delivery receipt (follows the clip: queued → sending → delivered) ---------- */
.fdh-rcpt { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 5.25rem; z-index: 2; width: 264px; margin: 0; padding: 0.9rem 1rem 1.2rem; display: none;
  background: var(--fdh-receipt); color: var(--fdh-receipt-ink); font-family: var(--fdh-mono); font-size: 0.74rem; line-height: 1.5; border-radius: 4px 4px 0 0; box-shadow: 0 24px 60px rgba(8, 23, 43, 0.28);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 95% 100%, 90% calc(100% - 7px), 85% 100%, 80% calc(100% - 7px), 75% 100%, 70% calc(100% - 7px), 65% 100%, 60% calc(100% - 7px), 55% 100%, 50% calc(100% - 7px), 45% 100%, 40% calc(100% - 7px), 35% 100%, 30% calc(100% - 7px), 25% 100%, 20% calc(100% - 7px), 15% 100%, 10% calc(100% - 7px), 5% 100%, 0 calc(100% - 7px));
  animation: fdh-rise 640ms var(--fdh-ease) 420ms backwards; }
.fdh-rcpt__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.45rem; margin-bottom: 0.5rem; border-bottom: 1px dashed var(--fdh-receipt-line); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; color: var(--fdh-receipt-muted); }
.fdh-rcpt__head svg { width: 14px; height: 14px; color: var(--fdh-accent-ink); }
.fdh-rcpt dl { display: grid; grid-template-columns: auto 1fr; gap: 0.12rem 0.8rem; }
.fdh-rcpt dt { color: var(--fdh-receipt-muted); font-weight: 500; }
.fdh-rcpt dd { font-variant-numeric: tabular-nums; }
.fdh-rcpt__status { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; transition: color var(--fdh-dur); }
.fdh-rcpt__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fdh-amber); transition: background var(--fdh-dur); }
.fdh-rcpt[data-state="sending"] .fdh-rcpt__status { color: var(--fdh-accent-ink); }
.fdh-rcpt[data-state="sending"] .fdh-rcpt__dot { background: var(--fdh-accent); animation: fdh-pulse 1.1s ease-in-out infinite; }
.fdh-rcpt[data-state="delivered"] .fdh-rcpt__status { color: var(--fdh-success-ink); }
.fdh-rcpt[data-state="delivered"] .fdh-rcpt__dot { background: var(--fdh-success); }
.fdh-rcpt__time { color: var(--fdh-receipt-muted); }
.fdh-rcpt__foot { margin-top: 0.55rem; padding-top: 0.45rem; border-top: 1px dashed var(--fdh-receipt-line); color: var(--fdh-receipt-muted); font-size: 0.66rem; }
.fdh-rcpt[data-state="delivered"] .fdh-rcpt__foot { color: var(--fdh-success-ink); }
@keyframes fdh-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.55; } }
@media (min-width: 1024px) and (min-height: 600px) { .fdh-rcpt { display: block; } }

/* ---------- Controls ---------- */
.fdh-hero .fdh-ctrl { position: absolute; left: var(--fdh-gutter); bottom: 1.5rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.4rem 0.9rem 0.4rem 0.55rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; background: rgba(1,28,84,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 0.8125rem; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; text-transform: none; transition: background var(--fdh-fast), border-color var(--fdh-fast); }
.fdh-hero .fdh-ctrl:hover { background: rgba(1,28,84,0.7); border-color: rgba(255,255,255,0.6); color: #fff; }
.fdh-ctrl svg { width: 16px; height: 16px; }
.fdh-ctrl .fdh-ctrl__pause, .fdh-ctrl[data-playing="false"] .fdh-ctrl__play { display: block; }
.fdh-ctrl .fdh-ctrl__play, .fdh-ctrl[data-playing="false"] .fdh-ctrl__pause { display: none; }
.fdh-hero .fdh-scroll { position: absolute; left: 50%; bottom: 1.5rem; z-index: 2; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; color: rgba(255,255,255,0.8); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fdh-scroll svg { width: 18px; height: 18px; animation: fdh-nudge 1.8s ease-in-out infinite; }
@keyframes fdh-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Small screens: copy at the bottom, vertical scrim, monitor kept in frame ---------- */
@media (max-width: 899px) {
  .fdh-poster, .fdh-video { object-position: 64% 38%; }
  .fdh-scrim { background: linear-gradient(180deg, rgba(1,28,84,0.35) 0%, rgba(1,28,84,0.05) 22%, rgba(1,28,84,0.15) 42%, rgba(1,28,84,0.88) 66%, rgba(1,28,84,0.94) 100%); }
  .fdh-inner { align-content: end; padding: 2rem 0 6rem; }
  .fdh-hero .fdh-title { font-size: clamp(2.1rem, 8.5vw, 3rem); }
  .fdh-hero .fdh-lead { max-width: 40ch; }
  .fdh-fine li:nth-child(3) { display: none; }
  .fdh-hero .fdh-scroll { display: none; }
  .fdh-hero .fdh-btn { min-height: 52px; padding: 0.8rem 1.4rem; font-size: 1rem; }
}
@media (max-width: 520px) {
  .fdh-actions .fdh-btn { flex: 1 1 auto; }
  .fdh-badge { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fdh-copy > *, .fdh-rcpt, .fdh-scroll svg, .fdh-rcpt__dot { animation: none; }
  .fdh-video { transition: none; }
}