/* Get a demo (fluid.app/home/pages/demo). After Podium's watch-demo page: the 3-minute Mist film plays
   blurred behind a short form, and submitting the form lifts the blur and plays it with sound.
   Every rule is scoped to .fdm so nothing touches the rest of fluid.app. */

@font-face { font-family: "Mist Neue"; src: url("https://ik.imagekit.io/fluid/980191006/fc-assets--fonts--NeueHaasDisplay-Roman_PTvJ0DA0KR.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mist Neue"; src: url("https://ik.imagekit.io/fluid/980191006/fc-assets--fonts--NeueHaasDisplay-Mediu_ZkHYpSbDJE.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mist Neue"; src: url("https://ik.imagekit.io/fluid/980191006/fc-assets--fonts--NeueHaasDisplay-Bold_3-RHlQdX7.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

.fdm {
  --bg: #09090b;
  --card: rgba(22, 22, 26, .84);
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .16);
  --ink: #fff;
  --ink-2: #c9c9d1;
  --ink-3: #8f8f9a;
  --check: #9aa8ff;
  --warm: #ff6a2b;
  --cool: #3d63ff;
  --field: #fff;
  --field-ink: #111114;
  --bad: #ff8a80;
  --display: "Mist Neue", "Neue Haas Grotesk Display", Helvetica, Arial, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
.fdm *, .fdm *::before, .fdm *::after { box-sizing: border-box; }
.fdm h1, .fdm h2, .fdm h3, .fdm p, .fdm ul, .fdm ol, .fdm figure, .fdm blockquote { margin: 0; padding: 0; }
.fdm a { color: inherit; }
.fdm button, .fdm input, .fdm select { font: inherit; }
.fdm [hidden] { display: none !important; }

/* The two glows in the corners, the film's orange screen and the orb's blue */
.fdm-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 46% at 0% 0%, rgba(255, 106, 43, .26), rgba(255, 106, 43, 0) 70%),
    radial-gradient(34% 52% at 100% 46%, rgba(61, 99, 255, .24), rgba(61, 99, 255, 0) 72%),
    radial-gradient(40% 40% at 8% 100%, rgba(120, 92, 255, .12), rgba(120, 92, 255, 0) 70%); }

.fdm-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(16px, 3vw, 32px); }
.fdm-logo { display: inline-flex; color: #fff; }
.fdm-logo svg { width: 76px; height: auto; display: block; }
.fdm-head-link { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.fdm-head-link:hover { color: #fff; }

/* ---------------------------------------------------------------- the stage */
.fdm-stage { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: center; padding: 92px 24px 40px; }
.fdm-scene { --w: min(1180px, 100vw - 48px); position: relative; display: grid; justify-items: center; align-items: center; width: var(--w); }
.fdm.is-playing .fdm-scene { aspect-ratio: 16 / 9; }

/* The player is laid out at its full, unlocked size and shrunk behind the card until the form is sent,
   so the unlock is one smooth scale back up to 1. */
.fdm-player { --s: .81; position: absolute; left: 50%; top: 50%; z-index: 0; width: var(--w); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000;
  transform: translate(-50%, -50%) scale(var(--s)); transform-origin: 50% 50%;
  filter: blur(13px) brightness(.62) saturate(1.25);
  box-shadow: 0 0 80px 10px rgba(61, 99, 255, .12);
  transition: transform .9s var(--ease), filter .9s var(--ease), box-shadow .9s var(--ease), border-radius .9s var(--ease); }
.fdm-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fdm-loop { background: #000 center / cover no-repeat; }
.fdm-film { opacity: 0; transition: opacity .5s ease; background: #000; }
.fdm-player.has-film .fdm-film { opacity: 1; }
.fdm-lock { position: absolute; left: 50%; z-index: 1; display: none; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; transform: translateX(-50%); border-radius: 999px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .3s ease; }
.fdm-lock i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; }
.fdm-lock svg { width: 9px; height: 9px; margin-left: 1px; }
.fdm.is-leaving .fdm-lock { opacity: 0; }
.fdm.is-playing .fdm-lock { display: none; }
.fdm-play { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px; border: 0; padding: 0; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; font-size: 15px; font-weight: 500; }
.fdm-play span:first-child { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.fdm-play svg { width: 26px; height: 26px; margin-left: 4px; }

/* ---------------------------------------------------------------- the card */
.fdm-card { position: relative; z-index: 2; width: min(800px, 100%); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 44px); align-items: center;
  padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3vw, 36px) clamp(28px, 3.6vw, 40px) clamp(28px, 3.6vw, 44px);
  border-radius: 18px; background: var(--card); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: opacity .4s ease, transform .5s var(--ease); }
.fdm-pitch { display: grid; gap: 22px; align-content: start; }
.fdm-h1 { font: 500 clamp(32px, 3.5vw, 42px)/1.06 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.fdm-checks { list-style: none; display: grid; }
.fdm-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); color: #ececf1; font-size: 15px; line-height: 1.4; }
.fdm-checks li:first-child { padding-top: 0; }
.fdm-checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.fdm-checks svg { width: 18px; height: 18px; margin-top: 1px; color: var(--check); }

/* The form: a work email first, then the rest slides open once they start typing, like Podium's */
.fdm-form { display: grid; gap: 10px; align-content: center; }
.fdm-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease), opacity .35s ease; opacity: 0; }
.fdm-more > div { overflow: hidden; display: grid; gap: 10px; min-height: 0; }
.fdm-form.is-open .fdm-more { grid-template-rows: 1fr; opacity: 1; }
.fdm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fdm-field { position: relative; display: grid; }
.fdm-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fdm-input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; background: var(--field); color: var(--field-ink); font-size: 15px; outline: none; transition: box-shadow .15s ease, border-color .15s ease; }
.fdm-input::placeholder { color: #8b8b93; }
.fdm-input:focus { box-shadow: 0 0 0 3px rgba(154, 168, 255, .55); }
.fdm-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255, 138, 128, .3); }
select.fdm-input { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat; }
select.fdm-input.is-empty { color: #8b8b93; }
.fdm-err { display: none; margin-top: 5px; font-size: 12.5px; color: var(--bad); }
.fdm-field.is-bad .fdm-err { display: block; }
.fdm-btn { position: relative; min-height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: #fff; color: #0b0b0d; font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 26px rgba(255, 166, 120, .28); transition: transform .15s ease, box-shadow .2s ease; }
.fdm-btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 34px rgba(255, 166, 120, .42); }
.fdm-btn:active { transform: translateY(1px); }
.fdm-btn:focus-visible { outline: 2px solid var(--check); outline-offset: 3px; }
.fdm-btn svg { width: 14px; height: 14px; }
.fdm-btn[disabled] { opacity: .7; cursor: default; }
.fdm-note { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 6px; }
.fdm-legal { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.fdm-legal a { color: var(--check); text-decoration: none; }
.fdm-legal a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- proof under the card */
.fdm-proof { position: relative; z-index: 2; width: min(800px, 100%); margin-top: clamp(44px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 0 4px; transition: opacity .4s ease; }
.fdm-quote { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.fdm-quote img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.fdm-quote p { font: 500 18px/1.3 var(--display); letter-spacing: -.01em; }
.fdm-quote span { display: block; margin-top: 5px; font: 400 13px/1.4 var(--body); letter-spacing: 0; color: var(--ink-3); }
.fdm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fdm-stat b { display: block; font: 500 34px/1 var(--display); letter-spacing: -.03em; }
.fdm-stat span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }

/* ---------------------------------------------------------------- unlocked */
.fdm.is-playing .fdm-player { --s: 1; filter: none; box-shadow: 0 30px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.fdm.is-leaving .fdm-card { opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; }
.fdm.is-leaving .fdm-proof { opacity: 0; pointer-events: none; }
.fdm.is-playing .fdm-card, .fdm.is-playing .fdm-proof { display: none; }
.fdm.is-playing .fdm-stage { align-content: start; padding-top: 84px; min-height: 0; }

.fdm-after { width: min(1180px, 100%); margin-top: 26px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 48px); align-items: start; opacity: 0; transform: translateY(10px); transition: opacity .6s ease .35s, transform .6s var(--ease) .35s; }
.fdm.is-playing .fdm-after { opacity: 1; transform: none; }
.fdm-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #86e3a6; }
.fdm-ok svg { width: 16px; height: 16px; }
.fdm-after h2:focus { outline: none; }
.fdm-after h2 { margin-top: 10px; font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.fdm-after p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; max-width: 46ch; }
.fdm-after p b { color: #fff; font-weight: 600; }
.fdm-share { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.fdm-share:hover { background: rgba(255, 255, 255, .08); }
.fdm-share svg { width: 15px; height: 15px; }
.fdm-chap-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.fdm-chaps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fdm-chaps button { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .035); color: #ececf1; text-align: left; font-size: 14px; line-height: 1.3; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.fdm-chaps button:hover { background: rgba(255, 255, 255, .07); }
.fdm-chaps button[aria-current="true"] { border-color: rgba(154, 168, 255, .5); background: rgba(154, 168, 255, .12); }
.fdm-chaps .t { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--check); }

.fdm-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 28px clamp(16px, 3vw, 32px) 26px; font-size: 12.5px; color: #6f6f7a; }
.fdm-foot a { color: #9a9aa5; text-decoration: none; }
.fdm-foot a:hover { color: #fff; }
.fdm.is-playing .fdm-foot { margin-top: clamp(40px, 6vw, 80px); }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1240px) { .fdm-player { --s: .88; } }
@media (max-width: 1100px) { .fdm-player { --s: .95; } }
@media (max-width: 900px) {
  .fdm-card { grid-template-columns: minmax(0, 1fr); gap: 22px; width: min(560px, 100%); }
  .fdm-proof { width: min(560px, 100%); grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 36px; }
  .fdm-player { --s: 1; }
  .fdm-after { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fdm-stage { padding: 72px 16px 28px; align-content: start; }
  .fdm-scene { --w: calc(100vw - 32px); align-items: start; }
  /* On a phone the blurred film sits above the card with a label on it, and sharpens in place once the form is sent */
  .fdm-player { --s: 1; top: 0; transform: translate(-50%, 0); border-radius: 14px; filter: blur(9px) brightness(.78) saturate(1.3); }
  .fdm-card { margin-top: calc(var(--w) * .5625 - 34px); padding: 24px 20px 22px; border-radius: 16px; gap: 20px; }
  .fdm-lock { display: inline-flex; top: calc(var(--w) * .28125 - 34px); }
  .fdm-h1 { font-size: 30px; }
  .fdm-pitch { gap: 16px; }
  .fdm-checks li { padding: 9px 0; font-size: 14.5px; }
  .fdm-stats { gap: 14px; }
  .fdm-stat b { font-size: 30px; }
  .fdm.is-playing .fdm-stage { padding-top: 68px; }
  .fdm-after { margin-top: 20px; }
  .fdm-chaps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fdm-player, .fdm-card, .fdm-proof, .fdm-after, .fdm-more, .fdm-film { transition: none; }
}